From c2920a907c039a769f939dd5d356799f63a180ec Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sun, 17 Jul 2016 18:22:04 +0200
Subject: [PATCH] Graphismes client virtuel

---
 test/client/background.php |  20 ++-
 test/client/interface.php  | 278 +++++++++++++++++++------------------
 2 files changed, 154 insertions(+), 144 deletions(-)

diff --git a/test/client/background.php b/test/client/background.php
index f8d05c6..f7e1811 100644
--- a/test/client/background.php
+++ b/test/client/background.php
@@ -53,9 +53,14 @@
 				'@data'      => json_encode( $_SESSION['history'] ),
 				'@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{
 
@@ -64,17 +69,20 @@
 				'@token'     => $token,
 				'@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 = [
 			'response' => $parsedResponse,
-			'pwd'    => $_COOKIE['mac_password'],
 			'count'  => $_COOKIE['mac_count'],
 			'token'  => $token,
 			'status' => $parsedResponse['ModuleError'],
diff --git a/test/client/interface.php b/test/client/interface.php
index 80fe77d..9042584 100644
--- a/test/client/interface.php
+++ b/test/client/interface.php
@@ -4,7 +4,7 @@
 	$_SESSION['history'] = [];
 
 	if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
-		$_COOKIE['mac_count']    = 9;
+		$_COOKIE['mac_count']    = 10;
 		$_COOKIE['mac_password'] = 'macPassword';
 
 		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/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)         -->
+
+		<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>
 	<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'>
-			/* (0) Initialisation des éléments du DOM */
-			var tCode      = document.querySelector('input[data-name="user-code"]');
-
-			var bStartStop = document.querySelector('input[data-name="start-stop"]');
-			var bSignal    = document.querySelector('input[data-name="signal"]');
-			var bLock      = document.querySelector('input[data-name="lock"]');
-			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;
+			/* [0] Initialisation et éléments
+			=========================================================*/
+			var STATES = {
+				started: false,
+				signaled: false,
+				locked: false
+			};
 
 
-				var data = FD.deflate();
-
-				var req = {
-					'code'   : data['user-code'],
-					'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);
-				});
+			var mBox = document.getElementById('machine-box');
+			var led  = document.getElementById('led');
+			var cBox = document.getElementById('card-stack');
+			var sync = document.getElementById('sync-button');
 
 
-			}, false);
+			/* [1] Fonctions
+			=========================================================*/
+			function update(){
+				if( STATE.locked ){
+					STATE.started  = false;
+					STATE.signaled = false;
+					led.style.background = '#ff0000';
+				}
+
+			}
 
 		</script>
 	</body>