Widget select et dépendant d'une autre commande

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

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
image
image
image

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>

Merci.
Je vais regarder tout ça

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

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.

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

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

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

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

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);

image

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

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