966 lines
28 KiB
Plaintext
966 lines
28 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
|
|
<!-- icon -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
</head>
|
|
<style>
|
|
/* Smartphones (portrait and landscape) ----------- */
|
|
@media only screen and (max-width : 992px){
|
|
body{
|
|
background-color: #FFFFF7;
|
|
}
|
|
.header{
|
|
top: 0%;
|
|
background-color: #435d7d;
|
|
width: 100%;
|
|
height: 150px;
|
|
position: sticky;
|
|
z-index:100
|
|
}
|
|
p{
|
|
padding-top: 30px;
|
|
padding-left: 30px;
|
|
}
|
|
#myInput{
|
|
margin-left: 10px;
|
|
width: 55%;
|
|
height: 70px;
|
|
border-top-left-radius: 50px;
|
|
border-bottom-left-radius: 50px;
|
|
font-size: 40px;
|
|
font-family: 'Varela Round', sans-serif;
|
|
padding-left: 25px;
|
|
}
|
|
.search-panel{
|
|
top: 30px;
|
|
margin-left: 566px;
|
|
position: absolute;
|
|
}
|
|
#search_param{
|
|
width: 180px;
|
|
height: 69px;
|
|
border-top-right-radius: 50px;
|
|
border-bottom-right-radius: 50px;
|
|
border-color: 2px solid #000;
|
|
font-size: 30px;
|
|
font-family: 'Varela Round', sans-serif;
|
|
}
|
|
#material{
|
|
top: 32px;
|
|
font-size: 70px;
|
|
margin-left:85%;
|
|
color: #ffffff;
|
|
background-color: #435d7d;
|
|
border-color: #435d7d;
|
|
/* position the two buttons next to each other */
|
|
display:inline-block;
|
|
position: absolute;
|
|
}
|
|
/* Force table to not be like tables anymore */
|
|
table{
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
table ,thead, tbody , th, td, tr {
|
|
display: block;
|
|
font-size: 35px;
|
|
padding-top: auto;
|
|
}
|
|
/* Hide table headers (but not display: none;, for accessibility) */
|
|
thead tr {
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
tr { margin: 0 0 1rem 0; }
|
|
/* tbody{
|
|
width: 70%;
|
|
} */
|
|
/* no */
|
|
td:nth-of-type(1){
|
|
margin-top: 40px;
|
|
height:100px;
|
|
width:100px;
|
|
border-radius: 50px;
|
|
/* background-color: #435d7d; */
|
|
color: #ffffff;
|
|
font-family: 'Varela Round', sans-serif;
|
|
text-align:center;
|
|
padding-top: 20px;
|
|
font-weight: bold;
|
|
/* position the two buttons next to each other */
|
|
display:inline-block;
|
|
}
|
|
/* catogary */
|
|
td:nth-of-type(3)::before {
|
|
content: "( ";
|
|
}
|
|
td:nth-of-type(3)::after {
|
|
content: " )";
|
|
}
|
|
td:nth-of-type(3) {
|
|
margin-top: -20px;
|
|
margin-left: 0px;
|
|
font-weight: bold;
|
|
/* position next to each other */
|
|
display:inline-block;
|
|
}
|
|
/* name */
|
|
td:nth-of-type(2) {
|
|
margin-top: -20px;
|
|
margin-left: 35px;
|
|
font-weight: bold;
|
|
/* position next to each other */
|
|
display:inline-block;
|
|
}
|
|
/* mobile no */
|
|
td:nth-of-type(5) {
|
|
margin-top: -50px;
|
|
margin-left: 140px;
|
|
}
|
|
/* Phone */
|
|
td:nth-of-type(23){
|
|
font-size: 50px;
|
|
margin-top: -85px;
|
|
margin-left: 90%;
|
|
}
|
|
.form-control{
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
height: 60px;
|
|
border-color: #000;
|
|
}
|
|
.btn-default , .material-icons {
|
|
font-size: 40px;
|
|
}
|
|
.select {
|
|
font-size: 35px;
|
|
height: 60px;
|
|
width: 100%;
|
|
color: #000;
|
|
border-color:#000;
|
|
}
|
|
option{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
border-color: 2px solid #000;
|
|
border-bottom: 2px solid #000;
|
|
}
|
|
/* css for model */
|
|
/* Model CSS */
|
|
form {
|
|
display: block;
|
|
margin-top: 0em;
|
|
}
|
|
.modal { padding: 0 !important; }
|
|
.modal .modal-dialog {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
.modal .modal-content {
|
|
height: auto;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.modal {
|
|
overflow-y: auto;
|
|
}
|
|
.fade {
|
|
transition: opacity .15s linear;
|
|
}
|
|
*, ::after, ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
div {
|
|
display: block;
|
|
}
|
|
.modal-open{
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.modal-header{
|
|
top: 0%;
|
|
background-color: #435d7d;
|
|
width: 100%;
|
|
height: 150px;
|
|
position: sticky;
|
|
z-index:100
|
|
}
|
|
.modal-footer{
|
|
bottom: 530px;
|
|
position: sticky;
|
|
background-color: #ffffff;
|
|
}
|
|
.modal-body{
|
|
color: #566787;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 35px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
}
|
|
.add{
|
|
margin-top: 10px;
|
|
font-size: 50px;
|
|
float: right;
|
|
padding-right: 25px;
|
|
}
|
|
.back{
|
|
margin-top: 10px;
|
|
font-size: 50px;
|
|
float: left;
|
|
padding-left: 25px;
|
|
}
|
|
.modal-title {
|
|
margin-top: 10px;
|
|
color: #FFFFF7;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 50px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
select , option {
|
|
height: 56px;
|
|
border-radius: 5px;
|
|
font-family: 'Varela Round', sans-serif;
|
|
background: #fff;
|
|
border-color: #ddd;
|
|
color: #000000;
|
|
}
|
|
.select{
|
|
padding-left: 25px;
|
|
width: 95%;
|
|
margin-left: 25px;
|
|
}
|
|
label{ padding-left: 25px; }
|
|
.form-check-label{ margin-left: 30px; }
|
|
input[type="radio"] {
|
|
margin-top: 20px;
|
|
margin-left: 25px;
|
|
-ms-transform: scale(1.9); /* IE 9 */
|
|
-webkit-transform: scale(1.9); /* Chrome, Safari, Opera */
|
|
transform: scale(1.9);
|
|
}
|
|
.input{
|
|
display: block;
|
|
/* padding-left: 25px; */
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border: none;
|
|
outline: none;
|
|
border-bottom: 2px solid #435d7d;
|
|
}
|
|
.dropdown-item{
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
/* Medium Devices, Desktops ....................................................... */
|
|
@media only screen and (min-width : 992px) {
|
|
.header{
|
|
width: 100%;
|
|
height: 80px;
|
|
background-color: #435d7d;
|
|
}
|
|
p{
|
|
padding-top: 5px;
|
|
padding-left: 30px;
|
|
font-size: 3em;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
font-family: 'Varela Round', sans-serif;
|
|
}
|
|
#material{
|
|
top: 17px;
|
|
font-size: 40px;
|
|
border-radius: 20px;
|
|
margin-left: 340px;
|
|
color: #ffffff;
|
|
background-color: #435d7d;
|
|
border-color: #435d7d;
|
|
/* position the two buttons next to each other */
|
|
display:inline-block;
|
|
position: absolute;
|
|
}
|
|
#emp {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
border-collapse: collapse;
|
|
width: 70%;
|
|
margin-top: 70px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#emp td, #emp th {
|
|
border-top: 2px solid #ddd;;
|
|
border-bottom: 2px solid #ddd;
|
|
/* border-left: 2px solid #ddd;
|
|
border-right: 2px solid #ddd; */
|
|
padding: 8px;
|
|
font-size: 20px;
|
|
}
|
|
#emp tbody:nth-child(odd) {
|
|
background-color: #ddd;
|
|
}
|
|
#emp tr:nth-child(even){background-color: #f2f2f2;}
|
|
#emp tr:hover {background-color: #ddd;}
|
|
#emp th {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
text-align: center;
|
|
background-color: #435d7d;
|
|
color: #ffffff;
|
|
font-family: 'Varela Round', sans-serif;
|
|
}
|
|
#emp td{
|
|
text-align: center;
|
|
}
|
|
/* Model CSS */
|
|
form {
|
|
display: block;
|
|
margin-top: 0em;
|
|
}
|
|
.modal .modal-content {
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
}
|
|
.modal-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
pointer-events: auto;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0,0,0,.2);
|
|
border-radius: 0.3rem;
|
|
outline: 0;
|
|
}
|
|
.modal-dialog {
|
|
position: relative;
|
|
width: auto;
|
|
margin: 0.5rem;
|
|
}
|
|
element.style {
|
|
display: block;
|
|
padding-left: 17px;
|
|
}
|
|
.modal-open .modal {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 35%;
|
|
z-index: 1050;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
outline: 0;
|
|
}
|
|
.fade {
|
|
transition: opacity .15s linear;
|
|
}
|
|
*, ::after, ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
div {
|
|
display: block;
|
|
}
|
|
.modal-body , .modal-header {
|
|
color: #566787;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 17px;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
background-color: #fff;
|
|
}
|
|
.form-control {
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 2.5;
|
|
text-align: left;
|
|
background-color: #fff;
|
|
}
|
|
.btn {
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
.close{
|
|
font-size: 30px;
|
|
color: #566787;
|
|
}
|
|
.modal-title {
|
|
color: #566787;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 35px;
|
|
}
|
|
select , option {
|
|
height: 33px;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
font-family: 'Varela Round', sans-serif;
|
|
background: #fff;
|
|
border-color: #ddd;
|
|
color: #566787;
|
|
}
|
|
.view{
|
|
color: #000;
|
|
}
|
|
.form-check-label{
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="header">
|
|
<p>
|
|
<input class="form-control" id="myInput" type="text" placeholder="Search..">
|
|
</p>
|
|
|
|
<div class="input-group-btn search-panel">
|
|
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" style="background-color: #ffffff;" data-toggle="dropdown">
|
|
<option class="dropdown-item" value="Default">Default</option>
|
|
<option class="dropdown-item" value="Name">Name</option>
|
|
<option class="dropdown-item" value="Mobile">Mobile</option>
|
|
<option class="dropdown-item" value="Catogary">Catogary</option>
|
|
</select>
|
|
</div>
|
|
|
|
<a id="new" class="new-button" title="add new" data-toggle="modal" data-target="#add-new-form"><i class="material-icons" id="material"></i></a>
|
|
</div>
|
|
<table id="emp">
|
|
<thead>
|
|
<tr>
|
|
<th>Sl.</th>
|
|
<th>Name</th>
|
|
<th>Çategory</th>
|
|
<th hidden>Age Category</th>
|
|
<th>ContactNo</th>
|
|
<th hidden>Address</th>
|
|
<th hidden>Reference</th>
|
|
<th hidden>Basthi</th>
|
|
<th hidden>Varga</th>
|
|
<th hidden>Milan / Shaka</th>
|
|
<th hidden>Poruppu</th>
|
|
<th hidden>Ganavesh</th>
|
|
<th hidden>DOB</th>
|
|
<th hidden>Blood Group</th>
|
|
<th hidden>2W</th>
|
|
<th hidden>4W</th>
|
|
<th hidden>Pada Sanchalan 2022</th>
|
|
<th hidden>Bagh Sanghik</th>
|
|
<th hidden>Year</th>
|
|
<th hidden>Gurupooja 2021</th>
|
|
<th hidden>Gatnayak</th>
|
|
<th hidden>Email</th>
|
|
<th>Phone</th>
|
|
</tr>
|
|
</thead>
|
|
<% data.forEach(function(emp , index ) { %>
|
|
<tbody id="myTable" class="update" data-toggle="modal" data-target="#edit">
|
|
<tr>
|
|
<td><%=emp['Sl.'] %></td>
|
|
<td><%=emp.Name %></td>
|
|
<td><%=emp['Çategory'] %></td>
|
|
<td hidden><%=emp['Age Category'] %></td>
|
|
<td><%=emp.ContactNo %></td>
|
|
<td hidden><%=emp.Address %></td>
|
|
<td hidden><%=emp.Reference %></td>
|
|
<td hidden><%=emp.Basthi %></td>
|
|
<td hidden><%=emp.Varga %></td>
|
|
<td hidden><%=emp['Milan / Shaka'] %></td>
|
|
<td hidden><%=emp.Poruppu %></td>
|
|
<td hidden><%=emp.Ganavesh %></td>
|
|
<td hidden><%=emp.DOB %></td>
|
|
<td hidden><%=emp['Blood Group'] %></td>
|
|
<td hidden><%=emp['2W'] %></td>
|
|
<td hidden><%=emp['4W'] %></td>
|
|
<td hidden><%=emp['Pada Sanchalan 2022'] %></td>
|
|
<td hidden><%=emp['Bagh Sanghik'] %></td>
|
|
<td hidden><%=emp.Year %></td>
|
|
<td hidden><%=emp['Gurupooja 2021'] %></td>
|
|
<td hidden><%=emp.Gatnayak %></td>
|
|
<td hidden><%=emp.email %></td>
|
|
<td id="last"><a href="tel:<%=emp.ContactNo %>"><i class="fa fa-phone" style="color: green;"></i></a></td>
|
|
</tr>
|
|
</tbody>
|
|
<% }) %>
|
|
</table>
|
|
|
|
|
|
<!-- Edit and update model -->
|
|
<div id="edit" class="modal fade" aria-modal="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form>
|
|
<div class="modal-header">
|
|
<a class="back" data-dismiss="modal" aria-hidden="true"><i id="back" class="fa fa-arrow-circle-left" style="color: #FFFFF7;"></i></a>
|
|
<h4 class="modal-title">Edit</h4>
|
|
<a id="up" class="add" data-dismiss="modal"><i class="fa fa-save" style="color: #FFFFF7;"></i></a>
|
|
</div>
|
|
<div class="modal-body" hidden>
|
|
<label>Sl.</label>
|
|
<input id="0" type="text" class="input" name="Sl.">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Name</label>
|
|
<input id="1" type="text" class="input" name="name">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Category</label>
|
|
<select id="2" type="text" class="input" name="Çategory">
|
|
<% dropdown.category.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Age Category</label>
|
|
<select id="3" type="text" class="input" name="Age Category">
|
|
<% dropdown.age_Category.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Contact No</label>
|
|
<input id="4" type="text" class="input" name="ContactNo">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Address</label>
|
|
<input id="5" type="text" class="input" name="Address">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Reference</label>
|
|
<input id="6" type="text" class="input" name="Reference">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Basthi</label>
|
|
<select id="7" type="text" class="input" name="Basthi">
|
|
<% dropdown.basthi.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Varga</label>
|
|
<select id="8" type="text" class="input" name="Varga">
|
|
<% dropdown.varga.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Milan/Shaka</label>
|
|
<select id="9" type="text" class="input" name="Milan / Shaka">
|
|
<% dropdown.milan_shaka.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Poruppu</label>
|
|
<select id="10" type="text" class="input" name="Poruppu">
|
|
<% dropdown.poruppu.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Ganavesh</label>
|
|
<select id="11" type="text" class="input" name="Ganavesh">
|
|
<% dropdown.ganavesh_2w_4w_basg.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>DOB</label>
|
|
<input id="12" type="text" class="input" name="DOB">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Blood Group</label>
|
|
<select id="13" type="text" class="input" name="Blood Group">
|
|
<% dropdown.blood_group.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>2W</label>
|
|
<select id="14" type="text" class="input" name="2W">
|
|
<% dropdown.ganavesh_2w_4w_basg.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>4W</label>
|
|
<select id="15" type="text" class="input" name="4W">
|
|
<% dropdown.ganavesh_2w_4w_basg.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Pada Sanchalan 2022</label>
|
|
<input id="16" type="text" class="input" name="Pada Sanchalan 2022">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Bagh Sanghik</label>
|
|
<select id="17" type="text" class="input" name="Bagh Sanghik">
|
|
<% dropdown.ganavesh_2w_4w_basg.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Year</label>
|
|
<input id="18" type="text" class="input" name="Year">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Gurupooja 2021</label>
|
|
<input id="19" type="text" class="input" name="Gurupooja 2021">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Gatnayak</label>
|
|
<input id="20" type="text" class="input" name="Gatnayak">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Email</label>
|
|
<input id="21" type="text" class="input" name="email">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add new data model -->
|
|
<div id="add-new-form" class="modal fade" aria-modal="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form name="contact-form">
|
|
<div class="modal-header">
|
|
<a class="back" data-dismiss="modal" aria-hidden="true"><i class="fa fa-arrow-circle-left" style="color: #FFFFF7;"></i></a>
|
|
<h4 class="modal-title">Add</h4>
|
|
<a id="add-new" class="add" data-dismiss="modal"><i class="fa fa-save" style="color: #FFFFF7;"></i></a>
|
|
</div>
|
|
<div class="modal-body" hidden>
|
|
<label>Sl.</label>
|
|
<input id="new0" type="text" class="input" name="Sl." value="<%= dropdown.new_index %>">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Name</label>
|
|
<input id="new1" type="text" class="input" name="name">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Category</label>
|
|
<select id="new2" type="text" class="input" name="Çategory">
|
|
<% dropdown.category.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Age Category</label>
|
|
<select id="new3" type="text" class="input" name="Age Category">
|
|
<% dropdown.age_Category.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Contact No</label>
|
|
<input id="new4" type="text" class="input" name="ContactNo">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Address</label>
|
|
<input id="new5" type="text" class="input" name="Address">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Reference</label>
|
|
<input id="new6" type="text" class="input" name="Reference">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Basthi</label>
|
|
<select id="new7" type="text" class="input" name="Basthi">
|
|
<% dropdown.basthi.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Varga</label>
|
|
<select id="new8" type="text" class="input" name="Varga">
|
|
<% dropdown.varga.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Milan/Shaka</label>
|
|
<select id="new9" type="text" class="input" name="Milan / Shaka">
|
|
<% dropdown.milan_shaka.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Poruppu</label>
|
|
<select id="new10" type="text" class="input" name="Poruppu">
|
|
<% dropdown.poruppu.forEach(function(data , index ) { %>
|
|
<option class="dropdown-item" value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Ganavesh</label>
|
|
<select id="new11" type="text" class="input" name="Ganavesh">
|
|
<option class="dropdown-item" value=''></option>
|
|
<option class="dropdown-item" value='Y'>Y</option>
|
|
<option class="dropdown-item" value='N'>N</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>DOB</label>
|
|
<input id="new12" type="text" class="input" name="DOB">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Blood Group</label>
|
|
<select id="new13" type="text" class="input" name="Blood Group">
|
|
<% dropdown.blood_group.forEach(function(data , index ) { %>
|
|
<option value="<%=data %>"><%=data %></option>
|
|
<% }) %>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>2W</label>
|
|
<select id="new14" type="text" class="input" name="2W">
|
|
<option class="dropdown-item" value=''></option>
|
|
<option class="dropdown-item" value='Y'>Y</option>
|
|
<option class="dropdown-item" value='N'>N</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>4W</label>
|
|
<select id="new15" type="text" class="input" name="4W">
|
|
<option class="dropdown-item" value=''></option>
|
|
<option class="dropdown-item" value='Y'>Y</option>
|
|
<option class="dropdown-item" value='N'>N</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Pada Sanchalan 2022</label>
|
|
<input id="new16" type="text" class="input" name="Pada Sanchalan 2022">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Bagh Sanghik</label>
|
|
<select id="new17" type="text" class="input" name="Bagh Sanghik">
|
|
<option class="dropdown-item" value=''></option>
|
|
<option class="dropdown-item" value='Y'>Y</option>
|
|
<option class="dropdown-item" value='N'>N</option>
|
|
</select>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Year</label>
|
|
<input id="new18" type="text" class="input" name="Year">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Gurupooja 2021</label>
|
|
<input id="new19" type="text" class="input" name="Gurupooja 2021">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Gatnayak</label>
|
|
<input id="new20" type="text" class="input" name="Gatnayak">
|
|
</div>
|
|
<div class="modal-body">
|
|
<label>Email</label>
|
|
<input id="new21" type="text" class="input" name="email">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
let oldValue = [];let newValue = [];let pos = [];
|
|
|
|
// SI dynamic background-color
|
|
$(document).ready(function()
|
|
{
|
|
var colorArray = ["#435d7d" , "Green" , "DarkViolet" , "DarkRed" , "Brown" , "DarkOrange" , "DarkGrey" , "DodgerBlue" , "DarkSeaGreen" , "SlateBlue" ];
|
|
$('tbody').children("tr").each(function(index){
|
|
// apply color dynamically
|
|
$(this).find("td:nth-of-type(1)").css("background", colorArray[index % 10]);
|
|
// get first letter from name
|
|
var header = $(this).find('td:nth-of-type(2)').text()
|
|
$(this).find("td:nth-of-type(1)").html([header.charAt(0)]);
|
|
})
|
|
});
|
|
|
|
// close the update form when ever we click the call icon
|
|
$(document).on("click", "#last", function(){
|
|
$('#back').click();
|
|
})
|
|
|
|
// Add new data in sheet
|
|
$(document).on("click", "#add-new", function(){
|
|
for (let i = 0; i < 20; i++) {
|
|
newValue.push($(`#new${i}`).val())
|
|
}
|
|
// add data in googlesheet using ajax
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/api/addRow",
|
|
data: { data : newValue },
|
|
success: function(response) {
|
|
if (response.status == 200 && response.statusCode == 1) {
|
|
// Get the first form with the name
|
|
// Usually the form name is not repeated
|
|
// but duplicate names are possible in HTML
|
|
// Therefore to work around the issue, enforce the correct index
|
|
var frm = document.getElementsByName('contact-form')[0];
|
|
frm.submit(); // Submit the form
|
|
frm.reset(); // Reset all form data
|
|
return false; // Prevent page refresh
|
|
alert("Data added successfully");
|
|
window.location.reload()
|
|
}
|
|
else if(response.status == 200 && response.statusCode == 0){
|
|
// Get the first form with the name
|
|
// Usually the form name is not repeated
|
|
// but duplicate names are possible in HTML
|
|
// Therefore to work around the issue, enforce the correct index
|
|
var frm = document.getElementsByName('contact-form')[0];
|
|
frm.submit(); // Submit the form
|
|
frm.reset(); // Reset all form data
|
|
return false; // Prevent page refresh
|
|
alert("Data added successfully");
|
|
window.location.reload()
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, err) {
|
|
alert('text status '+textStatus+', err '+err)
|
|
}
|
|
});
|
|
// clear arr
|
|
newValue = [];
|
|
})
|
|
|
|
// Update g-sheet data
|
|
//after change/update click submit button this function will update the data in g-sheet
|
|
$(document).on("click", "#up", function(){
|
|
|
|
for (let i = 0; i < oldValue.length; i++) {
|
|
if (i == 0) {
|
|
newValue.push($(`#${i}`).val())
|
|
// update first letter from name
|
|
var header = $('#1').val();
|
|
// remove sl and update name first-letter
|
|
pos[0].find(`td:nth-child(${i+1})`).html([header.charAt(0)]);
|
|
}
|
|
else {
|
|
newValue.push($(`#${i}`).val())
|
|
pos[0].find(`td:nth-child(${i+1})`).html($(`#${i}`).val());
|
|
}
|
|
}
|
|
|
|
// update data in googlesheet using ajax
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/api/updateRow",
|
|
data: { Old : oldValue , New : newValue },
|
|
success: function(response) {
|
|
if (response.status == 200) { alert("updated") }
|
|
},
|
|
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
|
});
|
|
// clear arr
|
|
pos = []; oldValue = []; newValue = [];
|
|
});
|
|
//click edit form icon fetch relevent id data from g-sheet then displayed it to the relevent field in form
|
|
$(document).on("click", ".update", function(){
|
|
pos.push($(this).children("tr"));
|
|
$(this).children("tr").find("td:not(:last-child)").each(function(index){
|
|
oldValue.push($(this).text());
|
|
$(`#${index}`).val($(this).text());
|
|
});
|
|
});
|
|
|
|
|
|
// Filter and Search
|
|
$(document).ready(function(){
|
|
$("#myInput").on("keyup", function() {
|
|
var value = $(this).val().toLowerCase();
|
|
if ( $('#search_param option:selected').text() == 'Default') {
|
|
$("#myTable tr").filter(function() {
|
|
$(this).toggle($(this).find("td:nth-child(2) , td:nth-child(5)").text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
}
|
|
if ( $('#search_param option:selected').text() == 'Name') {
|
|
$("#myTable tr").filter(function() {
|
|
$(this).toggle($(this).find("td:nth-child(2)").text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
}
|
|
if ( $('#search_param option:selected').text() == 'Mobile') {
|
|
$("#myTable tr").filter(function() {
|
|
$(this).toggle($(this).find("td:nth-child(5)").text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
}
|
|
if ( $('#search_param option:selected').text() == 'Catogary') {
|
|
$("#myTable tr").filter(function() {
|
|
$(this).toggle($(this).find("td:nth-child(3)").text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|