* Implement ClockIN service for IDID Biometrics
* Make Biometrics service configurable to domain * Use native threading with flask (remove 'eventlet') * Other minor UI adjustment.
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
domain: { },
|
||||
errorMessage: '',
|
||||
staff: { reference: '' },
|
||||
department: '-',
|
||||
departments: {},
|
||||
started: false,
|
||||
ready: false,
|
||||
socket: null,
|
||||
savedDepartments: [],
|
||||
latestReportDate: new Date().toLocaleTimeString(),
|
||||
lastProfile: 'None',
|
||||
configuring: false
|
||||
},
|
||||
created: function () {
|
||||
this.socket = io();
|
||||
|
||||
this.socket.on("connect", () => { })
|
||||
|
||||
this.socket.on("config", (data) => {
|
||||
let deptStr = localStorage.getItem("idid-departments");
|
||||
if (deptStr) this.savedDepartments = JSON.parse(deptStr);
|
||||
data.departments.forEach(d => {
|
||||
d.name = d.name.replace('*', '');
|
||||
d.checked = this.savedDepartments.includes(d.id);
|
||||
return d;
|
||||
});
|
||||
this.domain = data;
|
||||
this.started = data.started;
|
||||
this.today = new Date().toDateString();
|
||||
this.records = data.records;
|
||||
this.ready = true;
|
||||
});
|
||||
|
||||
//#region Verify handlers
|
||||
|
||||
this.socket.on("fprint-verify-start-done", (data) => {
|
||||
console.log({ event: 'fprint-verify-start-done', data});
|
||||
this.started = true;
|
||||
});
|
||||
|
||||
this.socket.on("fprint-verify-start-error", (data) => {
|
||||
console.log({ event: 'fprint-verify-start-error', data });
|
||||
swal("Oops!", `Operation failed. ${data}.`, "error");
|
||||
});
|
||||
|
||||
this.socket.on("fprint-verify-stop-done", (data) => {
|
||||
console.log({ event: 'fprint-verify-stop-done', data});
|
||||
this.started = false;
|
||||
});
|
||||
|
||||
this.socket.on("fprint-verify-stop-error", (data) => {
|
||||
console.log({ event: 'fprint-verify-stop-error', data});
|
||||
});
|
||||
|
||||
//#endregion
|
||||
|
||||
//#region Identify handlers
|
||||
|
||||
this.socket.on("fprint-identify-start-done", (data) => {
|
||||
console.log({ event: 'fprint-identify-start-done', data});
|
||||
this.started = true;
|
||||
});
|
||||
|
||||
this.socket.on("fprint-identify-done", (data) => {
|
||||
console.log({ event: 'fprint-identify-done', data});
|
||||
if (data.ok)
|
||||
this.lastProfile = data.name;
|
||||
else
|
||||
this.lastProfile = "No Match";
|
||||
this.latestReportDate = new Date().toLocaleTimeString();
|
||||
});
|
||||
|
||||
this.socket.on("fprint-identify-start-error", (data) => {
|
||||
console.log({ event: 'fprint-identify-start-error', data});
|
||||
console.log({ event: 'identify-error', data });
|
||||
swal("Oops!", `Operation failed. ${data}.`, "error");
|
||||
});
|
||||
|
||||
this.socket.on("fprint-identify-stop-done", (data) => {
|
||||
console.log({ event: 'fprint-identify-stop-done', data});
|
||||
this.started = false;
|
||||
});
|
||||
|
||||
this.socket.on("fprint-identify-stop-error", (data) => {
|
||||
console.log({ event: 'fprint-identify-stop-error', data});
|
||||
});
|
||||
|
||||
//#endregion
|
||||
},
|
||||
methods: {
|
||||
toggleIdentifyMode: async function () {
|
||||
console.log("toggling clockin status ...");
|
||||
this.socket.emit(`fprint-identify-${this.started ?'stop' : 'start'}`, {
|
||||
departmentId: this.department
|
||||
});
|
||||
},
|
||||
|
||||
toggleCheck: async function (d) {
|
||||
if (!d.checked) {
|
||||
let dpts = this.domain.departments.filter(q => q.checked);
|
||||
if (dpts.length == 10)
|
||||
return alert("Maximum number of departments, 10, selected.");
|
||||
}
|
||||
d.checked = !d.checked;
|
||||
},
|
||||
|
||||
saveDepartments() {
|
||||
let tmp = this.domain.departments.filter(q => q.checked).map(d => d.id);
|
||||
this.savedDepartments = tmp;
|
||||
localStorage.setItem("idid-departments", JSON.stringify(tmp));
|
||||
this.configuring = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,93 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user