Added vignettes for machine states (back part to do)

build/viewer/view/machine/view.php

@@ -40,6 +40,10 @@
 				return $answer->get('machines');
 			}));
 			
+			$twig->addFunction(new \Twig_Function('f_getstate', function(){
+				return 'detached';
+			}));
+
 			$twig->addFunction(new \Twig_Function('f_clusters', function($id_machine){
 				$request = new Request('machineDefault/getClusters', [
 					'id_machine' => (int) $id_machine

build/viewer/view/machine/view.twig

@@ -3,6 +3,7 @@
 {% for machine in f_machines() %}
 	<article class='inline-box' id='{{ machine.id_machine }}'>
 
+		<span class='state' data-state='{{ f_getstate(machine.id_machine) }}'></span>
 		<span class='title' style='color: {{ p_theme }}'>{{ machine.name }} <span>#{{ machine.name }}</span></span>
 		<span class='link_remove' data-machine='{{ machine.id_machine }}'>{{ p_icon.remove | raw }}</span>
 

public_html/css/container.scss

@@ -110,6 +110,27 @@
 				}
 			}
 
+			/* (0) Etat des machines */
+			.state{
+				display: inline-block;
+
+				width: .7em;
+				height: .7em;
+
+				margin-right: .3em;
+
+				border-radius: 50% / 50%;
+				
+				background-color: #ddd;
+
+				&[data-state='stop']{ background-color: #ddd; }
+				&[data-state='start']{ background-color: #22E07B; }
+				&[data-state='signaled']{ background-color: #3897D6; }
+				&[data-state='locked']{ background-color: #EA460A; }
+				&[data-state='detached']{ background-color: #AB1EE2; }
+
+			}
+
 			/* (1) Titre de l'element */
 			.title{
 				display: inline-block;