sherl/hermes
1
0
Fork 0
mirror of https://github.com/GCMatters/hermes.git synced 2026-02-04 05:30:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: front-end overhaul. added search, editing, event view, validation

Browse Source
This commit is contained in:
eee4
2025-05-19 04:36:28 +02:00
parent 82936633f1
commit ace54fb4ef
20 changed files with 490 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
WebApp/DTOs/EventDetailsDto.cs
View File

@@ -8,6 +8,7 @@ public record class EventDetailsDto
(
int EventId,
[Required] int? OrganisationId,
[Required] string? OrganisationName,
[Required][StringLength(50)] string Title,
[StringLength(500)] string Description,
[Required][StringLength(100)] string Location,

2
WebApp/Endpoints/EventsEndpoints.cs
View File

@@ -156,6 +156,8 @@ namespace WebApp.Endpoints
List<EventSummaryDto> SearchResults = [];
List<Event> AllEvents = await dbContext.Events.ToListAsync();
AllEvents.Reverse(); // aby wyświetlało od najnowszych wydarzeń
foreach(Event e in AllEvents)
{

1
WebApp/Mapping/EventMapping.cs
View File

@@ -65,6 +65,7 @@ public static class EventMapping
return new EventDetailsDto(
myEvent.EventId,
myEvent.OrganisationId,
myEvent.Organisation.Name,
myEvent.Title,
myEvent.Description,
myEvent.Location,

2
WebApp/ts/eventCreate.ts
View File

@@ -42,7 +42,7 @@ async function createEvent() {
}
}
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("DOMContentLoaded", async () => {
const saveBtn = document.getElementById("saveBtn");
var user = await getMyAccount();

10
WebApp/ts/eventDelete.ts
View File

@@ -3,11 +3,16 @@
document.body.addEventListener("click", async (e) => {
const target = e.target as HTMLElement;
if (!target.matches(".delete-btn")) return; // Sprawdza, czy kliknięto przycisk "Usuń"
if (!target.matches(".mod-btn")) return; // Sprawdza, czy kliknięto przycisk "Usuń" lub "Edytuj"
const id = target.getAttribute("data-id"); // Pobiera ID wydarzenia
if (!id) return;
switch (target.id) {
case "edit-btn":
window.location.href = "/modify.html?event=" + id;
break;
case "remove-btn":
const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
if (!confirmed) return;
@@ -28,5 +33,8 @@
alert("Błąd połączenia z serwerem.");
console.error(err);
}
break;
}
});
});

65
WebApp/ts/eventList.ts
View File

@@ -2,25 +2,46 @@
var isAscending: boolean = false;
function toggleListSortOrder() {
function toggleListSortOrder(org_id: number) {
isAscending = !isAscending;
loadEvents();
loadEvents(org_id);
}
async function getEvents() {
const res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
async function getEvents(titleOrDescription?: string) {
var res: Response;
if (titleOrDescription == null) {
res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
if (!res.ok) throw new Error("Błąd pobierania wydarzeń");
} else {
const payload = {
titleOrDescription
};
res = await fetch('/api/events/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!res.ok) throw new Error("Błąd wyszukiwania wydarzeń");
}
const events = await res.json();
return events;
}
async function loadEvents() {
async function loadEvents(org_id: number, evs?: Promise<any>) {
const container = document.getElementById("eventList");
if (!container) return;
var events: any;
try {
var events = await getEvents();
if (evs == null) {
events = await getEvents();
}
else {
events = await evs;
}
if (events.length === 0) {
container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
@@ -33,12 +54,23 @@ async function loadEvents() {
for (const ev of events) {
const card = document.createElement("div");
card.className = "event-card filled";
//card.innerHTML = `
// <span>${ev.title}</span>`
// Do odkomentowania kiedy widok podglądu wydarzeń będzie gotowy
card.innerHTML = `
<span>${ev.title}</span>
<button class="remove-btn delete-btn" data-id="${ev.eventId}">
<span><a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a></span>`
if (org_id == ev.organisationId) {
card.innerHTML += `
<div>
<button class="edit-btn mod-btn" data-id="${ev.eventId}" id="edit-btn">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
</button>
<button class="remove-btn mod-btn" data-id="${ev.eventId}" id="remove-btn">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-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-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
</button>
`;
</div>`;
}
container.appendChild(card);
}
} catch (err) {
@@ -50,11 +82,13 @@ async function loadEvents() {
document.addEventListener("DOMContentLoaded", async () => {
var user = await getMyAccount();
var org_id: number = -1;
if (user) {
if (user.isOrganisation) {
unhideElementById(document, "mainContainer");
unhideElementById(document, "addnewevent-btn");
org_id = user.organisationId;
}
unhideElementById(document, "logout-btn");
} else {
@@ -62,10 +96,19 @@ document.addEventListener("DOMContentLoaded", async () => {
unhideElementById(document, "signin-btn");
}
loadEvents();
loadEvents(org_id);
// listen for clicks
const listSortToggleButton = document.getElementById("list-sort-btn");
if (listSortToggleButton) {
listSortToggleButton.addEventListener("click", toggleListSortOrder);
listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id));
}
// and for enter in search bar
const searchBar = document.getElementById('searchbar') as HTMLInputElement;
searchBar.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Enter key pressed!');
var searchResults = getEvents(searchBar.value);
loadEvents(org_id, searchResults);
}
})
});

2
WebApp/ts/eventModify.ts
View File

@@ -68,7 +68,7 @@ document.addEventListener("DOMContentLoaded", async () => {
{
saveBtn.addEventListener("click", (e) => {
e.preventDefault();
createEvent();
modifyEvent();
});
}
if (eventId !== null && container !== null) {

95
WebApp/ts/eventView.ts Normal file
View File

@@ -0,0 +1,95 @@
import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const eventId = urlParams.get('event');
document.addEventListener("DOMContentLoaded", async () => {
var container = document.getElementById("mainContainer");
var user = await getMyAccount();
var org_id: number = -1;
const modifyBtn = document.getElementById( "editBtn");
const removeBtn = document.getElementById("removeBtn");
if (user) {
if (user.isOrganisation) {
org_id = user.organisationId;
}
unhideElementById(document, "logout-btn");
} else {
unhideElementById(document, "joinnow-btn");
unhideElementById(document, "signin-btn");
}
var thisEvent = null;
try {
if (eventId) thisEvent = await getEvent(eventId);
} catch (err) {
if (container !== null) container.innerHTML = `<p class="text-danger">To wydarzenie nie istnieje! <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
}
if (thisEvent == null) {
if (container !== null) container.innerHTML = `<p class="text-danger">B³¹d we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
} else {
const titleText = document.getElementById( "titleText") as HTMLElement;
const locationText = document.getElementById( "locationText") as HTMLElement;
const descText = document.getElementById( "descText") as HTMLElement;
const dateText = document.getElementById( "dateText") as HTMLElement;
const organizerText = document.getElementById("organizerText") as HTMLElement;
const newdateText = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
const newtimeText = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
locationText.innerHTML = "Place: " + thisEvent.location;
descText.innerHTML = thisEvent.description;
dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
if (org_id == thisEvent.organisationId) {
// U¿ytkownik jest organizacj¹, która
// stworzy³a to wydarzenie
unhideElementById(document, "editBtn");
unhideElementById(document, "removeBtn");
} else if (org_id == -1) {
// U¿ytkownik jest wolontariuszem
unhideElementById(document, "applyBtn");
}
unhideElementById(document, "mainContainer");
}
if (modifyBtn) {
modifyBtn.addEventListener("click", (e) => {
window.location.href = "/modify.html?event=" + eventId;
});
}
if (removeBtn) {
removeBtn.addEventListener("click", async (e) => {
const confirmed = confirm("Really delete?");
if (!confirmed) return;
try {
// Wysy³a ¿¹danie DELETE do API
const response = await fetch(`/api/events/${id}`, {
method: "DELETE"
});
if (response.ok) {
alert("Event deleted.");
window.location.href = "/";
} else {
alert("Couldn't delete event.");
}
} catch (err) {
alert("Couldn't connect.");
console.error(err);
}
});
}
});

4
WebApp/ts/generalUseHelpers.ts
View File

@@ -3,6 +3,8 @@ interface EventData {
location: string;
description: string;
eventDate: string;
organisationName: string,
organisationId: number
}
interface MyAccount {
@@ -12,13 +14,13 @@ interface MyAccount {
lastName: string;
createdAt: string;
isOrganisation: boolean;
organisationId: number;
}
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);
}
}

10
WebApp/wwwroot/create.html
View File

@@ -54,23 +54,23 @@
<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">
<div class="main hidden-before-load" id="mainContainer">
<h1 class="mb-4">Create a new event</h1>
<div class="form-group mb-2">
<label for="title">Tytuł</label>
<label for="title">Title</label>
<input id="title" class="form-control input-field" />
</div>
<div class="form-group mb-2">
<label for="location">Lokalizacja</label>
<label for="location">Location</label>
<input id="location" class="form-control input-field" />
</div>
<div class="form-group mb-2">
<label for="description">Opis</label>
<label for="description">Description</label>
<textarea id="description" class="form-control input-field"></textarea>
</div>
<div class="form-group mb-2">
<label for="eventDate">Data</label>
<label for="eventDate">Date</label>
<input id="eventDate" type="datetime-local" class="form-control input-field" />
</div>

26
WebApp/wwwroot/css/panel.css
View File

@@ -171,6 +171,7 @@ body {
width: 99px;
height: 50px;
line-height: 1;
margin: 0 5px 0 5px;
}
#eventList .event-card .remove-btn:hover {
background-color: #CD4A31;
@@ -181,6 +182,31 @@ body {
width: 99px;
height: 50px;
line-height: 1;
margin: 0 5px 0 5px;
}
#eventList .event-card .edit-btn {
background-color: #9B9B9B;
border: none;
border-radius: 30px;
color: white;
font-size: 1.2rem;
width: 99px;
height: 50px;
line-height: 1;
margin: 0 5px 0 5px;
}
#eventList .event-card .edit-btn:hover {
background-color: #777;
border: none;
border-radius: 30px;
color: white;
font-size: 1.2rem;
width: 99px;
height: 50px;
line-height: 1;
margin: 0 5px 0 5px;
}
.center-text {

5
WebApp/wwwroot/index.html
View File

@@ -56,7 +56,7 @@
<!-- Main content -->
<div class="main">
<div class="position-relative search-bar">
<input type="text" class="form-control pe-5" placeholder="" />
<input type="text" class="form-control pe-5" placeholder="" id="searchbar"/>
<span class="position-absolute top-50 end-0 translate-middle-y me-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
</span>
@@ -79,8 +79,7 @@
<div id="eventList" class="d-grid gap-3">
<!-- Karty wydarzeń będą ładowane tutaj -->
<div class="event-card filled">
<span>Event Title</span>
<button class="remove-btn delete-btn" data-id="5"><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-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-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg></button> <!-- Przyciski usuwania z ID -->
<span>Loading events... please wait.</span>
</div>
</div>
</div>

4
WebApp/wwwroot/js/eventCreate.js
View File

@@ -46,7 +46,7 @@ function createEvent() {
}
});
}
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
const saveBtn = document.getElementById("saveBtn");
var user = yield getMyAccount();
if (user) {
@@ -65,4 +65,4 @@ document.addEventListener("DOMContentLoaded", () => {
createEvent();
});
}
});
}));

11
WebApp/wwwroot/js/eventDelete.js
View File

@@ -12,11 +12,16 @@ document.addEventListener("DOMContentLoaded", () => {
// Obsługuje kliknięcie na przycisk "Usuń"
document.body.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
const target = e.target;
if (!target.matches(".delete-btn"))
return; // Sprawdza, czy kliknięto przycisk "Usuń"
if (!target.matches(".mod-btn"))
return; // Sprawdza, czy kliknięto przycisk "Usuń" lub "Edytuj"
const id = target.getAttribute("data-id"); // Pobiera ID wydarzenia
if (!id)
return;
switch (target.id) {
case "edit-btn":
window.location.href = "/modify.html?event=" + id;
break;
case "remove-btn":
const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
if (!confirmed)
return;
@@ -39,5 +44,7 @@ document.addEventListener("DOMContentLoaded", () => {
alert("Błąd połączenia z serwerem.");
console.error(err);
}
break;
}
}));
});

64
WebApp/wwwroot/js/eventList.js
View File

@@ -9,26 +9,47 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
};
import { getMyAccount, unhideElementById } from './generalUseHelpers.js';
var isAscending = false;
function toggleListSortOrder() {
function toggleListSortOrder(org_id) {
isAscending = !isAscending;
loadEvents();
loadEvents(org_id);
}
function getEvents() {
function getEvents(titleOrDescription) {
return __awaiter(this, void 0, void 0, function* () {
const res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
var res;
if (titleOrDescription == null) {
res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
if (!res.ok)
throw new Error("Błąd pobierania wydarzeń");
}
else {
const payload = {
titleOrDescription
};
res = yield fetch('/api/events/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!res.ok)
throw new Error("Błąd wyszukiwania wydarzeń");
}
const events = yield res.json();
return events;
});
}
function loadEvents() {
function loadEvents(org_id, evs) {
return __awaiter(this, void 0, void 0, function* () {
const container = document.getElementById("eventList");
if (!container)
return;
var events;
try {
var events = yield getEvents();
if (evs == null) {
events = yield getEvents();
}
else {
events = yield evs;
}
if (events.length === 0) {
container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
return;
@@ -38,12 +59,22 @@ function loadEvents() {
for (const ev of events) {
const card = document.createElement("div");
card.className = "event-card filled";
//card.innerHTML = `
// <span>${ev.title}</span>`
// Do odkomentowania kiedy widok podglądu wydarzeń będzie gotowy
card.innerHTML = `
<span>${ev.title}</span>
<button class="remove-btn delete-btn" data-id="${ev.eventId}">
<span><a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a></span>`;
if (org_id == ev.organisationId) {
card.innerHTML += `
<div>
<button class="edit-btn mod-btn" data-id="${ev.eventId}" id="edit-btn">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
</button>
<button class="remove-btn mod-btn" data-id="${ev.eventId}" id="remove-btn">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-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-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
</button>
`;
</div>`;
}
container.appendChild(card);
}
}
@@ -55,10 +86,12 @@ function loadEvents() {
}
document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
var user = yield getMyAccount();
var org_id = -1;
if (user) {
if (user.isOrganisation) {
unhideElementById(document, "mainContainer");
unhideElementById(document, "addnewevent-btn");
org_id = user.organisationId;
}
unhideElementById(document, "logout-btn");
}
@@ -66,10 +99,19 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
unhideElementById(document, "joinnow-btn");
unhideElementById(document, "signin-btn");
}
loadEvents();
loadEvents(org_id);
// listen for clicks
const listSortToggleButton = document.getElementById("list-sort-btn");
if (listSortToggleButton) {
listSortToggleButton.addEventListener("click", toggleListSortOrder);
listSortToggleButton.addEventListener("click", () => toggleListSortOrder(org_id));
}
// and for enter in search bar
const searchBar = document.getElementById('searchbar');
searchBar.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Enter key pressed!');
var searchResults = getEvents(searchBar.value);
loadEvents(org_id, searchResults);
}
});
}));

2
WebApp/wwwroot/js/eventModify.js
View File

@@ -66,7 +66,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
if (saveBtn) {
saveBtn.addEventListener("click", (e) => {
e.preventDefault();
createEvent();
modifyEvent();
});
}
if (eventId !== null && container !== null) {

97
WebApp/wwwroot/js/eventView.js Normal file
View File

@@ -0,0 +1,97 @@
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');
document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
var container = document.getElementById("mainContainer");
var user = yield getMyAccount();
var org_id = -1;
const modifyBtn = document.getElementById("editBtn");
const removeBtn = document.getElementById("removeBtn");
if (user) {
if (user.isOrganisation) {
org_id = user.organisationId;
}
unhideElementById(document, "logout-btn");
}
else {
unhideElementById(document, "joinnow-btn");
unhideElementById(document, "signin-btn");
}
var thisEvent = null;
try {
if (eventId)
thisEvent = yield getEvent(eventId);
}
catch (err) {
if (container !== null)
container.innerHTML = `<p class="text-danger">To wydarzenie nie istnieje! <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
}
if (thisEvent == null) {
if (container !== null)
container.innerHTML = `<p class="text-danger">Błąd we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
}
else {
const titleText = document.getElementById("titleText");
const locationText = document.getElementById("locationText");
const descText = document.getElementById("descText");
const dateText = document.getElementById("dateText");
const organizerText = document.getElementById("organizerText");
const newdateText = new Date(thisEvent.eventDate).toLocaleDateString('pl-PL');
const newtimeText = new Date(thisEvent.eventDate).toLocaleTimeString('pl-PL');
titleText.innerHTML = thisEvent.title + ` (#${eventId})`;
locationText.innerHTML = "Place: " + thisEvent.location;
descText.innerHTML = thisEvent.description;
dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
if (org_id == thisEvent.organisationId) {
// Użytkownik jest organizacją, która
// stworzyła to wydarzenie
unhideElementById(document, "editBtn");
unhideElementById(document, "removeBtn");
}
else if (org_id == -1) {
// Użytkownik jest wolontariuszem
unhideElementById(document, "applyBtn");
}
unhideElementById(document, "mainContainer");
}
if (modifyBtn) {
modifyBtn.addEventListener("click", (e) => {
window.location.href = "/modify.html?event=" + eventId;
});
}
if (removeBtn) {
removeBtn.addEventListener("click", (e) => __awaiter(void 0, void 0, void 0, function* () {
const confirmed = confirm("Really delete?");
if (!confirmed)
return;
try {
// Wysyła żądanie DELETE do API
const response = yield fetch(`/api/events/${id}`, {
method: "DELETE"
});
if (response.ok) {
alert("Event deleted.");
window.location.href = "/";
}
else {
alert("Couldn't delete event.");
}
}
catch (err) {
alert("Couldn't connect.");
console.error(err);
}
}));
}
}));

1
WebApp/wwwroot/js/generalUseHelpers.js
View File

@@ -12,7 +12,6 @@ export function unhideElementById(document, e) {
var element = document.getElementById(e);
if (element) {
element.classList.remove('hidden-before-load');
console.log(element.classList);
}
});
}

8
WebApp/wwwroot/modify.html
View File

@@ -58,19 +58,19 @@
<h1 class="mb-4">Modify an existing event</h1>
<div class="form-group mb-2">
<label for="title">Tytuł</label>
<label for="title">Title</label>
<input id="title" class="form-control input-field" />
</div>
<div class="form-group mb-2">
<label for="location">Lokalizacja</label>
<label for="location">Location</label>
<input id="location" class="form-control input-field" />
</div>
<div class="form-group mb-2">
<label for="description">Opis</label>
<label for="description">Description</label>
<textarea id="description" class="form-control input-field"></textarea>
</div>
<div class="form-group mb-2">
<label for="eventDate">Data</label>
<label for="eventDate">Date</label>
<input id="eventDate" type="datetime-local" class="form-control input-field" />
</div>

79
WebApp/wwwroot/view.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Modify existing event</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/panel.css" />
</head>
<body class="bg-light">
<div class="">
<!-- Sidebar -->
<div class="sidebar">
<div class="text-center mb-4">
</div>
<nav class="sidebar d-flex flex-column align-items-center pt-3">
<div class="icon-box my-2">
<a href="index.html" class="nav-link text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
<br /><h8 class="iconText">Home</h8>
</a>
</div>
<div class="icon-box my-2">
<a href="#" class="nav-link text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
<br /><h8 class="iconText">Chats</h8>
</a>
</div>
<div class="icon-box my-2">
<a href="#" class="nav-link text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
<br /><h8 class="iconText">Calendar</h8>
</a>
</div>
<div class="icon-box mt-auto mb-4">
<a href="#" class="nav-link text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
<br /><h8 class="iconText">Settings</h8>
</a>
</div>
</nav>
</div>
<!-- Top Nav -->
<div class="topnav d-flex justify-content-between align-items-center shadow">
<a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
<div>
<button class="button-join hidden-before-load" id="joinnow-btn">Join now</button>
<button class="button-sign hidden-before-load" id="signin-btn">Sign In</button>
<button class="button-sign hidden-before-load" id="logout-btn">Log out</button>
<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">
<h1 class="mb-4" id="titleText">Event title</h1>
<h2 id="organizerText">Organized by: dummy organization</h2>
<h2 id="locationText">Place: 127.0.0.1</h2>
<h2 id="dateText">When: now or never!</h2>
<h3>Description:</h3>
<h4 id="descText"></h4><br/>
<button id="applyBtn" class="button hidden-before-load"><span>Apply</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>
</div>
<script type="module" src="/js/eventView.js"></script>
<script type="module" src="/js/generalUseHelpers.js"></script>
</body>
</html>