From c05f7fea761920f1418c48d721ea4f6371d3938d Mon Sep 17 00:00:00 2001 From: olikol <78661364+olikols07@users.noreply.github.com> Date: Wed, 27 Aug 2025 08:07:11 +0200 Subject: [PATCH 1/2] Rewrote js in jquery and started working on showing images and potentialy addin metadata to images (Spicy lvl, etc) --- api/Admin.go | 1 - static/css/admin.css | 33 +++++++++++---- static/js/admin.js | 80 +++++------------------------------- static/js/image_upload.js | 47 +++++++++++++++++++++ static/js/images.js | 16 ++++++++ website/Admin.go | 1 + website/templates/admin.html | 25 +++++++++-- 7 files changed, 120 insertions(+), 83 deletions(-) delete mode 100644 api/Admin.go create mode 100644 static/js/image_upload.js create mode 100644 static/js/images.js create mode 100644 website/Admin.go diff --git a/api/Admin.go b/api/Admin.go deleted file mode 100644 index 778f64e..0000000 --- a/api/Admin.go +++ /dev/null @@ -1 +0,0 @@ -package api diff --git a/static/css/admin.css b/static/css/admin.css index edf1fb7..3cc2bc7 100644 --- a/static/css/admin.css +++ b/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,28 @@ 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; } \ No newline at end of file diff --git a/static/js/admin.js b/static/js/admin.js index 47c5f0e..c83cf00 100644 --- a/static/js/admin.js +++ b/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" ) +}) diff --git a/static/js/image_upload.js b/static/js/image_upload.js new file mode 100644 index 0000000..502c517 --- /dev/null +++ b/static/js/image_upload.js @@ -0,0 +1,47 @@ +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; + } + + let formData = new FormData(); + formData.append("image", currentFile); + + $.ajax({ + url: "/upload", + type: "POST", + data: formData, + success: function(response) { + alert("Image uploaded successfully!"); + imageInput.val(""); + preview.style.display = 'none'; + currentFile = null; + }, + error: function(xhr, status, error) { + alert("Error uploading image: " + xhr.responseText); + } + }); +}) \ No newline at end of file diff --git a/static/js/images.js b/static/js/images.js new file mode 100644 index 0000000..0c8c450 --- /dev/null +++ b/static/js/images.js @@ -0,0 +1,16 @@ +let filesList = [] + +$( document ).ready(function() { + $.ajax({ + url: '/files', + type: 'GET', + success: function(response) { + filesList = response; + console.log(filesList); + }, + error: function() { + alert('Error fetching images.'); + } + + }); +}); \ No newline at end of file diff --git a/website/Admin.go b/website/Admin.go new file mode 100644 index 0000000..d78da5d --- /dev/null +++ b/website/Admin.go @@ -0,0 +1 @@ +package admin diff --git a/website/templates/admin.html b/website/templates/admin.html index 2d0889f..ffabc7d 100644 --- a/website/templates/admin.html +++ b/website/templates/admin.html @@ -4,12 +4,13 @@ Admin +
@@ -24,9 +25,27 @@
- +

+ Images +

+
+ + + + + + + + + + + +
IDImageActions
+
+ + \ No newline at end of file -- 2.51.0 From 463a42d80f4e00cf5cc595a604f0f965993682bf Mon Sep 17 00:00:00 2001 From: olikol <78661364+olikols07@users.noreply.github.com> Date: Thu, 28 Aug 2025 09:01:45 +0200 Subject: [PATCH 2/2] Added simple spice meter (No server integration) --- api/FileHandlers.go | 8 +++--- static/css/admin.css | 11 ++++++++- static/js/image_upload.js | 8 +++--- static/js/images.js | 48 +++++++++++++++++++++++++++++++++--- website/templates/admin.html | 10 ++++---- 5 files changed, 69 insertions(+), 16 deletions(-) diff --git a/api/FileHandlers.go b/api/FileHandlers.go index 5bbd46c..0bb414f 100644 --- a/api/FileHandlers.go +++ b/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}, ) } diff --git a/static/css/admin.css b/static/css/admin.css index 3cc2bc7..d087594 100644 --- a/static/css/admin.css +++ b/static/css/admin.css @@ -79,4 +79,13 @@ button:hover { } .tab-button.active { background: #007bff; -} \ No newline at end of file +} +.gallery-image { + max-width: 90px; + max-height: 70px; + margin: 10px; + border: 2px solid #444; + border-radius: 4px; + cursor: pointer; + transition: border-color 0.3s; +} diff --git a/static/js/image_upload.js b/static/js/image_upload.js index 502c517..0171377 100644 --- a/static/js/image_upload.js +++ b/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; }, diff --git a/static/js/images.js b/static/js/images.js index 0c8c450..ebf7fbd 100644 --- a/static/js/images.js +++ b/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 = $(` + + `+ i +` + + + + + 0 + + + + `); + 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(); }); \ No newline at end of file diff --git a/website/templates/admin.html b/website/templates/admin.html index ffabc7d..184ac4c 100644 --- a/website/templates/admin.html +++ b/website/templates/admin.html @@ -13,8 +13,8 @@ -
-
+
+

Add New Image

@@ -26,15 +26,15 @@

- Images + Images

- +
- + -- 2.51.0
ID ImageActionsSpice lvl