From 1d6145010bddf38d4261f2ce3ecdc6ead093ffc7 Mon Sep 17 00:00:00 2001
From: Emmanuel Viennet <emmanuel.viennet@gmail.com>
Date: Sat, 18 Feb 2023 02:37:07 +0100
Subject: [PATCH] =?UTF-8?q?PR=20#603=20reprise:=20=C3=A9tat=20du=20formula?=
 =?UTF-8?q?ire=20preferences.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/forms/main/config_logos.py              | 10 +++
 app/scodoc/sco_preferences.py               | 11 ++-
 app/static/js/detail_summary_persistence.js | 82 +++++++++++++++++++++
 app/templates/config_logos.j2               |  7 +-
 4 files changed, 105 insertions(+), 5 deletions(-)
 create mode 100644 app/static/js/detail_summary_persistence.js

diff --git a/app/forms/main/config_logos.py b/app/forms/main/config_logos.py
index 2a54dd7c..d01cc5cc 100644
--- a/app/forms/main/config_logos.py
+++ b/app/forms/main/config_logos.py
@@ -148,6 +148,9 @@ class AddLogoForm(FlaskForm):
         kwargs["meta"] = {"csrf": False}
         super().__init__(*args, **kwargs)
 
+    def id(self):
+        return f"id=add_{self.dept_key.data}"
+
     def validate_name(self, name):
         dept_id = dept_key_to_id(self.dept_key.data)
         if dept_id == GLOBAL:
@@ -227,6 +230,10 @@ class LogoForm(FlaskForm):
                 self.description = "Se substitue au footer défini au niveau global"
                 self.titre = "Logo pied de page"
 
+    def id(self):
+        idstring = f"{self.dept_key.data}_{self.logo_id.data}"
+        return f"id={idstring}"
+
     def select_action(self):
         from app.scodoc.sco_config_actions import LogoRename
         from app.scodoc.sco_config_actions import LogoUpdate
@@ -258,6 +265,9 @@ class DeptForm(FlaskForm):
         kwargs["meta"] = {"csrf": False}
         super().__init__(*args, **kwargs)
 
+    def id(self):
+        return f"id=DEPT_{self.dept_key.data}"
+
     def is_local(self):
         if self.dept_key.data == GLOBAL:
             return None
diff --git a/app/scodoc/sco_preferences.py b/app/scodoc/sco_preferences.py
index 8ecafcbb..85ab9ea4 100644
--- a/app/scodoc/sco_preferences.py
+++ b/app/scodoc/sco_preferences.py
@@ -2069,7 +2069,10 @@ class BasePreferences(object):
 
         self.load()
         H = [
-            html_sco_header.sco_header(page_title="Préférences"),
+            html_sco_header.sco_header(
+                page_title="Préférences",
+                javascripts=["js/detail_summary_persistence.js"],
+            ),
             f"<h2>Préférences globales pour {scu.ScoURL()}</h2>",
             # f"""<p><a href="{url_for("scodoc.configure_logos", scodoc_dept=g.scodoc_dept)
             # }">modification des logos du département (pour documents pdf)</a></p>"""
@@ -2210,10 +2213,14 @@ class SemPreferences:
             )  # a bug !
         sem = sco_formsemestre.get_formsemestre(self.formsemestre_id)
         H = [
-            html_sco_header.html_sem_header("Préférences du semestre"),
+            html_sco_header.html_sem_header(
+                "Préférences du semestre",
+                javascripts=["js/detail_summary_persistence.js"],
+            ),
             """
 <p class="help">Les paramètres définis ici ne s'appliqueront qu'à ce semestre.</p>
 <p class="msg">Attention: cliquez sur "Enregistrer les modifications" en bas de page pour appliquer vos changements !</p>
+
 <script type="text/javascript">
 function sel_global(el, pref_name) {
      var tf = document.getElementById("tf");
diff --git a/app/static/js/detail_summary_persistence.js b/app/static/js/detail_summary_persistence.js
new file mode 100644
index 00000000..1a884889
--- /dev/null
+++ b/app/static/js/detail_summary_persistence.js
@@ -0,0 +1,82 @@
+/*
+Ce module a pour objet de conserver la configuration (état ouvert/fermé) des balises details/summary
+d'un page donnée.
+On stocke l'état de chaque balise dans le localstorage javascript (associé à la page)
+pour cela il est nécessaire d'identifier chaque balise. Ceci se fait:
+* soit au moyen de l'id si un id est déclaré pour la balise ('#' + id)
+* soit en numérotant les balises dans l'ordre de parcours de la page. ('ds_' + numéro)
+l'identifiant généré est stocké comme attribut ds_id de la balise.
+
+la variable keepDetails peut être mise à false (par inclusion du code
+<script type="text/javascript>keepDetails = false;</script> pour reinitialisés l'état de toutes
+les balises (fermées par défaut sauf si attribut open déjà activé dans le code source de la page)
+
+*/
+
+const ID_ATTRIBUTE = "ds_id"
+
+function genere_id(detail, idnum) {
+    let id = "ds_" + idnum;
+    if (detail.getAttribute("id")) {
+        id = "#" + detail.getAttribute("id");
+    }
+    detail.setAttribute(ID_ATTRIBUTE, id);
+    return id;
+}
+
+// remise à l'état initial. doit être exécuté dès le chargement de la page pour que l'état 'open'
+// des balises soit celui indiqué par le serveur (et donc indépendant du localstorage)
+function reset_detail(detail, id) {
+    let opened = detail.getAttribute("open");
+    if (opened) {
+        detail.setAttribute("open", true);
+        localStorage.setItem(id, true);
+    } else {
+        detail.removeAttribute("open");
+        localStorage.setItem(id, false);
+    }
+}
+
+function restore_detail(detail, id) {
+    let status = localStorage.getItem(id);
+    if (status == "true") {
+        detail.setAttribute("open", true);
+    } else {
+        detail.removeAttribute("open");
+    }
+}
+
+function add_listener(detail) {
+    detail.addEventListener('toggle', (e) => {
+        let id = e.target.getAttribute(ID_ATTRIBUTE);
+        let ante = e.target.getAttribute("open");
+        if (ante == null) {
+            localStorage.setItem(id, false);
+        } else {
+            localStorage.setItem(id, true);
+        }
+        e.stopPropagation();
+    })
+}
+
+function reset_ds() {
+    let idnum = 0;
+    keepDetails = true;
+    details = document.querySelectorAll("details")
+    details.forEach(function (detail) {
+        let id = genere_id(detail, idnum);
+        console.log("Processing " + id)
+        if (keepDetails) {
+            restore_detail(detail, id);
+        } else {
+            reset_detail(detail, id);
+        }
+        add_listener(detail);
+        idnum++;
+    });
+}
+
+window.addEventListener('load', function() {
+    console.log("details/summary persistence ON");
+    reset_ds();
+})
diff --git a/app/templates/config_logos.j2 b/app/templates/config_logos.j2
index 03808c1b..918c1f9a 100644
--- a/app/templates/config_logos.j2
+++ b/app/templates/config_logos.j2
@@ -20,7 +20,7 @@
 {% endmacro %}
 
 {% macro render_add_logo(add_logo_form) %}
-<details {{ add_logo_form.opened() }}>
+<details {{ add_logo_form.id() }} {{ add_logo_form.opened() }}>
     <summary>
         <h3>Ajouter un logo</h3>
     </summary>
@@ -33,7 +33,7 @@
 {% endmacro %}
 
 {% macro render_logo(dept_form, logo_form) %}
-<details {{ logo_form.opened() }}>
+<details {{ logo_form.id() }} {{ logo_form.opened() }}>
     {{ logo_form.hidden_tag() }}
     <summary>
         {% if logo_form.titre %}
@@ -95,6 +95,7 @@
 
 <script src="/ScoDoc/static/jQuery/jquery.js"></script>
 <script src="/ScoDoc/static/js/config_logos.js"></script>
+<script src="/ScoDoc/static/js/detail_summary_persistence.js"></script>
 
 <form id="config_logos_form" class="sco-form" action="" method="post" enctype="multipart/form-data" novalidate>
     {{ form.hidden_tag() }}
@@ -104,7 +105,7 @@
         {% for dept_entry in form.depts.entries %}
         {% set dept_form = dept_entry.form %}
         {{ dept_entry.form.hidden_tag() }}
-        <details {{ dept_form.opened() }}>
+        <details {{ dept_form.id() }} {{ dept_form.opened() }}>
             <summary>
                 <span class="entete_dept">
                     {% if dept_entry.form.is_local() %}