From 80ad9db83dd5a7f54bb773cc26515341585faae8 Mon Sep 17 00:00:00 2001 From: eee4 <41441600+eee4@users.noreply.github.com> Date: Mon, 2 Jun 2025 07:10:08 +0200 Subject: [PATCH] feat: front-end date ranges support --- WebApp/ts/eventList.ts | 51 ++++++++++++++++---- WebApp/ts/generalUseHelpers.ts | 7 +++ WebApp/wwwroot/index.html | 6 ++- WebApp/wwwroot/js/eventList.js | 65 ++++++++++++++++++++------ WebApp/wwwroot/js/generalUseHelpers.js | 8 ++++ 5 files changed, 112 insertions(+), 25 deletions(-) diff --git a/WebApp/ts/eventList.ts b/WebApp/ts/eventList.ts index c3ea842..f0d37cc 100644 --- a/WebApp/ts/eventList.ts +++ b/WebApp/ts/eventList.ts @@ -1,35 +1,64 @@ -import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js'; +import { getEvent, getMyAccount, unhideElementById, hideElementById } from './generalUseHelpers.js'; var isAscending: boolean = false; +var optionsVisibility: boolean = false; function toggleListSortOrder(org_id: number) { isAscending = !isAscending; loadEvents(org_id); } +function toggleOptionsVisibility() { + optionsVisibility = !optionsVisibility; + if (optionsVisibility) { + unhideElementById(document, "fDate"); + unhideElementById(document, "tDate"); + unhideElementById(document, "flabel"); + unhideElementById(document, "tlabel"); + } else { + hideElementById(document, "fDate"); + hideElementById(document, "tDate"); + hideElementById(document, "flabel"); + hideElementById(document, "tlabel"); + } +} + async function getEvents(titleOrDescription?: string, fDate?: Date, tDate?: Date) { var res: Response; - var searchbar = document.getElementById("searchbar") as HTMLInputElement; + var searchbar = document.getElementById("searchbar") as HTMLInputElement; + var eventDateFrom = (document.getElementById('fDate') as HTMLInputElement).value; + var eventDateTo = (document.getElementById('tDate') as HTMLInputElement).value; + if (titleOrDescription == null) { titleOrDescription = searchbar.value; - //res = await fetch("/api/events" + (isAscending ? "?sort=asc" : "")); - //if (!res.ok) throw new Error("Couldn't load events"); } - var payload = { + if (optionsVisibility) { + // Opcje widoczne + var payload_visible = { titleOrDescription, - fDate, - tDate + eventDateFrom, + eventDateTo }; - res = await fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload) + body: JSON.stringify(payload_visible) }); if (!res.ok) throw new Error("Failed to get search results"); + } else { + var payload_invisible = { + titleOrDescription + }; + res = await fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload_invisible) + }); + if (!res.ok) throw new Error("Failed to get search results"); + } const events = await res.json(); return events; @@ -123,6 +152,10 @@ document.addEventListener("DOMContentLoaded", async () => { if (listSortToggleButton) { listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id)); } + const optionsToggleButton = document.getElementById("optionsbtn"); + if (optionsToggleButton) { + optionsToggleButton.addEventListener("click", () => toggleOptionsVisibility()); + } // and for enter in search bar const searchBar = document.getElementById('searchbar') as HTMLInputElement; searchBar.addEventListener('keydown', (event) => { diff --git a/WebApp/ts/generalUseHelpers.ts b/WebApp/ts/generalUseHelpers.ts index b8d8f4d..9b21773 100644 --- a/WebApp/ts/generalUseHelpers.ts +++ b/WebApp/ts/generalUseHelpers.ts @@ -25,6 +25,13 @@ export async function unhideElementById(document: Document, e: string) { } } +export async function hideElementById(document: Document, e: string) { + var element = document.getElementById(e); + if (element) { + element.classList.add('hidden-before-load'); + } +} + export async function getEvent(id: string): Promise { const res = await fetch("/api/events/" + id); if (!res.ok) { diff --git a/WebApp/wwwroot/index.html b/WebApp/wwwroot/index.html index 21673dd..96e37ae 100644 --- a/WebApp/wwwroot/index.html +++ b/WebApp/wwwroot/index.html @@ -69,7 +69,11 @@

Events

- diff --git a/WebApp/wwwroot/js/eventList.js b/WebApp/wwwroot/js/eventList.js index a747979..3e823bb 100644 --- a/WebApp/wwwroot/js/eventList.js +++ b/WebApp/wwwroot/js/eventList.js @@ -7,33 +7,64 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; -import { getMyAccount, unhideElementById } from './generalUseHelpers.js'; +import { getMyAccount, unhideElementById, hideElementById } from './generalUseHelpers.js'; var isAscending = false; +var optionsVisibility = false; function toggleListSortOrder(org_id) { isAscending = !isAscending; loadEvents(org_id); } +function toggleOptionsVisibility() { + optionsVisibility = !optionsVisibility; + if (optionsVisibility) { + unhideElementById(document, "fDate"); + unhideElementById(document, "tDate"); + unhideElementById(document, "flabel"); + unhideElementById(document, "tlabel"); + } + else { + hideElementById(document, "fDate"); + hideElementById(document, "tDate"); + hideElementById(document, "flabel"); + hideElementById(document, "tlabel"); + } +} function getEvents(titleOrDescription, fDate, tDate) { return __awaiter(this, void 0, void 0, function* () { var res; var searchbar = document.getElementById("searchbar"); + var eventDateFrom = document.getElementById('fDate').value; + var eventDateTo = document.getElementById('tDate').value; if (titleOrDescription == null) { titleOrDescription = searchbar.value; - //res = await fetch("/api/events" + (isAscending ? "?sort=asc" : "")); - //if (!res.ok) throw new Error("Couldn't load events"); } - var payload = { - titleOrDescription, - fDate, - tDate - }; - res = yield fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload) - }); - if (!res.ok) - throw new Error("Failed to get search results"); + if (optionsVisibility) { + // Opcje widoczne + var payload_visible = { + titleOrDescription, + eventDateFrom, + eventDateTo + }; + res = yield fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload_visible) + }); + if (!res.ok) + throw new Error("Failed to get search results"); + } + else { + var payload_invisible = { + titleOrDescription + }; + res = yield fetch('/api/events/search' + (isAscending ? "?sort=asc" : ""), { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload_invisible) + }); + if (!res.ok) + throw new Error("Failed to get search results"); + } const events = yield res.json(); return events; }); @@ -117,6 +148,10 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo if (listSortToggleButton) { listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id)); } + const optionsToggleButton = document.getElementById("optionsbtn"); + if (optionsToggleButton) { + optionsToggleButton.addEventListener("click", () => toggleOptionsVisibility()); + } // and for enter in search bar const searchBar = document.getElementById('searchbar'); searchBar.addEventListener('keydown', (event) => { diff --git a/WebApp/wwwroot/js/generalUseHelpers.js b/WebApp/wwwroot/js/generalUseHelpers.js index 86e45b7..a09f0e4 100644 --- a/WebApp/wwwroot/js/generalUseHelpers.js +++ b/WebApp/wwwroot/js/generalUseHelpers.js @@ -15,6 +15,14 @@ export function unhideElementById(document, e) { } }); } +export function hideElementById(document, e) { + return __awaiter(this, void 0, void 0, function* () { + var element = document.getElementById(e); + if (element) { + element.classList.add('hidden-before-load'); + } + }); +} export function getEvent(id) { return __awaiter(this, void 0, void 0, function* () { const res = yield fetch("/api/events/" + id);