Widget Rafraichir [solved]

[Vlado]

Bonjour,

Nouveau sur jeedom, je tente de me familiariser avec la fonctionnalité « Design ».
J’ai tenté de mettre un widget pour réaliser la fonction rafraîchir de mes commandes avec pour objectif de rester sur le design standard mais de l’isoler de l’équipement complet.
(aka insérer la commande rafraîchir d’un équipement dans mon design)

Mon souci, ca fonctionne, mais j’arrive pas à trouver la class nécessaire pour permettre l’animation js (rotation de l’icone au clic)

Peut etre qu’il y a mieux à faire ?
Merci

[Salvialf]

Salut,

je pense que ça ne fonctionne pas avec la commande seule car c’est lié à un équipement (eqLogic):

jeedom/core/blob/alpha/core/js/cmd.class.js

jeedom.cmd.notifyEq = function(_eqlogic,_hide) {
  if (!_eqlogic){
    return;
  }
  if (_eqlogic.find('.cmd.refresh').length) {
    _eqlogic.find('.cmd.refresh').addClass('spinning')
  } else {
    _eqlogic.find('.widget-name').prepend('<span class="cmd refresh pull-right remove"><i class="fas fa-sync"></i></span>')
  }
  if (_hide) {
    setTimeout(function() {
      if (_eqlogic.find('.cmd.refresh').hasClass('remove')) {
        _eqlogic.find('.cmd.refresh').remove()
      } else {
        _eqlogic.find('.cmd.refresh').removeClass('spinning')
      }
    }, 1000);
  }
}

[Vlado]

effectivement, j’avais tenté en y ajoutant un div class=« eqlogic » mais c’etait pas suffisant.
je vais regarder un peu plus avec ce que tu m’as fourni.

Merci Salviaff !

[Salvialf]

N’hésites pas à poster tes résultats

[Vlado]

Salut

Je suis finalement parti sur un widget de type Action.other en repartant du template par défaut et en y intégrant mes changements basé sur le kit d’icone fontAwesome : Get Started instantly With 1,000+ Free Icons | Font Awesome

J’y ai intégré un timer de 10 sec pour stopper la rotation de l’icone. ca correspond au temps nécessaires à l’équipement de se rafraîchir sur mon design (wazeIntime)

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

  <div class="content-xs refreshtemplate">
    <!--Ajout icone refresh + id-->
    <a class="btn btn-sm btn-default action tooltips"><i id ="refresh" class="fa fa-refresh"></i></a>
  </div>
  <script>
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }
  </script>

  
<!--
  Ajout du script Personnifié de fontawesome https://fontawesome.com/start
  pour que le widget fonctionne, il ne faut pas oublier d'ajouter dans le design le script du kit fontAweone 
  <script src="https://kit.fontawesome.com/XXXXXXXX.js" crossorigin="anonymous"></script>
-->
<!-- Recupération du template : https://github.com/jeedom/core/blob/alpha/core/template/dashboard/cmd.action.other.default.html-->
  
  <!-- Script de start / stop du spin-->
 <script src="https://kit.fontawesome.com/ID_KIT_FONTAWESOME.js" crossorigin="anonymous"></script>

 <script>
  $(document).ready(function(){
    $("a").click(function(){
          document.getElementById("refresh").className += " fa-spin"; 
          setTimeout(function(){
              document.getElementById("refresh").classList.remove("fa-spin"); 
          }, 10000);      	
    });    	
  });
</script>
  
<style>  
  div.refreshtemplate  .btn:not(.cmdName), .btn:not(.cmdName):active {
        background-color: transparent !important;
  }
</style>
</div>

Attention : Il ne faut pas oublier de changer le lien du script de fontawesome. Malheureusement, cette librairie nécessite de créer un compte.

Nouveau sur Jeedom et sans connaitre le JS, le code doit pas être terrible, mais ça a le mérite de fonctionner. J’ai laissé le code du template par défaut pour éviter de casser le fonctionnement, surement qu’une partie doit être inutile.

Exemple