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

Support
3

@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