Details-Page erstellt, allgemein FrontEnd aufgeräumt

Watcher/Controllers/ServerController.cs

@@ -1,4 +1,3 @@
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
@@ -116,6 +115,34 @@ public class ServerController : Controller
         return View(vm);
     }
 
+    // GET: Server/Details/5
+    [HttpGet]
+    public async Task<IActionResult> Details(int id)
+    {
+
+        var s = await _context.Servers.FindAsync(id);
+        if (s == null) return NotFound();
+
+        var vm = new ServerDetailsViewModel
+        {
+            Id = s.Id,
+            Name = s.Name,
+            IPAddress = s.IPAddress,
+            Type = s.Type,
+            Description = s.Description,
+            CpuType = s.CpuType,
+            CpuCores = s.CpuCores,
+            GpuType = s.GpuType,
+            RamSize = s.RamSize,
+            CreatedAt = s.CreatedAt,
+            IsOnline = s.IsOnline,
+            LastSeen = s.LastSeen,
+            IsVerified = s.IsVerified
+        };
+
+        return View(vm);
+    }
+
     public async Task<IActionResult> ServerCardsPartial()
     {
         var servers = _context.Servers.ToList();

Watcher/ViewModels/ServerDetailsViewModel.cs

@@ -0,0 +1,41 @@
+
+
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+
+namespace Watcher.ViewModels;
+
+public class ServerDetailsViewModel
+{
+    // System Infos
+    [Required]
+    public int Id { get; set; }
+
+    [Required]
+    public required string Name { get; set; }
+
+    [Required]
+    public required string IPAddress { get; set; }
+
+    [Required]
+    public required string Type { get; set; }
+
+    public string? Description { get; set; } = String.Empty;
+
+
+    // Hardware Infos
+    public string? CpuType { get; set; } = string.Empty;
+    public int CpuCores { get; set; } = 0;
+    public string? GpuType { get; set; } = string.Empty;
+    public double RamSize { get; set; } = 0;
+
+
+    // Database
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+
+    public Boolean IsOnline { get; set; } = false;
+
+    public DateTime LastSeen { get; set; }
+
+    public Boolean IsVerified { get; set; } = false;
+}

Watcher/Views/Home/Index.cshtml

@@ -12,17 +12,6 @@
 </div>
 
 <div class="row g-4 mt-4">
-    <div class="col-12">
-        <div class="card p-3">
-            <h2 class="h5">
-                <i class="bi bi-graph-up me-2"></i>Uptime letzte 24h
-            </h2>
-            <div class="bg-secondary rounded p-5 text-center text-muted">
-                <i class="bi bi-bar-chart-line" style="font-size: 2rem;"></i><br />
-                (Diagramm folgt hier)
-            </div>
-        </div>
-    </div>
 
     <div class="col-12">
         <div class="card p-3">

Watcher/Views/Server/Details.cshtml

@@ -0,0 +1,34 @@
+@model Watcher.ViewModels.ServerDetailsViewModel
+@{
+    ViewData["Title"] = "Serverübersicht";
+}
+
+<div id="server-cards-container">
+    @await Html.PartialAsync("_ServerDetails")
+</div>
+
+
+@section Scripts {
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="~/js/server_uptime.js"></script>
+
+    <script>
+        async function loadServerStats() {  
+            try {
+                const response = await fetch('/Server/ServerDetailsPartial');
+                if (response.ok) {
+                    const html = await response.text();
+                    document.getElementById('server-cards-container').innerHTML = html;
+                } else {
+                    console.error('Fehler beim Nachladen der Serverdaten');
+                }
+            } catch (err) {
+                console.error('Netzwerkfehler beim Nachladen der Serverdaten:', err);
+            }
+        }
+
+        // Initial laden und dann alle 30 Sekunden
+        loadServerStats();
+        setInterval(loadServerCards, 30000);
+    </script>
+}

Watcher/Views/Server/_ServerCard.cshtml

@@ -41,18 +41,15 @@
                         </div>
 
                         <div class="d-flex flex-wrap gap-2">
-                            <a href="/Download/File/Linux/heartbeat" class="btn btn-success">
-                                🖥️ Linux Agent 
-                            </a>
-
-                            <a asp-action="#" asp-route-id="@s.Id" class="btn btn-outline-primary">
-                                <i class="bi bi-pencil-square me-1"></i> Metrics
-                            </a>
 
                             <a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-outline-primary">
                                 <i class="bi bi-pencil-square me-1"></i> Bearbeiten
                             </a>
 
+                            <a asp-asp-controller="Server" asp-action="Details" asp-route-id="@s.Id" class="btn btn-outline-primary">
+                                <i class="bi bi-bar-chart-fill me-1"></i> Metrics
+                            </a>
+
                             <form asp-action="Delete" asp-route-id="@s.Id" method="post" onsubmit="return confirm('Diesen Server wirklich löschen?');" class="m-0">
                                 <button type="submit" class="btn btn-outline-danger">
                                     <i class="bi bi-trash me-1"></i> Löschen

Watcher/Views/Server/_ServerDetails.cshtml

@@ -0,0 +1,67 @@
+<div class="container mt-4">
+    <div class="card shadow-sm">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="mb-0">
+                <i class="bi bi-hdd-network me-2 text-primary"></i>Serverdetails: @Model.Name
+            </h5>
+            <span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")">
+                <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
+                @(Model.IsOnline ? "Online" : "Offline")
+            </span>
+        </div>
+        <div class="card-body">
+            <dl class="row mb-0">
+                <dt class="col-sm-3">ID</dt>
+                <dd class="col-sm-9">@Model.Id</dd>
+
+                <dt class="col-sm-3">IP-Adresse</dt>
+                <dd class="col-sm-9">@Model.IPAddress</dd>
+
+                <dt class="col-sm-3">Typ</dt>
+                <dd class="col-sm-9">@Model.Type</dd>
+
+                <dt class="col-sm-3">Erstellt am</dt>
+                <dd class="col-sm-9">@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</dd>
+
+                <dt class="col-sm-3">Zuletzt gesehen</dt>
+                <dd class="col-sm-9">@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</dd>
+            </dl>
+        </div>
+        <div class="card-footer text-end">
+            <a href="/Download/File/Linux/heartbeat" class="btn btn-success">
+                🖥️ Linux Agent 
+            </a>
+            <a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2">
+                <i class="bi bi-pencil"></i> Bearbeiten
+            </a>
+            <form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline"
+                  onsubmit="return confirm('Diesen Server wirklich löschen?');">
+                <button type="submit" class="btn btn-outline-danger">
+                    <i class="bi bi-trash"></i> Löschen
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Optional: Bereich für Logs, Diagramme oder weitere Details -->
+    <div class="mt-4">
+        <h6><i class="bi bi-graph-up me-1"></i>Uptime letzte 24h</h6>
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
+            <canvas id="uptimeChart"></canvas>
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
+            <canvas id="uptimeChart"></canvas>
+        </div>
+    </div>
+
+    <div class="mt-4"></div>
+        <h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
+            <canvas id="uptimeChart"></canvas>
+        </div>
+    </div>
+</div>