Comment creer un widget qui affiche uniquement si la commande n est pas vide ?

Salon des Développeurs Aide Programmation
1

Bonsoir

J’ ai une question surement triviale mais je suis nul cote UI
Je voudrais afficher dans mon widget du desktop une ligne avec la valeur d’une commande seulement si elle n est pas vide.
Je voudrais injecter le display=none si #waterTankLevel est vide

<!-- <div class="row flower_style#id#" style="display:none;" > -->
<div class="row flower_style#id#">
    <div class="col-md-4">
        <div style="text-align: center;"><i class="fas fa-fill"></i></div>
    </div>
    <div class="col-md-8">
        <span class="history cursor cmd tooltips cmd cmd-widget" data-type="info" data-subtype="numeric"
              data-cmd_id="#flower_waterTankLevel_id#">#waterTankLevel# %</span>
    </div>
</div>
2

D’après moi, la meilleure maniére de faire ça est en JS.

Une première méthode pour gérer le load avec un simple if sur ta valeur.

Ensuite un deuxième code JS du type jeedom.cmd.update pour gérer la mise à jour lorsque la valeur change.

3

merci pour la reponse, tu aurais une idee de plugin qui fait ce genre de truc ?

4

Voici un exemple pour ton cas.

Pour gérer le load de ton widget et donc l’affichage ou non de ta div en fonction de la valeur de waterTankLevel :

if(#waterTankLevel# == ''){
  //display none
}else{
  //display block
};

Ensuite, pour gérer la mise à jour de la valeur, à condition que tu utilises un checkAndUpdateCmd dans ta classe PHP (nomDuPlugin.class.php) pour gérer la mise à jour de cette info, tu peux utiliser le JS suivant :

jeedom.cmd.update['#waterTankLevel_id#']=function(_options){
  if(_options.display_value == ''){
    //display none
  }else{
    //display block
  };
};
5

Merci de votre aide, ca semble fonctionner!

6

Parfait ! :+1:

Tu peux marquer mon post comme solution du coup, pour aider ceux qui se poseraient la même question et qui visiterait ce sujet ! :wink:

7

Voila le code, il fonctionne, est ce qu’il correspond aux bonnes pratiques cote Jeedom ?
J’ ai l’ impression que jeedom.cmd.update n est pas appele, il doit etre appelle quand la valeur de la commande change, c est bien ca ? Je vais regarder cote checkAndUpdateCmd

    <div class="row flower_style#id#" id="wateringDisplayHide#id#">
        <div class="col-md-4">
            <div style="text-align: center;"><i class="fas fa-fill"></i></div>
        </div>
        <div class="col-md-8">
            <span class="history cursor cmd tooltips cmd cmd-widget" data-type="info" data-subtype="numeric"
                  data-cmd_id="#flower_waterTankLevel_id#">#waterTankLevel# %</span>
        </div>
    </div>
    
    <script>
        $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
            jeedom.cmd.execute({id: '#refresh_id#'});
            hideTankLevelJS#id#(#waterTankLevel#);
        });
        function hideTankLevelJS#id#(waterTankLevel) {
            if (typeof waterTankLevel == 'undefined') {
                 wateringDisplayHide#id#.style.display = 'none'; 
        }   
        jeedom.cmd.update['#waterTankLevel_id#']=function(_options){
            hideTankLevelJS#id#(#waterTankLevel#);
        };
     
        hideTankLevelJS#id#(#waterTankLevel#);
    </script>
8

En effet, la partie jeedom.cmd.update est utilisée dès que ta valeur est mise à jour via une commande checkAndUpdateCmd.
Si tu utilises les fonctions dev sur ton navigateur (F12), tu verras d’ailleurs passer les infos dans la partie réseau.