Representation graphique du statut (vide, occupé...) des casiers d'une consigne

Bonjour,
Je souhaiterais pouvoir représenter par des couleurs le statut des cases de casiers sur un plan.
et pouvoir cliquer sur une des cases pour la sélectionner.
Cette question avait déjà été posée ici http://community.simplicite.io/t/gestion-dune-camera-et-plan-dans-simplicite/1411?u=dagry
mais la réponse n’était celle à quoi nous nous attendions.


Je joins la représentation exacte et celle que j’ai faite via excel

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.

  1. 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 :

table.plan-casier {
   td { width:10px; height: 10px; background: #eee; }
   td[data-casier] { border: solid 2px #000; cursor: pointer; }
   td.blanc { background: #FFF; }
   td.jaune { background: #0FF; }
}
  1. dessiner la salle : faire un objet externe
  • 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