348 lines
7.9 KiB
PHP
348 lines
7.9 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' -->
|
|
<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 = [ false, false, false ];
|
|
|
|
/* (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('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);
|
|
});
|
|
|
|
|
|
/* [1] Fonctions
|
|
=========================================================*/
|
|
/* (1) Gestion de mise à jour de la led en fonction de l'état
|
|
---------------------------------------------------------*/
|
|
function updateChips(){
|
|
/* (1) Si machine bloquée */
|
|
if( STATE[2] ){
|
|
STATE[0] = false;
|
|
STATE[1] = false;
|
|
led.style.background = '#f00';
|
|
}
|
|
|
|
/* (2) Si machine allumée */
|
|
else if( STATE[0] ){
|
|
|
|
// {1} Allumée + signalée //
|
|
if( STATE[1] )
|
|
led.style.background = '#00f';
|
|
|
|
// {2} Allumée (non signalée) //
|
|
else
|
|
led.style.background = '#0f0';
|
|
|
|
}else
|
|
led.style.background = '#000';
|
|
|
|
if( STATE[0] == true )
|
|
r1.addClass('active');
|
|
else
|
|
r1.remClass('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* [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;
|
|
|
|
/* (0) Routine de comptage de temps
|
|
---------------------------------------------------------*/
|
|
function countRoutine(){
|
|
COUNT++;
|
|
|
|
if( COUNT == 1 ) STATE[0] = !STATE[0];
|
|
if( COUNT == 2 ) STATE[1] = true;
|
|
if( COUNT == 3 ) STATE[2] = true;
|
|
|
|
updateChips();
|
|
}
|
|
|
|
/* (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>
|