<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Default theme - jQuery Mobile Demos</title>
<script>
function opennav() {
alert("nav is open");
}
var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var mysql = require('mysql');
var path = require('path');
var cors = require('cors');
var jwt = require('jsonwebtoken');
var adminController = require('./controllers/AdminController');
var app = express();
app.use(bodyParser.json());
app.use(cors());
var allowCrossDomain = function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.setHeader('Access-Control-Allow-Origin', "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Credentials", "true");
next();
}
app.use(allowCrossDomain);
var logger = function (req, resp, next) {
console.log('Logging information');
next();
}
app.use(logger);
app.use(express.static(path.join(__dirname, 'public')));
/**
* This will increase upload file upto 5TB
*/
var Storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, "./public/images/");
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({
storage: Storage
}).array("file", 1); //Field name and max count
app.post("/api/upload", function(req, res) {
upload(req, res, function(err) {
if (err) {
return res.end("Something went wrong!");
}
return res.end("File uploaded sucessfully!.");
});
});
/**
* Using admin controller for access admin action's
*/
adminController(app);
var connection = mysql.createPool({
connectionLimit: 100,
host: 'localhost',
user: 'root',
password: '',
database: 'mysql'
});
app.get('/', function (req, res) {
res.send('API working fine!');
});
app.get('/getusers', function (req, res) {
connection.getConnection(function (error, tempCon) {
if (!!error) {
tempCon.release();
console.log('Error occured');
} else {
console.log('Connected');
tempCon.query('select * from user', function (error, rows, fields) {
if (!!error) {
console.log('Error in querying data from database');
res.send('Error occured');
} else {
console.log('Data retrieved successfully');
res.json(rows);
}
});
}
});
});
app.listen(1000);
</script>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
a{color: #3498DB}
ul#menu{
border-bottom:1px solid #ccc;
background: #f9f9f9;
text-align: center;
white-space:nowrap;
overflow-x:auto;
}
ul#menu li{
display:inline-block;
border-right: 1px dotted #eee;
border-bottom: 2px solid transparent;
margin: 0;
padding: 0;
margin-right: -4px;
}
ul#menu li:last-child{
border-right: none;
}
ul#menu li a{
display:block;
line-height:50px;
padding:0px 16px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul#menu li:hover{
border-bottom-color: #6666ff;
}
#header{height:60px;border-bottom:1px solid #ccc;display: block;width:100%;position:fixed;top:0;background:#fff;}
#footer{height:60px;border-top:1px solid #ccc;display: block;width:100%;position:fixed;bottom:0;background:#fff;}
#body{height: 100%;overflow-y:auto;padding:60px 0;}
.left{width:65%;height:100%;position:relative;}
.right{width:35%;height:100%;position:fixed;top:0;right:0;height:100%;border-left:1px solid #ccc;background:#fff;overflow-y:auto;}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.right a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.right a:hover, .right a:focus {
color: #f1f1f1;
}
.right .closebtn {
position: absolute;
display: none;
top: 20px;
right: 45px;
font-size: 60px;
}
.sidebutton{
display: none;
}
@media only screen and (max-width: 750px) {
.right{width:0;}
.left{width:100%;}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.right {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0s;
}
.right a {font-size: 20px}
.right .closebtn {
display: block;
font-size: 40px;
top: 15px;
right: 35px;
}
.sidebutton{
display: inline-block;
float: right;
}
}
._alert {
padding: 20px;
background-color: #f44336;
color: white;
opacity: 1;
transition: opacity 0.6s;
margin-bottom: 15px;
}
._alert.success {background-color: #4CAF50;}
._alert.info {background-color: #2196F3;}
._alert.warning {background-color: #ff9800;}
.closebtns {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtns:hover {
color: black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn-group button {
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 70%;
max-width: 500px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>
html,body,h1,h2,h3,h4,h5 {font-family: "RobotoDraft", "Roboto", sans-serif;}
.w3-bar-block .w3-bar-item{padding:16px}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="content">
<div class="left">
<div id="header">
<span style="font-size:30px;line-height: 60px;padding: 0 10px;cursor:pointer" onclick="openNav()">☰ menu</span>header data
<span style="font-size:30px;cursor:pointer" class="sidebutton" onclick="openSidebar()">☰ User</span>
</div>
<div id="body">
<ul id="menu">
<li><a href="">Some menu data</a></li>
<li><a href="">Some menu data</a></li>
<li><a href="">Some menu data</a></li>
<li><a href="">Some menu data</a></li>
<li><a href="">Some menu data</a></li>
</ul>
<div class="_alert">
<span class="closebtns">×</span>
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<div class="_alert success">
<span class="closebtns">×</span>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="_alert info">
<span class="closebtns">×</span>
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="_alert warning">
<span class="closebtns">×</span>
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<script>
var close = document.getElementsByClassName("closebtns");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function () {
div.style.display = "none";
}, 600);
}
}
</script>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<h3>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
Content: Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
Right Sidebar: Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
Footer: Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</h3>
<div class="loader"></div>
</div>
<div id="footer">
<div class="btn-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor.
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<code>
@PostMapping(value = "/client/addUser")
@ResponseBody
public String getAddUser(@RequestParam String name, @RequestParam String city, @RequestParam boolean cricket,
@RequestParam boolean tanis) {
System.out.println(name + " : " + cricket + " : " + tanis);
return "index";
}
<form>
<div id="msg"></div>
Name:<input type="text" name="name" id="name"></input><br /> City:<select
name="cmbCity" id="city">
<option value="Lucknow">Lucknow</option>
<option value="Kanpur">Kanpur</option>
<option value="Allahabad">Allahabad</option>
</select><br /> Cricket:<input type="checkbox" name="cricket" id="cricket"></input>
Tanis:<input type="checkbox" name="tanis" id="tanis"></input><br />
<button>Save</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(event) {
var name = $('#name').val();
var city = $('#city').val();
var cricket = $("#cricket").prop("checked") ? true : false;
var tanis = $("#tanis").prop("checked") ? true : false;
$.post("/client/addUser", {
name : name,
city : city,
cricket : cricket,
tanis : tanis
}, function(data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
event.preventDefault();
});
});
</script>
</code>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
<div id="side" class="right">
<a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.getElementById("content").style.marginLeft = "350px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
function openSidebar() {
document.getElementById("side").style.width = "100%";
}
function closeSidebar() {
document.getElementById("side").style.width = "0%";
}
</script>
</body>
</html>
