Affichage widget mobile rétrécie après refresh

Salon des Développeurs Aide Programmation
1

Bonjour,

J’ai un petit soucis que je ne comprends pas sur un widget mobile. Le même code marche très bien en dashboard.

F5 sur la page, tout va bien:

mob_before

Puis je lance une commande action, donc execute(), et dans le execute un refreshwidget()

Et le widget devient:

mob_after

Le code du template:

<div class="eqLogic eqLogic-widget"
      style="background-color:#background-color#; color:#color#; border:#border#; border-radius:#border-radius#; #style#"
      data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">
  <span class="statusCmd" style="position : absolute;left : 5px; width : 30px;z-index: 1030;"></span>
  <i class='fa fa-refresh pull-right cursor refresh' style="margin-top: 3px;margin-right: 3px;"></i>
  <span class="cmd cmd-widget" data-cmd_id="#refresh_id#" style="display:none;"></span>
  <center class="widget-name" style="#hideEqLogicName#">#name_display# <span style="font-size: 0.85em;position: relative;top:-2px;">#object_name#</span></center>

  <center>
    <span class="cmd cmd-widget" title="#order_collectDate#" data-type="action" data-subtype="select" data-cmd_id="#SetMode_id#" data-version="#version#" data-eqLogic_id="#id#" style="width:100%;#SetMode_display#;">
        <select class="selectCmd" style="width:100%;color:#cmdColor#;background-color:#background-color#;border-radius: #border-radius#;">#SetMode_listValue#</select>
    </span>

    <span class="cmd cmd-widget" data-type="action" data-subtype="select" data-cmd_id="#SetProgram_id#" data-version="#version#" data-eqLogic_id="#id#" style="width:100%;">
        <select class="selectCmd" style="width:100%;color:#cmdColor#;background-color:#background-color#;border-radius: #border-radius#;">#SetProgram_listValue#</select>
    </span>
  </center>
  <center>
    <div class="#lastmsg_history#" data-cmd_id="#lastmsg_id#">
      <i class="nature-leaf37"></i> <strong class="tooltips" title="#lastpres_collectDate#" style="font-size:12px;">#lastmsg#</strong>
    </div>
  </center>

  <script>
    $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
        jeedom.cmd.execute({id: '#refresh_id#'});
      })

    $(".cmd[data-cmd_id=#SetMode_id#] .selectCmd").on('change', function () {
      jeedom.cmd.execute({id: '#SetMode_id#', value: {select: $(this).value()}});
    })

    $(".cmd[data-cmd_id=#SetProgram_id#] .selectCmd").on('change', function () {
      jeedom.cmd.execute({id: '#SetProgram_id#', value: {select: $(this).value()}});
    })
  </script>
</div>

J’ai évidemment testé plein de trucs, regardé d’autres widgets etc je bloque.
Celui du thermostat a la même structure et ne bouge pas…

Si qqlun a une idée ?

2

Bon, voici le résultat (avec firefox, outils dev)

<div class="eqLogic eqLogic-widget" style="background-color: rgb(41, 128, 185); color: rgb(255, 255, 255); border: medium none; border-radius: 0px; top: 114.8px; left: 0px; width: 220px; height: 90.2667px; position: absolute; transform-origin: 110px 50.1333px 0px; transform: none; z-index: auto;" data-eqlogic_id="700" data-eqlogic_uid="eqLogic700__891045443__" data-version="mobile">

si je vire le height, c’est bon !

D’où vient ce height ?? Je n’ai vue aucun height:#height# dans les template pour mobile !

3

Bon je sais pas pourquoi mais… :

$eqLogic->getCmd(null, 'Ordre')->event($modeString);
$eqLogic->refreshWidget();

→ çà deconne

$eqLogic->checkAndUpdateCmd('Ordre', $modeString);

→ pas de soucis

:roll_eyes:

4

Bon, sauf que sans le refreshWidget() les autres sessions ouvertes ne se rafraichissent pas :face_with_raised_eyebrow:

Donc retour à la case départ …

$(this).parent().closest('.eqLogic.eqLogic-widget').css("height", ""); :roll_eyes:
5

Si qqlun a une solution pour mettre un select dans un template de plugin.

Mon plugin est finit, manque que çà pour publier une nouvelle grosse beta :expressionless:

En plus j’ai aussi un refreshWidget() dans le postsave() pour updater les listes des select. Donc pas trop le choix, sinon faut faire des F5 sur le dashboard …

Pour info je suis en core beta 3.3.7 …

6

sur la div parent class eqlogic : min-height:150px !important;

çà résout le problème, mais pas sur que ce soit très propre :face_with_raised_eyebrow:

7

Bon çà ne résout pas le problème, en tout cas y’en a un autre, et je pense que çà vient bien des select.

Sur iPhone, je clique sur un select:
→ J’ai bien en bas la liste des options
Je choisi une option et là:

  • Si je clique sur ok, le select reste blanc et il ne se passe rien
  • Si je clique ailleurs sur l’écran, là la commande s’exécute bien et le select prend l’option !!

Donc quelle est la bonne manière d’afficher un select dans un template de plugin ?
J’ai essayé de trouver d’autres plugin avec des templates qui affichent un/des select mais pas trouvé. J’ai regardé des dizaines de fois le codes généré mais jeedom englobe le select dans une div avec un span de l’option selected etc, donc à la source je ne sais pas comment le mettre dans le template pour que tout fonctionne.

PNG
PNG1125×2436 386 KB

8

@Loic Si tu a une idée ? :roll_eyes:

9

Faudrait tester en mode mobile sur PC pour voir si c’est l’iPhone qui renvoie pas l’évent change ou si c’est le widget le soucis

10

çà marche bien sur PC en UI mobile.

J’ai un plugin script avec un select aussi, et c’est pareil. Ok sur PC mobile, pas sur iPhone. Pour info iPhone X iOS à jour.

Sinon pour le height qu’il faut forcer avec un min-height c’est normal ? Y’a rien que j’ai zappé dans mon template ?

voilà le dernier que j’utilise:

<div class="eqLogic eqLogic-widget"
      style="min-height:120px !important; background-color:#background-color#; color:#color#; border:#border#; border-radius:#border-radius#; #style#"
      data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">
  <span class="statusCmd" style="position : absolute;left : 5px; width : 30px;z-index: 1030;"></span>
  <i class='fa fa-refresh pull-right cursor refresh' style="margin-top: 3px;margin-right: 3px;"></i>
  <span class="cmd cmd-widget" data-cmd_id="#refresh_id#" style="display:none;"></span>
  <center class="widget-name" style="#hideEqLogicName#">#name_display# <span style="font-size: 0.85em;position: relative;top:-2px;">#object_name#</span></center>

  <center>
    <span class="cmd cmd-widget" data-type="action" data-subtype="select" data-cmd_id="#SetProgram_id#" data-version="#version#" data-eqLogic_id="#id#" style="width:100%;">
        <select class="selectCmd" style="width:100%;color:#cmdColor#;background-color:#background-color#;border-radius: #border-radius#;">#SetProgram_listValue#</select>
    </span>

    <div class="#lastmsg_history#" data-cmd_id="#lastmsg_id#">
      <i class="nature-leaf37"></i> <strong class="tooltips" title="#lastpres_collectDate#" style="font-size:12px;">#lastmsg#</strong>
    </div>
  </center>

  <script>
    $('select option').filter(function() { return !this.value || $.trim(this.value).length == 0;}).remove();

    $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
        jeedom.cmd.execute({id: '#refresh_id#'});
      })

    $(".cmd[data-cmd_id=#SetProgram_id#] .selectCmd").on('change', function () {
      jeedom.cmd.execute({id: '#SetProgram_id#', value: {select: $(this).value()}});
    })
  </script>
</div>
11

Pour la hauteur oui ça arrive je verrais pour remettre à plat lors de la refonte de l’interface.
Pour le select il faudrait voir sous iOS si ya un évent change ou si c’est autre chose

12

j’ai essayé avec onblur c’est pareil … :face_with_raised_eyebrow:

13

J’ai pas d’iphone donc je peux absolument pas aider si ça marche sur pc c’est vraiment un soucis au niveau de l’évent

14

Yep je comprends et dans la mesure où tout les select réagissent pareil, ça ne vient pas de mon plugin donc j’avance sur autre chose. Je garde ça pour plus tard quand je serai en stable :rofl: