feat: image support

also translated some strings back into english

WebApp/Mapping/EventMapping.cs

@@ -1,4 +1,5 @@
 using Microsoft.EntityFrameworkCore;
+using System.Security.Cryptography;
 using WebApp.DTOs;
 using WebApp.Entities;
 
@@ -12,6 +13,7 @@ public static class EventMapping
         {
             Title = ECDto.Title,
             Description = ECDto.Description,
+            ImageURL = ECDto.ImageURL,
             Location = ECDto.Location,
             EventDate = DateTime.SpecifyKind(ECDto.EventDate!.Value, DateTimeKind.Utc),
             EventSkills = ECDto.EventSkills,
@@ -26,6 +28,7 @@ public static class EventMapping
             EventId = id,
             Title = EUDto.Title,
             Description = EUDto.Description,
+            ImageURL = EUDto.ImageURL,
             Location = EUDto.Location,
             EventDate = DateTime.SpecifyKind(EUDto.EventDate!.Value, DateTimeKind.Utc),
             EventSkills = EUDto.EventSkills
@@ -38,14 +41,20 @@ public static class EventMapping
         List<SkillSummaryDto>      ssdto = [];
         List<EventRegistrationDto> erdto = [];
 
-        foreach (EventSkill es in myEvent.EventSkills)
+        if (myEvent.EventSkills != null)
         {
-            ssdto.Add(es.ToSkillSummaryDto());
+            foreach (EventSkill es in myEvent.EventSkills)
+            {
+                ssdto.Add(es.ToSkillSummaryDto());
+            }
         }
 
-        foreach (EventRegistration er in myEvent.EventRegistrations)
+        if (myEvent.EventRegistrations != null)
         {
-            erdto.Add(er.ToEventRegistrationDto());
+            foreach (EventRegistration er in myEvent.EventRegistrations)
+            {
+                erdto.Add(er.ToEventRegistrationDto());
+            }
         }
 
         return new EventSummaryDto {
@@ -92,14 +101,20 @@ public static class EventMapping
         List<SkillSummaryDto>      ssdto = [];
         List<EventRegistrationDto> erdto = [];
 
-        foreach (EventSkill es in myEvent.EventSkills)
+        if (myEvent.EventSkills != null)
         {
-            ssdto.Add(es.ToSkillSummaryDto());
+            foreach (EventSkill es in myEvent.EventSkills)
+            {
+                ssdto.Add(es.ToSkillSummaryDto());
+            }
         }
 
-        foreach (EventRegistration er in myEvent.EventRegistrations)
+        if (myEvent.EventRegistrations != null)
         {
-            erdto.Add(er.ToEventRegistrationDto());
+            foreach (EventRegistration er in myEvent.EventRegistrations)
+            {
+                erdto.Add(er.ToEventRegistrationDto());
+            }
         }
 
         return new EventDetailsDto {

WebApp/ts/eventCreate.ts

@@ -1,11 +1,12 @@
-import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
 
 async function createEvent() {
     // Pobieranie danych z formularza
-    const title = (document.getElementById('title') as HTMLInputElement).value;
+    const title        = (document.getElementById('title')       as HTMLInputElement).value;
-    const location = (document.getElementById('location') as HTMLInputElement).value;
+    const location     = (document.getElementById('location')    as HTMLInputElement).value;
-    const description = (document.getElementById('description') as HTMLTextAreaElement).value;
+    const description  = (document.getElementById('description') as HTMLTextAreaElement).value;
-    const eventDateRaw = (document.getElementById('eventDate') as HTMLInputElement).value;
+    const imageURL     = (document.getElementById('imageURL')    as HTMLInputElement).value;
+    const eventDateRaw = (document.getElementById('eventDate')   as HTMLInputElement).value;
 
     // Walidacja prostych pól
     if (!title || !location || !eventDateRaw) {
@@ -19,6 +20,7 @@ async function createEvent() {
         title,
         location,
         description,
+        imageURL,
         eventDate,
     };
 

WebApp/ts/eventDelete.ts

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () => {
     // Obsługuje kliknięcie na przycisk "Usuń"
     document.body.addEventListener("click", async (e) => {
         const target = e.target as HTMLElement;
@@ -13,7 +13,7 @@
                 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 {
@@ -27,10 +27,10 @@
                         const card = target.closest(".event-card");
                         if (card) 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;

WebApp/ts/eventList.ts

@@ -13,7 +13,7 @@ async function getEvents(titleOrDescription?: string) {
 
     if (titleOrDescription == null) {
         res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
-        if (!res.ok) throw new Error("Błąd pobierania wydarzeń");
+        if (!res.ok) throw new Error("Couldn't load events");
     } else {
         const payload = {
             titleOrDescription
@@ -23,7 +23,7 @@ async function getEvents(titleOrDescription?: string) {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload)
         });
-        if (!res.ok) throw new Error("Błąd wyszukiwania wydarzeń");
+        if (!res.ok) throw new Error("Failed to get search results");
     }
 
     const events = await res.json();
@@ -44,13 +44,16 @@ async function loadEvents(org_id: number, evs?: Promise<any>) {
         }
 
         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";
@@ -83,7 +86,7 @@ async function loadEvents(org_id: number, evs?: Promise<any>) {
             container.appendChild(card);
         }
     } 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);
     }
 }

WebApp/ts/eventModify.ts

@@ -1,4 +1,4 @@
-import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
+import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
@@ -7,10 +7,11 @@ const eventId = urlParams.get('event');
 async function modifyEvent()
 {
     // Pobieranie danych z formularza
-    const title = (document.getElementById('title') as HTMLInputElement).value;
+    const title        = (document.getElementById('title')       as HTMLInputElement).value;
-    const location = (document.getElementById('location') as HTMLInputElement).value;
+    const location     = (document.getElementById('location')    as HTMLInputElement).value;
-    const description = (document.getElementById('description') as HTMLTextAreaElement).value;
+    const description  = (document.getElementById('description') as HTMLTextAreaElement).value;
-    const eventDateRaw = (document.getElementById('eventDate') as HTMLInputElement).value;
+    const imageURL     = (document.getElementById('imageURL')    as HTMLInputElement).value;
+    const eventDateRaw = (document.getElementById('eventDate')   as HTMLInputElement).value;
 
     // Walidacja prostych pól
     if (!title || !location || !eventDateRaw)
@@ -24,6 +25,7 @@ async function modifyEvent()
     const payload = {
         title,
         location,
+        imageURL,
         description,
         eventDate,
     };
@@ -42,11 +44,11 @@ async function modifyEvent()
             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);
+       console.error("Error occurred while trying to modify event:", error);
-       alert("Nie udało się zmodyfikować wydarzenia: " + error);
+       alert("Couldn't modify event, an error occurred: " + error);
     }
 }
 
@@ -81,16 +83,18 @@ document.addEventListener("DOMContentLoaded", async () => {
             const locationInput    = document.getElementById(   'location') as HTMLInputElement;
             const descriptionInput = document.getElementById('description') as HTMLInputElement;
             const dateInput        = document.getElementById(  'eventDate') as HTMLInputElement;
+            const imageInput       = document.getElementById(   'imageURL') as HTMLInputElement;
             var ev = await 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 {
                       titleInput.value = ev.title                  || '';
                    locationInput.value = ev.location               || '';
                 descriptionInput.value = ev.description            || '';
                        dateInput.value = ev.eventDate.slice(0, 16) || '';
+                      imageInput.value = ev.imageURL               || '';
             }
 
         } catch (err) {

WebApp/ts/eventView.ts

@@ -43,6 +43,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         const descText      = document.getElementById(     "descText") as HTMLElement;
         const dateText      = document.getElementById(     "dateText") as HTMLElement;
         const organizerText = document.getElementById("organizerText") as HTMLElement;
+        const coverImage    = document.getElementById(   "coverImage") as HTMLImageElement;
         const newdateText   = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
         const newtimeText   = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
 
@@ -52,6 +53,10 @@ document.addEventListener("DOMContentLoaded", async () => {
              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

WebApp/ts/generalUseHelpers.ts

@@ -2,6 +2,7 @@ interface EventData {
     title: string;
     location: string;
     description: string;
+    imageURL: string;
     eventDate: string;
     organisationName: string,
     organisationId: number

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>
 

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;

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 {

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;

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

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);
+            console.error("Error occurred while trying to modify event:", error);
-            alert("Nie udało się zmodyfikować wydarzenia: " + 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) {

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

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>
 

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">
+        <div class="main hidden-before-load" id="mainContainer" style="display: flex;">
-            <h1 class="mb-4" id="titleText">Event title</h1>
+            <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="organizerText">Organized by: dummy organization</h2>
-            <h2 id="locationText">Place: 127.0.0.1</h2>
+                <h2 id="locationText">Place: 127.0.0.1</h2>
-            <h2 id="dateText">When: now or never!</h2>
+                <h2 id="dateText">When: now or never!</h2>
-            <h3>Description:</h3>
+                <h3>Description:</h3>
-            <h4 id="descText"></h4><br />
+                <h4 id="descText"></h4><br />
 
-            <button id="applyBtn" class="button hidden-before-load"><span>Apply</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="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="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="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>