feat: image support

also translated some strings back into english
2026-02-04 05:30:13 +01:00 · 2025-06-02 04:37:54 +02:00
parent f7583738d7
commit 9de5c85120
17 changed files with 125 additions and 60 deletions
--- a/WebApp/wwwroot/create.html
+++ b/WebApp/wwwroot/create.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pl">
 <head>
    <meta charset="UTF-8">
@@ -73,6 +73,10 @@
                <label for="eventDate">Date</label>
                <input id="eventDate" type="datetime-local" class="form-control input-field" />
            </div>
+            <div class="form-group mb-2">
+                <label for="imageURL">Poster Image URL (optional)</label>
+                <input id="imageURL" class="form-control input-field" />
+            </div>

            <button id="saveBtn" class="button"><span>Save</span><span>&#11166;</span></button>

--- a/WebApp/wwwroot/css/style.css
+++ b/WebApp/wwwroot/css/style.css
@@ -1,7 +1,18 @@
-body {
+body {
    color: #2898BD;
 }

+#imgdiv {
+    padding-right: 2%;
+}
+
+#coverImage {
+    min-width: 30em;
+    max-width: 50em;
+    border: 3px dashed #2898BD;
+    border-radius: 16px;
+}
+
 .hidden-before-load {
    display: none !important;
    visibility: hidden !important;
--- a/WebApp/wwwroot/img/friendly_help.jfif
+++ b/WebApp/wwwroot/img/friendly_help.jfif
--- a/WebApp/wwwroot/js/eventCreate.js
+++ b/WebApp/wwwroot/js/eventCreate.js
@@ -14,6 +14,7 @@ function createEvent() {
        const title = document.getElementById('title').value;
        const location = document.getElementById('location').value;
        const description = document.getElementById('description').value;
+        const imageURL = document.getElementById('imageURL').value;
        const eventDateRaw = document.getElementById('eventDate').value;
        // Walidacja prostych pól
        if (!title || !location || !eventDateRaw) {
@@ -25,6 +26,7 @@ function createEvent() {
            title,
            location,
            description,
+            imageURL,
            eventDate,
        };
        try {
--- a/WebApp/wwwroot/js/eventDelete.js
+++ b/WebApp/wwwroot/js/eventDelete.js
@@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
                window.location.href = "/modify.html?event=" + id;
                break;
            case "remove-btn":
-                const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
+                const confirmed = confirm("Are you sure?"); // Potwierdzenie usunięcia
                if (!confirmed)
                    return;
                try {
@@ -37,11 +37,11 @@ document.addEventListener("DOMContentLoaded", () => {
                            card.remove();
                    }
                    else {
-                        alert("Błąd podczas usuwania wydarzenia.");
+                        alert("Couldn't delete that event.");
                    }
                }
                catch (err) {
-                    alert("Błąd połączenia z serwerem.");
+                    alert("Server connection failure.");
                    console.error(err);
                }
                break;
--- a/WebApp/wwwroot/js/eventList.js
+++ b/WebApp/wwwroot/js/eventList.js
@@ -19,7 +19,7 @@ function getEvents(titleOrDescription) {
        if (titleOrDescription == null) {
            res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
            if (!res.ok)
-                throw new Error("Błąd pobierania wydarzeń");
+                throw new Error("Couldn't load events");
        }
        else {
            const payload = {
@@ -31,7 +31,7 @@ function getEvents(titleOrDescription) {
                body: JSON.stringify(payload)
            });
            if (!res.ok)
-                throw new Error("Błąd wyszukiwania wydarzeń");
+                throw new Error("Failed to get search results");
        }
        const events = yield res.json();
        return events;
@@ -51,11 +51,13 @@ function loadEvents(org_id, evs) {
                events = yield evs;
            }
            if (events.length === 0) {
-                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+                container.innerHTML = "<p class='text-muted'>No events to display at this moment.</p>";
                return;
            }
            // Wyczyść kontener przed dodaniem nowych
            container.innerHTML = '';
+            const styleDefault = "color: #2898BD";
+            const styleHighlighted = "#2393BD";
            for (const ev of events) {
                const card = document.createElement("div");
                card.className = "event-card filled";
@@ -85,7 +87,7 @@ function loadEvents(org_id, evs) {
            }
        }
        catch (err) {
-            container.innerHTML = `<p class="text-danger">Błąd ładowania danych.</p>`;
+            container.innerHTML = `<p class="text-danger">General failure when trying to load data.</p>`;
            console.error(err);
        }
    });
--- a/WebApp/wwwroot/js/eventModify.js
+++ b/WebApp/wwwroot/js/eventModify.js
@@ -17,6 +17,7 @@ function modifyEvent() {
        const title = document.getElementById('title').value;
        const location = document.getElementById('location').value;
        const description = document.getElementById('description').value;
+        const imageURL = document.getElementById('imageURL').value;
        const eventDateRaw = document.getElementById('eventDate').value;
        // Walidacja prostych pól
        if (!title || !location || !eventDateRaw) {
@@ -27,6 +28,7 @@ function modifyEvent() {
        const payload = {
            title,
            location,
+            imageURL,
            description,
            eventDate,
        };
@@ -40,12 +42,12 @@ function modifyEvent() {
                const errorText = yield response.text();
                throw new Error(errorText);
            }
-            alert("Wydarzenie zmodyfikowane!");
+            alert("Event modified!");
            window.location.href = "/"; // Przekierowanie do strony głównej
        }
        catch (error) {
-            console.error("Błąd podczas modyfikowania:", error);
-            alert("Nie udało się zmodyfikować wydarzenia: " + error);
+            console.error("Error occurred while trying to modify event:", error);
+            alert("Couldn't modify event, an error occurred: " + error);
        }
    });
 }
@@ -77,9 +79,10 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
            const locationInput = document.getElementById('location');
            const descriptionInput = document.getElementById('description');
            const dateInput = document.getElementById('eventDate');
+            const imageInput = document.getElementById('imageURL');
            var ev = yield getEvent(eventId);
            if (ev === null) {
-                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
+                container.innerHTML = "<p class='text-muted'>Failed to load event data.</p>";
                return;
            }
            else {
@@ -87,6 +90,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
                locationInput.value = ev.location || '';
                descriptionInput.value = ev.description || '';
                dateInput.value = ev.eventDate.slice(0, 16) || '';
+                imageInput.value = ev.imageURL || '';
            }
        }
        catch (err) {
--- a/WebApp/wwwroot/js/eventView.js
+++ b/WebApp/wwwroot/js/eventView.js
@@ -51,6 +51,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
        const descText = document.getElementById("descText");
        const dateText = document.getElementById("dateText");
        const organizerText = document.getElementById("organizerText");
+        const coverImage = document.getElementById("coverImage");
        const newdateText = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
        const newtimeText = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
        titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
@@ -58,6 +59,10 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
        descText.innerHTML = thisEvent.description;
        dateText.innerHTML = "📅 When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
        organizerText.innerHTML = "👥 Organized by: " + thisEvent.organisationName;
+        coverImage.src = thisEvent.imageURL;
+        console.log(thisEvent.imageURL);
+        if (thisEvent.imageURL !== "")
+            unhideElementById(document, "imgdiv");
        if (org_id == thisEvent.organisationId) {
            // Użytkownik jest organizacją, która
            // stworzyła to wydarzenie
--- a/WebApp/wwwroot/modify.html
+++ b/WebApp/wwwroot/modify.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pl">
 <head>
    <meta charset="UTF-8">
@@ -73,6 +73,10 @@
                <label for="eventDate">Date</label>
                <input id="eventDate" type="datetime-local" class="form-control input-field" />
            </div>
+            <div class="form-group mb-2">
+                <label for="imageURL">Poster Image URL (optional)</label>
+                <input id="imageURL" class="form-control input-field" />
+            </div>

            <button id="saveBtn" class="button"><span>Update</span><span>&#11166;</span></button>

--- a/WebApp/wwwroot/view.html
+++ b/WebApp/wwwroot/view.html
@@ -12,7 +12,6 @@


 <body class="bg-light">
-    <div class="">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="text-center mb-4">
@@ -54,27 +53,31 @@
                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
            </div>
        </div>
-        <div class="main hidden-before-load" id="mainContainer">
-            <h1 class="mb-4" id="titleText">Event title</h1>
+        <div class="main hidden-before-load" id="mainContainer" style="display: flex;">
+            <div class="hidden-before-load" id="imgdiv">
+                <img id="coverImage" src="/img/no_image.jpg" />
+            </div>
+            <div>
+                <h1 class="mb-4" id="titleText">Event title</h1>

-            <h2 id="organizerText">Organized by: dummy organization</h2>
-            <h2 id="locationText">Place: 127.0.0.1</h2>
-            <h2 id="dateText">When: now or never!</h2>
-            <h3>Description:</h3>
-            <h4 id="descText"></h4><br />
+                <h2 id="organizerText">Organized by: dummy organization</h2>
+                <h2 id="locationText">Place: 127.0.0.1</h2>
+                <h2 id="dateText">When: now or never!</h2>
+                <h3>Description:</h3>
+                <h4 id="descText"></h4><br />

-            <button id="applyBtn" class="button hidden-before-load"><span>Apply</span><span>&#11166;</span></button>
-            <button id="leaveBtn" class="button hidden-before-load"><span>Leave</span><span>&#11166;</span></button>
-            <button id="editBtn" class="button hidden-before-load"><span>Modify</span><span>&#11166;</span></button>
-            <button id="removeBtn" class="button hidden-before-load" style="background-color: red;"><span>Remove permanently</span><span>&#11166;</span></button>
+                <button id="applyBtn" class="button hidden-before-load"><span>Apply</span><span>&#11166;</span></button>
+                <button id="leaveBtn" class="button hidden-before-load"><span>Leave</span><span>&#11166;</span></button>
+                <button id="editBtn" class="button hidden-before-load"><span>Modify</span><span>&#11166;</span></button>
+                <button id="removeBtn" class="button hidden-before-load" style="background-color: red;"><span>Remove permanently</span><span>&#11166;</span></button>

+            </div>
        </div>

        <script type="module" src="/js/eventView.js"></script>
        <script type="module" src="/js/generalUseHelpers.js"></script>
        <script type="module" src="/js/auth.js"></script>

-    </div>
 </body>