From bed52f01ac9f24c182e01908727387176257d6c9 Mon Sep 17 00:00:00 2001
From: Salvialf <jeuxalf@live.fr>
Date: Mon, 28 Jun 2021 15:53:36 +0200
Subject: [PATCH] new UI

---
 desktop/js/mode.js   |  74 ++++++++++++------------
 desktop/php/mode.php | 131 +++++++++++++++++++++++++++----------------
 2 files changed, 117 insertions(+), 88 deletions(-)

diff --git a/desktop/js/mode.js b/desktop/js/mode.js
index 77bb1e3..8c249bd 100644
--- a/desktop/js/mode.js
+++ b/desktop/js/mode.js
@@ -164,41 +164,34 @@ function addMode(_mode,_updateMode) {
   div += '<div class="panel-heading">';
   div += '<h3 class="panel-title">';
   div += '<a class="accordion-toggle" data-toggle="collapse" data-parent="#div_modes" href="#collapse' + random + '">';
-  div += '<span class="name">' + _mode.name + '</span>';
+  div += '<span class="name">{{Mode }}' + _mode.name + '</span>';
   div += '</a>';
   div += '</h3>';
   div += '</div>';
-  
+
   div += '<div id="collapse' + random + '" class="panel-collapse collapse in">';
   div += '<div class="panel-body">';
-  div += '<div class="well">';
-  
-  div += '<form class="form-horizontal" role="form">';
-  
-  div += '<div class="col-lg-4 col-sm-12 pull-right">';
+  div += '<form class="form-horizontal col-xs-12" role="form">';
+
+  div += '<div class="pull-right">';
   div += '<div class="input-group pull-right" style="display:inline-flex">';
   div += '<span class="input-group-btn">';
-  div += '<a class="btn btn-sm bt_removeMode btn-primary roundedLeft"><i class="fas fa-minus-circle"></i> {{Supprimer}}</a>';
-  div += '<a class="btn btn-sm bt_addInAction btn-success"><i class="fas fa-plus-circle"></i> {{Action d\'entrée}}</a>';
-  div += '<a class="btn btn-danger btn-sm bt_addOutAction"><i class="fas fa-plus-circle"></i> {{Action de sortie}}</a>';
+  div += '<a class="btn btn-sm btn-primary bt_addInAction roundedLeft"><i class="fas fa-plus-circle"></i> {{Action d\'entrée}}</a>';
+  div += '<a class="btn btn-sm btn-warning bt_addOutAction"><i class="fas fa-plus-circle"></i> {{Action de sortie}}</a>';
+  div += '<a class="btn btn-sm btn-danger bt_removeMode roundedRight"><i class="fas fa-minus-circle"></i> {{Supprimer}}</a>';
   div += '</span>';
   div += '</div>';
   div += '</div>';
-  
+
   div += '<div class="form-group">';
   div += '<div class="col-sm-2">';
-  div += '<label class="control-label" style="margin-right:7px">{{Nom}}</label>';
-  div += '<span class="modeAttr label label-info rename cursor" style="display:inline" data-l1key="name"></span>';
-  div += '</div>';
-  
-  div += '<div class="col-lg-2 col-sm-4">';
-  div += '<label class="control-label" style="margin-right:7px">{{Icône}}</label>';
-  div += '<a class="modeAction btn btn-default btn-sm" data-l1key="chooseIcon"><i class="fas fa-flag"></i> {{Icône}}</a>';
-  div += ' <span class="modeAttr label label-info cursor" data-l1key="icon" style="display:inline"></span>';
+  div += '<label class="control-label" style="margin-right:7px">{{Nom du mode}}<sup><i class="fas fa-question-circle tooltips" title="{{Cliquer sur le nom du mode pour le modifier}}"></i></sup></label>';
+  div += '<span class="modeAttr label label-info rename cursor" data-l1key="name"></span>';
   div += '</div>';
-  
+
   div += '<div class="col-sm-3">';
-  div += '<select class="modeAttr input-sm" data-l1key="modecolor">';
+  div += '<label class="control-label" style="margin-right:7px">{{Couleur du mode}}<sup><i class="fas fa-question-circle tooltips" title="{{Choisissez la couleur représentative de ce mode}}"></i></sup></label>';
+  div += '<select class="modeAttr input-sm" data-l1key="modecolor" style="max-width:150px;display:inline-block">';
   div += '<option value="default">{{Aucune}}</option>';
   div += '<option value="icon_blue">{{Bleu}}</option>';
   div += '<option value="icon_yellow">{{Jaune}}</option>';
@@ -207,18 +200,21 @@ function addMode(_mode,_updateMode) {
   div += '<option value="icon_green">{{Vert}}</option>';
   div += '</select>';
   div += '</div>';
-  
+
+  div += '<div class="col-sm-2">';
+  div += '<a class="modeAction btn btn-default btn-sm" data-l1key="chooseIcon"><i class="fas fa-flag"></i> {{Icône}}</a>';
+  div += ' <span class="modeAttr label label-info cursor" data-l1key="icon" ></span>';
   div += '</div>';
-  div += '<hr/>';
-  div += '<div class="div_inAction"></div>';
-  div += '<hr/>';
-  div += '<div class="div_outAction"></div>';
-  div += '</form>';
+
   div += '</div>';
+  div += '<br>';
+  div += '<div class="div_inAction col-lg-11" style="padding-bottom:10px;margin-bottom:10px;background-color:rgb(var(--bg-color));"><legend><i class="fas fa-sign-in-alt icon_blue"></i> {{Action(s) d\'entrée}}</legend></div>';
+  div += '<div class="div_outAction col-lg-11" style="padding-bottom:10px;margin-bottom:15px;background-color:rgb(var(--bg-color));"><legend><i class="fas fa-sign-out-alt icon_orange"></i> {{Action(s) de sortie}}</legend></div>';
+  div += '</form>';
   div += '</div>';
   div += '</div>';
   div += '</div>';
-  
+
   $('#div_modes').append(div);
   $('#div_modes .mode').last().setValues(_mode, '.modeAttr');
   if (is_array(_mode.inAction)) {
@@ -230,7 +226,7 @@ function addMode(_mode,_updateMode) {
       addAction(_mode.inAction[i], 'inAction', '{{Action d\'entrée}}', $('#div_modes .mode').last());
     }
   }
-  
+
   if (is_array(_mode.outAction)) {
     for (var i in _mode.outAction) {
       addAction(_mode.outAction[i], 'outAction', '{{Action de sortie}}', $('#div_modes .mode').last());
@@ -257,19 +253,18 @@ function addAction(_action, _type, _name, _el) {
   var button = 'btn-default';
   if (_type == 'outAction') {
     input = 'has-error';
-    button = 'btn-danger';
+    button = 'btn-warning';
   }
   if (_type == 'inAction') {
     input = 'has-success';
-    button = 'btn-success';
+    button = 'btn-primary';
   }
   var div = '<div class="' + _type + '">';
   div += '<div class="form-group ">';
-  div += '<label class="col-sm-1 control-label">' + _name + '</label>';
-  div += '<div class="col-sm-2  ' + input + '">';
-  div += '<input type="checkbox" class="expressionAttr" data-l1key="options" data-l2key="enable" checked title="{{Décocher pour désactiver l\'action}}" />';
-  div += '<input type="checkbox" class="expressionAttr" data-l1key="options" data-l2key="background" title="{{Cocher pour que la commande s\'exécute en parallèle des autres actions}}" />';
-  div += '<select class="expressionAttr form-control input-sm selectMode" data-l1key="onlyIfMode" style="width:calc(100% - 50px);display:inline-block" title="{{Entrée : Ne faire cette action que si l\'on vient du mode. Sortie : ne faire les actions que si on va sur le mode}}">';
+  div += '<div class="col-sm-2 ' + input +'" style="width:250px;">';
+  div += '<input type="checkbox" class="expressionAttr" data-l1key="options" data-l2key="enable" checked title="{{Décocher pour désactiver l\'action}}">';
+  div += '<input type="checkbox" class="expressionAttr" data-l1key="options" data-l2key="background" title="{{Cocher pour que la commande s\'exécute en parallèle des autres actions}}">';
+  div += '<select class="expressionAttr form-control input-sm selectMode" data-l1key="onlyIfMode" style="max-width:170px;display:inline-block" title="{{Entrée : Ne faire cette action que si l\'on vient du mode. Sortie : ne faire les actions que si on va sur le mode}}">';
   div += '<option value="all">{{Tous les modes}}</option>';
   if(MODE_LIST != null){
     for(var i in MODE_LIST){
@@ -285,17 +280,17 @@ function addAction(_action, _type, _name, _el) {
   div += '<div class="col-sm-4 ' + input + '">';
   div += '<div class="input-group">';
   div += '<span class="input-group-btn">';
-  div += '<a class="btn btn-default bt_removeAction btn-sm" data-type="' + _type + '"><i class="fas fa-minus-circle"></i></a>';
+  div += '<a class="btn btn-default bt_removeAction btn-sm roundedLeft" data-type="' + _type + '"><i class="fas fa-minus-circle"></i></a>';
   div += '</span>';
   div += '<input class="expressionAttr form-control input-sm cmdAction" data-l1key="cmd" data-type="' + _type + '" />';
   div += '<span class="input-group-btn">';
   div += '<a class="btn ' + button + ' btn-sm listAction" data-type="' + _type + '" title="{{Sélectionner un mot-clé}}"><i class="fas fa-tasks"></i></a>';
-  div += '<a class="btn ' + button + ' btn-sm listCmdAction" data-type="' + _type + '"><i class="fas fa-list-alt"></i></a>';
+  div += '<a class="btn ' + button + ' btn-sm listCmdAction roundedRight" data-type="' + _type + '" title="{{Sélectionner une commande}}"><i class="fas fa-list-alt"></i></a>';
   div += '</span>';
   div += '</div>';
   div += '</div>';
   var actionOption_id = uniqId();
-  div += '<div class="col-sm-5 actionOptions" id="'+actionOption_id+'">';
+  div += '<div class="col-sm-6 actionOptions" id="'+actionOption_id+'">';
   div += '</div>';
   div += '</div>';
   if (isset(_el)) {
@@ -313,6 +308,7 @@ function addAction(_action, _type, _name, _el) {
     });
   }
 }
+
 function updateSelectMode(_convert){
   $('select.selectMode').each(function () {
     var value = $(this).val();
diff --git a/desktop/php/mode.php b/desktop/php/mode.php
index 9da09a9..b8e4f71 100644
--- a/desktop/php/mode.php
+++ b/desktop/php/mode.php
@@ -18,25 +18,37 @@
 			</div>
 		</div>
 		<legend><i class="fas fa-th-large"></i> {{Mes Modes}}</legend>
-		<input class="form-control" placeholder="{{Rechercher}}" id="in_searchEqlogic" />
-		<div class="eqLogicThumbnailContainer">
-			<?php
+		<?php
+		if (count($eqLogics) == 0) {
+			echo '<br/><div class="text-center" style="font-size:1.2em;font-weight:bold;">{{Aucun mode n\'est paramétré, cliquer sur "Ajouter" pour commencer}}</div>';
+		} else {
+			echo '<div class="input-group" style="margin:5px;">';
+			echo '<input class="form-control roundedLeft" placeholder="{{Rechercher}}" id="in_searchEqlogic"/>';
+			echo '<div class="input-group-btn">';
+			echo '<a id="bt_resetSearch" class="btn roundedRight" style="width:30px"><i class="fas fa-times"></i></a>';
+			echo '</div>';
+			echo '</div>';
+			echo '<div class="eqLogicThumbnailContainer">';
 			foreach ($eqLogics as $eqLogic) {
 				$opacity = ($eqLogic->getIsEnable()) ? '' : 'disableCard';
 				echo '<div class="eqLogicDisplayCard cursor '.$opacity.'" data-eqLogic_id="' . $eqLogic->getId() . '">';
 				echo '<img src="' . $plugin->getPathImgIcon() . '"/>';
-				echo '<br/>';
+				echo '<br>';
 				echo '<span class="name">' . $eqLogic->getHumanName(true, true) . '</span>';
 				echo '</div>';
 			}
-			?>
-		</div>
+			echo '</div>';
+		}
+		?>
 	</div>
-	
+
 	<div class="col-xs-12 eqLogic" style="display: none;">
 		<div class="input-group pull-right" style="display:inline-flex">
 			<span class="input-group-btn">
-				<a class="btn btn-default btn-sm eqLogicAction roundedLeft" data-action="configure"><i class="fas fa-cogs"></i> {{Configuration avancée}}</a><a class="btn btn-default btn-sm eqLogicAction" data-action="copy"><i class="fas fa-copy"></i> {{Dupliquer}}</a><a class="btn btn-sm btn-success eqLogicAction" data-action="save"><i class="fas fa-check-circle"></i> {{Sauvegarder}}</a><a class="btn btn-danger btn-sm eqLogicAction roundedRight" data-action="remove"><i class="fas fa-minus-circle"></i> {{Supprimer}}</a>
+				<a class="btn btn-default btn-sm eqLogicAction roundedLeft" data-action="configure"><i class="fas fa-cogs"></i><span class="hidden-xs"> {{Configuration avancée}}</span>
+				</a><a class="btn btn-default btn-sm eqLogicAction" data-action="copy"><i class="fas fa-copy"></i><span class="hidden-xs"> {{Dupliquer}}</span>
+				</a><a class="btn btn-sm btn-success eqLogicAction" data-action="save"><i class="fas fa-check-circle"></i> {{Sauvegarder}}
+				</a><a class="btn btn-danger btn-sm eqLogicAction roundedRight" data-action="remove"><i class="fas fa-minus-circle"></i> {{Supprimer}}</a>
 			</span>
 		</div>
 		<ul class="nav nav-tabs" role="tablist">
@@ -44,65 +56,86 @@
 			<li role="presentation" class="active"><a href="#eqlogictab" aria-controls="home" role="tab" data-toggle="tab"><i class="fas fa-tachometer-alt"></i> {{Equipement}}</a></li>
 			<li role="presentation"><a href="#modetab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fas fa-list-alt"></i> {{Modes}}</a></li>
 		</ul>
-		<div class="tab-content" style="height:calc(100% - 50px);overflow:auto;overflow-x: hidden;">
+		<div class="tab-content">
 			<div role="tabpanel" class="tab-pane active" id="eqlogictab">
-				<br/>
 				<form class="form-horizontal">
 					<fieldset>
-						<div class="form-group">
-							<label class="col-sm-3 control-label">{{Nom de l'équipement mode}}</label>
-							<div class="col-sm-3">
-								<input type="text" class="eqLogicAttr form-control" data-l1key="id" style="display : none;" />
-								<input type="text" class="eqLogicAttr form-control" data-l1key="name" placeholder="{{Nom de l'équipement mode}}"/>
+						<div class="col-lg-6">
+							<legend><i class="fas fa-wrench"></i> {{Paramètres généraux}}</legend>
+							<div class="form-group">
+								<label class="col-sm-3 control-label">{{Nom du mode}}</label>
+								<div class="col-sm-7">
+									<input type="text" class="eqLogicAttr form-control" data-l1key="id" style="display : none;" />
+									<input type="text" class="eqLogicAttr form-control" data-l1key="name" placeholder="{{Nom de l'équipement mode}}"/>
+								</div>
 							</div>
-						</div>
-						<div class="form-group">
-							<label class="col-sm-3 control-label" >{{Objet parent}}</label>
-							<div class="col-sm-3">
-								<select id="sel_object" class="eqLogicAttr form-control" data-l1key="object_id">
-									<option value="">{{Aucun}}</option>
+							<div class="form-group">
+								<label class="col-sm-3 control-label" >{{Objet parent}}</label>
+								<div class="col-sm-7">
+									<select id="sel_object" class="eqLogicAttr form-control" data-l1key="object_id">
+										<option value="">{{Aucun}}</option>
+										<?php
+										$options = '';
+										foreach ((jeeObject::buildTree(null, false)) as $object) {
+											$options .= '<option value="' . $object->getId() . '">' . str_repeat('&nbsp;&nbsp;', $object->getConfiguration('parentNumber')) . $object->getName() . '</option>';
+										}
+										echo $options;
+										?>
+									</select>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-3 control-label">{{Catégorie}}</label>
+								<div class="col-sm-7">
 									<?php
-									$options = '';
-									foreach ((jeeObject::buildTree(null, false)) as $object) {
-										$options .= '<option value="' . $object->getId() . '">' . str_repeat('&nbsp;&nbsp;', $object->getConfiguration('parentNumber')) . $object->getName() . '</option>';
+									foreach (jeedom::getConfiguration('eqLogic:category') as $key => $value) {
+										echo '<label class="checkbox-inline">';
+										echo '<input type="checkbox" class="eqLogicAttr" data-l1key="category" data-l2key="' . $key . '" />' . $value['name'];
+										echo '</label>';
 									}
-									echo $options;
 									?>
-								</select>
+								</div>
 							</div>
-						</div>
-						<div class="form-group">
-							<label class="col-sm-3 control-label"></label>
-							<div class="col-sm-9">
-								<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isEnable" checked/>{{Activer}}</label>
-								<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isVisible" checked/>{{Visible}}</label>
+							<div class="form-group">
+								<label class="col-sm-3 control-label">{{Options}}</label>
+								<div class="col-sm-7">
+									<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isEnable" checked/>{{Activer}}</label>
+									<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isVisible" checked/>{{Visible}}</label>
+								</div>
 							</div>
-						</div>
-						<div class="form-group">
-							<label class="col-sm-3 control-label">{{Catégorie}}</label>
-							<div class="col-sm-9">
-								<?php
-								foreach (jeedom::getConfiguration('eqLogic:category') as $key => $value) {
-									echo '<label class="checkbox-inline">';
-									echo '<input type="checkbox" class="eqLogicAttr" data-l1key="category" data-l2key="' . $key . '" />' . $value['name'];
-									echo '</label>';
-								}
-								?>
+
+							<legend><i class="fas fa-cogs"></i> {{Paramètres spécifiques}}</legend>
+							<div class="form-group">
+								<label class="col-sm-3 control-label">{{Commande de verrouillage}}
+									<sup><i class="fas fa-question-circle tooltips" title="{{Cocher la case pour afficher la commande de verrouillage sur le widget}}"></i></sup>
+								</label>
+								<div class="col-sm-7">
+									<input type="checkbox" class="eqLogicAttr" data-l1key="configuration" data-l2key="showLockCmd" />
+								</div>
 							</div>
 						</div>
-						<div class="form-group">
-							<label class="col-sm-3 control-label">{{Afficher commande de verrouillage}}</label>
-							<div class="col-sm-3">
-								<input type="checkbox" class="eqLogicAttr" data-l1key="configuration" data-l2key="showLockCmd" />
+
+						<div class="col-lg-6">
+							<legend><i class="fas fa-info"></i> {{Informations}}</legend>
+							<div class="form-group">
+								<label class="col-sm-3 control-label">{{Description du mode}}</label>
+								<div class="col-sm-8">
+									<textarea data-l1key="comment" class="form-control eqLogicAttr autogrow" ></textarea>
+								</div>
 							</div>
 						</div>
 					</fieldset>
 				</form>
+				<hr>
 			</div>
+
 			<div role="tabpanel" class="tab-pane" id="modetab">
-				<a class="btn btn-success pull-right" id="bt_addMode" style="margin-top: 5px;"><i class="fas fa-plus-circle"></i> {{Ajouter mode}}</a><br/><br/>
-				<div id="div_modes" class="panel-group"></div>
+				<a class="btn btn-default col-xs-6 col-xs-offset-3 col-md-3 col-md-offset-4" id="bt_addMode" style="margin-top:5px;"><i class="fas fa-plus-circle"></i> {{Ajouter un mode}}</a>
+				<br><br>
+				<div id="div_modes" class="panel-group" style="margin-top:5px;">
+				</div>
 			</div>
+
 		</div>
 	</div>
 </div>