feat: front-end date ranges support

WebApp/wwwroot/index.html

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

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

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