💻 Add hide tables label (hedyorg#5748)

Yesterday while on the meeting @gisellandrade pointed out that the button always said: "View [table]" so in this PR I'm correcting it. As well as simplifying a bit the functions that handle these buttons and replace the use of JQuery. Fixes hedyorg#5743 **How to test** * Log in as a teacher * Go to the For teachers page and hide and show the tables. The labels should change depending on the state of the table. * Also try reloading and seeing if the table keeps the same state as previously. If you're unsure about any of these, don't hesitate to ask. We're here to help!
Sidd-T · Sep 5, 2024 · 996c426 · 996c426
1 parent 811b7c2
commit 996c426
Show file tree

Hide file tree

Showing 63 changed files with 576 additions and 43 deletions.
diff --git a/messages.pot b/messages.pot
@@ -737,12 +737,21 @@ msgstr ""
 msgid "hello_logo"
 msgstr ""
 
+msgid "hide_adventures"
+msgstr ""
+
 msgid "hide_cheatsheet"
 msgstr ""
 
+msgid "hide_classes"
+msgstr ""
+
 msgid "hide_keyword_switcher"
 msgstr ""
 
+msgid "hide_slides"
+msgstr ""
+
 msgid "highest_level_reached"
 msgstr ""
 

diff --git a/static/js/app.ts b/static/js/app.ts
@@ -1435,29 +1435,29 @@ function toggleDevelopersMode() {
 }
 
 export function saveForTeacherTable(table: string) {
-  let open = window.localStorage.getItem(table);
+  let show_table = window.localStorage.getItem(table);
+  window.localStorage.setItem(table, (show_table !== 'true').toString())
   const arrow = document.querySelector('#' + table + '_arrow') as HTMLElement;
-  if (open == 'true'){
-    window.localStorage.setItem(table, 'false')
-    $('#' + table).hide();
-    arrow.classList.remove('rotate-180');
-  } else {
-    window.localStorage.setItem(table, 'true')
-    $('#' + table).show();
-    arrow.classList.add('rotate-180');
-  }
+  const table_ele = document.getElementById(table)!
+  const show_label = document.getElementById(table + '_show')!
+  const hide_label = document.getElementById(table + '_hide')!
+  table_ele.classList.toggle('hidden')
+  show_label.classList.toggle('hidden')
+  hide_label.classList.toggle('hidden')
+  arrow.classList.toggle('rotate-180');
 }
 
 export function getForTeacherTable(table: string) {
-  let open = window.localStorage.getItem(table);
-  const arrow = document.querySelector('#' + table + '_arrow') as HTMLElement;
-  if (open == 'true'){
-    $('#' + table).show();
-    arrow.classList.add('rotate-180');
-  } else {
-    $('#' + table).hide()
-    arrow.classList.remove('rotate-180');
-  }
+  let show_table = window.localStorage.getItem(table);
+  const table_ele = document.getElementById(table)!
+  const arrow = document.getElementById(table + '_arrow')!;
+  const show_label = document.getElementById(table + '_show')!
+  const hide_label = document.getElementById(table + '_hide')!
+
+  table_ele.classList.toggle('hidden', show_table !== 'true');
+  show_label.classList.toggle('hidden', show_table === 'true');
+  hide_label.classList.toggle('hidden', show_table !== 'true');
+  arrow.classList.toggle('rotate-180', show_table === 'true');
 }
 
 /**

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -121078,28 +121078,27 @@ def note_with_error(value, err):
     });
   }
   function saveForTeacherTable(table) {
-    let open = window.localStorage.getItem(table);
+    let show_table = window.localStorage.getItem(table);
+    window.localStorage.setItem(table, (show_table !== "true").toString());
     const arrow = document.querySelector("#" + table + "_arrow");
-    if (open == "true") {
-      window.localStorage.setItem(table, "false");
-      $("#" + table).hide();
-      arrow.classList.remove("rotate-180");
-    } else {
-      window.localStorage.setItem(table, "true");
-      $("#" + table).show();
-      arrow.classList.add("rotate-180");
-    }
+    const table_ele = document.getElementById(table);
+    const show_label = document.getElementById(table + "_show");
+    const hide_label = document.getElementById(table + "_hide");
+    table_ele.classList.toggle("hidden");
+    show_label.classList.toggle("hidden");
+    hide_label.classList.toggle("hidden");
+    arrow.classList.toggle("rotate-180");
   }
   function getForTeacherTable(table) {
-    let open = window.localStorage.getItem(table);
-    const arrow = document.querySelector("#" + table + "_arrow");
-    if (open == "true") {
-      $("#" + table).show();
-      arrow.classList.add("rotate-180");
-    } else {
-      $("#" + table).hide();
-      arrow.classList.remove("rotate-180");
-    }
+    let show_table = window.localStorage.getItem(table);
+    const table_ele = document.getElementById(table);
+    const arrow = document.getElementById(table + "_arrow");
+    const show_label = document.getElementById(table + "_show");
+    const hide_label = document.getElementById(table + "_hide");
+    table_ele.classList.toggle("hidden", show_table !== "true");
+    show_label.classList.toggle("hidden", show_table === "true");
+    hide_label.classList.toggle("hidden", show_table !== "true");
+    arrow.classList.toggle("rotate-180", show_table === "true");
   }
   async function tryCatchErrorBox(cb2) {
     try {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/for-teachers.html b/templates/for-teachers.html
@@ -24,7 +24,8 @@ <h2 class="m-0 basis-1/12"> {{_('classes')}} </h2>
         <button class="white-btn inline-flex items-center gap-2" data-cy="view_classes"
         _="on click hedyApp.saveForTeacherTable('classes_table')"
         >
-        <span>{{_('view_classes')}}</span>
+        <span id="classes_table_show" class="">{{_('view_classes')}}</span>
+        <span id="classes_table_hide" class="hidden">{{_('hide_classes')}}</span>
         <svg id="classes_table_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
         </svg>
@@ -43,7 +44,8 @@ <h2 class="m-0 basis-1/12"> {{_('adventures')}} </h2>
             {% if teacher_adventures %}
             <button class="white-btn inline-flex" id="view_adventures" data-cy="view_adventures"
             _="on click hedyApp.saveForTeacherTable('adventures_table')">
-            <span>{{_('view_adventures')}}</span>
+            <span id="adventures_table_show" class="">{{_('view_adventures')}}</span>
+            <span id="adventures_table_hide" class="hidden">{{_('hide_adventures')}}</span>
             <svg id="adventures_table_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
               <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
             </svg>
@@ -72,7 +74,8 @@ <h2 class="m-0 basis-1/12"> {{_('slides')}} </h2>
           _="on load hedyApp.getForTeacherTable('slides_table') end
           on click hedyApp.saveForTeacherTable('slides_table') end"
           >
-          <span>{{_('view_slides')}}</span>
+          <span id="slides_table_show">{{_('view_slides')}}</span>
+          <span id="slides_table_hide" class="hidden">{{_('hide_slides')}}</span>
           <svg id="slides_table_arrow" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
           </svg>

diff --git a/translations/ar/LC_MESSAGES/messages.po b/translations/ar/LC_MESSAGES/messages.po
@@ -873,12 +873,21 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "مرحبا!"
 
+msgid "hide_adventures"
+msgstr ""
+
 msgid "hide_cheatsheet"
 msgstr "اخفاء ورقة الغش"
 
+msgid "hide_classes"
+msgstr ""
+
 msgid "hide_keyword_switcher"
 msgstr "اخفاء تبديل الكلمات المفتاحية"
 
+msgid "hide_slides"
+msgstr ""
+
 msgid "highest_level_reached"
 msgstr "أعلى مستوى تم الوصول له"
 

diff --git a/translations/bg/LC_MESSAGES/messages.po b/translations/bg/LC_MESSAGES/messages.po
@@ -951,14 +951,23 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "Здравей"
 
+msgid "hide_adventures"
+msgstr ""
+
 #, fuzzy
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 #, fuzzy
 msgid "highest_level_reached"
 msgstr "Highest level reached"

diff --git a/translations/bn/LC_MESSAGES/messages.po b/translations/bn/LC_MESSAGES/messages.po
@@ -977,14 +977,23 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "hello"
 
+msgid "hide_adventures"
+msgstr ""
+
 #, fuzzy
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 #, fuzzy
 msgid "highest_level_reached"
 msgstr "Highest level reached"

diff --git a/translations/ca/LC_MESSAGES/messages.po b/translations/ca/LC_MESSAGES/messages.po
@@ -832,12 +832,21 @@ msgstr "Hedy a Github"
 msgid "hello_logo"
 msgstr "hola"
 
+msgid "hide_adventures"
+msgstr ""
+
 msgid "hide_cheatsheet"
 msgstr "Amaga la xuleta"
 
+msgid "hide_classes"
+msgstr ""
+
 msgid "hide_keyword_switcher"
 msgstr "Amaga el commutador de paraules clau"
 
+msgid "hide_slides"
+msgstr ""
+
 msgid "highest_level_reached"
 msgstr "Màxim nivell assolit"
 

diff --git a/translations/cs/LC_MESSAGES/messages.po b/translations/cs/LC_MESSAGES/messages.po
@@ -950,14 +950,23 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "Ahoj!"
 
+msgid "hide_adventures"
+msgstr ""
+
 #, fuzzy
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 #, fuzzy
 msgid "highest_level_reached"
 msgstr "Highest level reached"

diff --git a/translations/cy/LC_MESSAGES/messages.po b/translations/cy/LC_MESSAGES/messages.po
@@ -978,14 +978,23 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "hello"
 
+msgid "hide_adventures"
+msgstr ""
+
 #, fuzzy
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 #, fuzzy
 msgid "highest_level_reached"
 msgstr "Highest level reached"

diff --git a/translations/da/LC_MESSAGES/messages.po b/translations/da/LC_MESSAGES/messages.po
@@ -977,14 +977,23 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "hello"
 
+msgid "hide_adventures"
+msgstr ""
+
 #, fuzzy
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 #, fuzzy
 msgid "highest_level_reached"
 msgstr "Highest level reached"

diff --git a/translations/de/LC_MESSAGES/messages.po b/translations/de/LC_MESSAGES/messages.po
@@ -814,12 +814,21 @@ msgstr "Hedy auf Github"
 msgid "hello_logo"
 msgstr "hallo"
 
+msgid "hide_adventures"
+msgstr ""
+
 msgid "hide_cheatsheet"
 msgstr "Verstecke Cheatsheet"
 
+msgid "hide_classes"
+msgstr ""
+
 msgid "hide_keyword_switcher"
 msgstr "Verstecke Schlüsselwortumschalter"
 
+msgid "hide_slides"
+msgstr ""
+
 msgid "highest_level_reached"
 msgstr "Höchstes erreichtes Level"
 

diff --git a/translations/el/LC_MESSAGES/messages.po b/translations/el/LC_MESSAGES/messages.po
@@ -896,13 +896,22 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "Γεια!"
 
+msgid "hide_adventures"
+msgstr ""
+
 msgid "hide_cheatsheet"
 msgstr "Απόκρυψη των σημειώσεων"
 
+msgid "hide_classes"
+msgstr ""
+
 #, fuzzy
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr ""
+
 msgid "highest_level_reached"
 msgstr "Το υψηλότερο επίπεδο που έφτασες"
 

diff --git a/translations/en/LC_MESSAGES/messages.po b/translations/en/LC_MESSAGES/messages.po
@@ -738,12 +738,21 @@ msgstr "Hedy on Github"
 msgid "hello_logo"
 msgstr "hello"
 
+msgid "hide_adventures"
+msgstr "Hide adventures"
+
 msgid "hide_cheatsheet"
 msgstr "Hide cheatsheet"
 
+msgid "hide_classes"
+msgstr "Hide classes"
+
 msgid "hide_keyword_switcher"
 msgstr "Hide keyword switcher"
 
+msgid "hide_slides"
+msgstr "Hide slides"
+
 msgid "highest_level_reached"
 msgstr "Highest level reached"