Calendar

Calendar that show all events that we joined

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,7 +128,26 @@ 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/ts/calendar.ts

@@ -0,0 +1,39 @@
+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

@@ -1,61 +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());
-    });
-};
-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/wwwroot/calendar.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8" />
+    <title>Kalendarz Wydarzeń</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 href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />
+</head>
+<body class="bg-light">
+
+    <div class="d-flex">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <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">
+                        <!-- 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-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">
+                        <!-- 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-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>
+            <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 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>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main p-4">
+            <div class="events-card bg-white p-4 rounded-4 shadow position-relative">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h2 class="eventsText">Mój Kalendarz</h2>
+                </div>
+                <div id="calendar"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
+    <script type="module" src="/js/calendar.js"></script>
+</body>
+</html>

WebApp/wwwroot/index.html

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

@@ -0,0 +1,46 @@
+"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/modify.html

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

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