389 lines
9.5 KiB
PHP
389 lines
9.5 KiB
PHP
<?php define('__ROOT__', dirname(dirname(dirname(__FILE__))) );
|
|
require_once __ROOT__.'/manager/autoloader.php';
|
|
|
|
$_SESSION['history'] = [];
|
|
|
|
if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
|
|
$_COOKIE['mac_count'] = 10;
|
|
$_COOKIE['mac_password'] = 'macPassword';
|
|
|
|
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
|
setcookie('mac_password', $_COOKIE['mac_password'], time()+3600*24*365, '/');
|
|
|
|
header('Refresh: 0');
|
|
}
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Virtual Client</title>
|
|
|
|
|
|
<script type='text/javascript' src='/js/lib/reset.js' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
|
<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) -->
|
|
<script type='text/javascript' src='/js/lib/local-storage-interface.js' ></script> <!-- Interface pour le 'localStorage' -->
|
|
<script type='text/javascript' src='/test/client/lib.js' ></script> <!-- Dépendance Directe -->
|
|
<style type='text/css'>
|
|
body{
|
|
background: #1c384b;
|
|
font-size: 16px;
|
|
font-family: 'Roboto';
|
|
}
|
|
|
|
#machine-box{
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 60%;
|
|
width: 20em;
|
|
height: 35em;
|
|
|
|
border-radius: 10px;
|
|
border: 2px solid #1a1a1a;
|
|
box-shadow: 0 0 2em #172e3d;
|
|
|
|
background: #222;
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#machine-box > #led{
|
|
position: absolute;
|
|
top: calc( 20% - 1.5em/2 - 2px/2 );
|
|
left: calc( 75% - 1.5em/2 - 2px/2 );
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
|
|
border-radius: 50% / 50%;
|
|
border: 2px solid #111;
|
|
|
|
background: #000;
|
|
}
|
|
|
|
#machine-box > #r1,
|
|
#machine-box > #r2{
|
|
position: absolute;
|
|
top: calc( 25% - 3em/2 );
|
|
left: 100%;
|
|
width: 4em;
|
|
height: 3em;
|
|
|
|
background: #000;
|
|
|
|
color: #ccc;
|
|
text-align: center;
|
|
line-height: 3em;
|
|
}
|
|
#machine-box > #r2{
|
|
top: calc( 50% - 3em/2 );
|
|
}
|
|
|
|
|
|
#machine-box > #r1.active,
|
|
#machine-box > #r2.active{
|
|
font-weight: bold;
|
|
color: #18eea9;
|
|
}
|
|
|
|
#card-stack{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20%;
|
|
width: 20em;
|
|
height: 35em;
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
#card-stack > .card{
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 4em;
|
|
margin-bottom: .2em;
|
|
|
|
border-radius: 10px 10px 0 0;
|
|
box-shadow: 0 2px 10px #111;
|
|
|
|
background: #eee;
|
|
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 4em;
|
|
text-align: center;
|
|
|
|
transition: all .2s ease-in-out;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#card-stack > .card:hover{
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
#card-stack > .card.active{
|
|
background: #aaa;
|
|
color: #000;
|
|
}
|
|
|
|
#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( 50% + 29em );
|
|
left: 60%;
|
|
padding: 1.5em;
|
|
|
|
border-radius: 3px;
|
|
border: 2px solid #fff;
|
|
|
|
background: #1ee18e;
|
|
|
|
color: #fff;
|
|
font-weight: bold;
|
|
letter-spacing: .15em;
|
|
text-transform: uppercase;
|
|
|
|
transition: all .2s ease-in-out;
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#card-pass{
|
|
top: calc( 40% + 29em );
|
|
background: #3595ce;
|
|
}
|
|
|
|
#sync-button:hover{
|
|
background: #1ac47c;
|
|
}
|
|
|
|
#card-pass:hover{
|
|
background: #2d7dad;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div id='machine-box'>
|
|
<div id='led'></div>
|
|
<div id='r1'>r1</div>
|
|
<div id='r2'>r2</div>
|
|
</div>
|
|
|
|
|
|
<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'>
|
|
|
|
|
|
|
|
|
|
<script type='text/javascript'>
|
|
/* [0] Initialisation et éléments
|
|
=========================================================*/
|
|
/* (1) Etats du système */
|
|
var STATE = [ 0, 0, 0 ];
|
|
|
|
/* (2) Elements du DOM */
|
|
var mBox = document.getElementById('machine-box');
|
|
var led = document.getElementById('led');
|
|
var r1 = document.getElementById('r1');
|
|
var r2 = document.getElementById('r2');
|
|
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;
|
|
var lsi = new localStorageInterface();
|
|
lsi.createDataset('STATES.CNF' );
|
|
lsi.createDataset('ACTIONS.CNF');
|
|
lsi.createDataset('CHIPS.CNF');
|
|
lsi.createDataset('USERS.CNF' );
|
|
lsi.createDataset('SERVER.CNF' );
|
|
lsi.createDataset('HISTORY.LOG');
|
|
lsi.createDataset('STATES.LOG' );
|
|
|
|
/* (4) Récupération des données de fonctionnement */
|
|
var api = new APIClass('/api/');
|
|
|
|
api.send({path: 'machineDefault/init'}, function(response){
|
|
lsi.import('ACTIONS.CNF', response.actions);
|
|
lsi.import('STATES.CNF', response.states);
|
|
lsi.import('CHIPS.CNF', response.chips);
|
|
});
|
|
|
|
/* (5) On initialise la carte + les puces */
|
|
var board = new Board(50);
|
|
|
|
var CHIP = {
|
|
led: new LedInterface( new Chip('serial', [1, 2, 3]), led ),
|
|
r1: new RelayInterface( new Chip('serial', [4]), r1 ),
|
|
r2: new RelayInterface( new Chip('serial', [5]), r2 )
|
|
};
|
|
|
|
var chipList = Object.keys(CHIP);
|
|
|
|
// Branchement des puces
|
|
for( var i = 0 ; i < chipList.length ; i++ )
|
|
board.plug( CHIP[chipList[i]] );
|
|
|
|
|
|
/* [1] Fonctions
|
|
=========================================================*/
|
|
/* (1) Gestion de mise à jour de la led en fonction de l'état
|
|
---------------------------------------------------------*/
|
|
function updateChips(){
|
|
var STATES = lsi.export('STATES.CNF');
|
|
var CHIPS = lsi.export('CHIPS.CNF');
|
|
|
|
/* (1) On vérifie quel état correspond */
|
|
for( var s in STATES ){
|
|
|
|
/* (2) Si l'état correspond */
|
|
if( previous(STATES[s].global_state, STATE) ){
|
|
|
|
console.log('STATE', STATE.join(''), 'matches', STATES[s].global_state);
|
|
|
|
/* (3) On applique l'état à chaque CHIP */
|
|
for( var c in CHIPS ){
|
|
|
|
/* (4) Si la puce a bien cet été de défini */
|
|
if( !CHIPS[c].states.hasOwnProperty(STATES[s].chips[c]) )
|
|
break;
|
|
|
|
/* (5) On récupère les PIN + les VALUES */
|
|
var pins = CHIPS[c].pins;
|
|
var values = CHIPS[c].states[STATES[s].chips[c]];
|
|
|
|
/* (6) On applique les valeurs */
|
|
for( var p in pins ){
|
|
board.set( parseInt(pins[p]), parseInt(values[p]) );
|
|
console.log('board.set(', parseInt(pins[p]), ',', parseInt(values[p]), ');');
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [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;
|
|
|
|
var allCards = document.querySelectorAll('#card-stack .card');
|
|
for( var i = 0 ; i < allCards.length ; i++ )
|
|
allCards[i].remClass('active');
|
|
|
|
e.target.addClass('active');
|
|
}
|
|
}, false);
|
|
card = document.querySelector('#card-stack .card').innerHTML;
|
|
document.querySelector('#card-stack .card').addClass('active');
|
|
|
|
/* [4] Passage de carte
|
|
=========================================================*/
|
|
var INTERVAL = null;
|
|
var COUNT = 0;
|
|
var ACTIONS = lsi.export('ACTIONS.CNF');
|
|
|
|
/* (0) Routine de comptage de temps
|
|
---------------------------------------------------------*/
|
|
function countRoutine(){
|
|
/* (1) Si le TIMEOUT actuel n'est pas défini, on quitte */
|
|
var exists = false;
|
|
for( var t in Object.keys(ACTIONS) )
|
|
if( t == COUNT ) exists = true;
|
|
|
|
// Si aucune action pour ce timeout, on quitte
|
|
if( !exists ) return;
|
|
|
|
/* (2) Pour chaque action de ce timeout */
|
|
for( var a in Object.keys(ACTIONS[COUNT]) ){
|
|
|
|
/* (3) Si la condition est correcte, On applique la modification de l'état */
|
|
if( previous(ACTIONS[COUNT][a].previous, STATE) ){
|
|
action(ACTIONS[COUNT][a].action, STATE);
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
updateChips();
|
|
COUNT++;
|
|
}
|
|
|
|
/* (1) Appui carte
|
|
---------------------------------------------------------*/
|
|
pass.addEventListener('mousedown', function(e){
|
|
COUNT = 0;
|
|
|
|
countRoutine();
|
|
INTERVAL = setInterval( countRoutine, 1000 );
|
|
|
|
}, false);
|
|
|
|
/* (2) Levé carte
|
|
---------------------------------------------------------*/
|
|
window.addEventListener('mouseup', function(e){
|
|
clearInterval(INTERVAL);
|
|
}, false);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|