More Updates

public/javascript/user.js

@@ -215,7 +215,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
 
         scoreDiv.innerHTML = `
             <div class="score-title">
-            <h4>${song.name.str || ""} || </h4>
+            <h4>${song.name.str} || ${new Date(score.user_play_date)}</h4>
             </div>
         `;
         /* Score Jacket Image */
@@ -347,6 +347,32 @@ async function userAreaStatusFormatter(div) {
     div.appendChild(areaWrapper)
 }
 
+/* Memorial Image Renderer */
+async function userImageFormatter(div) {
+    let memorialImageList = await imageList(); // get image list
+    let imageInfoDiv = document.getElementById("image-info-header-div");
+    imageInfoDiv.innerHTML = "";
+    console.log("Attempting to search list with EXT_ID " + ext_id.toString())
+    for (var i = 0; i < memorialImageList.length; i++) { // for each name in the array
+        let imageName = memorialImageList[i]
+        console.log(imageName)
+        if (imageName.startsWith(ext_id.toString())) { // Check if the External ID matches the ID within the photo at the beginning
+            let memorialImage = document.createElement('img');
+            memorialImage.classList.add('memorialImage');
+            memorialImage.addEventListener("error", function () {
+                this.src = "assets/icon/UI_Icon_000000.png";
+            });
+            memorialImage.src = "images/" + imageName + '.jpg';
+            imageInfoDiv.append(memorialImage)
+        }
+    }
+    if(imageInfoDiv.innerHTML == "") {
+        let error = document.createElement('h3');
+        error.innerText = "No Images Memorialised."
+        imageInfoDiv.append(error)
+    }
+}
+
 //=====================================================================
 // Now Exiting: User Data ////////////// Now Entering: Nested Div Hell
 //=====================================================================
@@ -361,6 +387,8 @@ const showContent = (contentNumber) => {
         if (div === contentDiv) {
             if (contentNumber === 2) { // If the ContentNumber is set to the PlayLog, Go to the userPlayLogFormatter Function
                 userPlayLogFormatter(div)
+            } else if (contentNumber === 4) {
+                userImageFormatter(div)
             } else if (contentNumber === 6) {
                 userAreaStatusFormatter(div)
             }
@@ -498,3 +526,22 @@ async function mapsMetadata() {
         console.error(error);
     }
 }
+
+async function imageList() {
+    const url = "/api/getmemorialimagelist";
+
+    try {
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        const data = await response.json();
+        return data
+    } catch (error) {
+        console.error(error);
+    }
+}
+

public/stylesheets/user.css

@@ -36,6 +36,15 @@
   font-size: 2em;
 }
 
+.memorialImage {
+  width: 90%;
+  padding-bottom: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  height: auto;
+  display: block;
+}
+
 @media screen and (max-width: 768px) {
   #user-profile-wrapper {
     display: inline-block;

routes/api.js

@@ -2,6 +2,7 @@ var express = require('express');
 var router = express.Router();
 var fetch = require('cross-fetch');
 const sqlite3 = require('sqlite3').verbose();
+const fs = require('fs')
 
 var config = require('../config.json');
 let db = new sqlite3.Database(config.DXMemorialImageDirectory + '\\db.sqlite');
@@ -121,4 +122,15 @@ let db = new sqlite3.Database(config.DXMemorialImageDirectory + '\\db.sqlite');
       }
     });
   });
+
+router.get('/getmemorialimagelist/', function (req,res,next) {
+    let ext = ".jpg";
+    // Use fs.readdirSync() to get the file names synchronously
+    const files = fs.readdirSync(config.DXMemorialImageDirectory);
+    // Filter the files by extension and create an array of names
+    const imageNames = files.filter(file => file.endsWith(ext)).map(file => file.slice(0, -ext.length));
+    // Create and return a JSON object with the image names
+    res.send(imageNames);
+});
+
   module.exports = router;

views/index.ejs

@@ -6,7 +6,7 @@
   <h5>Total Users Registered: <%= params.totalUsers %></h5>
   <h4>Please Input your 20 Digit Access Code.</h4>
   <form id="myForm">
-    <input type="text" name="myInput" maxlength="20" placeholder="0000011111222223333344444" required>
+    <input type="text" name="myInput" minlength="20" maxlength="20" placeholder="0000011111222223333344444" required>
     <button type="submit">Submit</button>
   </form>
   <script type="text/javascript" src="/javascript/login.js"></script>

views/user.ejs

@@ -42,9 +42,14 @@
         <h4 id="score-info-header">Please Wait, Obtaining Scores...</h4>
       </div>
     </div>
+    <div data-content="content-4" id="user-memorial-images" class="hidden">
+      <div id="image-info-header-div">
+        <h4 id="image-info-header">Please Wait, Obtaining Images...</h4>
+      </div>
+    </div>
     <div data-content="content-6" id="user-area" class="hidden">
       <div id="area-loader-header-div">
-        <h4 id="score-header">Please Wait, Obtaining Area Data...</h4>
+        <h4 id="area-header">Please Wait, Obtaining Area Data...</h4>
       </div>
       
     </div>