api/Admin.go

@@ -1 +0,0 @@
-package api

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

@@ -4,27 +4,18 @@ body {
     height: 100vh;
     background: #101010;
     color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;  
 }
 .container {
     background: #212121;
     padding: 24px 32px;
     border-radius: 8px;
-    max-width: 400px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
-.active {
-    background-color: #007bff;
-    color: white;
-}
 main {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-width: 400px;
     background: #121212;
 }
 nav {
@@ -64,4 +55,37 @@ button:hover {
     display: none;
     border: 1px solid #ddd;
     border-radius: 4px;
-}
+}
+.tab-container {
+    display: none;
+    padding: 20px;
+    width: 100%;
+}
+.tab-container.active {
+    display: block;
+}
+.tab-button {
+    background: #333;
+    color: #fff;
+    border: none;
+    padding: 10px 18px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-right: 8px;
+}
+.tab-button:hover {
+    background: #555;
+}
+.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/admin.js

@@ -1,71 +1,11 @@
-const imageInput = document.getElementById('imageInput');
-const preview = document.getElementById('preview');
-        
-let currentFile = null;
+let tab_buttons = $( ".tab-button" )
+let tab_containers = $( ".tab-container" )
 
-        
-
-imageInput.addEventListener('change', function() {
-    currentFile = this.files[0];
-    if (currentFile) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            preview.src = e.target.result;
-            preview.style.display = 'block';
-        }
-        reader.readAsDataURL(currentFile);
-    } else {
-        preview.style.display = 'none';
-    }
-});
-
-document.getElementById('imageForm').addEventListener('submit', function(e) {
-    e.preventDefault();
-
-    // Add your upload logic here
-    const formData = new FormData();
-    formData.append('image', currentFile);
-    if (!currentFile) {
-        alert('Please select an image to upload.');
-        return;
-    }
-    fetch('/upload', {
-        method: 'POST',
-        body: formData
-    }).then(response => response.text())
-    .then(data => {
-        console.log(data);
-        alert('Image uploaded successfully!');
-          window.location.reload();
-      })
-      .catch(error => {
-          console.error('Error:', error);
-          alert('Error uploading image.');
-   });
-});
-
-function openTab(evt, tabNumber) {
-  // Declare all variables
-  var i, tabcontent, tablinks;
-
-  // Get all elements with class="tabcontent" and hide them
-  tabcontent = document.getElementsByClassName("tab-container");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-
-  // Get all elements with class="tablinks" and remove the class "active"
-  tablinks = document.getElementsByClassName("tab-button");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-
-  // Show the current tab, and add an "active" class to the button that opened the tab
-  console.log("tab-"+tabNumber);
-  let currentTab = document.getElementById('tab-'+(tabNumber))
-  if (currentTab) {
-    currentTab.style.display = "block";
-  } else throw new Error("Tab not found: " + tabNumber);
-  currentTab.style.display = "block";
-  evt.currentTarget.className += " active";
-}
+tab_buttons.on( "click", function() {
+    let id = $( this ).attr( "id" )
+    tab_buttons.removeClass( "active" )
+    tab_containers.removeClass( "active" )
+    $( this ).addClass( "active" )
+    console.log( id )
+    $( "#tab-" + id ).addClass( "active" )
+})

static/js/image_upload.js

@@ -0,0 +1,49 @@
+let imageInput = $("#imageInput")
+let imagePreview = $("#preview")
+
+let uploadForm = $("#imageForm")
+
+let currentFile = null;
+
+imageInput.on("change", function() {
+    currentFile = this.files[0];
+    if (currentFile) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            preview.src = e.target.result;
+            preview.style.display = 'block';
+        }
+        reader.readAsDataURL(currentFile);
+    } else {
+        preview.style.display = 'none';
+    }
+})
+
+uploadForm.on("submit", function(e) {
+    e.preventDefault();
+    
+    if (!currentFile) {
+        alert("Please select a file first.");
+        return;
+    }
+    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!");
+            preview.style.display = 'none';
+            currentFile = null;
+        },
+        error: function(xhr, status, error) {
+            alert("Error uploading image: " + xhr.responseText);
+        }
+    });
+})

static/js/images.js

@@ -0,0 +1,58 @@
+let galleryTable = $("#imagesGallery")
+let refreshButton = $("#refresh-gallery")
+
+let filesList = []
+
+let fileMetaData = []
+
+async function fetchImages() {
+    await $.ajax({
+        url: '/files',
+        type: 'GET',
+        success: function(response) {
+            filesList = response;
+            console.log(filesList);
+        },
+        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/Admin.go

@@ -0,0 +1 @@
+package admin

website/templates/admin.html

@@ -4,16 +4,17 @@
     <meta charset="UTF-8">
     <title>Admin</title>
     <link rel="stylesheet" href="/static/css/admin.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 </head>
 <body>
     <main>
         <nav>
-            <button class="tab-button" id="button-1" onclick="openTab(event, 1)">Image Upload</button>
-            <button class="tab-button" id="button-2" onclick="openTab(event, 2)">null</button>
+            <button class="tab-button" id="1">Image Upload</button>
+            <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>
@@ -24,9 +25,27 @@
             </div>
         </div>
         <div class="tab-container" id="tab-2">
-
+            <h1>
+                Images <button id="refresh-gallery">Refresh</button>
+            </h1>
+            <div>
+                <table id="imagesGallery">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Image</th>
+                            <th>Spice lvl</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        
+                    </tbody>
+                </table>
+            </div>
         </div>
     </main>
     <script src="/static/js/admin.js"></script>
+    <script src="/static/js/image_upload.js"></script>
+    <script src="/static/js/images.js"></script>
 </body>
 </html>