Added simple spice meter (No server integration)

api/FileHandlers.go

@@ -31,25 +31,25 @@ func FileHandler(w http.ResponseWriter, r *http.Request) {
 	files, _ := os.ReadDir(filepath.Join(staticDir, "images"))
 	for _, file := range files {
 		fileName := file.Name()
-		data.ImageNames = append(data.ImageNames, filepath.Join(staticDir, "images", fileName))
+		data.ImageNames = append(data.ImageNames, filepath.Join("/", staticDir, "images", fileName))
 	}
 	files, _ = os.ReadDir(filepath.Join("uploads"))
 	for _, file := range files {
 		fileName := file.Name()
-		data.ImageNames = append(data.ImageNames, filepath.Join("uploads", fileName))
+		data.ImageNames = append(data.ImageNames, filepath.Join("/uploads", fileName))
 	}
 
 	files, _ = os.ReadDir(filepath.Join(staticDir, "spicy"))
 	for _, file := range files {
 		fileName := file.Name()
-		data.SpicyImageNames = append(data.SpicyImageNames, filepath.Join(staticDir, "spicy", fileName))
+		data.ImageNames = append(data.ImageNames, filepath.Join("/", staticDir, "spicy", fileName))
 	}
 
 	files, _ = os.ReadDir(filepath.Join(staticDir, "ascii_art"))
 	for _, file := range files {
 		fileName := file.Name()
 		data.AsciiFiles = append(data.AsciiFiles,
-			AsciiEntry{Name: filepath.Join(staticDir, "ascii_art", fileName), FontSize: 12},
+			AsciiEntry{Name: filepath.Join("/", staticDir, "ascii_art", fileName), FontSize: 12},
 		)
 	}
 

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();
 });

website/templates/admin.html

@@ -13,8 +13,8 @@
             <button class="tab-button" id="2">Images</button>
         </nav>
         
-        <div class="tab-container" id="tab-1">
-            <div class="container">
+        <div class="tab-container active" id="tab-1">
+            <div class="container" style="max-width: 400px;">
                 <h2>Add New Image</h2>
                 <form id="imageForm" enctype="multipart/form-data">
                     <label for="imageInput">Select Image:</label>
@@ -26,15 +26,15 @@
         </div>
         <div class="tab-container" id="tab-2">
             <h1>
-                Images
+                Images <button id="refresh-gallery">Refresh</button>
             </h1>
             <div>
-                <table id="imagesTable">
+                <table id="imagesGallery">
                     <thead>
                         <tr>
                             <th>ID</th>
                             <th>Image</th>
-                            <th>Actions</th>
+                            <th>Spice lvl</th>
                         </tr>
                     </thead>
                     <tbody>