feat: user page with volunteerskills picking support

WebApp/Endpoints/EventRegistrationEndpoints.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.EntityFrameworkCore;
 using System.Security.Cryptography;
@@ -128,26 +128,7 @@ namespace WebApp.Endpoints
 
                 return Results.Json(new { success = true });
             });
-            group.MapGet("/registered",
-                async (ApplicationDbContext dbContext, HttpContext httpContext, GeneralUseHelpers guhf) =>
-                {
-                    Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
-                    User? user = await guhf.GetUserFromToken(token);
 
-                    if (user is null || user.IsOrganisation)
-                        return Results.Json(new { success = false, error_msg = "Unauthorized or organisations cannot register." });
-
-                    var events = await dbContext.EventRegistrations
-                        .Where(r => r.UserId == user.UserId)
-                        .Select(r => new {
-                            r.Event.EventId,
-                            r.Event.Title,
-                            r.Event.EventDate
-                        })
-                        .ToListAsync();
-
-                    return Results.Json(events);
-                });
             return group;
         }
     }

WebApp/Endpoints/EventsEndpoints.cs

@@ -201,10 +201,10 @@ namespace WebApp.Endpoints
                         // Uwaga! Zanim to zrobisz, sprawdź, czy użytkownik
                         // jest twórcą danego wydarzenia! Jeżeli nim nie jest,
                         // wyzeruj EventRegistrations!
-                        if (org is null || e.OrganisationId != org.OrganisationId)
+                        //if (org is null || e.OrganisationId != org.OrganisationId)
-                        {
+                        //{
-                            e.EventRegistrations.Clear();
+                        //    e.EventRegistrations.Clear();
-                        }
+                        //}
 
                         if (matchFound) SearchResults.Add(e);
                     }

WebApp/ts/calendar.ts

@@ -1,39 +0,0 @@
-async function getRegisteredEvents(): Promise<any[]> {
-    const res = await fetch("/api/events/registered");
-    if (!res.ok) throw new Error("Couldn't load joined events");
-
-    const data = await res.json();
-    return data.map((ev: any) => ({
-        title: ev.title,
-        start: ev.eventDate,
-        url: `/view.html?event=${ev.eventId}`
-    }));
-}
-
-
-document.addEventListener("DOMContentLoaded", async () => {
-    const calendarEl = document.getElementById("calendar") as HTMLElement;
-    if (!calendarEl) return;
-
-    const events = await getRegisteredEvents();
-
-    const calendar = new (window as any).FullCalendar.Calendar(calendarEl, {
-        initialView: 'dayGridMonth',
-        headerToolbar: {
-            left: 'prev,next today',
-            center: 'title',
-            right: 'dayGridMonth,timeGridWeek,listWeek'
-        },
-        themeSystem: 'bootstrap5',
-        events: events,
-        eventClick: function (info: any) {
-            if (info.event.url) {
-                window.location.href = info.event.url;
-                info.jsEvent.preventDefault();
-            }
-        }
-    });
-
-    calendar.render();
-});
-

WebApp/ts/eventCreate.js

@@ -0,0 +1,61 @@
+"use strict";
+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());
+    });
+};
+console.log("TypeScript działa!");
+function createEvent() {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Pobieranie danych z formularza
+        const title = document.getElementById('title').value;
+        const location = document.getElementById('location').value;
+        const description = document.getElementById('description').value;
+        const eventDateRaw = document.getElementById('eventDate').value;
+        const organisationIdRaw = document.getElementById('organisationId').value;
+        // Walidacja prostych pól
+        if (!title || !location || !eventDateRaw || !organisationIdRaw) {
+            alert("Uzupełnij wszystkie wymagane pola!");
+            return;
+        }
+        const eventDate = new Date(eventDateRaw).toISOString();
+        const organisationId = parseInt(organisationIdRaw);
+        const payload = {
+            title,
+            location,
+            description,
+            eventDate,
+            organisationId
+        };
+        try {
+            const response = yield fetch('/api/events', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            if (!response.ok) {
+                const errorText = yield response.text();
+                throw new Error(errorText);
+            }
+            alert("Wydarzenie zostało utworzone!");
+            window.location.href = "/"; // Przekierowanie do strony głównej
+        }
+        catch (error) {
+            console.error("Błąd podczas tworzenia:", error);
+            alert("Nie udało się utworzyć wydarzenia: " + error);
+        }
+    });
+}
+document.addEventListener("DOMContentLoaded", () => {
+    const saveBtn = document.getElementById("saveBtn");
+    if (saveBtn) {
+        saveBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            createEvent();
+        });
+    }
+});

WebApp/ts/eventCreate.ts

@@ -1,5 +1,7 @@
 import { getEvent, getMyAccount, unhideElementById } from './generalUseHelpers.js';
 
+
+
 async function createEvent() {
     // Pobieranie danych z formularza
     const title        = (document.getElementById('title')       as HTMLInputElement).value;

WebApp/ts/eventList.ts

@@ -7,24 +7,29 @@ function toggleListSortOrder(org_id: number) {
     loadEvents(org_id);
 }
 
-async function getEvents(titleOrDescription?: string) {
+async function getEvents(titleOrDescription?: string, fDate?: Date, tDate?: Date) {
 
     var res: Response;
+    var searchbar = document.getElementById("searchbar") as HTMLInputElement;
 
     if (titleOrDescription == null) {
-        res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
+        titleOrDescription = searchbar.value;
-        if (!res.ok) throw new Error("Couldn't load events");
+        //res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
-    } else {
+        //if (!res.ok) throw new Error("Couldn't load events");
-        const payload = {
+    }
-            titleOrDescription
+
+        var payload = {
+            titleOrDescription,
+            fDate,
+            tDate
         };
-        res = await fetch('/api/events/search', {
+
+        res = await 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");
-    }
 
     const events = await res.json();
     return events;

WebApp/ts/userSkills.ts

@@ -0,0 +1,192 @@
+import { getEvent, getMyAccount, unhideElementById, getMyRegisteredEventIds } from './generalUseHelpers.js';
+
+var   redirected = false;
+
+document.addEventListener("DOMContentLoaded", async () => {
+
+    var container   = document.getElementById("mainContainer");
+    const modifyBtn = document.getElementById("editBtn");
+    const removeBtn = document.getElementById("removeBtn");
+    const applyBtn = document.getElementById("applyBtn");
+    const leaveBtn = document.getElementById("leaveBtn");
+    var org_id: number = -1;
+    var org_name: string = "";
+
+    try {
+        var user = await getMyAccount();
+        if (user && user.isOrganisation) {
+            const org_id = user.organisationId;
+            fetch('/api/organizations/' + org_id)
+                .then(response => response.json())
+                .then(data => {
+                    org_name = data.name;
+                    unhideElementById(document, "orgname");
+                })
+                .catch(error => {
+                    console.error('Failed to fetch organization:', error);
+                });
+        } else {
+            unhideElementById(document, "orgno");
+        }
+    } catch {
+        window.location.href = "login.html";
+    }
+
+    var thisAccount = null;
+    thisAccount = await getMyAccount();
+    if (thisAccount.isOrganisation) org_id = thisAccount.organisationId;
+
+    if (thisAccount == 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 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;
+        orgnameText.innerHTML = "👥 Organization: " + org_name;
+
+        if (org_id == -1) {
+            unhideElementById(document, "skillscont");
+        } else if (org_id == -1) {
+            // Użytkownik jest wolontariuszem
+            try {
+                const registeredIds = await getMyRegisteredEventIds();
+            } catch {
+
+            }
+            
+        }
+
+        unhideElementById(document, "mainContainer");
+
+    }
+
+});
+
+window.onload = () => {
+    const selectedSkillsContainer = document.getElementById('selected-skills') as HTMLDivElement;
+    const dropdown = document.getElementById('skill-dropdown') as HTMLSelectElement;
+
+    dropdown.addEventListener('change', () => {
+        const skillName = dropdown.options[dropdown.selectedIndex].text;
+        const skillId   = dropdown.options[dropdown.selectedIndex].value;
+        if (skillName) {
+            addSkill(skillName, skillId, false);
+            dropdown.value = ''; // Reset dropdown
+        }
+    });
+
+    function fetchSkills() {
+        fetch('/api/skills')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                populateDropdown(data);
+            })
+            .catch(error => {
+                console.error('There was a problem with the fetch operation:', error);
+            });
+    }
+
+    function fetchUserSkills() {
+        fetch('/api/auth/skills')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                populateSkills(data);
+            })
+            .catch(error => {
+                console.error('There was a problem with the fetch operation:', error);
+            });
+    }
+
+    // Populate dropdown with fetched skills
+    function populateDropdown(skills: { skillId: number; skillName: string; }[]) {
+        skills.forEach(skill => {
+            const option = document.createElement('option');
+            option.value = skill.skillId.toString();
+            option.textContent = skill.skillName;
+            dropdown.appendChild(option);
+        });
+    }
+
+    function populateSkills(skills: { skillId: number; skillName: string; }[]) {
+        skills.forEach(skill => {
+            addSkill(skill.skillName, skill.skillId, true);
+        });
+    }
+
+    // Call fetchSkills to populate dropdown on load, same for fetchUserSkills()
+    fetchSkills();
+    fetchUserSkills();
+
+    function getRandomColor(): string {
+
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+
+    async function addSkill(skillName: string, skillId: number, dummy_add: boolean) {
+        if (!document.querySelector(`#selected-skills .skill[data-skill="${skillName}"]`)) {
+            const skillDiv = document.createElement('div');
+            skillDiv.className = 'skill';
+            skillDiv.textContent = skillName;
+            skillDiv.setAttribute('data-skill', skillName);
+            skillDiv.style.backgroundColor = getRandomColor();
+
+            if (!dummy_add) {
+                var skill = skillId;
+                var payload = {
+                    skill
+                };
+
+                var res = await fetch('/api/auth/add_skill', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                var data = await res.json();
+                if (res.ok) skillDiv.remove();
+                else alert(data.message);
+            }
+
+            const removeButton = document.createElement('button');
+            removeButton.textContent = 'X';
+            removeButton.addEventListener('click', async () => {
+                var skill = skillId;
+                var payload = {
+                    skill
+                };
+
+                var res = await fetch('/api/auth/remove_skill', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                var data = await res.json();
+                if (res.ok) skillDiv.remove();
+                else alert(data.message);
+            });
+
+            skillDiv.appendChild(removeButton);
+            selectedSkillsContainer.appendChild(skillDiv);
+        }
+    }
+};

WebApp/wwwroot/create.html

@@ -37,7 +37,7 @@
                     </a>
                 </div>
                 <div class="icon-box mt-auto mb-4">
-                    <a href="#" class="nav-link text-info mb-3">
+                    <a href="user.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="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>

WebApp/wwwroot/css/style.css

@@ -67,3 +67,26 @@ body {
         opacity: 1;
         padding-left: 10px;
     }
+
+.selected-skills div {
+    padding: 5px 10px;
+    margin: 5px;
+    display: inline-block;
+    color: white;
+    border-radius: 5px;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+    .selected-skills div button {
+        margin-left: 10px;
+        color: red;
+        border: none;
+        background: none;
+        cursor: pointer;
+    }
+
+.skill-dropdown {
+    display: block;
+}

WebApp/wwwroot/index.html

@@ -28,13 +28,13 @@
 					</a>
 				</div>
 				<div class="icon-box my-2">
-					<a href="calendar.html" class="nav-link text-info mb-3">
+					<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">
+					<a href="user.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="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>

WebApp/wwwroot/js/calendar.js

@@ -1,46 +0,0 @@
-"use strict";
-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());
-    });
-};
-function getRegisteredEvents() {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch("/api/events/registered");
-        if (!res.ok)
-            throw new Error("Couldn't load joined events");
-        const data = yield res.json();
-        return data.map((ev) => ({
-            title: ev.title,
-            start: ev.eventDate,
-            url: `/view.html?event=${ev.eventId}`
-        }));
-    });
-}
-document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
-    const calendarEl = document.getElementById("calendar");
-    if (!calendarEl)
-        return;
-    const events = yield getRegisteredEvents();
-    const calendar = new window.FullCalendar.Calendar(calendarEl, {
-        initialView: 'dayGridMonth',
-        headerToolbar: {
-            left: 'prev,next today',
-            center: 'title',
-            right: 'dayGridMonth,timeGridWeek,listWeek'
-        },
-        themeSystem: 'bootstrap5',
-        events: events,
-        eventClick: function (info) {
-            if (info.event.url) {
-                window.location.href = info.event.url;
-                info.jsEvent.preventDefault();
-            }
-        }
-    });
-    calendar.render();
-}));

WebApp/wwwroot/js/eventList.js

@@ -13,26 +13,27 @@ function toggleListSortOrder(org_id) {
     isAscending = !isAscending;
     loadEvents(org_id);
 }
-function getEvents(titleOrDescription) {
+function getEvents(titleOrDescription, fDate, tDate) {
     return __awaiter(this, void 0, void 0, function* () {
         var res;
+        var searchbar = document.getElementById("searchbar");
         if (titleOrDescription == null) {
-            res = yield fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
+            titleOrDescription = searchbar.value;
-            if (!res.ok)
+            //res = await fetch("/api/events" + (isAscending ? "?sort=asc" : ""));
-                throw new Error("Couldn't load events");
+            //if (!res.ok) throw new Error("Couldn't load events");
-        }
-        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("Failed to get search results");
         }
+        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");
         const events = yield res.json();
         return events;
     });

WebApp/wwwroot/js/userSkills.js

@@ -0,0 +1,183 @@
+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 { getMyAccount, unhideElementById, getMyRegisteredEventIds } from './generalUseHelpers.js';
+var redirected = false;
+document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void 0, function* () {
+    var container = document.getElementById("mainContainer");
+    const modifyBtn = document.getElementById("editBtn");
+    const removeBtn = document.getElementById("removeBtn");
+    const applyBtn = document.getElementById("applyBtn");
+    const leaveBtn = document.getElementById("leaveBtn");
+    var org_id = -1;
+    var org_name = "";
+    try {
+        var user = yield getMyAccount();
+        if (user && user.isOrganisation) {
+            const org_id = user.organisationId;
+            fetch('/api/organizations/' + org_id)
+                .then(response => response.json())
+                .then(data => {
+                org_name = data.name;
+                unhideElementById(document, "orgname");
+            })
+                .catch(error => {
+                console.error('Failed to fetch organization:', error);
+            });
+        }
+        else {
+            unhideElementById(document, "orgno");
+        }
+    }
+    catch (_a) {
+        window.location.href = "login.html";
+    }
+    var thisAccount = null;
+    thisAccount = yield getMyAccount();
+    if (thisAccount.isOrganisation)
+        org_id = thisAccount.organisationId;
+    if (thisAccount == 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 nameText = document.getElementById("nameText");
+        const orgnameText = document.getElementById("orgname");
+        const dateText = document.getElementById("dateText");
+        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;
+        orgnameText.innerHTML = "👥 Organization: " + org_name;
+        if (org_id == -1) {
+            unhideElementById(document, "skillscont");
+        }
+        else if (org_id == -1) {
+            // Użytkownik jest wolontariuszem
+            try {
+                const registeredIds = yield getMyRegisteredEventIds();
+            }
+            catch (_b) {
+            }
+        }
+        unhideElementById(document, "mainContainer");
+    }
+}));
+window.onload = () => {
+    const selectedSkillsContainer = document.getElementById('selected-skills');
+    const dropdown = document.getElementById('skill-dropdown');
+    dropdown.addEventListener('change', () => {
+        const skillName = dropdown.options[dropdown.selectedIndex].text;
+        const skillId = dropdown.options[dropdown.selectedIndex].value;
+        if (skillName) {
+            addSkill(skillName, skillId, false);
+            dropdown.value = ''; // Reset dropdown
+        }
+    });
+    function fetchSkills() {
+        fetch('/api/skills')
+            .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+            .then(data => {
+            populateDropdown(data);
+        })
+            .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+    function fetchUserSkills() {
+        fetch('/api/auth/skills')
+            .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+            .then(data => {
+            populateSkills(data);
+        })
+            .catch(error => {
+            console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+    // Populate dropdown with fetched skills
+    function populateDropdown(skills) {
+        skills.forEach(skill => {
+            const option = document.createElement('option');
+            option.value = skill.skillId.toString();
+            option.textContent = skill.skillName;
+            dropdown.appendChild(option);
+        });
+    }
+    function populateSkills(skills) {
+        skills.forEach(skill => {
+            addSkill(skill.skillName, skill.skillId, true);
+        });
+    }
+    // Call fetchSkills to populate dropdown on load, same for fetchUserSkills()
+    fetchSkills();
+    fetchUserSkills();
+    function getRandomColor() {
+        const r = Math.floor(Math.random() * 256);
+        const g = Math.floor(Math.random() * 256);
+        const b = Math.floor(Math.random() * 256);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    function addSkill(skillName, skillId, dummy_add) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!document.querySelector(`#selected-skills .skill[data-skill="${skillName}"]`)) {
+                const skillDiv = document.createElement('div');
+                skillDiv.className = 'skill';
+                skillDiv.textContent = skillName;
+                skillDiv.setAttribute('data-skill', skillName);
+                skillDiv.style.backgroundColor = getRandomColor();
+                if (!dummy_add) {
+                    var skill = skillId;
+                    var payload = {
+                        skill
+                    };
+                    var res = yield fetch('/api/auth/add_skill', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                    var data = yield res.json();
+                    if (res.ok)
+                        skillDiv.remove();
+                    else
+                        alert(data.message);
+                }
+                const removeButton = document.createElement('button');
+                removeButton.textContent = 'X';
+                removeButton.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
+                    var skill = skillId;
+                    var payload = {
+                        skill
+                    };
+                    var res = yield fetch('/api/auth/remove_skill', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                    var data = yield res.json();
+                    if (res.ok)
+                        skillDiv.remove();
+                    else
+                        alert(data.message);
+                }));
+                skillDiv.appendChild(removeButton);
+                selectedSkillsContainer.appendChild(skillDiv);
+            }
+        });
+    }
+};

WebApp/wwwroot/modify.html

@@ -31,7 +31,7 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="calendar.html" class="nav-link text-info mb-3">
+                    <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>

WebApp/wwwroot/user.html

@@ -1,52 +1,48 @@
 <!DOCTYPE html>
 <html lang="pl">
 <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
-    <title>Kalendarz Wydarzeń</title>
+    <title>My account</title>
-
-    <!-- Styles -->
     <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 href="/css/panel.css" rel="stylesheet" />
+    <link rel="stylesheet" href="/css/style.css" />
-    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="/css/panel.css" />
 </head>
-<body class="bg-light">
 
-    <div class="d-flex">
+
+
+<body class="bg-light">
         <!-- 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">
-                        <!-- Home icon -->
                         <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">
-                        <!-- Chats icon -->
                         <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="calendar.html" class="nav-link text-info mb-3">
+                    <a href="#" class="nav-link text-info mb-3">
-                        <!-- Calendar icon -->
+                        <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>
-                        <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-80H200v80Z" /></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">
+                    <a href="user.html" class="nav-link text-info mb-3">
-                        <!-- Settings icon -->
+                        <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>
-                        <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-80H370Z" /></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>
@@ -54,24 +50,36 @@
                 <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 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 93Z" /></svg>
+                <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">
+            <div>
+                <h1 class="mb-4">My profile</h1>
 
-        <!-- Main Content -->
+                <h2 id="nameText">John Smith (email)</h2>
-        <div class="main p-4">
+                <h2 id="orgname" class="hidden-before-load">Account type: Organization</h2>
-            <div class="events-card bg-white p-4 rounded-4 shadow position-relative">
+                <h2 id="orgno" class="hidden-before-load">Account type: Volunteer</h2>
-                <div class="d-flex justify-content-between align-items-center mb-3">
+                <h2 id="dateText">Created at: a long time ago</h2>
-                    <h2 class="eventsText">Mój Kalendarz</h2>
+
+                <div id="skillscont" class="skills-container hidden-before-load">
+                    <h3>Skills:</h3>
+                    <div id="selected-skills" class="selected-skills"></div>
+                    <select id="skill-dropdown" class="skill-dropdown">
+                        <option value="">Select a new skill</option>
+                    </select>
                 </div>
-                <div id="calendar"></div>
+
             </div>
         </div>
-    </div>
 
-    <!-- Scripts -->
+        <script type="module" src="/js/userSkills.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+        <script type="module" src="/js/generalUseHelpers.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+        <script type="module" src="/js/auth.js"></script>
-    <script type="module" src="/js/calendar.js"></script>
+
 </body>
+
+
+
+
 </html>

WebApp/wwwroot/view.html

@@ -30,13 +30,13 @@
                     </a>
                 </div>
                 <div class="icon-box my-2">
-                    <a href="calendar.html" class="nav-link text-info mb-3">
+                    <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">
+                    <a href="user.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="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>