Moirtz Wagner
379b4887c3
--add local timezone --add sunrise/sunset calculation and LED illumination accordingly --remove touch sensor check --change mqtt messages
151 lines
4.6 KiB
HTML
151 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- created with https://bootstrapformbuilder.com/ -->
|
|
<title>FingerprintDoorbell</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
|
|
<link rel="icon" href="data:,">
|
|
<link rel="stylesheet" href="bootstrap.min.css">
|
|
<style>
|
|
.alert-custom{
|
|
background-color:#cecece;
|
|
color:rgb(0, 0, 0);
|
|
}
|
|
.form-horizontal{
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
if (!!window.EventSource) {
|
|
var source = new EventSource('/events');
|
|
|
|
source.addEventListener('open', function(e) {
|
|
console.log("Events Connected");
|
|
}, false);
|
|
|
|
source.addEventListener('error', function(e) {
|
|
if (e.target.readyState != EventSource.OPEN) {
|
|
console.log("Events Disconnected");
|
|
}
|
|
}, false);
|
|
|
|
// event is fired when a new message from server was received
|
|
source.addEventListener('message', function(e) {
|
|
console.log("message", e.data);
|
|
document.getElementById('logMessages').innerHTML = event.data;
|
|
}, false);
|
|
|
|
// event is fired when server side fingerlist was changed (e.g. enrollment of new finger)
|
|
source.addEventListener('fingerlist', function(e) {
|
|
console.log("fingerlist", e.data);
|
|
document.getElementById('selectedFingerprint').innerHTML = event.data;
|
|
}, false);
|
|
|
|
}
|
|
|
|
function askForNewName(e)
|
|
{
|
|
var list = document.getElementById("selectedFingerprint");
|
|
var strOldName = list.options[list.selectedIndex].text;
|
|
strOldName = strOldName.substr(strOldName.indexOf('-') + 2);
|
|
newname = prompt('New Name?',strOldName);
|
|
if (newname === null)
|
|
document.getElementById('renameNewName').value = strOldName;
|
|
else
|
|
document.getElementById('renameNewName').value = newname;
|
|
}
|
|
</script>
|
|
|
|
<nav class="navbar navbar-inverse">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<a class="navbar-brand" href="/">%HOSTNAME%</a>
|
|
</div>
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Fingerprints</a></li>
|
|
<li><a href="settings">Settings</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<p></p>
|
|
<div class="alert alert-custom" id="logMessages" role="alert">%LOGMESSAGES%</div>
|
|
|
|
<form class="form-horizontal" action="/editFingerprints">
|
|
<fieldset>
|
|
|
|
<!-- Form Name -->
|
|
<legend>Manage fingerprints</legend>
|
|
|
|
<!-- Select Multiple -->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label" for="selectedFingerprint">Fingerprints in DB</label>
|
|
<div class="col-md-4">
|
|
<select id="selectedFingerprint" name="selectedFingerprint" class="form-control" size="10">
|
|
<!--option value="1">1 - Option one</option-->
|
|
%FINGERLIST%
|
|
</select>
|
|
<input type="hidden" id="renameNewName" name="renameNewName" type="text" class="form-control input-md">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button (Double) -->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label" for="btnRename"></label>
|
|
<div class="col-md-8">
|
|
<button id="btnRename" name="btnRename" class="btn btn-info" onclick="askForNewName(event)">Rename</button>
|
|
<button id="btnDelete" name="btnDelete" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
<form class="form-horizontal" action="/enroll">
|
|
<fieldset>
|
|
|
|
<!-- Form Name -->
|
|
<legend>Add/Replace fingerprint</legend>
|
|
|
|
<!-- Text input-->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label" for="newFingerprintId">Memory slot (1-200)</label>
|
|
<div class="col-md-4">
|
|
<input id="newFingerprintId" name="newFingerprintId" type="text" placeholder="1-200" class="form-control input-md" required="">
|
|
<small class="text-muted">The sensor has 200 memory slots available for storing fingerprints. The choosen slot number will also be used as an ID when matches are published by MQTT.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text input-->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label" for="newFingerprintName">Name</label>
|
|
<div class="col-md-4">
|
|
<input id="newFingerprintName" name="newFingerprintName" type="text" placeholder="(optional)" class="form-control input-md">
|
|
<small class="text-muted">Just for human readability you can additionally assign an name to your slot number. The name will also been published by MQTT.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label" for="startEnrollment"></label>
|
|
<div class="col-md-4">
|
|
<button id="startEnrollment" name="startEnrollment" class="btn btn-success">Start enrollment</button>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
<p></p>
|
|
<nav class="navbar navbar-default ">
|
|
<div class="container-fluid">
|
|
<p class="navbar-text">FingerprintDoorbell, Version %VERSIONINFO%</p>
|
|
</div>
|
|
</nav>
|
|
|
|
</body>
|
|
</html>
|