From f6f777662e22673efeea989f3e8a969bbc9f216f Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Thu, 29 Aug 2024 10:07:28 +0200
Subject: [PATCH] Beautiful UI

---
 templates/index.html | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 546d320..8422c06 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,7 +18,7 @@
                 <div class="fixed-grid has-6-cols">
                     <div class="grid">
                     {% for project in projects %}
-                    <a href="#" id="project-{{ loop.index0 }}" class="cell p-2 has-text-centered" style="border: solid; border-width: 1px; border-radius: 5px;">
+                    <a href="#" id="project-{{ loop.index0 }}" class="cell p-2 has-text-centered has-text-white" style="border: solid; border-width: 1px; border-radius: 5px;">
                         <div>
                             <strong>{{ project.name }}</strong>
                         </div>
@@ -35,7 +35,7 @@
                         <div class="fixed-grid has-6-cols mb-5">
                             <div class="grid">
                                 {% for object in project.objects %}
-                                <a href="/object/{{ object.id }}" class="cell p-2 has-text-centered" style="border: solid; border-width: 1px; border-radius: 5px;">
+                                <a href="/object/{{ object.id }}" class="cell p-2 has-text-centered has-text-white" style="border: solid; border-width: 1px; border-radius: 5px;">
                                         <div>
                                             <strong>{{ object.name }}</strong>
                                         </div>
@@ -112,15 +112,35 @@ document.addEventListener('DOMContentLoaded', () => {
 
 let projects = document.getElementsByClassName('project');
 for (let i = 0; i < {{ projects | length }}; i++) {
-    document.getElementById('project-' + i).addEventListener('click', () => {
-        for (let p of projects) {
-            if (p.classList.contains('project-' + i)) {
-                p.style.display = "block";
-            } else {
-                p.style.display = "none";
+    let clickedProject = document.getElementById('project-' + i);
+   clickedProject.addEventListener('click', () => {
+
+       let same = clickedProject.classList.contains('has-text-link');
+
+       if (same) {
+           clickedProject.classList.remove('has-text-link');
+           clickedProject.classList.add('has-text-white');
+       } else {
+           clickedProject.classList.remove('has-text-white');
+           clickedProject.classList.add('has-text-link');
+       }
+
+       for (let j = 0; j < {{ projects | length }}; j++) {
+            if (j !== i) {
+                let otherProject = document.getElementById('project-' + j);
+                otherProject.classList.remove('has-text-link');
+                otherProject.classList.add('has-text-white');
             }
-        }
-    });
+       }
+
+       for (let p of projects) {
+           if (p.classList.contains('project-' + i) && !same) {
+               p.style.display = "block";
+           } else {
+               p.style.display = "none";
+           }
+       }
+   });
 }
 </script>
 {% endblock extrajs %}