Badge sede (#24)

Metro-Olografix · Jan 31, 2025 · acbd45c · acbd45c
1 parent f31f5fd
commit acbd45c
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 12 deletions.
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -7,4 +7,9 @@ activitiesAndProject = "Activities and projects"
 allActivities = "All activities"
 allProjects = "All projects"
 poweredByHugo = "powered by"
-oldWebsite = "old website"
+oldWebsite = "old website"
+hqStatusLoading = "loading..."
+hqStatusOpen = "Open"
+hqStatusClose = "Closed"
+hqDescription = "<p>Come and visit us in our new headquarters in <strong>Viale Marconi 278/1</strong>, Pescara.</p><p>We meet every Monday evening from 21:00.</p>"
+hqGotoMap = "Map"
diff --git a/i18n/it.toml b/i18n/it.toml
@@ -7,4 +7,9 @@ activitiesAndProject = "Attività e progetti"
 allActivities = "Tutte le attività"
 allProjects = "Tutti i progetti"
 poweredByHugo = "fatto con"
-oldWebsite = "vecchio sito"
+oldWebsite = "vecchio sito"
+hqStatusLoading = "caricamento..."
+hqStatusOpen = "Aperta"
+hqStatusClose = "Chiusa"
+hqDescription = "<p>Vieni a trovarci nella nostra nuova sede in <strong>Viale Marconi 278/1</strong>, Pescara.</p><p>Ci riuniamo ogni lunedì sera dalle 21:00.</p>"
+hqGotoMap = "Mappa"
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,11 +1,28 @@
 {{ define "main" }}
 
-<!-- use custom components "card" -->
-{{ partial "card.html" (dict 
-    "content" (.Site.Params.description)
-    "goToSection" "associazione"
-    "goToText" (T "learnMoreText")
-    "withShadow" true) }}
+<div class="grid grid-cols-1 md:grid-cols-5 gap-4 h-full">
+    <!-- associazione -->
+    <div class="md:col-span-3 h-full">
+      {{ partial "card.html" (dict 
+        "content" (.Site.Params.description)
+        "goToSection" "associazione"
+        "goToText" (T "learnMoreText")
+        "withShadow" true
+        "fullHeight" true) }}
+    </div>
+    <!-- sede -->
+    <div class="md:col-span-2 h-full">
+      {{ partial "card.html" (dict
+        "title" (partial "headquarters-header.html" .)
+        "content" (T "hqDescription")
+        "goToLink" "https://www.openstreetmap.org/node/12539021893"
+        "goToText" (T "hqGotoMap")
+        "isExternal" true
+        "targetBlank" true
+        "withShadow" false
+        "fullHeight" true) }}
+    </div>
+  </div>
 
 <!-- Membership Banner -->
 <div class="bg-accent text-primary-light p-4 rounded-lg mb-4 mt-4">

diff --git a/layouts/partials/card.html b/layouts/partials/card.html
@@ -1,13 +1,13 @@
 {{ $showFooter := or (.goToSection) (.goToLink) (.badge) }}
 
-<div class="bg-white p-4 border-4 border-primary-dark w-full {{ if (default false .withShadow) }} shadow-[8px_8px_0px_0px_rgba(22,33,62,1)] {{ end }} mb-4 relative">
+<div class="bg-white p-4 border-4 border-primary-dark w-full {{ if (default false .withShadow) }} shadow-[8px_8px_0px_0px_rgba(22,33,62,1)] {{ end }} mb-4 relative {{ if (default false .fullHeight) }}h-full{{ end }}">
     <!-- main content -->
     <div {{ if $showFooter }}class="pb-8"{{ end }}>
         {{ with .title }}
-        <h3 class="text-xl font-bold mb-2 text-accent">{{ . }}</h3>
+        <h3 class="text-xl font-bold mb-2 text-accent">{{ . | safeHTML }}</h3>
         {{ end }}
         <!-- content -->
-        <div class="text-justify">{{ .content }}</div>
+        <div class="text-justify">{{ .content | safeHTML }}</div>
     </div>
     <!-- footer -->
     {{ if $showFooter }}
@@ -29,7 +29,14 @@ <h3 class="text-xl font-bold mb-2 text-accent">{{ . }}</h3>
             {{ else if .goToLink }}
                 {{ $link = .goToLink }}
             {{ end }}
-            <a href="{{ $link }}" class="text-sm text-accent hover:underline ml-auto">{{ .goToText }} >></a>
+            <a href="{{ $link }}" 
+               class="text-sm text-accent hover:underline ml-auto"
+               {{ if .isExternal }}
+                   target="_blank"
+                   rel="noopener noreferrer"
+               {{ end }}>
+                {{ .goToText }} >>
+            </a>
         {{ end }}
     </div>
     {{ end }}

diff --git a/layouts/partials/headquarters-header.html b/layouts/partials/headquarters-header.html
@@ -0,0 +1,11 @@
+<div class="flex items-center justify-between mb-2">
+    <div class="flex items-center gap-3">
+        <img src="/images/home.png" alt="HQ" class="h-8 md:h-10 w-8 md:w-10" />
+    </div>
+    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gray-100" id="statusContainer">
+        <div id="statusDot" class="w-3 h-3 rounded-full bg-gray-300"></div>
+        <span id="headquarterStatusLoading" class="text-sm text-gray-600">{{ (T "hqStatusLoading") }}</span>
+        <span id="headquarterStatusOpen" class="text-sm hidden text-green-600">{{ (T "hqStatusOpen") }}</span>
+        <span id="headquarterStatusClose" class="text-sm hidden text-red-600">{{ (T "hqStatusClose") }}</span>
+    </div>
+</div>
diff --git a/static/css/main.css b/static/css/main.css
@@ -88,4 +88,13 @@ body {
 
 .badge {
   font-size: 12px; background-color: white; border: 1px solid #666666; border-radius: 4px; padding: 2px 8px; box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
+}
+
+#headquarterStatusBadge {
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  display: inline-block;
+  transition: background-color 0.3s ease;
 }
diff --git a/static/images/home.png b/static/images/home.png
diff --git a/static/js/main.js b/static/js/main.js
@@ -54,6 +54,54 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Global event listeners
   document.addEventListener("keydown", handleEscapeKey);
+
+  // Fetch and update headquarter status
+  function updateHeadquarterStatus() {
+    const dotElement = document.getElementById("statusDot");
+    const containerElement = document.getElementById("statusContainer");
+    const loadingStatus = document.getElementById("headquarterStatusLoading");
+    const openStatus = document.getElementById("headquarterStatusOpen");
+    const closeStatus = document.getElementById("headquarterStatusClose");
+
+    fetch("https://sede.olografix.org/status")
+      .then(response => response.text())
+      .then(data => {
+        const isOpen = data.trim() === "true";
+        if (dotElement && containerElement) {
+          containerElement.classList.remove("bg-gray-100", "bg-green-100", "bg-red-100");
+          containerElement.classList.add(isOpen ? "bg-green-100" : "bg-red-100");
+
+          dotElement.classList.remove("bg-gray-300", "bg-green-500", "bg-red-500");
+          dotElement.classList.add(isOpen ? "bg-green-500" : "bg-red-500");
+
+          loadingStatus.classList.remove("text-gray-600");
+          loadingStatus.classList.add("hidden");
+
+          openStatus.classList.remove("hidden");
+          openStatus.classList.toggle("hidden", !isOpen);
+
+          closeStatus.classList.remove("hidden");
+          closeStatus.classList.toggle("hidden", isOpen);
+        }
+      })
+      .catch(error => {
+        console.error("Error fetching headquarter status:", error);
+        if (dotElement && containerElement) {
+          containerElement.classList.remove("bg-green-100", "bg-red-100");
+          containerElement.classList.add("bg-gray-100");
+
+          dotElement.classList.remove("bg-green-500", "bg-red-500");
+          dotElement.classList.add("bg-gray-300");
+
+          loadingStatus.classList.remove("hidden");
+          openStatus.classList.add("hidden");
+          closeStatus.classList.add("hidden");
+        }
+      });
+  }
+
+  updateHeadquarterStatus();
+  setInterval(updateHeadquarterStatus, 60000); // Update every 60 seconds
 });
 
 eval(