adebisi-fa
e48beab2f5
* Make Biometrics service configurable to domain * Use native threading with flask (remove 'eventlet') * Other minor UI adjustment.
93 lines
5.2 KiB
HTML
93 lines
5.2 KiB
HTML
<html>
|
|
<head>
|
|
<title>Fingerprint Service</title>
|
|
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
<style>
|
|
.disabledbutton {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.bolden {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="font-size: 14px; font-family: 'Segoe UI';">
|
|
<div class="container" id="app">
|
|
<div class="col-md-12">
|
|
<div style="margin-top: 100px;">
|
|
|
|
</div>
|
|
<div v-if="!ready">
|
|
Loading...
|
|
</div>
|
|
<div v-if="ready">
|
|
<h1>
|
|
{{domain.name}} Biometric Clock-IN Service
|
|
</h1>
|
|
<hr />
|
|
<div>
|
|
<div style="margin-left: auto; margin-right: auto; padding: 10px;">
|
|
<form class="form">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<img src="/assets/fingerprint.png" style="width: 100%" v-if="!started"/>
|
|
<img src="/assets/fingerprint.gif" style="width: 100%" v-if="started" />
|
|
<br/><br/>
|
|
<div class="btn btn-block" v-bind:class="{ 'btn-success': !started, 'btn-danger': started }"
|
|
v-on:click="toggleIdentifyMode">
|
|
<span v-if="!started">Start Service</span>
|
|
<span v-else>Stop Service</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" v-if="errorMessage">
|
|
<div class="alert alert-danger">{{errorMessage}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div style="padding: 20px">
|
|
<div v-if="configuring">
|
|
<h4>Configure Departments</h4>
|
|
<hr/>
|
|
<div v-on:click="toggleCheck(d)" v-bind:class="{ 'bolden': d.checked }" style="cursor: pointer; font-size: 16px;" v-for="d in domain.departments">{{d.name}}</div>
|
|
<hr/>
|
|
<div class="btn btn-success btn-block" @click="saveDepartments">Save</div>
|
|
</div>
|
|
<div v-if="!configuring">
|
|
<h3>{{savedDepartments.length}}</h3>
|
|
<div style="margin-bottom: 25px">Configured Departments • <span style="color: red; font-size: 11px; cursor: pointer" @click="configuring=true">edit</span></div>
|
|
|
|
<h3>{{records.length}}</h3>
|
|
<div style="margin-bottom: 25px">Total Records • <b>version {{records.timestamp}}</b></div>
|
|
|
|
<h3>{{today}}</h3>
|
|
<div style="margin-bottom: 25px">Today's Date</div>
|
|
|
|
<h3>{{started ? 'Started' : 'Stopped'}}</h3>
|
|
<div style="margin-bottom: 25px">Service status</div>
|
|
|
|
<div style="border-right: 2px solid green; border-left: 2px solid green; background-color: whitesmoke; padding: 8px">
|
|
<h3>{{lastProfile}}</h3>
|
|
<div>Last Clocked-In Profile <span style="font-size: 11px"> • {{latestReportDate}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- production version, optimized for size and speed -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
|
<script src="/assets/app.js"></script>
|
|
</body>
|
|
</html> |