MonScoDocEssai/app/static/js/groupmgr.js

/* -*- mode: javascript -*-
 *
 * ScoDoc: Affectation des groupes de TD
 *  OBSOLETE: Page ScoDoc 7 avec jQuery, remplacée par partition_editor
 */

/* --- Globals ---- */
var EtudColors = ["#E8EEF7", "#ffffff"]; // [ "#E8EEF7", "#E0ECFF", "#E5E6BE", "#F3EAE2", "#E3EAE1" ];
var EtudColorsIdx = 0;
var NbEtuds = 0;
var ETUDS = new Object(); // { etudid : etud }
var ETUD_GROUP = new Object(); // { etudid : group_id }
var groups_unsaved = false;

var groups = new Object(); // Liste des groupes

function loadGroupes() {
  $("#gmsg")[0].innerHTML = "Chargement des groupes en cours...";
  $("#gmsg")[0].style.display = "block";
  var partition_id = document.formGroup.partition_id.value;

  $.get(SCO_URL + "/XMLgetGroupsInPartition", {
    partition_id: partition_id,
  }).done(function (data) {
    var nodes = data.getElementsByTagName("group");
    if (nodes) {
      var nbgroups = nodes.length;
      // put last group at first (etudiants sans groupes)
      if (
        nodes.length > 1 &&
        nodes[nbgroups - 1].attributes.getNamedItem("group_id").value ==
          "_none_"
      ) {
        populateGroup(nodes[nodes.length - 1]);
        nbgroups -= 1;
      }
      // then standard groups
      for (var i = 0; i < nbgroups; i++) {
        populateGroup(nodes[i]);
      }
    }
    $("#gmsg")[0].innerHTML = "";
    $("#gmsg")[0].style.display = "none";
    updateginfo();
  });
}

function populateGroup(node) {
  var group_id = node.attributes.getNamedItem("group_id").value;
  var group_name = node.attributes.getNamedItem("group_name").value;
  var groups_editable = Boolean(
    parseInt(node.attributes.getNamedItem("groups_editable").value)
  );
  // CREE LA BOITE POUR CE GROUPE
  if (group_id) {
    var gbox = new CGroupBox(group_id, group_name, groups_editable);
    var etuds = node.getElementsByTagName("etud");
    var x = "";
    gbox.sorting = false; // disable to speedup
    EtudColorsIdx = 0; // repart de la premiere couleur
    for (var j = 0; j < etuds.length; j++) {
      var nom = etuds[j].attributes.getNamedItem("nom").value;
      var prenom = etuds[j].attributes.getNamedItem("prenom").value;
      var sexe = etuds[j].attributes.getNamedItem("sexe").value;
      var etudid = etuds[j].attributes.getNamedItem("etudid").value;
      var origin = etuds[j].attributes.getNamedItem("origin").value;
      var etud = new CDraggableEtud(nom, prenom, sexe, origin, etudid);
      gbox.createEtudInGroup(etud, group_id);
    }
    gbox.sorting = true;
    gbox.updateTitle(); // sort
  }
}

/* --- Boite pour un groupe --- */

var groupBoxes = new Object(); // assoc group_id : groupBox
var groupsToDelete = new Object(); // list of group_id to be supressed

var CGroupBox = function (group_id, group_name, groups_editable) {
  group_id = $.trim(group_id);
  var regex = /^\w+$/;
  if (!regex.test(group_id)) {
    alert("Id de groupe invalide");
    return;
  }
  if (group_id in groups) {
    alert("Le groupe " + group_id + " existe déjà !");
    return;
  }
  groups[group_id] = 1;
  this.group_id = group_id;
  this.group_name = group_name;
  this.groups_editable = groups_editable;
  this.etuds = new Object();
  this.nbetuds = 0;
  this.isNew = false; // true for newly user-created groups
  this.sorting = true; // false to disable sorting

  this.groupBox = document.createElement("div");
  this.groupBox.className = "simpleDropPanel";
  this.groupBox.id = group_id;
  var titleDiv = document.createElement("div");
  titleDiv.className = "groupTitle0";
  titleDiv.appendChild(this.groupTitle());
  this.groupBox.appendChild(titleDiv);
  var gdiv = document.getElementById("groups");
  gdiv.appendChild(this.groupBox);
  this.updateTitle();
  $(this.groupBox).droppable({
    accept: ".box",
    activeClass: "activatedPanel",
    drop: function (event, ui) {
      // alert("drop on " + this.group_name);
      var etudid = ui.draggable[0].id;
      var etud = ETUDS[etudid];
      var newGroupName = this.id;
      var oldGroupName = ETUD_GROUP[etudid];
      $(groupBoxes[newGroupName].groupBox).append(ui.draggable);
      ui.draggable[0].style.left = ""; // fix style (?)
      ui.draggable[0].style.top = "";
      etud.changeGroup(oldGroupName, newGroupName);
      etud.htmlElement.style.fontStyle = "italic"; // italic pour les etudiants deplaces
    },
  });
  /* On peut s'amuser a deplacer tout un groupe (visuellement: pas droppable) */
  $(this.groupBox).draggable({
    cursor: "move",
    containment: "#groups",
  });

  groupBoxes[group_id] = this; // register
  updateginfo();
};

$.extend(CGroupBox.prototype, {
  // menu for group title
  groupTitle: function () {
    let menuSpan = document.createElement("span");
    menuSpan.className = "barrenav";
    let h =
      '<table><tr><td><ul class="nav"><li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu custommenu"><span id="titleSpan' +
      this.group_id +
      '" class="groupTitle">menu</span></a><ul>';
    if (this.groups_editable && this.group_id != "_none_") {
      h +=
        '<li><a href="#" onClick="suppressGroup(\'' +
        this.group_id +
        "');\">Supprimer</a></li>";
      h +=
        '<li><a href="#" onClick="renameGroup(\'' +
        this.group_id +
        "');\">Renommer</a></li>";
    }
    h += "</ul></li></ul></td></tr></table>";
    menuSpan.innerHTML = h;
    return menuSpan;
  },
  // add etud to group, attach to DOM
  createEtudInGroup: function (etud) {
    this.addEtudToGroup(etud);
    this.groupBox.appendChild(etud.htmlElement);
  },
  // add existing etud to group (does not affect DOM)
  addEtudToGroup: function (etud) {
    etud.group_id = this.group_id;
    this.etuds[etud.etudid] = etud;
    this.nbetuds++;
    ETUD_GROUP[etud.etudid] = this.group_id;
    this.updateTitle();
  },
  // remove etud
  removeEtud: function (etud) {
    delete this.etuds[etud.etudid];
    this.nbetuds--;
    this.updateTitle();
  },
  // Update counter display
  updateTitle: function () {
    var tclass = "";
    if (this.isNew) {
      tclass = ' class="newgroup"';
    }
    var titleSpan = document.getElementById("titleSpan" + this.group_id);
    if (this.group_id != "_none_")
      titleSpan.innerHTML =
        "<span" +
        tclass +
        ">Groupe " +
        this.group_name +
        " (" +
        this.nbetuds +
        ")</span>";
    else
      titleSpan.innerHTML =
        "<span" +
        tclass +
        ">Etudiants sans groupe" +
        " (" +
        this.nbetuds +
        ")</span>";
    this.sortList(); // maintient toujours la liste triee
  },
  // Tri de la boite par nom
  sortList: function () {
    if (!this.sorting) return;
    var newRows = new Array();
    for (var i = 1; i < this.groupBox.childNodes.length; i++) {
      // 1 car div titre
      newRows[i - 1] = this.groupBox.childNodes[i];
    }
    var sortfn = function (a, b) {
      // recupere les noms qui sont dans un span
      var nom_a = a.childNodes[1].childNodes[0].nodeValue;
      var nom_b = b.childNodes[1].childNodes[0].nodeValue;
      // console.log( 'comp( %s, %s )', nom_a, nom_b );
      if (nom_a == nom_b) return 0;
      if (nom_a < nom_b) return -1;
      return 1;
    };
    newRows.sort(sortfn);
    for (var i = 0; i < newRows.length; i++) {
      this.groupBox.appendChild(newRows[i]);
      newRows[i].style.backgroundColor = EtudColors[EtudColorsIdx];
      EtudColorsIdx = (EtudColorsIdx + 1) % EtudColors.length;
    }
  },
});

function suppressGroup(group_id) {
  // 1- associate all members to group _none_
  if (!groupBoxes["_none_"]) {
    // create group _none_
    var gbox = new CGroupBox("_none_", "Etudiants sans groupe", true);
  }
  var dst_group_id = groupBoxes["_none_"].group_id;
  var src_box_etuds = groupBoxes[group_id].etuds;
  for (var etudid in src_box_etuds) {
    var etud = src_box_etuds[etudid];
    etud.changeGroup(group_id, dst_group_id);
    groupBoxes["_none_"].groupBox.appendChild(etud.htmlElement);
  }
  groupBoxes["_none_"].updateTitle();
  // 2- add group to list of groups to be removed (unless it's a new group)
  if (!groupBoxes[group_id].isNew) groupsToDelete[group_id] = true;
  // 3- delete objects and remove from DOM
  var div = document.getElementById(group_id);
  div.remove();
  delete groupBoxes[group_id];
  groups_unsaved = true;
  updateginfo();
}

function renameGroup(group_id) {
  // 1-- save modifications
  if (groups_unsaved) {
    alert("Enregistrez ou annulez vos changement avant !");
  } else {
    // 2- form rename
    document.location = "group_rename?group_id=" + group_id;
  }
}

var createdGroupId = 0;
function newGroupId() {
  var gid;
  do {
    gid = "NG" + createdGroupId.toString();
    createdGroupId += 1;
  } while (gid in groupBoxes);
  return gid;
}

// Creation d'un groupe
function createGroup() {
  var group_name = document.formGroup.groupName.value.trim();
  if (!group_name) {
    alert("Nom de groupe vide !");
    return false;
  }
  if (group_name.length >= 32) {
    // SHORT_STR_LEN
    alert("Nom de groupe trop long !");
    return false;
  }
  // check name:
  for (var group_id in groupBoxes) {
    if (group_id != "extend") {
      if (groupBoxes[group_id].group_name == group_name) {
        alert("Nom de groupe déja existant !");
        return false;
      }
    }
  }
  var group_id = newGroupId();
  groups_unsaved = true;
  var gbox = new CGroupBox(group_id, group_name, true);
  gbox.isNew = true;
  gbox.updateTitle();
  return true;
}

/* --- Etudiant draggable --- */
var CDraggableEtud = function (nom, prenom, sexe, origin, etudid) {
  this.type = "Custom";
  this.name = etudid;
  this.etudid = etudid;
  this.nom = nom;
  this.prenom = prenom;
  this.sexe = sexe;
  this.origin = origin;
  this.createNode();
  ETUDS[etudid] = this;
  NbEtuds++;
};

$.extend(CDraggableEtud.prototype, {
  repr: function () {
    return (
      this.sexe +
      " " +
      this.prenom +
      ' <span class="nom">' +
      this.nom +
      "</span> " +
      "<b>" +
      this.origin +
      "</b>"
    );
  },
  createNode: function () {
    // Create DOM element for student
    var e = document.createElement("div");
    this.htmlElement = e;
    e.className = "box";
    e.id = this.etudid;
    // e.style.backgroundColor = EtudColors[EtudColorsIdx];
    // EtudColorsIdx = (EtudColorsIdx + 1) % EtudColors.length;
    //var txtNode = document.createTextNode( this.repr() );
    //e.appendChild(txtNode);
    e.innerHTML = this.repr();
    // declare as draggable
    $(e).draggable({
      cursor: "move",
      stack: "#groups div",
      containment: "#groups",
      revert: "invalid",
    });
  },
  endDrag: function () {
    var el = this.htmlElement;
    var p = el.parentNode;
    // alert("endDrag: [" + this.name +"] " + p.id );
    this.changeGroup(this.group_id, p.id);
    this.htmlElement.style.fontStyle = "italic"; // italic pour les etudiants deplaces
  },
  // Move a student from a group to another
  changeGroup: function (oldGroupName, newGroupName) {
    if (oldGroupName == newGroupName) {
      // drop on original group, just sort
      groupBoxes[oldGroupName].updateTitle();
      return;
    }
    var oldGroupBox = null;
    if (oldGroupName) {
      oldGroupBox = groupBoxes[oldGroupName];
    }
    var newGroupBox = groupBoxes[newGroupName];
    newGroupBox.addEtudToGroup(this);
    if (oldGroupBox) oldGroupBox.removeEtud(this);
    groups_unsaved = true;
    updatesavedinfo();
  },
});

/* --- Upload du resultat --- */
function processResponse(value) {
  location.reload(); // necessaire pour reinitialiser les id des groupes créés
}

function handleError(msg) {
  alert("Error: " + msg);
  console.log("Error: " + msg);
}

function submitGroups() {
  var url = SCO_URL + "/setGroups";
  // build post request body: groupname \n etudid; ...
  var groupsLists = "";
  var groupsToCreate = "";
  for (var group_id in groupBoxes) {
    if (group_id != "extend") {
      // je ne sais pas ce dont il s'agit ???
      if (group_id != "_none_") {
        // ne renvoie pas le groupe des sans-groupes
        groupBox = groupBoxes[group_id];
        if (groupBox.isNew) {
          groupsToCreate += groupBox.group_name + ";";
          for (var etudid in groupBox.etuds) {
            if (etudid != "extend") groupsToCreate += etudid + ";";
          }
          groupsToCreate += "\n";
          groupBox.isNew = false; // is no more new !
        } else {
          groupsLists += group_id + ";";
          for (var etudid in groupBox.etuds) {
            if (etudid != "extend") groupsLists += etudid + ";";
          }
          groupsLists += "\n";
        }
      }
    }
  }
  var todel = "";
  for (var group_id in groupsToDelete) {
    todel += group_id + ";";
  }
  groupsToDelete = new Object(); // empty
  var partition_id = document.formGroup.partition_id.value;
  // Send to server
  $.post(url, {
    groupsLists: groupsLists,
    partition_id: partition_id,
    groupsToDelete: todel,
    groupsToCreate: groupsToCreate,
  })
    .done(function (data) {
      processResponse(data);
    })
    .fail(function (xhr, status, error) {
      let msg = "inconnue";
      if (xhr.responseXML.childNodes.length > 0) {
        msg = xhr.responseXML.childNodes[0].innerHTML;
      }
      handleError("Erreur lors de l'enregistrement de groupes: " + msg);
    });
}

// Move to another partition (specified by menu)
function GotoAnother() {
  if (groups_unsaved) {
    alert("Enregistrez ou annulez vos changement avant !");
  } else
    document.location =
      SCO_URL +
      "/affect_groups?partition_id=" +
      document.formGroup.other_partition_id.value;
}

// Boite information haut de page
function updateginfo() {
  var g = document.getElementById("ginfo");
  var group_names = new Array();
  for (var group_id in groupBoxes) {
    if (group_id != "extend" && groupBoxes[group_id].group_name) {
      group_names.push(groupBoxes[group_id].group_name);
    }
  }
  g.innerHTML =
    "<b>Groupes définis: " +
    group_names.join(", ") +
    "<br/>" +
    "Nombre d'etudiants: " +
    NbEtuds +
    "</b>";

  updatesavedinfo();
}

// Boite indiquant si modifications non enregistrees ou non
function updatesavedinfo() {
  var g = document.getElementById("savedinfo");
  if (groups_unsaved) {
    g.innerHTML = "modifications non enregistrées";
    g.style.visibility = "visible";
  } else {
    g.innerHTML = "";
    g.style.visibility = "hidden";
  }
  return true;
}

$(function () {
  loadGroupes();
});