/
home
/
sjslayjy
/
public_html
/
mosaram
/
resources
/
views
/
Upload File
HOME
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content=""> <title>Attendance</title> <link href="/assets/plugins/bootstrap/bootstrap.css" media="screen" rel="stylesheet" type="text/css" > <link href="/css/jquery.dataTables.min.css" media="screen" rel="stylesheet" type="text/css" > <link href="/css/buttons.dataTables.min.css" media="screen" rel="stylesheet" type="text/css" > <link href="/css/custom.dataTables.css" media="screen" 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"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="/assets/plugins/lib/jquery-2.2.4.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript" src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> <script src="/HTML/Nitgen.js"></script> <script type="text/javascript" src="/assets/plugins/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="/assets/plugins/datatable/jquery.dataTables.min.js"></script> <script type="text/javascript" src="/assets/plugins/datatable/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="/assets/js/custom-datatable.js"></script> <script type="text/javascript" src="/assets/js/llqrcode.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="/assets/js/scanTeacherQr.js"></script> <script type="text/javascript"> </script> <style> .table > thead > tr > th{border-bottom:1px solid #ddd!important;} #header{padding:10px 0;margin-bottom:60px;} #header a{margin-top:15px;} /*-------------------------Dark color theme--------------------------*/ #clock{/*width:450px;margin: 0px auto 60px;*/position:relative;max-width: 400px;} #clock .display{text-align:center;padding:55px 20px 18px 0px ;position:relative;height: 120px;} #clock.dark{color:#cacaca;} #clock.dark:after{box-shadow:0 4px 10px rgba(0,0,0,0.3);} #clock.dark .digits div span{background-color:#fff;border-color:#fff; } #clock.dark .display{background-color:#26354a;box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;} #clock.dark .digits div.dots:before, #clock.dark .digits div.dots:after{background-color:#cacaca;} /*-------------------------The Digits--------------------------*/ #clock .digits div{text-align:left;position:relative;width: 28px;height:50px;display:inline-block;margin:0 5px;} #clock .digits div span{opacity:0;position:absolute;-webkit-transition:0.25s;-moz-transition:0.25s;transition:0.25s;} #clock .digits div span:before, #clock .digits div span:after{content:'';position:absolute;width:0;height:0;border:5px solid transparent;} #clock .digits .d1{height:5px;width:16px;top:0;left:6px;} #clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} #clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} #clock .digits .d2{height:5px;width:16px;top:24px;left:6px;} #clock .digits .d2:before{ border-width:3px 4px 2px;border-right-color:inherit;left:-8px;} #clock .digits .d2:after{ border-width:3px 4px 2px;border-left-color:inherit;right:-8px;} #clock .digits .d3{height:5px;width:16px;top:48px;left:6px;} #clock .digits .d3:before{ border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;} #clock .digits .d3:after{ border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;} #clock .digits .d4{width:5px;height:14px;top:7px;left:0;} #clock .digits .d4:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d4:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d5{width:5px;height:14px;top:7px;right:0;} #clock .digits .d5:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d5:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} #clock .digits .d6{ width:5px;height:14px;top:32px;left:0;} #clock .digits .d6:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d6:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d7{ width:5px;height:14px;top:32px;right:0;} #clock .digits .d7:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d7:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} /* 1 */ #clock .digits div.one .d5, #clock .digits div.one .d7{opacity:1;} /* 2 */ #clock .digits div.two .d1, #clock .digits div.two .d5, #clock .digits div.two .d2, #clock .digits div.two .d6, #clock .digits div.two .d3{opacity:1;} /* 3 */ #clock .digits div.three .d1, #clock .digits div.three .d5, #clock .digits div.three .d2, #clock .digits div.three .d7, #clock .digits div.three .d3{opacity:1;} /* 4 */ #clock .digits div.four .d5, #clock .digits div.four .d2, #clock .digits div.four .d4, #clock .digits div.four .d7{opacity:1;} /* 5 */ #clock .digits div.five .d1, #clock .digits div.five .d2, #clock .digits div.five .d4, #clock .digits div.five .d3, #clock .digits div.five .d7{opacity:1;} /* 6 */ #clock .digits div.six .d1, #clock .digits div.six .d2, #clock .digits div.six .d4, #clock .digits div.six .d3, #clock .digits div.six .d6, #clock .digits div.six .d7{opacity:1;} /* 7 */ #clock .digits div.seven .d1, #clock .digits div.seven .d5, #clock .digits div.seven .d7{opacity:1;} /* 8 */ #clock .digits div.eight .d1, #clock .digits div.eight .d2, #clock .digits div.eight .d3, #clock .digits div.eight .d4, #clock .digits div.eight .d5, #clock .digits div.eight .d6, #clock .digits div.eight .d7{opacity:1;} /* 9 */ #clock .digits div.nine .d1, #clock .digits div.nine .d2, #clock .digits div.nine .d3, #clock .digits div.nine .d4, #clock .digits div.nine .d5, #clock .digits div.nine .d7{opacity:1;} /* 0 */ #clock .digits div.zero .d1, #clock .digits div.zero .d3, #clock .digits div.zero .d4, #clock .digits div.zero .d5, #clock .digits div.zero .d6, #clock .digits div.zero .d7{opacity:1;} /* The dots */ #clock .digits div.dots{width:5px;} #clock .digits div.dots:before, #clock .digits div.dots:after{width:5px;height:5px;content:'';position:absolute;left:0;top:14px;} #clock .digits div.dots:after{top:34px;} /*-------------------------The Alarm--------------------------*/ #clock .alarm.active{opacity:1;} /*-------------------------Weekdays--------------------------*/ #clock .weekdays{font-size:12px;position:absolute;width:100%;top:10px;left:0;text-align:center;} #clock .weekdays span{padding:0 10px;/*width:100%;max-width:80px;*/display:inline-block;} #clock .weekdays span.active{opacity:1;font-weight: 800;color:#fff;} /*-------------------------AM/PM--------------------------*/ #clock .ampm{ position: absolute;bottom: 6px;right: 10px;font-size: 14px;color: #fff;font-weight: 600;} .tabbable-line{font-family: 'Montserrat', sans-serif;} .tabbable-line ul{border:none} .tabbable-line li a,.tabbable-line li a:hover{background:#6c98df;margin-right:5px;border-radius:10px 10px 0 0;border:0;color:#fff;font-size:16px;position: relative;} .tabbable-line li.active a{background: #f2f2f2;color:#2c2c2c;border:solid 1px #ccc; border-bottom:0;z-index: 99;left:0px;} td{text-align:left!important} table.dataTable tbody td{border-left:solid 1px #ccc!important;border-left: solid 1px #ccc;border-bottom:0;border-collapse: collapse; text-align:left!important} .table-bordered > tbody > tr > td{border-right:0;} .table-bordered thead{border-left:solid 1px #ccc!important;border-right: solid 1px #ccc;border-collapse: collapse!important;} .table-bordered > thead > tr > th{border:none} table.dataTable tbody{border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;} table.dataTable tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1{background:none} .dataTables_wrapper{border-top:solid 1px #ccc!important;} .dataTables_wrapper, table.dataTable thead td{border-color:#ccc} table.dataTable thead th{border-color:#ccc;} .table-bordered{border:0;border-top:solid 1px #ccc;} tbody tr img{width:40px;height:40px;border-radius:50%;margin-right:10px;border:solid 2px #999;padding:3px;} tbody tr p{ margin-bottom: 5px;} .table > tbody > tr > td{padding: 5px 8px;} .dataTables_wrapper >div:first-child{border-left:solid 1px #ccc;border-right:solid 1px #ccc;margin:0;} .dataTables_wrapper >div:first-child label{margin:0} table.dataTable.no-footer{border:none;border-top:solid 1px #ccc;} .dataTables_wrapper >div:first-child input{border:none;border-left:solid 1px #ccc;border-radius:0;box-shadow: none;height:49px;font-size:15px;font-weight:300;} .dataTables_wrapper >div:first-child .dataTables_length,.dataTables_wrapper >div:first-child .dataTables_length label{width:100%} .dataTables_wrapper >div:first-child .dataTables_length select{border-radius:0;border:none;border:solid 1px #ccc;height:50px;width:100%;max-width:300px;box-shadow: none;margin:0 20px;border-radius:0;webkit-appearance: none; -webkit-border-radius: 0px;} .searchable .form-control{border-radius:0;box-shadow: none;width:100%;height:45px;font-weight: 400} .pagination li{padding: 0!important;border:none!important;;} .pagination li a{margin: 0!important;border:none!important;border:solid 1px #6c98df!important;} .pagination li.active a{border:solid 1px #ccc!important;} table.dataTable{width:100%!important;} .table.dataTable{border-collapse: collapse;} .time-action-wrap{margin-top:-40px;} .time-action-wrap li{display:inline-block;margin-left: 10px;background:#eee;padding:5px 20px;color:#fff;border-radius:2px;box-shadow:4px 4px 0 #999; transition:.2s ease-in-out;cursor: pointer} .time-action-wrap li a,.time-action-wrap li:hover a{color:#fff;background: none;font-size: 13px; text-decoration: none;} .time-action-wrap li:nth-child(1){background:#75b21e;box-shadow:4px 4px 0 #4b7410} .time-action-wrap li:nth-child(2){background:#be3540;box-shadow:4px 4px 0 #480909} .time-action-wrap li:nth-child(3){background:#556370;box-shadow:4px 4px 0 #253441} .time-action-wrap li:nth-child(4){background:#f3c726;box-shadow:4px 4px 0 #b1971c} .time-action-wrap li:nth-child(5){background:#bf2942;box-shadow:4px 4px 0 #791526} .time-action-wrap li:hover{box-shadow:0px 0px 0 #791526} .alert-icon{color:#bf2942} .table-bordered th i{width:30px;height:30px;border-radius:50%;border:solid 1px; text-align: center;line-height:27px;margin:0 5px;} .time-in{color:#85b343} .time-out{color:#be3540} .fa-sign-in{ transform: rotate(180deg)} .arrow-wrap i{width:40px;height:40px;border-radius:50%;border:solid 1px; text-align: center;line-height:40px;font-size:20px;} .user_name a{font-weight:600;color:#000; text-decoration: none;} .lat-time{font-weight:600;color:#e23350;} .loading-bg {background: #44444473;top: 0;bottom: 0;left: 0;right: 0;margin: 0px auto;z-index: 9;position: fixed;} .loader{border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;width:150px;height:150px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;position:absolute;left:0;right:0;margin:0px auto;top:50%;} @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------DIGITAL WEATHER--------------------------*/ /*-------------------------DIGITAL WEATHER--------------------------*/ .aw-widget-current-inner .aw-widget-content.bg-c #link_current{padding:0!important;margin:0!important;width:100%!important;max-width: 100%!important} .lt-479 div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather div.aw-current-weather-inner{max-width: 100%!important;} div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather h3{width:100%!important;display: block!important;padding:0px!important;padding-top:0!important} .lt-479 div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather h3{padding-top:0!important;} .lt-479 div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather span.aw-icon{margin-top:-20px!important;margin-left:0px!important} div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather p{position: relative!important;margin-left:0px!important;;float:none!important;width:100%!important;display:inline-block!important} .lt-479 div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather p{padding-left:0!important;} div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather p span.aw-temperature-today{display: inline-block!important;} div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather p span.aw-weather-description{position: absolute!important;top:33px!important;right: -5%!important} div.aw-widget-current-inner div.aw-widget-content a.aw-current-weather p time{position: absolute;top:20px!important;right:-5%!important;display:none!important} html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1538114480147.aw-widget-current.lt-479 div.aw-widget-current-inner div.aw-widget-content.bg-f a#link_current.aw-current-weather div.aw-current-weather-inner p.aw-temp-time-desc time,html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1538114480147.aw-widget-current.gte-479 div.aw-widget-current-inner div.aw-widget-content.bg-f a#link_current.aw-current-weather div.aw-current-weather-inner p.aw-temp-time-desc time{display:none!important} div.aw-widget-current-inner a.aw-toggle{top:0px;!important;border-radius:0!important;right:0!important;border:none!important;box-shadow: none!important;} html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1537610685516.aw-widget-current.lt-479 div.aw-widget-current-inner div.aw-widget-content.bg-c a#link_current.aw-current-weather div.aw-current-weather-inner{max-width: 100%!important;margin-left: 10px!important;} html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1537610685516.aw-widget-current.lt-479 div.aw-widget-current-inner div.aw-widget-content.bg-c a#link_current.aw-current-weather div.aw-current-weather-inner p.aw-temp-time-desc{width:100%!important;padding-left: 0!important} html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1537610685516.aw-widget-current.lt-479 div.aw-widget-current-inner div.aw-widget-content.bg-c a#link_current.aw-current-weather div.aw-current-weather-inner p.aw-temp-time-desc time,html body div.container-fluid div#header.clearfix div.col-md-4.text-right div#awcc1537610685516.aw-widget-current.lt-479 div.aw-widget-current-inner div.aw-widget-content.bg-c a#link_current.aw-current-weather div.aw-current-weather-inner p.aw-temp-time-desc span.aw-weather-description{left:35%!important} .modal-dialog{width:100%!important;max-width: 950px;height:673px;} .modal-dialog .modal-header{border-bottom: 1px solid #cbc5c5!important;background: #f2f2f2!important;} .modal-dialog .modal-content{height:100%!important;overflow:hover;} .modal-dialog .modal-content .modal-body{height:90%;overflow:auto} .modal-dialog td{padding: 15px 10px!important;;} .modal-dialog tr:nth-child(2n+2){background: #f2f2f2} .modal-dialog tr:hover{background: #ddd} .modal-dialog .col-lg-12{padding:0;} .modal-dialog .card-box{display:inline-block;width:100%;margin-top:20px;padding: 0 15px;} .modal-dialog .nav-tabs,.modal-dialog .tab-content{font-family: 'Montserrat', sans-serif;} .modal-dialog .nav-tabs ul{border:none} .modal-dialog .nav-tabs li a,.nav-tabs li a:hover{background:#6c98df;margin-right:5px;border-radius:10px 10px 0 0;border:0;color:#fff;font-size:16px;position: relative;} .modal-dialog .nav-tabs li.active a{background: #f2f2f2;color:#2c2c2c;border:solid 1px #ccc; border-bottom:0;z-index: 99;left:0px;} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12{background: #eee;padding:20px;border:solid 1px #ccc;box-sizing: border-box; } .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 .row{margin:0} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 input{height:40px;line-height:40px;border-radius:0;box-shadow: none;} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 button{ height: 40px;padding:0 20px;} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 .form-group:first-child{margin:0;} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 .form-group{margin-left:10px;} .modal-dialog .modal-content .modal-body .main-container div.row div.col-sm-12 div.col-sm-12 label{line-height: 35px} .day-wrap{position: absolute;width:100%;background:#394b65;top:0;padding:5px;font-size:16px;text-transform:uppercase;color:#fff;letter-spacing:5px;font-weight:600;} time{display:none!important} .day-wrap span:first-child{float:left;padding-left:10px;} .day-wrap span:last-child{float:right;letter-spacing: 2px;padding-right:10px;} </style> </head> <body> <div class="container-fluid"> <!-- loader start --> <div class="loading-bg" style="display: none;"> <div class="loader"></div> </div> <!-- loader end --> <div id="header" class="clearfix"> <div class="col-md-3"> <a href="#default" class="logo"><img src="/img/1508831296company logo.png" style="width: 280px;"></a> </div> <div class="col-md-3"> <div id="clock" class="light dark"> <div class="display"> <div class="day-wrap"><span><?php echo date('l'); ?></span> <span><?php echo date('d / m / Y'); ?></span></div> <!-- <div class="weekdays"></div> --> <div class="ampm"></div> <div class="alarm"></div> <div class="digits"></div> </div> </div> </div> <div class="col-md-4 text-right"> <a href="https://www.accuweather.com/en/in/varanasi/206681/weather-forecast/206681" class="aw-widget-legal"> </a><div id="awcc1538114480147" class="aw-widget-current" data-locationkey="206678" data-unit="c" data-language="en-us" data-useip="false" data-uid="awcc1538114480147"></div><script type="text/javascript" src="https://oap.accuweather.com/launch.js"></script> </div> <div class="col-md-2 text-right"> <div class="scanner"> <a href="#scannerModal" data-toggle="modal"> <img src="/img/scanme.jpg" width="150px" > </a> </div> </div> </div> <section class="home-content-top"> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs tabtop tabsetting"> <li class="active"> <a href="#tab_default_1" data-toggle="tab">All</a> </li> <!-- --> <!-- <li> <a href="#tab_default_2" data-toggle="tab"> Employees</a> </li> --> <!-- <li> <a href="#tab_default_3" data-toggle="tab"> Non Faculty Members </a> </li> --> </ul> <div class="pull-right time-action-wrap"> <ul> <li><a href="javascript:void(0)" onclick="resetFilter()"><span class="txt2">All</span></a> </li> <li><a href="javascript:void(0)" onclick="getPresentList()"><span class="txt2">Present :</span> <span class="txt2">{{ $total_present }}</span></a></li> <li><a href="javascript:void(0)" onclick="getAbsentList()"><span class="txt2">Absent :</span> <span class="txt2">{{ $total_absent }}</span></a></li> </ul> </div> <section class="home-content-top"> <table class="table display nowrap table table-hover table-striped table-bordered" cellpadding="0" cellspacing="0" id="multifilterDataTable"> <thead> <tr> <th>Employee</th> <th><span class="time-in"><i class="fa fa-sign-in"></i> In Time</span> / <span class="time-out"><i class="fa fa-sign-out"></i> Out Time</span></th> <th class="icon alert-icon"><i class="fa fa-warning"></i> Alert</th> <th></th> </tr> <tr> <th class="searchable">Employee</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> </tbody> </table> </section> <audio id="myAudio"> <source src="/thankyou.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio id="myAudioSorry"> <source src="/sorry.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <div class="modal fade" id="scannerModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Scan ID Card</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-6"> <div id="mainbody" style="width: 350px!important;"> <div id="outdiv"> </div> <div id="result"></div> <canvas id="qr-canvas" width="800" height="600" style="display: none;"></canvas> <script type="text/javascript">load();</script> </div> </div> <div id="id-card" ></div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="presentListModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Present Employees</h4> </div> <div class="modal-body" id="presentList"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="absentListModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Absent Employees</h4> </div> <div class="modal-body" id="absentList"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="leaveListModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">On Leave Employees</h4> </div> <div class="modal-body" id="leaveList"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="detailModal"> </div> <script> setInterval(function() { window.location.reload(); }, 300000); $(function(){ var clock = $('#clock'), alarm = clock.find('.alarm'), ampm = clock.find('.ampm'); var digit_to_name = 'zero one two three four five six seven eight nine'.split(' '); var digits = {}; var positions = [ 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' ]; var digit_holder = clock.find('.digits'); $.each(positions, function(){ if(this == ':'){ digit_holder.append('<div class="dots">'); } else{ var pos = $('<div>'); for(var i=1; i<8; i++){ pos.append('<span class="d' + i + '">'); } digits[this] = pos; digit_holder.append(pos); } }); var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '), weekday_holder = clock.find('.weekdays'); $.each(weekday_names, function(){ weekday_holder.append('<span>' + this + '</span>'); }); var weekdays = clock.find('.weekdays span'); (function update_time(){ var now = moment().format("hhmmssdA"); digits.h1.attr('class', digit_to_name[now[0]]); digits.h2.attr('class', digit_to_name[now[1]]); digits.m1.attr('class', digit_to_name[now[2]]); digits.m2.attr('class', digit_to_name[now[3]]); digits.s1.attr('class', digit_to_name[now[4]]); digits.s2.attr('class', digit_to_name[now[5]]); var dow = now[6]; dow--; if(dow < 0){ dow = 6; } weekdays.removeClass('active').eq(dow).addClass('active'); ampm.text(now[7]+now[8]); setTimeout(update_time, 1000); })(); }); $(document).keyup(function(e) { if (e.keyCode == 27) { $('#detailModal').modal("hide"); } }); function getUserAttendanceRecord(id) { $('.loading-bg').show(); $.ajax({ type:'POST', url: '/attendance/attendance-report/employee/'+id, success:function(data){ $("#detailModal").html(data); $('.loading-bg').hide(); $("#detailModal").modal('toggle'); } }); } function getAttendanceRange(id) { var employee_id = $("#employee_id").val(); var start_date = $("#start_date").val(); var end_date = $("#end_date").val(); if (start_date == '') { alert("Please select start date."); document.getElementById("start_date").focus(); return false; } else if (end_date == '') { alert("Please select end date."); document.getElementById("end_date").focus(); return false; } else { $('.loading-bg').show(); $.ajax({ type:'POST', url: '/attendance/view-attendance-between-dates/employee_id/'+id, data:{start_date:start_date, end_date:end_date, employee_id:employee_id}, success:function(data){ $("#detailModal").html(data); $('.loading-bg').hide(); } }); } } function resetFilter(){ window.location.reload(); } function getPresentList(){ $('.loading-bg').show(); $.ajax({ url: '/attendance/', type: 'GET', success:function(data){ $('[href="#tab_default_1"]').tab('show'); $('.loading-bg').hide(); $('#attendance_content').html(data) // $('#presentListModal').modal('toggle'); } }); } function getAbsentList(){ $('.loading-bg').show(); $.ajax({ url: '/attendance/', type: 'GET', success:function(data){ $('[href="#tab_default_1"]').tab('show'); $('.loading-bg').hide(); $('#attendance_content').html(data); // $('#absentListModal').modal('toggle'); } }); } function getLeaveList(){ $('.loading-bg').show(); $.ajax({ url: '/attendance/on-leave-employees', type: 'GET', success:function(data){ $('[href="#tab_default_1"]').tab('show'); $('.loading-bg').hide(); $('#attendance_content').html(data) // $('#leaveListModal').modal('toggle'); } }); } </script> <script type="text/javascript" src="/assets/js/mark-attendance.js"></script> </body> </html>