website added new table page
This commit is contained in:
parent
6b8cb9cc10
commit
032d3a9b9c
@ -13,11 +13,15 @@ html,body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.create-table{
|
.create-table{
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 20%;
|
|
||||||
background-color: rgba(0,0,0,0.5) !important;
|
background-color: rgba(0,0,0,0.5) !important;
|
||||||
width: 60%;
|
|
||||||
height: 65%;
|
position: fixed;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,8 +33,34 @@ html,body{
|
|||||||
.exit-icon{
|
.exit-icon{
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
float: right;
|
float: right;
|
||||||
display: table-cell;
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
height: 100%;
|
||||||
text-decoration: none;
|
}
|
||||||
|
|
||||||
|
.create-table-title{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 120%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-table-window-bottom{
|
||||||
|
bottom: 0;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(1,0,0,0.3) !important;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-table-window-content{
|
||||||
|
overflow:scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-table-window-settings{
|
||||||
|
margin-left: 7%;
|
||||||
|
margin-top: 1%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,4 +17,13 @@ $(document).ready(function() {
|
|||||||
console.log(data);
|
console.log(data);
|
||||||
},'json');
|
},'json');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#addnewtable-btn').click(function() {
|
||||||
|
console.log("clicked");
|
||||||
|
$('.create-table').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.exit-icon').click(function() {
|
||||||
|
$('.create-table').hide();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -8,7 +8,8 @@
|
|||||||
<link rel="stylesheet" href="lib/bootstrap.min.css">
|
<link rel="stylesheet" href="lib/bootstrap.min.css">
|
||||||
|
|
||||||
<!--Fontawesome CDN-->
|
<!--Fontawesome CDN-->
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
|
||||||
|
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
|
||||||
|
|
||||||
|
|
||||||
<!-- jQuery library -->
|
<!-- jQuery library -->
|
||||||
@ -20,8 +21,14 @@
|
|||||||
<!-- Latest compiled JavaScript -->
|
<!-- Latest compiled JavaScript -->
|
||||||
<script src="lib/bootstrap.min.js"></script>
|
<script src="lib/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Bootstrap Date-Picker Plugin -->
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/settings.css">
|
<link rel="stylesheet" type="text/css" href="css/settings.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/general.css">
|
||||||
|
|
||||||
<script type="text/javascript" src="js/settings.js"></script>
|
<script type="text/javascript" src="js/settings.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -49,23 +56,131 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<button type="button" name="button">click me to add new table</button>
|
<button type="button" id="addnewtable-btn" class="btn btn-primary" name="button">click me to add new table</button>
|
||||||
|
|
||||||
<div class="create-table">
|
<div class="create-table hideit">
|
||||||
<div class="create-table-window-toolpane">
|
<div class="create-table-window-toolpane">
|
||||||
<i class="fas fa-times-circle fa-2x exit-icon"></i>
|
<div class="fas fa-times-circle fa-2x exit-icon"></div>
|
||||||
<!-- TODO: -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="optionsarray">
|
<div class="create-table-title">Add new Table</div>
|
||||||
|
</div>
|
||||||
|
<div class="create-table-window-content">
|
||||||
|
<div class="create-table-window-settings">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<h4>General options:</h4>
|
||||||
<div class="custom-control custom-switch">
|
<div class="custom-control custom-switch">
|
||||||
<input type="checkbox" class="custom-control-input" id="customSwitch1">
|
<input type="checkbox" class="custom-control-input" id="customSwitch1">
|
||||||
<label class="custom-control-label" for="customSwitch1">Setting 1</label>
|
<label class="custom-control-label" for="customSwitch1">Notify Led-Board</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-control custom-switch">
|
<div class="form-group" style="margin-top: 15px; width: 30%;">
|
||||||
<input type="checkbox" class="custom-control-input" id="customSwitch2">
|
<label for="exampleInputEmail1">Table Name</label>
|
||||||
<label class="custom-control-label" for="customSwitch2">Setting 2</label>
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Table Name">
|
||||||
|
<small id="emailHelp" class="form-text text-muted">Please try to use no special characters</small>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" style="width: 30%;">
|
||||||
|
<label for="exampleInputEmail1">City/Village name</label>
|
||||||
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter City name here">
|
||||||
|
<small id="emailHelp" class="form-text text-muted">Please try to use no special characters</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Add Data:</h4>
|
||||||
|
<div class="input-group mt-3 mb-3" style="width: 50%;">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<button type="button" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
|
||||||
|
Select waste type
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<a class="dropdown-item" href="#">Plastic</a>
|
||||||
|
<a class="dropdown-item" href="#">Metal</a>
|
||||||
|
<a class="dropdown-item" href="#">residual waste</a>
|
||||||
|
<a class="dropdown-item" href="#">biowaste</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input style="width: 50px;" class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
var date_input=$('input[name="date"]'); //our date input has the name "date"
|
||||||
|
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
|
||||||
|
var options={
|
||||||
|
format: 'mm/dd/yyyy',
|
||||||
|
container: container,
|
||||||
|
todayHighlight: true,
|
||||||
|
autoclose: true,
|
||||||
|
};
|
||||||
|
date_input.datepicker(options);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input type="text" class="form-control" placeholder="Region">
|
||||||
|
<button type="button" class="btn btn-success" style="float:right;">Add to list</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Your Data:</h4>
|
||||||
|
<table class="table table-dark table-hover" style="width: 50%;">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Firstname</th>
|
||||||
|
<th>Lastname</th>
|
||||||
|
<th>Email</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>John</td>
|
||||||
|
<td>Doe</td>
|
||||||
|
<td>john@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mary</td>
|
||||||
|
<td>Moe</td>
|
||||||
|
<td>mary@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>July</td>
|
||||||
|
<td>Dooley</td>
|
||||||
|
<td>july@example.com</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="create-table-window-bottom">
|
||||||
|
<button type="button" class="btn btn-success" style="float:right;">Save</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user