This commit is contained in:
AleksDw
2025-06-02 13:39:26 +02:00
16 changed files with 563 additions and 76 deletions

View File

@@ -26,17 +26,15 @@ function toggleOptionsVisibility() {
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;
var eventDateTo = (document.getElementById('tDate') as HTMLInputElement).value;
if (titleOrDescription == null) {
titleOrDescription = searchbar.value;
}
if (optionsVisibility) {
// Opcje widoczne
var payload_visible = {
titleOrDescription,
eventDateFrom,
@@ -64,6 +62,30 @@ async function getEvents(titleOrDescription?: string, fDate?: Date, tDate?: Date
return events;
}
async function sendMessageForEvent(eventId: number) {
const messageContent = `Help me with <a href="/view.html?event=${eventId}">this event</a>`;
try {
const response = await fetch('/api/messages/sendFromOrgToVolunteers', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ eventId, content: messageContent })
});
if (response.ok) {
alert('Message sent successfully to all volunteers!');
} else {
let error = await response.text();
if (!error) error = `Status code: ${response.status}`;
alert('Failed to send message: ' + error);
console.error('Send message failed', response.status, error);
}
} catch (error) {
alert('Error sending message: ' + error);
console.error('Fetch error:', error);
}
}
async function loadEvents(org_id: number, evs?: Promise<any>) {
const container = document.getElementById("eventList");
if (!container) return;
@@ -82,39 +104,56 @@ async function loadEvents(org_id: number, evs?: Promise<any>) {
return;
}
// Wyczyść kontener przed dodaniem nowych
container.innerHTML = '';
const styleDefault = "color: #2898BD";
const styleHighlighted = "#2393BD";
for (const ev of events) {
const card = document.createElement("div");
card.className = "event-card filled";
let formattedDate: string = new Intl.DateTimeFormat('en-US', {
weekday: 'long', // "Monday"
year: 'numeric', // "2023"
month: 'long', // "December"
day: 'numeric' // "1"
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(new Date(ev.eventDate));
card.innerHTML = `
<span>
<a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
<p style="margin: 0">👥 ${ev.organisation} | 📍 ${ev.location} | 📅 ${formattedDate}</p>
</span>`
const eventInfoSpan = document.createElement("span");
eventInfoSpan.innerHTML = `
<a href="/view.html?event=${ev.eventId}" style="color: #2898BD">${ev.title}</a>
<p style="margin: 0">👥 ${ev.organisation} | 📍 ${ev.location} | 📅 ${formattedDate}</p>
`;
card.appendChild(eventInfoSpan);
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>`;
const buttonsDiv = document.createElement("div");
buttonsDiv.className = "d-flex gap-2 mt-2";
const editBtn = document.createElement("button");
editBtn.className = "edit-btn mod-btn";
editBtn.setAttribute("data-id", ev.eventId);
editBtn.title = "Edit event";
editBtn.innerHTML = `<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>`;
const removeBtn = document.createElement("button");
removeBtn.className = "remove-btn mod-btn";
removeBtn.setAttribute("data-id", ev.eventId);
removeBtn.title = "Remove event";
removeBtn.innerHTML = `<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>`;
const sendMsgBtn = document.createElement("button");
sendMsgBtn.className = "btn btn-sm btn-info";
sendMsgBtn.textContent = "Send Message";
sendMsgBtn.setAttribute("data-id", ev.eventId);
sendMsgBtn.title = "Send message about this event";
sendMsgBtn.addEventListener("click", async () => {
await sendMessageForEvent(ev.eventId);
});
buttonsDiv.appendChild(editBtn);
buttonsDiv.appendChild(removeBtn);
buttonsDiv.appendChild(sendMsgBtn);
card.appendChild(buttonsDiv);
}
container.appendChild(card);
@@ -141,28 +180,27 @@ document.addEventListener("DOMContentLoaded", async () => {
unhideElementById(document, "logout-btn");
}
} catch {
// console.log("User not signed in. Failing gracefully.");
unhideElementById(document, "joinnow-btn");
unhideElementById(document, "signin-btn");
}
loadEvents(org_id);
// listen for clicks
const listSortToggleButton = document.getElementById("list-sort-btn");
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) => {
if (event.key === 'Enter') {
// console.log('Enter key pressed!');
var searchResults = getEvents(searchBar.value);
loadEvents(org_id, searchResults);
}
})
});
});

93
WebApp/ts/messages.ts Normal file
View File

@@ -0,0 +1,93 @@
// messages.ts
async function getMyMessages() {
const res = await fetch('/api/messages/my', {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
});
if (!res.ok) throw new Error('Failed to load messages');
return await res.json();
}
function formatDate(dateStr: string): string {
const date = new Date(dateStr);
return date.toLocaleString(undefined, {
year: 'numeric', month: 'short', day: 'numeric',
hour: '2-digit', minute: '2-digit'
});
}
function createMessageCard(msg: any) {
const card = document.createElement('div');
card.className = 'messages-card';
const sender = msg.isMsgFromVolunteer
? `Volunteer #${msg.volunteerId}`
: `Organization #${msg.organizationId}`;
// Safely inject content as HTML because it contains links
const contentHtml = msg.content ?? '';
card.innerHTML = `
<button class="delete-btn" title="Delete message" data-id="${msg.messageId}">&times;</button>
<div class="message-header">${sender}</div>
<div class="message-date">${formatDate(msg.isoDate)}</div>
<div class="message-content">${contentHtml}</div>
<small><em>Regarding Event #${msg.eventType}</em></small>
`;
return card;
}
async function deleteMessage(messageId: number) {
if (!confirm('Are you sure you want to delete this message?')) return;
const res = await fetch(`/api/messages/${messageId}`, {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' }
});
if (!res.ok) {
alert('Failed to delete message.');
return;
}
// Reload messages after delete
loadMessages();
}
async function loadMessages() {
const container = document.getElementById('messagesContainer');
if (!container) return;
try {
const messages = await getMyMessages();
container.innerHTML = '';
if (messages.length === 0) {
container.innerHTML = `<p class="no-messages">No messages to display.</p>`;
return;
}
messages.forEach((msg: any) => {
const card = createMessageCard(msg);
container.appendChild(card);
});
// Attach delete handlers
container.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', () => {
const idStr = btn.getAttribute('data-id');
if (idStr) deleteMessage(parseInt(idStr));
});
});
} catch (err) {
container.innerHTML = `<p class="no-messages text-danger">Failed to load messages.</p>`;
console.error(err);
}
}
document.addEventListener('DOMContentLoaded', () => {
loadMessages();
});

View File

@@ -1,10 +1,10 @@
import { getEvent, getMyAccount, unhideElementById, getMyRegisteredEventIds } from './generalUseHelpers.js';
var redirected = false;
var redirected = false;
document.addEventListener("DOMContentLoaded", async () => {
var container = document.getElementById("mainContainer");
var container = document.getElementById("mainContainer");
const modifyBtn = document.getElementById("editBtn");
const removeBtn = document.getElementById("removeBtn");
const applyBtn = document.getElementById("applyBtn");
@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", async () => {
} else {
unhideElementById(document, "orgno");
}
} catch {
} catch (e) {
window.location.href = "login.html";
}
@@ -40,15 +40,15 @@ document.addEventListener("DOMContentLoaded", async () => {
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 nameText = document.getElementById("nameText") as HTMLElement;
const orgnameText = document.getElementById( "orgname") as HTMLElement;
const dateText = document.getElementById("dateText") as HTMLElement;
const nameText = document.getElementById("nameText") as HTMLElement;
const orgnameText = document.getElementById("orgname") as HTMLElement;
const dateText = document.getElementById("dateText") as HTMLElement;
const newdateText = new Date(thisAccount.createdAt).toLocaleDateString('pl-PL');
const newtimeText = new Date(thisAccount.createdAt).toLocaleTimeString('pl-PL');
nameText.innerHTML = thisAccount.firstName + " " + thisAccount.lastName + " (" + thisAccount.email + ")";
dateText.innerHTML = "📅 Account creation date: " + newdateText + " " + newtimeText;
nameText.innerHTML = thisAccount.firstName + " " + thisAccount.lastName + " (" + thisAccount.email + ")";
dateText.innerHTML = "📅 Account creation date: " + newdateText + " " + newtimeText;
orgnameText.innerHTML = "👥 Organization: " + org_name;
if (org_id == -1) {
@@ -57,10 +57,10 @@ document.addEventListener("DOMContentLoaded", async () => {
// Użytkownik jest wolontariuszem
try {
const registeredIds = await getMyRegisteredEventIds();
} catch {
} catch (e) {
}
}
unhideElementById(document, "mainContainer");
@@ -75,9 +75,9 @@ window.onload = () => {
dropdown.addEventListener('change', () => {
const skillName = dropdown.options[dropdown.selectedIndex].text;
const skillId = dropdown.options[dropdown.selectedIndex].value;
const skillId = dropdown.options[dropdown.selectedIndex].value;
if (skillName) {
addSkill(skillName, skillId, false);
addSkill(skillName, Number(skillId), false);
dropdown.value = ''; // Reset dropdown
}
});