Merge pull request #322 from ScilifelabDataCentre/develop

Recent changes to main

layouts/index.html

@@ -197,6 +197,39 @@ <h3>Apps recently deployed on SciLifeLab Serve</h3>
       };
       req.send(null);
     }
+
+    // Update banner title for homepage from the blobserver
+    function updateBanner(data) {
+      try {
+        // Get the current language
+        const lang = document.documentElement.lang;
+
+        // Find the active title for the 'portal' target
+        const title = data.banner_titles.find(title => title.target === 'data-platform' && title.active);
+        if (title && title[lang]) {
+            const titleElement = document.querySelector('h2#home-banner');
+            titleElement.textContent = title[lang];
+        } else {
+            console.warn('No title found for the language.');
+        }
+      } catch (error) {
+        console.error('An error occurred while updating banner titles:', error);
+      } finally {
+        // Show the hidden banner regardless of whether titles were fetched successfully
+        const banner1 = document.getElementById("home-banner");
+        if (banner1) {
+          banner1.classList.remove("d-none");
+        } else {
+          console.warn('Banner element with ID "home-banner" not found.');
+        }
+      }
+    }; // function updateBanner ends here
+
+    // Call the function to update banner, if any mentioned in blob server
+    getDataFromUrl(
+      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Ffreya-banner.json"),
+      updateBanner
+    )
 
     // Creates html entry for latest events
     function addEvents(data){

layouts/partials/head.html

@@ -22,6 +22,8 @@
   <!-- Local CSS -->
   <link rel="stylesheet" href="/css/styles.css">
 
+  <!-- Including notices.js to dynamically display notices based on the notices.json available on blobserver -->
+  <script src="/js/notices.js" defer></script>
   <!-- JQuery -->
   <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
   {{ $recaptcha_pages := slice "contact" "events" "highlights" "jobs" "funding_calls" }}

layouts/partials/header.html

@@ -3,7 +3,9 @@
   <header class="header" style="background-image: url('/img/illustrations/circle_zoomed.png'); color: white; ">
     <div class="container">
       <div class="py-2 my-1">
-        <h2><a class="banner-title-link" href="/news/#20240418">Welcome to the SciLifeLab Data Platform</a></h2>
+        <h2 {{ if .IsHome }}class="d-none" id="home-banner"{{ end }}>
+          <a class="banner-title-link" href="/news/#20240418">Welcome to the SciLifeLab Data Platform</a>
+        </h2>
       </div>
     </div>
   </header>

static/js/notices.js

@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const noticesUrl = "https://blobserver.dc.scilifelab.se/blob/freya-notices.json";
+    const currentSite = "data-platform"; // Change this to dynamically detect the current site if needed.
+
+    fetch(noticesUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            const currentDate = new Date();
+            if (!data.notices || !Array.isArray(data.notices)) {
+                throw new Error("Invalid notices data");
+            }
+
+            data.notices.forEach(notice => {
+                try {
+                    let shouldDisplay = false;
+
+                    if (!notice.target || !Array.isArray(notice.target) || !notice.target.includes(currentSite)) {
+                        return; // Skip this notice if the target does not include the current site.
+                    }
+
+                    if (notice.type === "scheduled") {
+                        const startDate = new Date(notice.start_date);
+                        const endDate = new Date(notice.end_date);
+                        if (currentDate >= startDate && currentDate <= endDate) {
+                            shouldDisplay = true;
+                        }
+
+                        // Format dates to a readable format (e.g., '20th December')
+                        const formattedStartDate = startDate.toLocaleDateString('en-US', { day: 'numeric', month: 'long' });
+                        const formattedEndDate = endDate.toLocaleDateString('en-US', { day: 'numeric', month: 'long' });
+
+                        // Replace placeholders in the messages
+                        notice.message_en = notice.message_en.replace('{{start_date}}', formattedStartDate).replace('{{end_date}}', formattedEndDate);
+                        notice.message_sv = notice.message_sv.replace('{{start_date}}', formattedStartDate).replace('{{end_date}}', formattedEndDate);
+                    } else if (notice.type === "incidental" && notice.active) {
+                        shouldDisplay = true;
+                    }
+
+                    if (shouldDisplay) {
+                        const noticeContainer = document.createElement('div');
+                        noticeContainer.className = 'notice alert d-flex justify-content-center align-items-center rounded-0'; // Use Bootstrap classes
+
+                        // Check if style property is provided and not empty, otherwise use default styles
+                        let style = notice.style;
+                        if (!style || style.trim() === "") {
+                            style = notice.type === "scheduled" 
+                                ? "background-color: #a7c947; color: #000000;" 
+                                : "background-color: #ffc107; color: #000000;";
+                        }
+                        noticeContainer.style = `${style}; margin-top: 15px; text-align: center;`; // Add top margin and center text
+
+                        const siteLanguage = document.documentElement.lang;
+                        let message = notice.message_en;
+                        if (siteLanguage === "sv") {
+                            message = notice.message_sv;
+                        }
+
+                        const noticeMessage = document.createElement('div');
+                        noticeMessage.innerHTML = `<i class="bi bi-info-circle-fill"></i> <strong>${notice.title}:</strong> ${message}`;
+                        noticeMessage.className = "alert-body"; // Use Bootstrap class for alert body
+
+                        noticeContainer.appendChild(noticeMessage);
+
+                        // Insert the notice at the top of the body
+                        document.body.insertBefore(noticeContainer, document.body.firstChild);
+                    }
+                } catch (error) {
+                    console.error('Error processing notice:', error);
+                }
+            });
+        })
+        .catch(error => console.error('Error fetching notices:', error));
+});