assiduités : vérification date + repère minitimeline

app/static/css/assiduites.css

@@ -147,6 +147,7 @@
     display: flex;
     flex-wrap: wrap;
     grid-column: 3;
+    position: relative;
 }
 
 
@@ -190,7 +191,7 @@
     grid-column: 4;
 }
 
-.etud_row .btns_field:disabled {
+.btns_field:disabled {
     opacity: 0.7;
 }
 
@@ -467,4 +468,31 @@
     position: absolute;
     height: 100%;
     z-index: 1;
+}
+
+.mini_tick {
+    position: absolute;
+    text-align: center;
+    top: -16px;
+
+}
+
+.mini_tick:nth-child(1) {
+    left: 26px;
+}
+
+.mini_tick:nth-child(3) {
+    right: -2px;
+}
+
+.mini_tick:nth-child(2) {
+    left: 50%;
+}
+
+.mini_tick::after {
+    display: block;
+    content: "|";
+    position: absolute;
+    bottom: -2px;
+    z-index: 9;
 }

app/static/js/assiduites.js

@@ -61,26 +61,45 @@ function setupCheckBox(parent = document) {
  * - Date
  */
 function validateSelectors() {
-  const group_ids = getGroupIds();
+  const action = () => {
+    const group_ids = getGroupIds();
 
-  etuds = {};
-  group_ids.forEach((group_id) => {
-    sync_get(url + `/api/group/${group_id}/etudiants`, (data, status) => {
-      if (status === "success") {
-        data.forEach((etud) => {
-          if (!(etud.id in etuds)) {
-            etuds[etud.id] = etud;
-          }
-        });
-      }
+    etuds = {};
+    group_ids.forEach((group_id) => {
+      sync_get(url + `/api/group/${group_id}/etudiants`, (data, status) => {
+        if (status === "success") {
+          data.forEach((etud) => {
+            if (!(etud.id in etuds)) {
+              etuds[etud.id] = etud;
+            }
+          });
+        }
+      });
     });
-  });
 
-  getAssiduitesFromEtuds(true);
+    getAssiduitesFromEtuds(true);
 
-  document.querySelector(".selectors").disabled = true;
-  generateMassAssiduites();
-  generateAllEtudRow();
+    document.querySelector(".selectors").disabled = true;
+    generateMassAssiduites();
+    generateAllEtudRow();
+  };
+
+  if (!verifyDateInSemester()) {
+    const HTML = `
+    <p>Attention, la date sélectionnée n'est pas comprise dans le semestre.</p>
+    <p>Cette page permet l'affichage et la modification des assiduités uniquement pour le semestre sélectionné.</p>
+    <p>Vous n'aurez donc pas accès aux assiduités.</p>
+    <p>Appuyer sur "Valider" uniquement si vous souhaitez poursuivre sans modifier la date.</p>
+     `;
+
+    const content = document.createElement("div");
+    content.innerHTML = HTML;
+
+    openPromptModal("Vérification de la date", content, action);
+    return;
+  }
+
+  action();
 }
 
 /**
@@ -366,6 +385,10 @@ function generateMassAssiduites() {
       massAction();
     });
   });
+
+  if (!verifyDateInSemester()) {
+    content.querySelector(".btns_field.mass").setAttribute("disabled", "true");
+  }
 }
 
 /**
@@ -422,6 +445,17 @@ function updateDate() {
   $("#datestr").text(formatDate(date).capitalize());
 }
 
+function verifyDateInSemester() {
+  const date = new moment.tz(
+    document.querySelector("#tl_date").value,
+    TIMEZONE
+  );
+
+  const periodSemester = getFormSemestreDates();
+
+  return date.isBetween(periodSemester.deb, periodSemester.fin);
+}
+
 /**
  * Ajoute la possibilité d'ouvrir le calendrier
  * lorsqu'on clique sur la date
@@ -892,6 +926,9 @@ function generateEtudRow(
     </div>
     <div class="assiduites_bar">
         <div id="prevDateAssi" class="${assiduite.prevAssiduites?.etat?.toLowerCase()}">
+        <span class="mini_tick">8h</span>
+        <span class="mini_tick">13h</span>
+        <span class="mini_tick">18h</span>
         </div>
     </div>
     <fieldset class="btns_field single" etudid="${etud.id}" assiduite_id="${
@@ -953,6 +990,10 @@ function insertEtudRow(etud, index, output = false) {
   const bar = row.querySelector(".assiduites_bar");
 
   bar.appendChild(createMiniTimeline(assiduites[etud.id]));
+
+  if (!verifyDateInSemester()) {
+    row.querySelector(".btns_field.single").setAttribute("disabled", "true");
+  }
 }
 
 /**
@@ -1582,3 +1623,19 @@ function getModuleImplId() {
 function getFormSemestreId() {
   return document.querySelector(".formsemestre_id").textContent;
 }
+
+/**
+ * Récupère la période du semestre
+ * @returns {object} période {deb,fin}
+ */
+function getFormSemestreDates() {
+  const dateDeb = document.getElementById(
+    "formsemestre_date_debut"
+  ).textContent;
+  const dateFin = document.getElementById("formsemestre_date_fin").textContent;
+
+  return {
+    deb: dateDeb,
+    fin: dateFin,
+  };
+}

app/templates/assiduites/signal_assiduites_group.j2

@@ -3,6 +3,8 @@
     <div class="no-display">
 
         <span class="formsemestre_id">{{formsemestre_id}}</span>
+        <span id="formsemestre_date_debut">{{formsemestre_date_debut}}</span>
+        <span id="formsemestre_date_fin">{{formsemestre_date_fin}}</span>
 
     </div>
 

app/views/assiduites.py

@@ -219,7 +219,7 @@ def signal_assiduites_group():
 
     # --- Filtrage par formsemestre ---
     formsemestre_id = groups_infos.formsemestre_id
-    formsemestre = FormSemestre.query.get_or_404(formsemestre_id)
+    formsemestre: FormSemestre = FormSemestre.query.get_or_404(formsemestre_id)
     if formsemestre.dept_id != g.scodoc_dept_id:
         abort(404, "groupes inexistants dans ce département")
 
@@ -293,6 +293,8 @@ def signal_assiduites_group():
             grp=sco_groups_view.menu_groups_choice(groups_infos),
             moduleimpl_select=_module_selector(formsemestre, moduleimpl_id),
             timeline=_timeline(),
+            formsemestre_date_debut=str(formsemestre.date_debut),
+            formsemestre_date_fin=str(formsemestre.date_fin),
         ),
         html_sco_header.sco_footer(),
     ).build()