feat: front-end date ranges support

This commit is contained in:
2025-06-02 07:10:08 +02:00
parent ae0fab301a
commit 80ad9db83d
5 changed files with 112 additions and 25 deletions

View File

@@ -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) => {

View File

@@ -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<EventData> {
const res = await fetch("/api/events/" + id);
if (!res.ok) {

View File

@@ -69,7 +69,11 @@
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="eventsText">Events</h2>
<span class="position-absolute end-0 translate-middle-y me-4" style="margin-top: 20px;">
<button class="btn btn-link" onclick="">
<label for="fDate" id="flabel" class="hidden-before-load">From </label>
<input type="date" id="fDate" name="fDate" class="hidden-before-load">
<label for="tDate" id="tlabel" class="hidden-before-load"> To </label>
<input type="date" id="tDate" name="tDate" class="hidden-before-load">
<button class="btn btn-link" onclick="" id="optionsbtn">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
</button>
<button class="btn btn-link" id="list-sort-btn" onclick=""><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z" /></svg></button>

View File

@@ -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) => {

View File

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