Lekkie zmiany

Trzeba dodać logowanie tak jak reszte(nie wiem gdzie było logowanie ale zaraz się znajdzie)

WebApp/Controllers/HomeController.cs

@@ -1,32 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-using System.Diagnostics;
-using WebApp.Data;
-using WebApp.Models;
-
-public class HomeController : Controller
-{
-    private readonly ILogger<HomeController> _logger;
-    private readonly ApplicationDbContext _context;
-
-    public HomeController(ILogger<HomeController> logger, ApplicationDbContext context)
-    {
-        _logger = logger;
-        _context = context;
-    }
-
-    public IActionResult Index()
-    {
-        var events = _context.Events.ToList(); // pobieranie danych z bazy
-        return View(events); // przekazanie do widoku
-    }
-
-    public IActionResult Privacy()
-    {
-        return View();
-    }
-
-    public IActionResult Error()
-    {
-        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
-    }
-}

WebApp/Views/Home/Index.cshtml

@@ -1,51 +0,0 @@
-@model List<WebApp.Entities.Event>
-
-@{
-    ViewData["Title"] = "Home Page";
-}
-
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
-    <a href="/Events/Create" class="btn btn-success">Create New Event</a>
-</div>
-
-<hr />
-
-<h2 class="mt-4">Lista wydarzeń</h2>
-
-@if (Model.Any())
-{
-    <table class="table table-bordered table-striped mt-3">
-        <thead>
-            <tr>
-                <th>Nazwa</th>
-                <th>Miejsce</th>
-                <th>Data</th>
-                <th>Organizacja</th>
-                <th>Akcje</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var item in Model)
-            {
-                <tr>
-                    <td>@item.Title</td>
-                    <td>@item.Location</td>
-                    <td>@item.EventDate.ToString("yyyy-MM-dd HH:mm")</td>
-                    <td>@item.OrganisationId</td>
-                    <td>
-                        <form asp-action="Delete" asp-controller="Events" method="post" style="display:inline;">
-                            <input type="hidden" name="id" value="@item.EventId" />
-                            <button type="submit" class="btn btn-danger" onclick="return confirm('Na pewno chcesz usunąć to wydarzenie?')">Usuń</button>
-                        </form>
-                    </td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-else
-{
-    <p class="mt-3">Brak wydarzeń do wyświetlenia.</p>
-}

WebApp/Views/Home/Privacy.cshtml

@@ -1,6 +0,0 @@
-@{
-    ViewData["Title"] = "Privacy Policy";
-}
-<h1>@ViewData["Title"]</h1>
-
-<p>Use this page to detail your site's privacy policy.</p>

WebApp/ts/eventDelete.ts

@@ -1,25 +1,32 @@
 document.addEventListener("DOMContentLoaded", () => {
+    // Obsługuje kliknięcie na przycisk "Usuń"
     document.body.addEventListener("click", async (e) => {
         const target = e.target as HTMLElement;
 
-        if (!target.matches(".delete-btn")) return;
+        if (!target.matches(".delete-btn")) return;  // Sprawdza, czy kliknięto przycisk "Usuń"
 
-        const id = target.getAttribute("data-id");
+        const id = target.getAttribute("data-id");  // Pobiera ID wydarzenia
         if (!id) return;
 
-        const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?");
+        const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?");  // Potwierdzenie usunięcia
         if (!confirmed) return;
 
-        const response = await fetch(`/api/events/${id}`, {
+        try {
+            // Wysyła żądanie DELETE do API
+            const response = await fetch(`/api/events/${id}`, {
+                method: "DELETE"
+            });
 
-            method: "DELETE"
+            if (response.ok) {
-        });
+                // Usuwa kartę z DOM (bez przeładowania strony)
-
+                const card = target.closest(".event-card");
-        if (response.ok) {
+                if (card) card.remove();
-            const card = target.closest(".col");
+            } else {
-            if (card) card.remove();
+                alert("Błąd podczas usuwania wydarzenia.");
-        } else {
+            }
-            alert("Nie udało się usunąć wydarzenia.");
+        } catch (err) {
+            alert("Błąd połączenia z serwerem.");
+            console.error(err);
         }
     });
-});
+});

WebApp/ts/eventList.ts

@@ -13,29 +13,20 @@
             return;
         }
 
+        // Wyczyść kontener przed dodaniem nowych
+        container.innerHTML = '';
+
         for (const ev of events) {
             const card = document.createElement("div");
-            card.className = "col";
+            card.className = "event-card filled";
             card.innerHTML = `
-            <div class="card shadow-sm h-100">
+                <span>${ev.title}</span>
-                <div class="card-body">
+                <button class="remove-btn delete-btn" data-id="${ev.eventId}">−</button>
-                    <h5 class="card-title">${ev.title}</h5>
+            `;
-                    <p class="card-text">
-                        <strong>Miejsce:</strong> ${ev.location}<br/>
-                        <strong>Data:</strong> ${new Date(ev.eventDate).toLocaleString()}<br/>
-                        <strong>Organizacja ID:</strong> ${ev.organisationId}
-                    </p>
-                    <button class="btn btn-outline-danger delete-btn" data-id="${ev.eventId}">
-                        🗑️ Usuń
-                    </button>
-                </div>
-            </div>
-        `;
-
             container.appendChild(card);
         }
     } catch (err) {
         container.innerHTML = `<p class="text-danger">Błąd ładowania danych.</p>`;
         console.error(err);
     }
-});
+});

WebApp/wwwroot/css/panel.css

@@ -0,0 +1,28 @@
+body {
+    font-family: 'Segoe UI', sans-serif;
+}
+
+#eventList .event-card {
+    background-color: white;
+    border: 2px dashed #17a2b8;
+    border-radius: 10px;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+    #eventList .event-card.filled {
+        border-style: solid;
+    }
+
+    #eventList .event-card .remove-btn {
+        background-color: #ff4d4d;
+        border: none;
+        border-radius: 50%;
+        color: white;
+        font-size: 1.2rem;
+        width: 36px;
+        height: 36px;
+        line-height: 1;
+    }

WebApp/wwwroot/index.html

@@ -1,25 +1,58 @@
 <!DOCTYPE html>
 <html lang="pl">
 <head>
-    <meta charset="UTF-8">
+	<meta charset="UTF-8" />
-    <title>Lista wydarzeń</title>
+	<title>Events Panel</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/css/style.css" />
+	<link href="/css/panel.css" rel="stylesheet" />
 </head>
 <body class="bg-light">
 
-    <div class="container mt-5">
+<div class="d-flex">
-        <div class="d-flex justify-content-between align-items-center mb-4">
+	<!-- Sidebar -->
-            <h1 class="text-primary">📅 Wydarzenia</h1>
+	<div class="bg-white border-end p-3 vh-100" style="width: 80px;">
-            <a href="/create.html" class="btn btn-success">+ Dodaj nowe</a>
+		<div class="text-center mb-4">
-        </div>
+			<img src="/img/logo.svg" alt="Logo" style="width: 40px;">
+		</div>
+		<nav class="nav flex-column text-center">
+			<a href="#" class="nav-link text-info mb-3">🏠</a>
+			<a href="#" class="nav-link text-info mb-3">💬</a>
+			<a href="#" class="nav-link text-info mb-3">📅</a>
+			<a href="#" class="nav-link text-info mt-auto">⚙️</a>
+		</nav>
+	</div>
 
-        <div id="eventList" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+	<!-- Main content -->
-        </div>
+	<div class="flex-grow-1 p-4">
-    </div>
+		<div class="d-flex justify-content-between align-items-center mb-3">
+			<h2 class="text-primary">Events</h2>
+			<div>
+				<button class="btn btn-outline-info me-2">Join now</button>
+				<button class="btn btn-outline-secondary">Sign In</button>
+			</div>
+		</div>
 
-    <script type="module" src="/js/eventList.js"></script>
+		<div class="input-group mb-4">
-    <script type="module" src="/js/eventDelete.js"></script>
+			<input type="text" class="form-control rounded-start" placeholder="Search events..." />
+			<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
+		</div>
 
+		<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">−</button> <!-- Przyciski usuwania z ID -->
+			</div>
+		</div>
+
+
+		<!-- Dodaj nowe -->
+		<a href="/create.html" class="btn btn-success">+ Dodaj nowe</a>
+
+	</div>
+</div>
+
+<script type="module" src="/js/eventList.js"></script>
+<script type="module" src="/js/eventDelete.js"></script>
 </body>
-</html>
+</html>

WebApp/wwwroot/js/eventDelete.js

@@ -9,26 +9,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+            return; // Sprawdza, czy kliknięto przycisk "Usuń"
-        const id = target.getAttribute("data-id");
+        const id = target.getAttribute("data-id"); // Pobiera ID wydarzenia
         if (!id)
             return;
-        const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?");
+        const confirmed = confirm("Na pewno chcesz usunąć to wydarzenie?"); // Potwierdzenie usunięcia
         if (!confirmed)
             return;
-        const response = yield fetch(`/api/events/${id}`, {
+        try {
-            method: "DELETE"
+            // Wysyła żądanie DELETE do API
-        });
+            const response = yield fetch(`/api/events/${id}`, {
-        if (response.ok) {
+                method: "DELETE"
-            const card = target.closest(".col");
+            });
-            if (card)
+            if (response.ok) {
-                card.remove();
+                // Usuwa kartę z DOM (bez przeładowania strony)
+                const card = target.closest(".event-card");
+                if (card)
+                    card.remove();
+            }
+            else {
+                alert("Błąd podczas usuwania wydarzenia.");
+            }
         }
-        else {
+        catch (err) {
-            alert("Nie udało się usunąć wydarzenia.");
+            alert("Błąd połączenia z serwerem.");
+            console.error(err);
         }
     }));
 });

WebApp/wwwroot/js/eventList.js

@@ -21,24 +21,15 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
             container.innerHTML = "<p class='text-muted'>Brak wydarzeń do wyświetlenia.</p>";
             return;
         }
+        // Wyczyść kontener przed dodaniem nowych
+        container.innerHTML = '';
         for (const ev of events) {
             const card = document.createElement("div");
-            card.className = "col";
+            card.className = "event-card filled";
             card.innerHTML = `
-            <div class="card shadow-sm h-100">
+                <span>${ev.title}</span>
-                <div class="card-body">
+                <button class="remove-btn delete-btn" data-id="${ev.eventId}">−</button>
-                    <h5 class="card-title">${ev.title}</h5>
+            `;
-                    <p class="card-text">
-                        <strong>Miejsce:</strong> ${ev.location}<br/>
-                        <strong>Data:</strong> ${new Date(ev.eventDate).toLocaleString()}<br/>
-                        <strong>Organizacja ID:</strong> ${ev.organisationId}
-                    </p>
-                    <button class="btn btn-outline-danger delete-btn" data-id="${ev.eventId}">
-                        🗑️ Usuń
-                    </button>
-                </div>
-            </div>
-        `;
             container.appendChild(card);
         }
     }