minmod
This commit is contained in:
xdrm-brackets
parent
c2920a907c
commit
cb98676365
|
|
@ -14,6 +14,11 @@
|
|||
}
|
||||
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -25,7 +30,6 @@
|
|||
<script type='text/javascript' src='/js/lib/api.js' ></script> <!-- Gestion des transactions avec le serveur -->
|
||||
<script type='text/javascript' src='/js/lib/page-manager.js' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
||||
<script type='text/javascript' src='/js/lib/form-deflater.js' ></script> <!-- Gestion des formulaires (Object) -->
|
||||
|
||||
<style type='text/css'>
|
||||
body{
|
||||
background: #1c384b;
|
||||
|
|
@ -101,9 +105,24 @@
|
|||
color: #000;
|
||||
}
|
||||
|
||||
#sync-button{
|
||||
#card-stack > input{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: calc( 100% - 1em*2 );
|
||||
height: calc( 3em - 1em*2 );
|
||||
padding: 1em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
#sync-button,
|
||||
#card-pass{
|
||||
position: absolute;
|
||||
top: calc( 40% + 29em );
|
||||
top: calc( 50% + 29em );
|
||||
left: 60%;
|
||||
padding: 1.5em;
|
||||
|
||||
|
|
@ -114,7 +133,7 @@
|
|||
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: .1em;
|
||||
letter-spacing: .15em;
|
||||
text-transform: uppercase;
|
||||
|
||||
transition: all .2s ease-in-out;
|
||||
|
|
@ -124,10 +143,19 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#card-pass{
|
||||
top: calc( 40% + 29em );
|
||||
background: #3595ce;
|
||||
}
|
||||
|
||||
#sync-button:hover{
|
||||
background: #1ac47c;
|
||||
}
|
||||
|
||||
#card-pass:hover{
|
||||
background: #2d7dad;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -141,11 +169,13 @@
|
|||
|
||||
|
||||
<div id='card-stack'>
|
||||
<input id='add-card' placeholder='Code RFID' type='text'>
|
||||
<div class='card'>AB-CD-EF-GH</div>
|
||||
<div class='card'>12-CD-56-GH</div>
|
||||
</div>
|
||||
|
||||
|
||||
<input type='button' id='card-pass' value='Passer la carte'>
|
||||
<input type='button' id='sync-button' value='Synchronisation'>
|
||||
|
||||
|
||||
|
|
@ -154,30 +184,83 @@
|
|||
<script type='text/javascript'>
|
||||
/* [0] Initialisation et éléments
|
||||
=========================================================*/
|
||||
var STATES = {
|
||||
/* (1) Etats du système */
|
||||
var STATE = {
|
||||
started: false,
|
||||
signaled: false,
|
||||
locked: false
|
||||
};
|
||||
|
||||
|
||||
/* (2) Elements du DOM */
|
||||
var mBox = document.getElementById('machine-box');
|
||||
var led = document.getElementById('led');
|
||||
var cBox = document.getElementById('card-stack');
|
||||
var cAdd = document.getElementById('add-card');
|
||||
var sync = document.getElementById('sync-button');
|
||||
var pass = document.getElementById('card-pass');
|
||||
|
||||
/* (3) Variables de suivi */
|
||||
var card = null;
|
||||
var lastCard = null;
|
||||
|
||||
|
||||
/* (4) Récupération des données de fonctionnement */
|
||||
var api = new APIClass('/api/');
|
||||
|
||||
|
||||
|
||||
/* [1] Fonctions
|
||||
=========================================================*/
|
||||
function update(){
|
||||
/* (1) Gestion de mise à jour de la led en fonction de l'état
|
||||
---------------------------------------------------------*/
|
||||
function updateLed(){
|
||||
/* (1) Si machine bloquée */
|
||||
if( STATE.locked ){
|
||||
STATE.started = false;
|
||||
STATE.signaled = false;
|
||||
led.style.background = '#ff0000';
|
||||
led.style.background = '#f00';
|
||||
}
|
||||
|
||||
/* (2) Si machine allumée */
|
||||
else if( STATE.started ){
|
||||
|
||||
// {1} Allumée + signalée //
|
||||
if( STATE.signaled )
|
||||
led.style.background = '#00f';
|
||||
|
||||
// {2} Allumée (non signalée) //
|
||||
else
|
||||
led.style.background = '#0f0';
|
||||
|
||||
}else
|
||||
led.style.background = '#000';
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* [2] Gestion de l'ajout de carte
|
||||
=========================================================*/
|
||||
cAdd.addEventListener('keyup', function(e){
|
||||
if( e.keyCode == 13 ) cBox.innerHTML += "<div class='card'>"+e.target.value+"</div>";
|
||||
}, false);
|
||||
|
||||
/* [3] Gestion de la sélection de carte
|
||||
=========================================================*/
|
||||
cBox.addEventListener('click', function(e){
|
||||
if( e.target.className == 'card' ){
|
||||
lastCard = card;
|
||||
card = e.target.innerHTML;
|
||||
}
|
||||
}, false);
|
||||
card = document.querySelector('#card-stack .card').innerHTML;
|
||||
|
||||
/* [4] Passage de carte
|
||||
=========================================================*/
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue