2016-07-17 08:27:59 +00:00
|
|
|
<?php define('__ROOT__', dirname(dirname(dirname(__FILE__))) );
|
|
|
|
|
require_once __ROOT__.'/manager/autoloader.php';
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
$_SESSION['history'] = [];
|
|
|
|
|
|
2016-07-17 08:27:59 +00:00
|
|
|
if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
|
2016-07-17 16:22:04 +00:00
|
|
|
$_COOKIE['mac_count'] = 10;
|
2016-07-17 08:27:59 +00:00
|
|
|
$_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');
|
|
|
|
|
}
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
?>
|
2016-07-18 08:28:18 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
<!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) -->
|
2016-07-17 16:22:04 +00:00
|
|
|
<style type='text/css'>
|
|
|
|
|
body{
|
|
|
|
|
background: #1c384b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: 'Roboto';
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#machine-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 40%;
|
|
|
|
|
left: 60%;
|
|
|
|
|
width: 20em;
|
|
|
|
|
height: 35em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 2px solid #1a1a1a;
|
|
|
|
|
box-shadow: 0 0 2em #172e3d;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #222;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#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;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 50% / 50%;
|
|
|
|
|
border: 2px solid #111;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: red;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 20%;
|
|
|
|
|
width: 20em;
|
|
|
|
|
height: 35em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack > .card{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 4em;
|
|
|
|
|
margin-bottom: .2em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
|
box-shadow: 0 2px 10px #111;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #eee;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
color: #333;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: 4em;
|
|
|
|
|
text-align: center;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transition: all .2s ease-in-out;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack > .card:hover{
|
|
|
|
|
background: #fff;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
#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{
|
2016-07-17 16:22:04 +00:00
|
|
|
position: absolute;
|
2016-07-18 08:28:18 +00:00
|
|
|
top: calc( 50% + 29em );
|
2016-07-17 16:22:04 +00:00
|
|
|
left: 60%;
|
|
|
|
|
padding: 1.5em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
|
border: 2px solid #fff;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #1ee18e;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
color: #fff;
|
|
|
|
|
font-weight: bold;
|
2016-07-18 08:28:18 +00:00
|
|
|
letter-spacing: .15em;
|
2016-07-17 16:22:04 +00:00
|
|
|
text-transform: uppercase;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transition: all .2s ease-in-out;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
#card-pass{
|
|
|
|
|
top: calc( 40% + 29em );
|
|
|
|
|
background: #3595ce;
|
|
|
|
|
}
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#sync-button:hover{
|
|
|
|
|
background: #1ac47c;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
#card-pass:hover{
|
|
|
|
|
background: #2d7dad;
|
|
|
|
|
}
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
</style>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<div id='machine-box'>
|
|
|
|
|
<div id='led'></div>
|
|
|
|
|
</div>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<div id='card-stack'>
|
2016-07-18 08:28:18 +00:00
|
|
|
<input id='add-card' placeholder='Code RFID' type='text'>
|
2016-07-17 16:22:04 +00:00
|
|
|
<div class='card'>AB-CD-EF-GH</div>
|
|
|
|
|
<div class='card'>12-CD-56-GH</div>
|
|
|
|
|
</div>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
<input type='button' id='card-pass' value='Passer la carte'>
|
2016-07-17 16:22:04 +00:00
|
|
|
<input type='button' id='sync-button' value='Synchronisation'>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 08:27:59 +00:00
|
|
|
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<script type='text/javascript'>
|
|
|
|
|
/* [0] Initialisation et éléments
|
|
|
|
|
=========================================================*/
|
2016-07-18 08:28:18 +00:00
|
|
|
/* (1) Etats du système */
|
|
|
|
|
var STATE = {
|
2016-07-17 16:22:04 +00:00
|
|
|
started: false,
|
|
|
|
|
signaled: false,
|
|
|
|
|
locked: false
|
|
|
|
|
};
|
|
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
/* (2) Elements du DOM */
|
2016-07-17 16:22:04 +00:00
|
|
|
var mBox = document.getElementById('machine-box');
|
|
|
|
|
var led = document.getElementById('led');
|
|
|
|
|
var cBox = document.getElementById('card-stack');
|
2016-07-18 08:28:18 +00:00
|
|
|
var cAdd = document.getElementById('add-card');
|
2016-07-17 16:22:04 +00:00
|
|
|
var sync = document.getElementById('sync-button');
|
2016-07-18 08:28:18 +00:00
|
|
|
var pass = document.getElementById('card-pass');
|
2016-07-17 16:22:04 +00:00
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
/* (3) Variables de suivi */
|
|
|
|
|
var card = null;
|
|
|
|
|
var lastCard = null;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* (4) Récupération des données de fonctionnement */
|
|
|
|
|
var api = new APIClass('/api/');
|
|
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
|
|
|
|
|
/* [1] Fonctions
|
|
|
|
|
=========================================================*/
|
2016-07-18 08:28:18 +00:00
|
|
|
/* (1) Gestion de mise à jour de la led en fonction de l'état
|
|
|
|
|
---------------------------------------------------------*/
|
|
|
|
|
function updateLed(){
|
|
|
|
|
/* (1) Si machine bloquée */
|
2016-07-17 16:22:04 +00:00
|
|
|
if( STATE.locked ){
|
|
|
|
|
STATE.started = false;
|
|
|
|
|
STATE.signaled = false;
|
2016-07-18 08:28:18 +00:00
|
|
|
led.style.background = '#f00';
|
2016-07-17 16:22:04 +00:00
|
|
|
}
|
|
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
/* (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';
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-18 08:28:18 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [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
|
|
|
|
|
=========================================================*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
