Graphismes client virtuel
This commit is contained in:
xdrm-brackets
parent
8ae0e6f904
commit
c2920a907c
|
|
@ -53,9 +53,14 @@
|
||||||
'@data' => json_encode( $_SESSION['history'] ),
|
'@data' => json_encode( $_SESSION['history'] ),
|
||||||
'@renew' => sessionManager::secure_hash( $_COOKIE['mac_password'], 10)
|
'@renew' => sessionManager::secure_hash( $_COOKIE['mac_password'], 10)
|
||||||
]);
|
]);
|
||||||
|
$parsedResponse = json_decode( $response, true );
|
||||||
|
|
||||||
$_COOKIE['mac_count'] = 9;
|
|
||||||
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
// On change les données locales uniquement si on a une réponse positive
|
||||||
|
if( $parsedResponse['ModuleError'] == 0 ){
|
||||||
|
$_COOKIE['mac_count'] = 9;
|
||||||
|
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
||||||
|
}
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
|
||||||
|
|
@ -64,17 +69,20 @@
|
||||||
'@token' => $token,
|
'@token' => $token,
|
||||||
'@data' => json_encode( $_SESSION['history'] )
|
'@data' => json_encode( $_SESSION['history'] )
|
||||||
]);
|
]);
|
||||||
|
$parsedResponse = json_decode( $response, true );
|
||||||
|
|
||||||
$_COOKIE['mac_count']--;
|
|
||||||
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
// On change les données locales uniquement si on a une réponse positive
|
||||||
|
if( $parsedResponse['ModuleError'] == 0 ){
|
||||||
|
$_COOKIE['mac_count']--;
|
||||||
|
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$parsedResponse = json_decode( $response, true );
|
|
||||||
|
|
||||||
$toReturn = [
|
$toReturn = [
|
||||||
'response' => $parsedResponse,
|
'response' => $parsedResponse,
|
||||||
'pwd' => $_COOKIE['mac_password'],
|
|
||||||
'count' => $_COOKIE['mac_count'],
|
'count' => $_COOKIE['mac_count'],
|
||||||
'token' => $token,
|
'token' => $token,
|
||||||
'status' => $parsedResponse['ModuleError'],
|
'status' => $parsedResponse['ModuleError'],
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
$_SESSION['history'] = [];
|
$_SESSION['history'] = [];
|
||||||
|
|
||||||
if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
|
if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
|
||||||
$_COOKIE['mac_count'] = 9;
|
$_COOKIE['mac_count'] = 10;
|
||||||
$_COOKIE['mac_password'] = 'macPassword';
|
$_COOKIE['mac_password'] = 'macPassword';
|
||||||
|
|
||||||
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
||||||
|
|
@ -25,156 +25,158 @@
|
||||||
<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'>
|
||||||
|
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: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sync-button{
|
||||||
|
position: absolute;
|
||||||
|
top: calc( 40% + 29em );
|
||||||
|
left: 60%;
|
||||||
|
padding: 1.5em;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
|
||||||
|
background: #1ee18e;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sync-button:hover{
|
||||||
|
background: #1ac47c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<input type='text' data-name='user-code' placeholder='Code RFID utilisateur'><br><br>
|
|
||||||
|
|
||||||
<br><br>
|
<div id='machine-box'>
|
||||||
|
<div id='led'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id='card-stack'>
|
||||||
|
<div class='card'>AB-CD-EF-GH</div>
|
||||||
|
<div class='card'>12-CD-56-GH</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<input type='button' id='sync-button' value='Synchronisation'>
|
||||||
|
|
||||||
<input type='button' data-name='start-stop' value='Start/Stop'><br><br>
|
|
||||||
<input type='button' data-name='signal' value='Signaler' ><br><br>
|
|
||||||
<input type='button' data-name='lock' value='Bloquer' ><br><br>
|
|
||||||
<input type='button' data-name='unlock' value='Débloquer' ><br><br>
|
|
||||||
<input type='button' data-name='sync' value='Synchroniser'><br><br>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
<span id='cookie-box'>
|
|
||||||
<?= $_COOKIE['mac_password']; ?>
|
|
||||||
<br>
|
|
||||||
<?= $_COOKIE['mac_count']; ?>
|
|
||||||
</span><br><br>
|
|
||||||
<hr>
|
|
||||||
<span id='status-box'></span><br><br>
|
|
||||||
<hr>
|
|
||||||
<span id='history-box'></span><br><br>
|
|
||||||
|
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
/* (0) Initialisation des éléments du DOM */
|
/* [0] Initialisation et éléments
|
||||||
var tCode = document.querySelector('input[data-name="user-code"]');
|
=========================================================*/
|
||||||
|
var STATES = {
|
||||||
var bStartStop = document.querySelector('input[data-name="start-stop"]');
|
started: false,
|
||||||
var bSignal = document.querySelector('input[data-name="signal"]');
|
signaled: false,
|
||||||
var bLock = document.querySelector('input[data-name="lock"]');
|
locked: false
|
||||||
var bUnlock = document.querySelector('input[data-name="unlock"]');
|
};
|
||||||
var bSync = document.querySelector('input[data-name="sync"]');
|
|
||||||
|
|
||||||
var cBox = document.querySelector('#cookie-box');
|
|
||||||
var sBox = document.querySelector('#status-box');
|
|
||||||
var hBox = document.querySelector('#history-box');
|
|
||||||
|
|
||||||
var FD = new FormDeflater(document.body, ['input'], ['data-name']);
|
|
||||||
|
|
||||||
var selfApi = new APIClass('/test/client/background.php');
|
|
||||||
var remoteApi = new APIClass('/api/');
|
|
||||||
|
|
||||||
var state = false;
|
|
||||||
var locked = false;
|
|
||||||
var signaled = false;
|
|
||||||
|
|
||||||
/* (1) Gestion du StartStop */
|
|
||||||
bStartStop.addEventListener('click', function(e){
|
|
||||||
if( locked ) return;
|
|
||||||
|
|
||||||
var data = FD.deflate();
|
|
||||||
|
|
||||||
var req = {
|
|
||||||
'code' : data['user-code'],
|
|
||||||
'action' : state ? 'stop' : 'start'
|
|
||||||
};
|
|
||||||
|
|
||||||
state = !state;
|
|
||||||
|
|
||||||
selfApi.send(req, function(res){
|
|
||||||
hBox.innerHTML = res.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
sBox.innerHTML = '- bloqué : '+locked+'<br> - signalé : '+signaled+'<br> - en marche : '+state;
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
/* (2) Gestion du Signalement */
|
|
||||||
bSignal.addEventListener('click', function(e){
|
|
||||||
if( locked || signaled ) return;
|
|
||||||
|
|
||||||
var data = FD.deflate();
|
|
||||||
|
|
||||||
var req = {
|
|
||||||
'code' : data['user-code'],
|
|
||||||
'action' : 'signal'
|
|
||||||
};
|
|
||||||
|
|
||||||
selfApi.send(req, function(res){
|
|
||||||
hBox.innerHTML = res.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
signaled = true;
|
|
||||||
|
|
||||||
sBox.innerHTML = '- bloqué : '+locked+'<br> - signalé : '+signaled+'<br> - en marche : '+state;
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
/* (3) Gestion du blocage */
|
|
||||||
bLock.addEventListener('click', function(e){
|
|
||||||
if( locked ) return;
|
|
||||||
|
|
||||||
var data = FD.deflate();
|
|
||||||
|
|
||||||
var req = {
|
|
||||||
'code' : data['user-code'],
|
|
||||||
'action' : 'lock'
|
|
||||||
};
|
|
||||||
|
|
||||||
selfApi.send(req, function(res){
|
|
||||||
hBox.innerHTML = res.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
locked = true;
|
|
||||||
state = false;
|
|
||||||
signaled = false;
|
|
||||||
|
|
||||||
sBox.innerHTML = '- bloqué : '+locked+'<br> - signalé : '+signaled+'<br> - en marche : '+state;
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
/* (4) Gestion du déblocage */
|
|
||||||
bUnlock.addEventListener('click', function(e){
|
|
||||||
if( !locked && !signaled ) return;
|
|
||||||
|
|
||||||
|
|
||||||
var data = FD.deflate();
|
var mBox = document.getElementById('machine-box');
|
||||||
|
var led = document.getElementById('led');
|
||||||
var req = {
|
var cBox = document.getElementById('card-stack');
|
||||||
'code' : data['user-code'],
|
var sync = document.getElementById('sync-button');
|
||||||
'action' : 'unlock'
|
|
||||||
};
|
|
||||||
|
|
||||||
selfApi.send(req, function(res){
|
|
||||||
hBox.innerHTML = res.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
locked = false;
|
|
||||||
state = false;
|
|
||||||
signaled = false;
|
|
||||||
|
|
||||||
sBox.innerHTML = '- bloqué : '+locked+'<br> - signalé : '+signaled+'<br> - en marche : '+state;
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
/* (5) Gestion de la synchro */
|
|
||||||
bSync.addEventListener('click', function(e){
|
|
||||||
var req = {
|
|
||||||
'sync' : null,
|
|
||||||
};
|
|
||||||
|
|
||||||
selfApi.send(req, function(res){
|
|
||||||
cBox.innerHTML = res.pwd+'<br>'+res.count;
|
|
||||||
console.log(res);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}, false);
|
/* [1] Fonctions
|
||||||
|
=========================================================*/
|
||||||
|
function update(){
|
||||||
|
if( STATE.locked ){
|
||||||
|
STATE.started = false;
|
||||||
|
STATE.signaled = false;
|
||||||
|
led.style.background = '#ff0000';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue