Widget select et dépendant d'une autre commande

mguyard · Juillet 14, 2020, 2:33

Hello,

Je suis en train de regarder pour customiser un de mes devices (mon portail en l’occurence).
J’ai 2 questions, j’aimerais pouvoir :

Définir qu’une commande est hide si la valeur d’une autre commande est égale à X (j’ai une commande qui indique le type de mouvement (ouverture/fermeture) mais selon les statut actuel du portail je ne veux pas l’afficher. Uniquement afficher le type de mouvement quand le statut du portail est en mouvement (et non ouvert/fermé).
J’ai une commande Select (Ouverture/Fermeture) et j’aimerais utiliser un bouton qui lance l’action opposé au statut (si le portail est ouvert, ca lance le select de fermeture, si le portail est fermé, ca lance le select d’ouverture)

Je n’ai pour l’instant que l’experience du template que j’ai sur mon plugin mais la faudrait le faire sur chacune des commandes (je pense que c’est le seul moyen) mais j’arrive pas a voir comment on peut faire des dépendances entre commandes

ajja17orange · Juillet 14, 2020, 4:21

bonjour
via api js
de la source au destinataire
la source cache/montre le destinataire

du destinataire à la source
le destinataire interroge la source
(avec le soucis la source dans ton design/dashboard ou non)

un html de supervision
faisant office de surveiller la source
pour hide/show le destinataire

voici le principe

select j’ai pas compris (si on parle bien de l’action select

j’ai joué (pour quelqu’un en mp) tu as plusieurs trucs là
mise a jour,
pas d’éval js ,(css)
tu as quand tu clic, tu sélectionnes, lorsque tu as la mise à jour
et lancement d’action directement sans scenario
Sans titre3

le code est brut

<!--
https://blogs.infinitesquare.com/posts/web/css-vars-le-guide-complet
https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
-->

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div style="text-align: center;" class="cmdName">#name_display#</div>
  </div>
  <div class="select-style #state#" value="#state#">

    <select class="selectCmd">#listValue#</select>

  </div>
  <div>
<style>


  
    :root{
--background: tranparent;  
--border:transparent;
--link-color:rgb(90, 90, 90);
--ShadowBox:none;
--arrows-color:var(--link-color);      
}  
    .cmd[data-cmd_id="#id#"] select:focus > option:checked { 
    background: yellow !important; /* précedent choix */
}
  

.cmd[data-cmd_id="#id#"] .select-style { 
  display: inline-block;
      position: relative;
      top: 14px;
  width: 100%;
      font-size:14px;
  background: var(--background);
  box-shadow:var(--ShadowBox);
border-color:var(--border);
    border-style: solid;
    border-width: 3px;
    border-radius: 25px;
    margin-bottom: 14px;
  color:var(--link-color);

  /*Don't really need this just for demo styling*/

  float: left;

}

.cmd[data-cmd_id="#id#"] .select-style:after {
  
  content: '◀▶';
  font: 17px "Consolas", monospace;
  color: var(--link-color);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 2px;
  padding: 0 0 2px;

  /*left line */
  
  position: absolute;
  pointer-events: none;
}
.cmd[data-cmd_id="#id#"] .select-style.active:after {
  animation-name: rotateCaret;
   animation-duration: .5s;
    animation-fill-mode: forwards;
}
  
/* cacher fléche */
.cmd[data-cmd_id="#id#"] select.selectCmd {

    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    background-color: transparent!important;
    border-color:none!important;
    background-image: none!important;


}

@keyframes rotateCaret {
  0% {
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg);
  }
  100% {
        -ms-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    transform: rotate(270deg);
  }  
}

 .cmd[data-cmd_id="#id#"] .#CmdValue1# {
--border: #BorderColor1#;
--link-color:#ArrowColor1#;
--arrows-color:#ArrowColor1#;   
--ShadowBox:#ShadowColor1#;   
}
.cmd[data-cmd_id="#id#"] .#CmdValue2# {
--border:#BorderColor2#;
--link-color:#ArrowColor2#;
--arrows-color:#ArrowColor2#;   
--ShadowBox:#ShadowColor2#;      
}  
.cmd[data-cmd_id="#id#"] .#CmdValue3# {
--border:#BorderColor3#;
--link-color:#ArrowColor3#;
--arrows-color:#ArrowColor3#;   
--ShadowBox:#ShadowColor3#;      
}
.cmd[data-cmd_id="#id#"] .#CmdValue4# {
--border:#BorderColor4#;
--link-color:#ArrowColor4#;
--arrows-color:#ArrowColor4#;   
--ShadowBox:#ShadowColor4#;      
}
.cmd[data-cmd_id="#id#"] .#CmdValue5# {
--border:#BorderColor5#;
--link-color:#ArrowColor5#;
--arrows-color:#ArrowColor5#;   
--ShadowBox:#ShadowColor5#;      
}   
  </style>
  <script>


var cmd = $('.cmd[data-cmd_id=#id#]');

            $(".cmd[data-cmd_uid=#uid#] select").on('click', function () {
	/*			$(".cmd[data-cmd_uid=#uid#] .select-arrow").addClass('active');
   	*/           	$(".cmd[data-cmd_uid=#uid#] .select-style").addClass('active');
	});

        $(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function () {  
          $(".cmd[data-cmd_uid=#uid#] .select-style").attr('class', 'select-style').addClass($(this).value());     
       jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});

});
     jeedom.cmd.update['#id#'] = function(_options){
      $(".cmd[data-cmd_uid=#uid#] .selectCmd").val(_options.display_value);
/*$(".cmd[data-cmd_uid=#uid#] .select-arrow").removeClass('active');
*/ $(".cmd[data-cmd_uid=#uid#] .select-style").attr('class', 'select-style').addClass(_options.display_value);               
  if ( '#Action#' == "Oui"  ) {
      if (_options.display_value == '#CmdValue2#'  ) { // Dhw
        jeedom.cmd.execute({id: '#Dhw#'});
          } else if (_options.display_value == '#CmdValue1#'  ) { // Standby
        jeedom.cmd.execute({id: '#Standby#'});
  }
     }
          }
    jeedom.cmd.update['#id#']({display_value:'#state#'});   
    
  </script>

</div>

mguyard · Juillet 14, 2020, 4:28

Merci.
Je vais regarder tout ça

Salvialf · Juillet 14, 2020, 4:34

Salut,

En complément tu peux regarder le plugin Meeko Family sur lequel je joue avec des commandes action/select en récupérant et transformant #listvalue# en js

mguyard · Juillet 14, 2020, 5:39

En fait, j’ai une commande de type action/select avec 2 valeurs
Cependant, j’aimerais la representer comme 2 boutons sur le widget au lieu du format liste déroulante.
J’arrive pas a comprendre comment je pourrais faire.

Salvialf · Juillet 14, 2020, 5:42

Tu récupère et tu travailles le tag #listvalue# en Javascript (à base de .split() par exemple)

Regardes meeko je fais aussi un bouton datepicker à partir d’une commande action/select

Édit: dans ton cas avec 2 valeurs possibles ça aurait été plus simple de passer par des commandes action/ défaut on dirait

mguyard · Juillet 14, 2020, 5:46

Ok. Ça m’arrange pas je suis très mauvais en Js je vais y passer des heures
Mais j’ai ma réponse

Salvialf · Juillet 14, 2020, 5:47

Tu ne peux pas revoir ces commandes pour les modifier en action/defaut ?

mguyard · Juillet 14, 2020, 5:48

Non elle viennent de HomeKit et formalisé ainsi.
Faut voir le bon côté, ca me fera m’améliorer en JS

ajja17orange · Juillet 14, 2020, 6:41

tu as différente maniére de faire
commence par faire parlé la fonction

exemple dans on.change

            var htmlString = $( this ).html();
console.log(htmlString);

ou

console.log(this.innerHTML);

la console donne

<option value="Standby" selected="">standby</option><option value="Dhw">dhw</option><option value="Auto">auto</option>

si j’y met
console.log("liste text : \n"+this.innerText);

liste text : 
standby
dhw
auto

pour le choix selectionné

console.log("choix text3 : \n"+$(this).find("option:selected").text());

ou

console.log("choix text2 : \n"+this.options[this.selectedIndex].text);

la valeur
("choix valeur : \n"+this.value);
le text
("choix text : \n"+$(this).text());
l’index « ordre »
("choix index : \n"+this.selectedIndex);

et comment je sais tous ça
bêtement un nom a la fonction change

        $(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function (event) {  
console.log(event);

je partirai sur l’index aucune recherche d’option « texte ou valeur »
au click
si index 0 exécute valeur index1
si index 1 exécuté valeur index0

system · Juillet 22, 2020, 8:22

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.