feat: front-end overhaul. added search, editing, event view, validation

2026-02-04 13:40:13 +01:00 · 2025-05-19 04:36:28 +02:00
parent 82936633f1
commit ace54fb4ef
20 changed files with 490 additions and 89 deletions
--- a/WebApp/wwwroot/js/eventCreate.js
+++ b/WebApp/wwwroot/js/eventCreate.js
@@ -46,7 +46,7 @@ function createEvent() {
        }
    });
 }
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
    const saveBtn = document.getElementById("saveBtn");
    var user = yield getMyAccount();
    if (user) {
@@ -65,4 +65,4 @@ document.addEventListener("DOMContentLoaded", () => {
            createEvent();
        });
    }
-});
+}));
--- a/WebApp/wwwroot/js/eventDelete.js
+++ b/WebApp/wwwroot/js/eventDelete.js
@@ -12,32 +12,39 @@ document.addEventListener("DOMContentLoaded", () => {
    // Obsługuje kliknięcie na przycisk "Usuń"
    document.body.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
        const target = e.target;
-        if (!target.matches(".delete-btn"))
-            return; // Sprawdza, czy kliknięto przycisk "Usuń"
+        if (!target.matches(".mod-btn"))
+            return; // Sprawdza, czy kliknięto przycisk "Usuń" lub "Edytuj"
        const id = target.getAttribute("data-id"); // Pobiera ID wydarzenia
        if (!id)
            return;
-        const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
-        if (!confirmed)
-            return;
-        try {
-            // Wysyła żądanie DELETE do API
-            const response = yield fetch(`/api/events/${id}`, {
-                method: "DELETE"
-            });
-            if (response.ok) {
-                // Usuwa kartę z DOM (bez przeładowania strony)
-                const card = target.closest(".event-card");
-                if (card)
-                    card.remove();
-            }
-            else {
-                alert("Błąd podczas usuwania wydarzenia.");
-            }
-        }
-        catch (err) {
-            alert("Błąd połączenia z serwerem.");
-            console.error(err);
+        switch (target.id) {
+            case "edit-btn":
+                window.location.href = "/modify.html?event=" + id;
+                break;
+            case "remove-btn":
+                const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
+                if (!confirmed)
+                    return;
+                try {
+                    // Wysyła żądanie DELETE do API
+                    const response = yield fetch(`/api/events/${id}`, {
+                        method: "DELETE"
+                    });
+                    if (response.ok) {
+                        // Usuwa kartę z DOM (bez przeładowania strony)
+                        const card = target.closest(".event-card");
+                        if (card)
+                            card.remove();
+                    }
+                    else {
+                        alert("Błąd podczas usuwania wydarzenia.");
+                    }
+                }
+                catch (err) {
+                    alert("Błąd połączenia z serwerem.");
+                    console.error(err);
+                }
+                break;
        }
    }));
 });
--- a/WebApp/wwwroot/js/eventList.js
+++ b/WebApp/wwwroot/js/eventList.js
@@ -9,26 +9,47 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { getMyAccount, unhideElementById } from './generalUseHelpers.js';
 var isAscending = false;
-function toggleListSortOrder() {
+function toggleListSortOrder(org_id) {
    isAscending = !isAscending;
-    loadEvents();
+    loadEvents(org_id);
 }
-function getEvents() {
+function getEvents(titleOrDescription) {
    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
-        if (!res.ok)
-            throw new Error("Błąd pobierania wydarzeń");
+        var res;
+        if (titleOrDescription == null) {
+            res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
+            if (!res.ok)
+                throw new Error("Błąd pobierania wydarzeń");
+        }
+        else {
+            const payload = {
+                titleOrDescription
+            };
+            res = yield fetch('/api/events/search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            if (!res.ok)
+                throw new Error("Błąd wyszukiwania wydarzeń");
+        }
        const events = yield res.json();
        return events;
    });
 }
-function loadEvents() {
+function loadEvents(org_id, evs) {
    return __awaiter(this, void 0, void 0, function* () {
        const container = document.getElementById("eventList");
        if (!container)
            return;
+        var events;
        try {
-            var events = yield getEvents();
+            if (evs == null) {
+                events = yield getEvents();
+            }
+            else {
+                events = yield evs;
+            }
            if (events.length === 0) {
                container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
                return;
@@ -38,12 +59,22 @@ function loadEvents() {
            for (const ev of events) {
                const card = document.createElement("div");
                card.className = "event-card filled";
+                //card.innerHTML = `
+                //    <span>${ev.title}</span>`
+                // Do odkomentowania kiedy widok podglądu wydarzeń będzie gotowy
                card.innerHTML = `
-                <span>${ev.title}</span>
-                <button class="remove-btn delete-btn" data-id="${ev.eventId}">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-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-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
-                </button>
-            `;
+                <span><a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a></span>`;
+                if (org_id == ev.organisationId) {
+                    card.innerHTML += `
+                <div>
+                    <button class="edit-btn mod-btn" data-id="${ev.eventId}" id="edit-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
+                    </button>
+                    <button class="remove-btn mod-btn" data-id="${ev.eventId}" id="remove-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-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-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                    </button>
+                </div>`;
+                }
                container.appendChild(card);
            }
        }
@@ -55,10 +86,12 @@ function loadEvents() {
 }
 document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
    var user = yield getMyAccount();
+    var org_id = -1;
    if (user) {
        if (user.isOrganisation) {
            unhideElementById(document, "mainContainer");
            unhideElementById(document, "addnewevent-btn");
+            org_id = user.organisationId;
        }
        unhideElementById(document, "logout-btn");
    }
@@ -66,10 +99,19 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
        unhideElementById(document, "joinnow-btn");
        unhideElementById(document, "signin-btn");
    }
-    loadEvents();
+    loadEvents(org_id);
    // listen for clicks
    const listSortToggleButton = document.getElementById("list-sort-btn");
    if (listSortToggleButton) {
-        listSortToggleButton.addEventListener("click", toggleListSortOrder);
+        listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id));
    }
+    // and for enter in search bar
+    const searchBar = document.getElementById('searchbar');
+    searchBar.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            console.log('Enter key pressed!');
+            var searchResults = getEvents(searchBar.value);
+            loadEvents(org_id, searchResults);
+        }
+    });
 }));
--- a/WebApp/wwwroot/js/eventModify.js
+++ b/WebApp/wwwroot/js/eventModify.js
@@ -66,7 +66,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
    if (saveBtn) {
        saveBtn.addEventListener("click", (e) => {
            e.preventDefault();
-            createEvent();
+            modifyEvent();
        });
    }
    if (eventId !== null && container !== null) {
--- a/WebApp/wwwroot/js/eventView.js
+++ b/WebApp/wwwroot/js/eventView.js
@@ -0,0 +1,97 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const eventId = urlParams.get('event');
+document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
+    var container = document.getElementById("mainContainer");
+    var user = yield getMyAccount();
+    var org_id = -1;
+    const modifyBtn = document.getElementById("editBtn");
+    const removeBtn = document.getElementById("removeBtn");
+    if (user) {
+        if (user.isOrganisation) {
+            org_id = user.organisationId;
+        }
+        unhideElementById(document, "logout-btn");
+    }
+    else {
+        unhideElementById(document, "joinnow-btn");
+        unhideElementById(document, "signin-btn");
+    }
+    var thisEvent = null;
+    try {
+        if (eventId)
+            thisEvent = yield getEvent(eventId);
+    }
+    catch (err) {
+        if (container !== null)
+            container.innerHTML = `<p class="text-danger">To wydarzenie nie istnieje! <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+    }
+    if (thisEvent == null) {
+        if (container !== null)
+            container.innerHTML = `<p class="text-danger">Błąd we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+    }
+    else {
+        const titleText = document.getElementById("titleText");
+        const locationText = document.getElementById("locationText");
+        const descText = document.getElementById("descText");
+        const dateText = document.getElementById("dateText");
+        const organizerText = document.getElementById("organizerText");
+        const newdateText = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
+        const newtimeText = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
+        titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
+        locationText.innerHTML = "Place: " + thisEvent.location;
+        descText.innerHTML = thisEvent.description;
+        dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
+        organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
+        if (org_id == thisEvent.organisationId) {
+            // Użytkownik jest organizacją, która
+            // stworzyła to wydarzenie
+            unhideElementById(document, "editBtn");
+            unhideElementById(document, "removeBtn");
+        }
+        else if (org_id == -1) {
+            // Użytkownik jest wolontariuszem
+            unhideElementById(document, "applyBtn");
+        }
+        unhideElementById(document, "mainContainer");
+    }
+    if (modifyBtn) {
+        modifyBtn.addEventListener("click", (e) => {
+            window.location.href = "/modify.html?event=" + eventId;
+        });
+    }
+    if (removeBtn) {
+        removeBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
+            const confirmed = confirm("Really delete?");
+            if (!confirmed)
+                return;
+            try {
+                // Wysyła żądanie DELETE do API
+                const response = yield fetch(`/api/events/${id}`, {
+                    method: "DELETE"
+                });
+                if (response.ok) {
+                    alert("Event deleted.");
+                    window.location.href = "/";
+                }
+                else {
+                    alert("Couldn't delete event.");
+                }
+            }
+            catch (err) {
+                alert("Couldn't connect.");
+                console.error(err);
+            }
+        }));
+    }
+}));
--- a/WebApp/wwwroot/js/generalUseHelpers.js
+++ b/WebApp/wwwroot/js/generalUseHelpers.js
@@ -12,7 +12,6 @@ export function unhideElementById(document, e) {
        var element = document.getElementById(e);
        if (element) {
            element.classList.remove('hidden-before-load');
-            console.log(element.classList);
        }
    });
 }