Problème de rafraichissement de widget code perso

Utilisation du core de Jeedom Widgets
1

Bonsoir,

J’ai tenté de coder un widget « maison » où je récupère un numérique (la valeur UV) et j’affiche une icone ainsi que la valeur puis une échelle /10.

Je me suis inspiré d’un code qui tourne bien à l’origine, mais j’ai retiré les 2 cmd.find de fin pour intégrer proprement le #state# à la suite de l’icone.

Du coup, sur le design à la fin d’une journée, je me trouve avec les icones à la suite (pas de copie d’écran sous la main) comme si l’info ne se rafraichissait pas totalement et ajoutez ses valeurs successives sur une journée…

Du genre soleilbarré 0/10 ; soleil levant 2/10 ; etc.

Ai-je oublié quelque chose dans ce code ?

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]')
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
          if (state == 0) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon Mdi mdi-weather-sunny-off" style="color:#acacac;font-size:25px;"></i><span style="font-size:20px;color:#acacac;">#state#</span><span style="font-size:10px;color:#acacac;">/10</span>');
		  }
          else if (state > 0 && state <= 2) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon Mdi mdi-weather-sunset" style="color:#30b455;font-size:25px;"></i><span style="font-size:20px;color:#30b455;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  else if (state > 2 && state <= 5) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon Mdi mdi-weather-sunset" style="color:#FFF600;font-size:25px;"></i><span style="font-size:20px;color:#FFF600;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  else if (state > 5 && state <= 7) {
			 	$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon Mdi mdi-weather-sunny" style="color:#FFB82B;font-size:25px;"></i><span style="font-size:20px;color:#FFB82B;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
          else if (state > 7 && state <= 12) {
		 		$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon Mdi mdi-weather-sunny-alert" style="color:#CC0000;font-size:25px;"></i><span style="font-size:20px;color:#CC0000;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Dès que j’ai une copie d’écran je l’ajoute ;).

Merci !

2

En gros comme si il faisait ce que tu lui demande ?

.append(…) à chaque update …

Et quitte à utiliser une variable var cmd = $('.cmd[data-cmd_id=#id#]') utilise cmd.find('.iconCmd') plutot que de scanner tout le DOM à chaque fois :wink:

1 « J'aime »
3

Merci, j’ai corrigé.

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]')        
          
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
          if (state == 0) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny-off" style="color:#acacac;font-size:25px;"></i><span style="font-size:20px;color:#acacac;">#state#</span><span style="font-size:10px;color:#acacac;">/10</span>');
		  }
          else if (state > 0 && state <= 2) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunset" style="color:#30b455;font-size:25px;"></i><span style="font-size:20px;color:#30b455;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  else if (state > 2 && state <= 5) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunset" style="color:#FFF600;font-size:25px;"></i><span style="font-size:20px;color:#FFF600;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  else if (state > 5 && state <= 7) {
			 	cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny" style="color:#FFB82B;font-size:25px;"></i><span style="font-size:20px;color:#FFB82B;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
          else if (state > 7 && state <= 12) {
		 		cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny-alert" style="color:#CC0000;font-size:25px;"></i><span style="font-size:20px;color:#CC0000;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
4

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