Représentation graphique du statut (suite..)

Support
1

Continuing the discussion from Representation graphique du statut (vide, occupé…) des casiers d'une consigne:

Request description

Je reviens sur ce post qui redeviens d’actualité.
J’ai réalisé toutes les étapes recommandées par François , mais malgré cela je 'affiche aucun graphique dans l’objet externe , peut-être que la matrice du plan exportée dans une table HTML stockée dans un champ n’est pas correcte par rapport au Script Front : ? *

<table class="plan-casier">
<tr>
<td data-casier=1>"1"</td>
<td data-casier=2>"0"</td>
<td data-casier=3>"1"</td>
<td data-casier=4>"1"</td>

</tr>
<tr>
<td data-casier=5>"0"</td>
<td data-casier=6>"1"</td>
<td data-casier=7>"0"</td>
<td data-casier=8>"0"</td>
</tr>
<tr>
<td data-casier=9>"1"</td>
<td data-casier=10>"1"</td>
<td data-casier=11>"1"</td>
<td data-casier=12>"0"</td>
</tr>
<tr>
<td data-casier=13>"0"</td>
<td data-casier=14>"1"</td>
<td data-casier=15>"0"</td>
<td data-casier=16>"0"</td>
</tr>

</table>

SCRIPT Front :

var extPlanSalle = (function($) {
  function render(plan, etats) {
    var ctn = $('#monPlanSalle').html(plan);
    $('.plan-casier td[data-casier]', ctn).each(function() {
      var td = $(this); // td casier
      var n = td.attr("data-casier"); // numero
      var c = etats[n]; // { id, num, etat }
      td.addClass(c.etat=="OCCUPE" ? "jaune" : "blanc");
      td.data("casier",c).click(open);
    });
  }
  function open(e) {
     var c = $(this).data("casier");
     $ui.displayForm(null, "Casier", c.id, { nav:"add", displayNav:true });
  }
  return { render: render }
})(jQuery);

Steps to reproduce

This request concerns an up-to-date Simplicité instance
and these are the steps to reproduce it:

Peut-être que la matrice

Technical information

Instance /health 
Simplicité version4.0 patch level P25Built on2022-07-23 00:06 (revision b8e0951a1092464ec965f2b1cac8bf7c8b6b8501)Database level4.0;P25;572ca2253ecf00be6c90c8dd7259db11EncodingUTF-8 (system encoding UTF-8)
OSLinux amd64 3.10.0-1160.80.1.el7.x86_64ServerApache Tomcat/9.0.65 of type WEBUsertestDatabasePostgreSQL 9.2.24 using BLOBs
JVM11.0.17 Red Hat, Inc. OpenJDK 64-Bit Server VM 11.0.17+8-LTSScript enginerhino Rhino 1.7.13 2020 09 02Additional libsApache POI, Docx4j, Apache Tika, JGit, Apache JClouds, Google APIs, Google APIs Firebase
Application nameContext URLhttps://lowcode01-test.lausanne.chEnd-pointhttp://lsllcot01.lausanne.ch:8080Time zoneEurope/Zurich-
Simplicité logs 
---paste the content of the **relevant** server-side logs---
Browser logs 
---paste content of the **relevant** browser-side logs---
Other relevant information

----E.g. type of deployment, browser vendor and version, etc.----

2

Bonjour,

Il faudrait ajouter un point d’arrêt dans votre code front pour voir ce qu’il reçoit dans la console du navigateur, puis faire du pas à pas pour debugger votre code (contenu de plan et états à l’arrivée ?).

return javascript(
"debugger; extPlanSalle.render('"+plan+"', "+casiers.toString()+");"
);
  • Votre objet métier s’appelle-t-il “Casier” ? tous les nommages de mon précédent post étaient fictifs
  • Votre objet externe contient-il une ressource HTML avec une <div id="monPlanSalle"></div> sinon la table n’ira nulle part
  • Sur le plan HTML, la syntaxe n’est pas stricte, il faudrait par exemple écrire :
    <td data-casier="9">1</td>

Si le front ne s’arrête pas c’est que le back n’envoie rien ou que le javascript ne compile pas en front, vous devriez le voir dans la console.

Une autre façon de faire sans ressource HTML est de le créer dans le container qu’on peut passer en paramètre via la variable “ctn” du scope :

@Override
public Object display(Parameters params) {
     ...
    return javascript("extPlanSalle.render(ctn, ...);");
}

var extPlanSalle = (function($) {
  function render(ctn, plan, etats) { // ctn = div.extern-content
    var div = $('<div id="monPlanSalle"/>').html(plan);
    $(ctn).html(div);
    ...
  }
  return { render: render };
})(jQuery);

Doc :
https://docs.simplicite.io/documentation/01-core/externalobject-code-examples.md

3

UPDATE : d’après votre code, extPlanSalle est un objet avec une méthode render et pas une fonction. du coup c’est l’appel au render qui doit être faux.

@dagry un retour à nous faire sur ce ticket ?

4

Bonjour François, Je suis toujours bloqué, je n’ai pas d’autres solutions en vue.
Merci d’avance pour ton aide.

5

Pour avoir plus d’aide il faut nous en dire plus…
sur ce qui ne fonctionne pas ou à partir de quelle étape ?

  • paramétrage complet de l’objet externe (display back + html + script front…)
  • présence de log client et/ou serveur ?

Qu’a donné le debug pas à pas sur le client ?
Ajoutez aussi des AppLog.info en back et des console.log en front pour avoir plus de traces sur l’exécution de votre composant

6

Bonjour François,
J’ai mis ce point en stand by pour pouvoir avancer sur d’autres plus urgents.
Je reviendrai vers toi dès que ceux-ci seront réglés.

7

Ok pas de soucis,
on pourra aussi voir ça ensemble quand je viendrai faire une visite sur Lausanne au printemps.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.