Added simple spice meter (No server integration)

static/css/admin.css

@@ -79,4 +79,13 @@ button:hover {
 }
 .tab-button.active {
     background: #007bff;
-}
+}
+.gallery-image  {
+    max-width: 90px;
+    max-height: 70px;
+    margin: 10px;
+    border: 2px solid #444;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.3s;
+}

static/js/image_upload.js

@@ -26,17 +26,19 @@ uploadForm.on("submit", function(e) {
         alert("Please select a file first.");
         return;
     }
-
-    let formData = new FormData();
+    console.log(currentFile);
+    
+    let formData = new FormData(this);
     formData.append("image", currentFile);
 
     $.ajax({
         url: "/upload",
         type: "POST",
         data: formData,
+        processData: false,
+        contentType: false,
         success: function(response) {
             alert("Image uploaded successfully!");
-            imageInput.val("");
             preview.style.display = 'none';
             currentFile = null;
         },

static/js/images.js

@@ -1,7 +1,12 @@
+let galleryTable = $("#imagesGallery")
+let refreshButton = $("#refresh-gallery")
+
 let filesList = []
 
-$( document ).ready(function() {        
-    $.ajax({
+let fileMetaData = []
+
+async function fetchImages() {
+    await $.ajax({
         url: '/files',
         type: 'GET',
         success: function(response) {
@@ -11,6 +16,43 @@ $( document ).ready(function() {
         error: function() {
             alert('Error fetching images.');
         }
-    
     });
+    
+    filesList.ImageNames.forEach((filePath, i) => {
+        let newRow = $(`
+                <tr>
+                    <td>`+ i +`</td>
+                    <td>
+                        <img src="` + filePath + `" class="gallery-image" />
+                    </td>
+                        <td class="spice-slider-td">
+                            <output id="spice-output-` + i + `">0</output>
+                            <input type="range" min="0" max="10" value="` + 0 + `" class="spice-slider" id="spice-slider-` + i + `" />
+                        </td>
+                    </tr>
+            `);
+        galleryTable.append(newRow);
+
+        fileMetaData.push({
+            "id": i,
+            "spice_level": 0,
+            "path": filePath
+        });
+    });
+    fileMetaData.forEach(file => {
+        $("#spice-slider-" + file.id).on("input", function() {
+            file.spice_level = this.value;
+            $("#spice-output-" + file.id).text(this.value);
+            console.log(fileMetaData);
+        })
+    });
+}
+
+refreshButton.on("click", function() {
+    galleryTable.empty();
+    fetchImages();
+});
+
+$( document ).ready(function() {        
+    fetchImages();
 });