logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minmod

This commit is contained in:
xdrm-brackets 2016-07-18 10:28:18 +02:00
parent c2920a907c
commit cb98676365
1 changed files with 91 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
test/client/interface.php
View File

@ -14,6 +14,11 @@
} }
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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/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/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) --> <script type='text/javascript' src='/js/lib/form-deflater.js' ></script> <!-- Gestion des formulaires (Object) -->
<style type='text/css'> <style type='text/css'>
body{ body{
background: #1c384b; background: #1c384b;
@ -101,9 +105,24 @@
color: #000; 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; position: absolute;
top: calc( 40% + 29em ); top: calc( 50% + 29em );
left: 60%; left: 60%;
padding: 1.5em; padding: 1.5em;
@ -114,7 +133,7 @@
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
letter-spacing: .1em; letter-spacing: .15em;
text-transform: uppercase; text-transform: uppercase;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
@ -124,10 +143,19 @@
cursor: pointer; cursor: pointer;
} }
#card-pass{
top: calc( 40% + 29em );
background: #3595ce;
}
#sync-button:hover{ #sync-button:hover{
background: #1ac47c; background: #1ac47c;
} }
#card-pass:hover{
background: #2d7dad;
}
</style> </style>
@ -141,11 +169,13 @@
<div id='card-stack'> <div id='card-stack'>
<input id='add-card' placeholder='Code RFID' type='text'>
<div class='card'>AB-CD-EF-GH</div> <div class='card'>AB-CD-EF-GH</div>
<div class='card'>12-CD-56-GH</div> <div class='card'>12-CD-56-GH</div>
</div> </div>
<input type='button' id='card-pass' value='Passer la carte'>
<input type='button' id='sync-button' value='Synchronisation'> <input type='button' id='sync-button' value='Synchronisation'>
@ -154,30 +184,83 @@
<script type='text/javascript'> <script type='text/javascript'>
/* [0] Initialisation et éléments /* [0] Initialisation et éléments
=========================================================*/ =========================================================*/
var STATES = { /* (1) Etats du système */
var STATE = {
started: false, started: false,
signaled: false, signaled: false,
locked: false locked: false
}; };
/* (2) Elements du DOM */
var mBox = document.getElementById('machine-box'); var mBox = document.getElementById('machine-box');
var led = document.getElementById('led'); var led = document.getElementById('led');
var cBox = document.getElementById('card-stack'); var cBox = document.getElementById('card-stack');
var cAdd = document.getElementById('add-card');
var sync = document.getElementById('sync-button'); 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 /* [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 ){ if( STATE.locked ){
STATE.started = false; STATE.started = false;
STATE.signaled = 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> </script>
</body> </body>
</html> </html>