From 5536a9ad7f13f4ae7efb046348620e3c4946c250 Mon Sep 17 00:00:00 2001 From: eee4 <41441600+eee4@users.noreply.github.com> Date: Mon, 19 May 2025 00:43:15 +0200 Subject: [PATCH] fix: front-end improvements makes some fields visible and other hidden depending on the result of some API calls, e.g. visitor is logged in -> show "Log out" button --- WebApp/ts/eventCreate.ts | 14 +++- WebApp/ts/eventList.ts | 31 ++++++-- WebApp/ts/eventModify.ts | 99 ++++++++++++++++++++++++++ WebApp/ts/generalUseHelpers.ts | 42 +++++++++++ WebApp/wwwroot/create.html | 10 +-- WebApp/wwwroot/css/panel.css | 5 ++ WebApp/wwwroot/css/site.css | 5 ++ WebApp/wwwroot/css/style.css | 6 ++ WebApp/wwwroot/index.html | 10 +-- WebApp/wwwroot/js/eventCreate.js | 14 +++- WebApp/wwwroot/js/eventList.js | 28 ++++++-- WebApp/wwwroot/js/eventModify.js | 95 ++++++++++++++++++++++++ WebApp/wwwroot/js/generalUseHelpers.js | 38 ++++++++++ WebApp/wwwroot/modify.html | 88 +++++++++++++++++++++++ tsconfig.json | 2 +- 15 files changed, 465 insertions(+), 22 deletions(-) create mode 100644 WebApp/ts/eventModify.ts create mode 100644 WebApp/ts/generalUseHelpers.ts create mode 100644 WebApp/wwwroot/js/eventModify.js create mode 100644 WebApp/wwwroot/js/generalUseHelpers.js create mode 100644 WebApp/wwwroot/modify.html diff --git a/WebApp/ts/eventCreate.ts b/WebApp/ts/eventCreate.ts index 1ef81f7..72c7279 100644 --- a/WebApp/ts/eventCreate.ts +++ b/WebApp/ts/eventCreate.ts @@ -1,4 +1,4 @@ -console.log("TypeScript działa!"); +import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js'; async function createEvent() { // Pobieranie danych z formularza @@ -44,6 +44,18 @@ async function createEvent() { document.addEventListener("DOMContentLoaded", () => { const saveBtn = document.getElementById("saveBtn"); + + var user = await getMyAccount(); + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + } + unhideElementById(document, "logout-btn"); + } else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } + if (saveBtn) { saveBtn.addEventListener("click", (e) => { e.preventDefault(); diff --git a/WebApp/ts/eventList.ts b/WebApp/ts/eventList.ts index e3ab9b2..17c9e2c 100644 --- a/WebApp/ts/eventList.ts +++ b/WebApp/ts/eventList.ts @@ -1,19 +1,26 @@ -var isAscending: boolean = false; +import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js'; + +var isAscending: boolean = false; function toggleListSortOrder() { isAscending = !isAscending; loadEvents(); } +async function getEvents() { + const res = await fetch("/api/events" + (isAscending ? "?sort=asc" : "")); + if (!res.ok) throw new Error("Błąd pobierania wydarzeń"); + + const events = await res.json(); + return events; +} + async function loadEvents() { const container = document.getElementById("eventList"); if (!container) return; try { - const res = await fetch("/api/events" + (isAscending ? "?sort=asc" : "")); - if (!res.ok) throw new Error("Błąd pobierania wydarzeń"); - - const events = await res.json(); + var events = await getEvents(); if (events.length === 0) { container.innerHTML = "

Brak wydarzeń do wyświetlenia.

"; @@ -41,6 +48,20 @@ async function loadEvents() { } document.addEventListener("DOMContentLoaded", async () => { + + var user = await getMyAccount(); + + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + unhideElementById(document, "addnewevent-btn"); + } + unhideElementById(document, "logout-btn"); + } else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } + loadEvents(); // listen for clicks const listSortToggleButton = document.getElementById("list-sort-btn"); diff --git a/WebApp/ts/eventModify.ts b/WebApp/ts/eventModify.ts new file mode 100644 index 0000000..9310da9 --- /dev/null +++ b/WebApp/ts/eventModify.ts @@ -0,0 +1,99 @@ +import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js'; + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const eventId = urlParams.get('event'); + +async function modifyEvent() +{ + // Pobieranie danych z formularza + const title = (document.getElementById('title') as HTMLInputElement).value; + const location = (document.getElementById('location') as HTMLInputElement).value; + const description = (document.getElementById('description') as HTMLTextAreaElement).value; + const eventDateRaw = (document.getElementById('eventDate') as HTMLInputElement).value; + + // Walidacja prostych pól + if (!title || !location || !eventDateRaw) + { + alert("Należy uzupełnić wszystkie pola!"); + return; + } + + const eventDate = new Date(eventDateRaw).toISOString(); + + const payload = { + title, + location, + description, + eventDate, + }; + + try + { + const response = await fetch('/api/events/' + eventId, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + + if (!response.ok) + { + const errorText = await response.text(); + throw new Error(errorText); + } + + alert("Wydarzenie zmodyfikowane!"); + 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); + } +} + +document.addEventListener("DOMContentLoaded", async () => { + var container = document.getElementById("mainContainer"); + const saveBtn = document.getElementById("saveBtn"); + var user = await getMyAccount(); + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + } + unhideElementById(document, "logout-btn"); + } else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } + + if (saveBtn) + { + saveBtn.addEventListener("click", (e) => { + e.preventDefault(); + createEvent(); + }); + } + if (eventId !== null && container !== null) { + + try { + const titleInput = document.getElementById( 'title') as HTMLInputElement; + const locationInput = document.getElementById( 'location') as HTMLInputElement; + const descriptionInput = document.getElementById('description') as HTMLInputElement; + const dateInput = document.getElementById( 'eventDate') as HTMLInputElement; + var ev = await getEvent(eventId); + + if (ev === null) { + container.innerHTML = "

Brak wydarzeń do wyświetlenia.

"; + return; + } else { + titleInput.value = ev.title || ''; + locationInput.value = ev.location || ''; + descriptionInput.value = ev.description || ''; + dateInput.value = ev.eventDate.slice(0, 16) || ''; + } + + } catch (err) { + console.log(err); + container.innerHTML = `

` + err + `

`; + } + + } +}); \ No newline at end of file diff --git a/WebApp/ts/generalUseHelpers.ts b/WebApp/ts/generalUseHelpers.ts new file mode 100644 index 0000000..1dc8a21 --- /dev/null +++ b/WebApp/ts/generalUseHelpers.ts @@ -0,0 +1,42 @@ +interface EventData { + title: string; + location: string; + description: string; + eventDate: string; +} + +interface MyAccount { + userId: number; + email: string; + firstName: string; + lastName: string; + createdAt: string; + isOrganisation: boolean; +} + +export async function unhideElementById(document: Document, e: string) { + var element = document.getElementById(e); + if (element) { + element.classList.remove('hidden-before-load'); + console.log(element.classList); + } +} + +export async function getEvent(id: string): Promise { + const res = await fetch("/api/events/" + id); + if (!res.ok) { + throw Error("To wydarzenie nie istnieje"); + } + const events = await res.json(); + return events; +} + +export async function getMyAccount(): Promise { + const res = await fetch("/api/auth/my_account"); + if (!res.ok) { + throw Error("U¿ytkownik niezalogowany!"); + } + const data = await res.json(); + return data; +} + diff --git a/WebApp/wwwroot/create.html b/WebApp/wwwroot/create.html index 493be35..8714e18 100644 --- a/WebApp/wwwroot/create.html +++ b/WebApp/wwwroot/create.html @@ -2,7 +2,7 @@ - Nowe wydarzenie + New event @@ -48,12 +48,13 @@
- - + + +
-
+

Create a new event

@@ -78,6 +79,7 @@
+ diff --git a/WebApp/wwwroot/css/panel.css b/WebApp/wwwroot/css/panel.css index a0cf77c..ae9f702 100644 --- a/WebApp/wwwroot/css/panel.css +++ b/WebApp/wwwroot/css/panel.css @@ -4,6 +4,11 @@ font-size: 36px; } +.hidden-before-load { + display: none !important; + visibility: hidden !important; +} + body { font-family: 'Segoe UI', sans-serif; } diff --git a/WebApp/wwwroot/css/site.css b/WebApp/wwwroot/css/site.css index a3cd7e1..b3623f6 100644 --- a/WebApp/wwwroot/css/site.css +++ b/WebApp/wwwroot/css/site.css @@ -2,6 +2,11 @@ html { font-size: 14px; } +.hidden-before-load { + display: none !important; + visibility: hidden !important; +} + @media (min-width: 768px) { html { font-size: 16px; diff --git a/WebApp/wwwroot/css/style.css b/WebApp/wwwroot/css/style.css index 30562cf..b549785 100644 --- a/WebApp/wwwroot/css/style.css +++ b/WebApp/wwwroot/css/style.css @@ -1,6 +1,12 @@ body { color: #2898BD; } + +.hidden-before-load { + display: none !important; + visibility: hidden !important; +} + .input-field { border-radius: 10px; padding: 10px; diff --git a/WebApp/wwwroot/index.html b/WebApp/wwwroot/index.html index 3dbf68c..19a143f 100644 --- a/WebApp/wwwroot/index.html +++ b/WebApp/wwwroot/index.html @@ -46,8 +46,9 @@
- - + + +
@@ -86,9 +87,10 @@ - + +
- + diff --git a/WebApp/wwwroot/js/eventCreate.js b/WebApp/wwwroot/js/eventCreate.js index 6dab6eb..92418c5 100644 --- a/WebApp/wwwroot/js/eventCreate.js +++ b/WebApp/wwwroot/js/eventCreate.js @@ -1,4 +1,3 @@ -"use strict"; 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) { @@ -8,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; -console.log("TypeScript działa!"); +import { getMyAccount, unhideElementById } from './generalUseHelpers.js'; function createEvent() { return __awaiter(this, void 0, void 0, function* () { // Pobieranie danych z formularza @@ -49,6 +48,17 @@ function createEvent() { } document.addEventListener("DOMContentLoaded", () => { const saveBtn = document.getElementById("saveBtn"); + var user = yield getMyAccount(); + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + } + unhideElementById(document, "logout-btn"); + } + else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } if (saveBtn) { saveBtn.addEventListener("click", (e) => { e.preventDefault(); diff --git a/WebApp/wwwroot/js/eventList.js b/WebApp/wwwroot/js/eventList.js index 00f14d7..15f2b1d 100644 --- a/WebApp/wwwroot/js/eventList.js +++ b/WebApp/wwwroot/js/eventList.js @@ -1,4 +1,3 @@ -"use strict"; 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) { @@ -8,21 +7,28 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; +import { getMyAccount, unhideElementById } from './generalUseHelpers.js'; var isAscending = false; function toggleListSortOrder() { isAscending = !isAscending; loadEvents(); } +function getEvents() { + 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ń"); + const events = yield res.json(); + return events; + }); +} function loadEvents() { return __awaiter(this, void 0, void 0, function* () { const container = document.getElementById("eventList"); if (!container) return; try { - const res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : "")); - if (!res.ok) - throw new Error("Błąd pobierania wydarzeń"); - const events = yield res.json(); + var events = yield getEvents(); if (events.length === 0) { container.innerHTML = "

Brak wydarzeń do wyświetlenia.

"; return; @@ -48,6 +54,18 @@ function loadEvents() { }); } document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () { + var user = yield getMyAccount(); + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + unhideElementById(document, "addnewevent-btn"); + } + unhideElementById(document, "logout-btn"); + } + else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } loadEvents(); // listen for clicks const listSortToggleButton = document.getElementById("list-sort-btn"); diff --git a/WebApp/wwwroot/js/eventModify.js b/WebApp/wwwroot/js/eventModify.js new file mode 100644 index 0000000..d6cbf9f --- /dev/null +++ b/WebApp/wwwroot/js/eventModify.js @@ -0,0 +1,95 @@ +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'); +function modifyEvent() { + return __awaiter(this, void 0, void 0, function* () { + // Pobieranie danych z formularza + const title = document.getElementById('title').value; + const location = document.getElementById('location').value; + const description = document.getElementById('description').value; + const eventDateRaw = document.getElementById('eventDate').value; + // Walidacja prostych pól + if (!title || !location || !eventDateRaw) { + alert("Należy uzupełnić wszystkie pola!"); + return; + } + const eventDate = new Date(eventDateRaw).toISOString(); + const payload = { + title, + location, + description, + eventDate, + }; + try { + const response = yield fetch('/api/events/' + eventId, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + if (!response.ok) { + const errorText = yield response.text(); + throw new Error(errorText); + } + alert("Wydarzenie zmodyfikowane!"); + 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); + } + }); +} +document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () { + var container = document.getElementById("mainContainer"); + const saveBtn = document.getElementById("saveBtn"); + var user = yield getMyAccount(); + if (user) { + if (user.isOrganisation) { + unhideElementById(document, "mainContainer"); + } + unhideElementById(document, "logout-btn"); + } + else { + unhideElementById(document, "joinnow-btn"); + unhideElementById(document, "signin-btn"); + } + if (saveBtn) { + saveBtn.addEventListener("click", (e) => { + e.preventDefault(); + createEvent(); + }); + } + if (eventId !== null && container !== null) { + try { + const titleInput = document.getElementById('title'); + const locationInput = document.getElementById('location'); + const descriptionInput = document.getElementById('description'); + const dateInput = document.getElementById('eventDate'); + var ev = yield getEvent(eventId); + if (ev === null) { + container.innerHTML = "

Brak wydarzeń do wyświetlenia.

"; + return; + } + else { + titleInput.value = ev.title || ''; + locationInput.value = ev.location || ''; + descriptionInput.value = ev.description || ''; + dateInput.value = ev.eventDate.slice(0, 16) || ''; + } + } + catch (err) { + console.log(err); + container.innerHTML = `

` + err + `

`; + } + } +})); diff --git a/WebApp/wwwroot/js/generalUseHelpers.js b/WebApp/wwwroot/js/generalUseHelpers.js new file mode 100644 index 0000000..5b4a187 --- /dev/null +++ b/WebApp/wwwroot/js/generalUseHelpers.js @@ -0,0 +1,38 @@ +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()); + }); +}; +export function unhideElementById(document, e) { + return __awaiter(this, void 0, void 0, function* () { + var element = document.getElementById(e); + if (element) { + element.classList.remove('hidden-before-load'); + console.log(element.classList); + } + }); +} +export function getEvent(id) { + return __awaiter(this, void 0, void 0, function* () { + const res = yield fetch("/api/events/" + id); + if (!res.ok) { + throw Error("To wydarzenie nie istnieje"); + } + const events = yield res.json(); + return events; + }); +} +export function getMyAccount() { + return __awaiter(this, void 0, void 0, function* () { + const res = yield fetch("/api/auth/my_account"); + if (!res.ok) { + throw Error("Użytkownik niezalogowany!"); + } + const data = yield res.json(); + return data; + }); +} diff --git a/WebApp/wwwroot/modify.html b/WebApp/wwwroot/modify.html new file mode 100644 index 0000000..541bbc9 --- /dev/null +++ b/WebApp/wwwroot/modify.html @@ -0,0 +1,88 @@ + + + + + Modify existing event + + + + + + + + + +
+ + + +
+ +
+ + + + +
+
+
+

Modify an existing event

+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+ + + + + + + + + diff --git a/tsconfig.json b/tsconfig.json index 50593f7..f01f194 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "strict": true, "esModuleInterop": true, "outDir": "WebApp/wwwroot/js", - "lib": [ "es2015", "dom" ] + "lib": [ "es2017", "dom" ] }, "include": [ "WebApp/ts/**/*" ], "compileOnSave": true