[Résolu] Widget +- heure +- 10 minutes minute

Salon des Développeurs Aide Programmation
1

Bonjour
j’avais créé un widget de type slider

avec des boutons + et moins sur le minutes et les heures (je m’etais inspirer d’un truc que j’avais trouver sur le market)

ce widget avais la particularité d’ajoute une information complètement creer dans le widget en faite un temps sous le format xhyy (par ex 1h30) cela n’etait qu’une image de la valeur du slider (130 pour 1h30).

depuis la dernière mise a jour cela ne fonctionne plus.
j’ai bien corriger la partie mise a jour de la valeur du slider mais je n’arrive pas a faire afficher en temps reel la valeur au format xhyy.

voici mon code

 
  <div style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
   <center>
    <input id="stateTime#id#" type="text" class="value form-control input-sm" value="#state#" style="display:none"/>
    <span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</span><br/>
      <span style="font-size: 2em;font-weight: bold;" id="chaineComplete#id#"></span><br/>
	<div class="btn-group">
        <a class="btn-sm bt_minusH" style="font-size: 1.1em;" ><i class="fa fa-minus-circle"></i></a>
        <a class="btn-sm bt_plusH" style="font-size: 1.1em;" ><i class="fa fa-plus-circle"></i></a>
        <a class="btn-sm bt_minusM" style="font-size: 1.1em;" ><i class="fa fa-minus-circle"></i></a>
        <a class="btn-sm bt_plusM" style="font-size: 1.1em;" ><i class="fa fa-plus-circle"></i></a>
    </div>
  </center>
    <script>
      	var heure;
    	var minute;
    	var chaineHeure;
    	var chaineMinute;
		var chaineComplete;
      	var Min;
    	var Max;
        Min =('#minValue#' == '') ? 0 : '#minValue#';
        Max =('#maxValue#' == '') ? 2359: '#maxValue#';
        
      	if (Min <0)
        {  
      		Min =0;
        }
      	if (Max>2359)
        {
          Max = 2359;
        }
          
       jeedom.cmd.update['#id#'] = function(_options){
          $('.cmd[data-cmd_uid=#uid#] .value').val(_options.display_value);
       } 	
      
      console.log(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()));
      	// Identification des valeurs Heure et Minute avant modification
      	if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= 0) {	
          
			console.log('>0');
            heure = Math.floor(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) / 100);
      		minute = parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - heure*100;
        }
      console.log('heure ',heure);
      console.log('minute ',minute);
      	// Modification des heures
      	$('.cmd[data-cmd_uid=#uid#] .bt_minusH').on('click', function () {
        	if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= Min+100) {    
          		$('.cmd[data-cmd_uid=#uid#] .value').val(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 100);
				$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
            }
        });
      	$('.cmd[data-cmd_uid=#uid#] .bt_plusH').on('click', function () {
          	if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) <= Max-100) {
            	$('.cmd[data-cmd_uid=#uid#] .value').val(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 100);
				$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
        	}
        });      	
        
      	// Modification des minutes
      	$('.cmd[data-cmd_uid=#uid#] .bt_minusM').on('click', function () {
            if (  minute>=10 ) {
          		//$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 10));
            	jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 10)});
                $('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
              
            }
            else if (  heure >=1 ) {
                jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 50)});
          		//$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 50));
            	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
              
            }          
        });
        $('.cmd[data-cmd_uid=#uid#] .bt_plusM').on('click', function () {
          	if ( minute < 50 && (heure*100)+ minute < Max) {
            	//$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 10));
                jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 10)});
                $('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
              
            }
            else if( (heure*100)+ minute < Max ) {
            	jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 50)});
              	//$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 50));
            	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
            }
        });
        console.log('avant slider ',parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()));
      
      
        $('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
            jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
        });
     
      
        console.log('avant >0 ', parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()));
      	// Affichage des heures et des minutes sous forme de chaine de caractères
        if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= 0) {
   			// Formatage de la chaine de caractères heure
    		heure = Math.floor(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) / 100);
          	chaineHeure = heure;
          
    		// Calcul valeur minute
    		minute = parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - heure*100;
    		// Formatage de la chaine de caractères minute
    		if (minute >= 10) {
    			chaineMinute =  minute;
    		}
    		else {
				chaineMinute =  "0" + minute;
        	}
     
    		// Calcul de la chaine complète

          chaineComplete = chaineHeure + "h" +chaineMinute;  
          console.log('chaineComplete ',chaineComplete);
  
       
         jeedom.cmd.update['chaineComplete#id#'] = function(_options){
         $('#chaineComplete#id#').text(_options.display_value2);

         }
         jeedom.cmd.update['chaineComplete#id#']({display_value2:chaineComplete});       



       console.log('end ');
     }

      
        
      

   </script>
</div>

mon problème est dans la fonction : jeedom.cmd.update[‹ chaineComplete#id# ›] . je ne sais pas comment la corriger.

merci pour votre aide

2

hello,

en regardant rapidement, tout ce qui est dans ton parseInt est exécuter qu’une seul fois. il faut que tu sorte jeedom.cmd.update['chaine.... et que ce soit elle qui exécute ton parseInt pour tester a chaque fois

Bonne journée

3

Hello
Merci pour ta réponse
tu parlais de quel parseInt du dernier ?
ci c’est le cas ca n’a pas marcher la valeur ne se met toujours pas a jours sans F5 le reste fonctionne. comme je le disais avant 3.2 cela fonctionnait

le problème ne viendrait il pas de $(’#chaineComplete#id#’).text(_options.display_value2);

merci pour ton aide

4

Se qui change entre l’ancien et le nouveau système.

Avant tout le code du widget étais entièrement remplacer par une nouvelle exécution de se dernier, cela impliquais donc un trafique importent de données.

Avec le nouveau système, à chaque affichage de la page ou F5 tout le code du widget est charger et interpréter comme par le passer, en revanche une fois la page affiché, seul la fonction jeedom.update est exécute.

Il faut donc que toute la partie calcule se trouve dans cette fonction, et tout le squelette qui reste inchangé en dehors.

Pour mieux comprendre, regarde mon widget colorTuile que tu connais bien, hors fonction update tu créer se qui ne change pas comme des fonction, le CSS de base et le HTML, puis dans la fonction update tu met les action de mise à jours des valeurs, tu peux utilise les fonction qui se trouve hors fonction update dans cette dernière.
Attention les tags ne sont pas tous disponible dans le fonction update après le chargement de la page, seul ceux qui change le sont

5

merci @skyline-ch
ca fonctionne

6

n’oubliez pas de mettre le sujet en résolu en cliquant sur les trois points puis la coche sur la réponse qui vous à aidé :wink: