Skip to content

Commit

Permalink
new UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Salvialf
Salvialf committed Jun 28, 2021
1 parent 17721b7 commit bed52f0
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 88 deletions.
74 changes: 35 additions & 39 deletions desktop/js/mode.js
View file
Expand Up @@ -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>';
Expand All @@ -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)) {
Expand All @@ -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());
Expand All @@ -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){
Expand All @@ -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)) {
Expand All @@ -313,6 +308,7 @@ function addAction(_action, _type, _name, _el) {
});
}
}

function updateSelectMode(_convert){
$('select.selectMode').each(function () {
var value = $(this).val();
Expand Down
131 changes: 82 additions & 49 deletions desktop/php/mode.php
View file
Expand Up @@ -18,91 +18,124 @@
</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">
<li role="presentation"><a class="eqLogicAction cursor" aria-controls="home" role="tab" data-action="returnToThumbnailDisplay"><i class="fas fa-arrow-circle-left"></i></a></li>
<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>
Expand Down

0 comments on commit bed52f0

Please sign in to comment.