Fetch and embed popup HTML as modal

MaMpf-HD · Sep 12, 2023 · b17f29e · b17f29e
1 parent 802cd3d
commit b17f29e
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 11 deletions.
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -53,12 +53,14 @@ document.addEventListener("turbolinks:load", function () {
         percentPosition: true
     });
 
-    checkForNewsPopups();
+    // TODO (Splines): outsource news popups logic to separate file
+    handleNewsPopups();
 });
 
 const NEWS_POPUPS_BASE_PATH = '/news_popups/';
+const NEWS_POPUPS_CONTAINER_PATH = '/news_popups/_container.html';
 
-function checkForNewsPopups() {
+function handleNewsPopups() {
     $.get({
         url: Routes.news_popups_path(),
         type: 'GET',
@@ -75,21 +77,78 @@ function checkForNewsPopups() {
     });
 }
 
-function openNewsPopups(popupNames) {
-    for (const popupName of popupNames) {
-        console.log(`Opening news popup: ${popupName}`)
+async function openNewsPopups(popupNames) {
+    // Are there any unread news popups?
+    if (popupNames.length === 0) {
+        console.log('No unread news popups found. Aborting.');
+        return;
+    }
+
+    // Container
+    let containerHtml = "";
+    try {
+        containerHtml = await fetchNewsPopupsContainerHtml();
+    } catch (error) {
+        console.log('Container for news popups could not be fetched. Aborting.');
+        console.log(error);
+        return;
+    }
+
+    // Contents
+    const contentsHtml = await fetchNewsPopupsContentHtml(popupNames);
+    if (contentsHtml.length === 0) {
+        console.log('No news popups content could be fetched. Aborting.');
+        return;
+    }
+
+    showNewsPopupsInDom(containerHtml, contentsHtml);
+}
+
+async function fetchNewsPopupsContainerHtml() {
+    return new Promise((resolve, reject) => {
         $.ajax({
-            url: NEWS_POPUPS_BASE_PATH + popupName + '.html',
+            url: NEWS_POPUPS_CONTAINER_PATH,
             type: 'GET',
             dataType: 'html',
             success: (html, textStatus, xhr) => {
-                console.log(`News popup (${popupName}): ${html}`);
+                resolve(html);
             },
             error: (xhr, status) => {
-                console.log(`ERROR getting HTML for news popup: ${popupName}`);
                 console.log(xhr);
                 console.log(status);
+                reject('ERROR getting HTML for news popups container');
             }
-        })
-    }
-}
+        });
+    });
+}
+
+async function fetchNewsPopupsContentHtml(popupNames) {
+    return await Promise.all(popupNames.map(async (popupName) => {
+        return new Promise((resolve, reject) => {
+            $.ajax({
+                url: NEWS_POPUPS_BASE_PATH + popupName + '.html',
+                type: 'GET',
+                dataType: 'html',
+                success: (html, textStatus, xhr) => {
+                    resolve(html);
+                },
+                error: (xhr, status) => {
+                    // Note that this this not occur if the file does not exist.
+                    // In that case, the success callback is called since MaMpf
+                    // is redirecting and we get back the HTML of the redirect.
+                    // This is why admins must check if the file exists before
+                    // activating the news popup.
+                    const errorReason = `ERROR getting HTML for news popup: ${popupName} `;
+                    reject(errorReason);
+                }
+            });
+        });
+    }));
+}
+
+function showNewsPopupsInDom(containerHtml, contentsHtml) {
+    const container = $(containerHtml);
+    $('#news-popup-body', container).append(contentsHtml);
+    $('body').append(container);
+    $('#news-popup-modal').modal('show');
+}
diff --git a/public/news_popups/_container.html b/public/news_popups/_container.html
@@ -0,0 +1,24 @@
+<div class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog"
+    aria-labelledby="News" aria-hidden="true" id="news-popup-modal">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content p-4">
+            <div class="modal-header">
+                <i class="bi bi-megaphone-fill me-3"></i>
+                <h1 class="modal-title fs-5">
+                    Some updates from the MaMpf team
+                </h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                </button>
+            </div>
+
+            <div class="modal-body" id="news-popup-body">
+                <!-- HTML content populated based on currently activated news popups -->
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Show again later</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Don't show again</button>
+            </div>
+        </div>
+    </div>
+</div>