Cette page de sélection est forcément un composant spécifique que vous devez developper au sein de la UI specifique.
Cela peut être au plus simple une image PNG/JPG/… avec une map cliquable, mais sinon plutôt une image SVG ou un canvas HTML.
Ensuite les clics sans cette image cliquable devront appeler les services Ajax de la UI, ex: sur clic de réservation d’un casier appeler l’objet métier “casier” pour en modifier son statut etc.
Sur la 1ère partie (l’image cliquable) on est pas du tout dans quelque chose de spécifique à Simplicité, nous vous laissons déterminer quelle solution serait la meilleure pour vous. Les seules contraintes c’est que ça puisse s’afficher dans un navigateur web et que ça soit capable de trapper des clics localisables pour déclencher du code Javascript. A cet égard j’aurais tendance à vous conseiller de partir sur du SVG…
Nous pourrons par contre vous aider sur la mise en place des appels Ajax déclenchés par les fonctions Javascript lancées par les clics ci-dessus
@david on en a déjà discuté lors du call de support.
il faut modéliser la position d’un casier par un système de coordonnées qui correspond à votre façon de dessiner la salle
représentation en vue pseudo 3D x,y,z… : semble compliqué de modéliser le “z” sur votre vue aérienne, chaque polyline en vue de faire une map / image
représentation type matrice Excel des casier “à plat” semble beaucoup simple à dessiner / modéliser :
il suffit d’avoir une position x,y par casier (exemple casier n°11 x=8 y=16) ce qui me parait un peu fastidieux à paramétrer
ou bien plus simple : directement exporter votre matrice dans une <table class="plan-casier"> HTML (et stockée dans un champ “plan” de votre objet “salle”) avec des td vide ou avec un attribut data-casier=“11” afin de pouvoir leur mettre un style et un lien lors de l’affichage à venir
Ajouter une ressource STYLES CSS à votre objet salle (ou tout objet affichant cette grille), exemple :
code back méthode “display” : récupère et envoie le “plan” table + la liste de tous les états des casiers de la salle à la présentation
code front : ressource SCRIPT qui ajoute les classes aux td en fonction de l’état + les handler onclick
ressource HTML contenant juste un container <div id="monPlanSalle"></div>
en pseudo code ne connaissant pas vos objets il faudra adapter :
en back en java
public class PlanSalle extends ExternalObject
{
private static final long serialVersionUID = 1L;
@Override
public String display(Parameters params)
{
setDecoration(false);
String salleId = params.getParameter("row_id");
// faire un select pour recuperer le plan de la salle en HTML
ObjectDB salle = getGrant().getTmpObject("Salle");
salle.resetFilters();
salle.select(salleId);
String plan = salle.getFieldValue("plan_salle");
// faire un search pour recuperer tous les états des casier de la salle
JSONObject casiers = new JSONObject();
ObjectDB casier = getGrant().getTmpObject("Casier");
casier.resetFilters();
casier.setFieldFilter("SalleId", salleId);
for (String[] row : casier.search()) {
casier.setValues(row, false);
String num = casier.getFieldValue("numero");
JSONObject c = new JSONObject()
.put("id", casier.getRowId())
.put("num", num)
.put("etat", casier.getFieldValue("etat"));
casiers.put(num, c);
}
return javascript(
"extPlanSalle().render('"+plan+"', "+casiers.toString()+");"
);
}
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);
STYLES
Ajouter une ressource avec les styles vus plus haut