Watcher/watcher
4
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Dashboard, Services, Server, Settings, Userinfo Page auf Darkmode umgebaut

Browse Source
This commit is contained in:
Daniel Habenicht
2025-09-08 15:06:39 +02:00
parent ab6f99eb6b
commit 6e6d17b134
15 changed files with 154 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
Watcher/Views/Container/Overview.cshtml
View File

@@ -2,35 +2,38 @@
@{ @{
ViewData["Title"] = "Containerübersicht"; ViewData["Title"] = "Containerübersicht";
} }
<head> <head>
<link rel="stylesheet" href="~/css/main.css" /> <link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/services-overview.css" />
</head> </head>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach (var server in Model.Servers) <div >
{ <!-- TODO: Später auf > 0 ändern! -->
<div class="bg-white shadow-md rounded-xl p-5 border border-gray-200 hover:shadow-lg transition duration-200"> <table class="ServiceList">
<h2 class="text-xl font-semibold mb-1">@server.Name</h2> <!-- foreach (var container in Model.Containers)-->
</div> <tr>
<th>Service</th>
<th>HostServer</th>
<th>Status</th>
<th>SSL/TLS</th>
<th>Proxy</th>
<th>Deployment</th>
<div class="bg-white"> </tr>
@if (Model.Containers.Count > 0) @for (int i = 0; i < 3; i++)
{ {
<table> <tr class="ServiceRow">
@foreach (var container in Model.Containers) <td>test</td>
{ <td><a class="ServiceEntry" href="/Server/Details/7">test</a></td>
<tr>test</tr> <td>Online</td>
if (container.HostServer.Equals(server.Name)) <td>true</td>
{ <td>true</td>
<td>Docker</td>
</tr>
}
</table>
</div>
}
}
</table>
} else
{
<p> keine Container gefunden </p>
}
</div>
}
</div> </div>

5
Watcher/Views/Home/_DashboardStats.cshtml
View File

@@ -6,6 +6,7 @@
<head> <head>
<link rel="stylesheet" href="~/css/main.css" /> <link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/dashboardstats.css" />
</head> </head>
<body> <body>
@@ -102,7 +103,7 @@
<div class="col-12 col-lg-6"> <div class="col-12 col-lg-6">
<div class="card shadow rounded-3 p-4 h-100"> <div class="card shadow rounded-3 p-4 h-100">
<h2 class="h5 fw-semibold mb-3">Services</h2> <h2 class="h5 fw-semibold mb-3">Services</h2>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush serverlist">
@foreach (var service in Model.Containers) @foreach (var service in Model.Containers)
{ {
<li class="list-group-item d-flex justify-content-between align-items-center"> <li class="list-group-item d-flex justify-content-between align-items-center">
@@ -123,7 +124,7 @@
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@foreach (var server in Model.Servers) @foreach (var server in Model.Servers)
{ {
<li class="list-group-item d-flex justify-content-between align-items-center"> <li class="list-group-item d-flex justify-content-between align-items-center serverlist">
<span>@server.Name</span> <span>@server.Name</span>
<span class="badge bg-info")"> <span class="badge bg-info")">
CPU: 30.45% CPU: 30.45%

47
Watcher/Views/Server/_ServerCard.cshtml
View File

@@ -4,46 +4,45 @@
<div class="row g-4"> <div class="row g-4">
@foreach (var s in Model) @foreach (var s in Model)
{ {
<div class="col-12 col-sm-6"> <div class="col-12">
<div class="card h-100 border-secondary shadow-sm"> <div class="card h-100 border-secondary shadow-sm">
<div class="card-body d-flex flex-column gap-3"> <div class="card-body d-flex flex-column gap-3">
<div class="d-flex justify-content-between align-items-center mb-3"> <div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title text-text mb-0"> <h5 class="card-title text-text mb-0">
<i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name <i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
</h5> </h5>
<div class="col-md-5 text-text small"> <div class="col-md-4 text-text small">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div> <div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div> <div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
</div> </div>
<span class="badge <span class="badge @(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
@(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
<i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i> <i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
@(s.IsOnline ? "Online" : "Offline") @(s.IsOnline ? "Online" : "Offline")
</span> </span>
<div class="d-flex flex-wrap gap-4">
<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-controller="Server" 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
</button>
</form>
</div>
</div> </div>
<div class="d-flex flex-wrap gap-4">
<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-controller="Server" 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
</button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

22
Watcher/Views/Server/overview.cshtml
View File

@@ -2,24 +2,32 @@
@{ @{
ViewData["Title"] = "Serverübersicht"; ViewData["Title"] = "Serverübersicht";
} }
<head> <head>
<link rel="stylesheet" href="~/css/main.css" /> <link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/server-overview.css" />
</head> </head>
<div class="d-flex align-items-center justify-content-between mb-4"> <div class="d-flex align-items-center justify-content-between mb-4">
<h1 class="h2 fw-bold mb-0">
<i class="bi bi-hdd-network me-2 text-primary"></i>Serverübersicht <h1 class="mb-4"">
<i class="bi bi-hdd-network"></i> Serverübersicht
</h1> </h1>
<form asp-action="AddServer" method="get" asp-controller="Server">
<button type="submit" class="btn btn-primary"> <a class="nav-link" href="/Server/addServer">
<i class="bi"></i> neuen Server erstellen <button class="btn btn-primary"> Server hnzufügen </button>
</button> </a>
</form>
</div> </div>
<div id="server-cards-container"> <div id="server-cards-container">
@await Html.PartialAsync("_ServerCard", Model.Servers) @await Html.PartialAsync("_ServerCard", Model.Servers)
</div> </div>
@section Scripts { @section Scripts {
<script> <script>
async function loadServerCards() { async function loadServerCards() {

4
Watcher/Views/Shared/_Layout.cshtml
View File

@@ -84,6 +84,9 @@
<a class="nav-link" href="/Uptime/Overview">Uptime</a> <a class="nav-link" href="/Uptime/Overview">Uptime</a>
</li> </li>
--> -->
<li class="nav-item">
<a class="nav-link" href="/User/UserSettings">Einstellungen</a>
</li>
</ul> </ul>
</div> </div>
@@ -95,6 +98,7 @@
<div class="rounded-circle bg-secondary text-white px-2 py-1"> <div class="rounded-circle bg-secondary text-white px-2 py-1">
<i class="bi bi-person"></i> <i class="bi bi-person"></i>
</div> </div>
<div> <div>
<strong>@User.Identity?.Name</strong><br /> <strong>@User.Identity?.Name</strong><br />
<small class="text-muted">Profil ansehen</small> <small class="text-muted">Profil ansehen</small>

21
Watcher/Views/User/Info.cshtml
View File

@@ -4,14 +4,20 @@
var Id = ViewBag.Id; var Id = ViewBag.Id;
var preferredUsername = ViewBag.name; var preferredUsername = ViewBag.name;
var IdProvider = ViewBag.IdProvider; var IdProvider = ViewBag.IdProvider;
var mail = ViewBag.mail;
} }
<head>
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/user-info.css" />
</head>
<div class="container mt-5"> <div class="container mt-5">
<div class="card shadow-lg rounded-3 p-4" style="max-width: 700px; margin: auto;"> <div class="card shadow-lg rounded-3 p-4" style="max-width: 700px; margin: auto;">
<div class="text-center mb-4"> <div class="text-center mb-4">
@if (!string.IsNullOrEmpty(pictureUrl)) @if (!string.IsNullOrEmpty(pictureUrl))
{ {
<img src="@pictureUrl" alt="Profilbild" class="rounded-circle shadow" style="width: 120px; height: 120px; object-fit: cover;" /> <img src="@pictureUrl" alt="Profilbild" class="rounded-circle shadow picture" />
} }
else else
{ {
@@ -21,12 +27,12 @@
</div> </div>
} }
<h3 class="mt-3"> <h3 class="mt-3">
<i class="bi bi-person-circle me-1"></i>@preferredUsername <i class="bi"></i>@preferredUsername
</h3> </h3>
</div> </div>
<table class="table table-hover"> <table class="usertable">
<tbody> <tbody>
<tr> <tr>
<th><i class="bi bi-person-badge me-1"></i>Username</th> <th><i class="bi bi-person-badge me-1"></i>Username</th>
@@ -34,11 +40,11 @@
</tr> </tr>
<tr> <tr>
<th><i class="bi bi-envelope me-1"></i>E-Mail</th> <th><i class="bi bi-envelope me-1"></i>E-Mail</th>
<td>@(ViewBag.Mail ?? "Nicht verfügbar")</td> <td>@(mail ?? "Nicht verfügbar")</td>
</tr> </tr>
<tr> <tr>
<th><i class="bi bi-fingerprint me-1"></i>Benutzer-ID</th> <th><i class="bi bi-fingerprint me-1"></i>Benutzer-ID</th>
<td>@(ViewBag.Id ?? "Nicht verfügbar")</td> <td>@(Id ?? "Nicht verfügbar")</td>
</tr> </tr>
@if(IdProvider != "local") @if(IdProvider != "local")
{ {
@@ -84,11 +90,6 @@
</tbody> </tbody>
</table> </table>
<div> <div>
<form method="get" asp-controller="User" asp-action="UserSettings" class="text-center mt-4">
<button type="submit" class="btn btn-info">
<i class="bi bi-gear-wide-connected me-1"></i>Einstellungen
</button>
</form>
<form method="post" asp-controller="Auth" asp-action="Logout" class="text-center mt-4"> <form method="post" asp-controller="Auth" asp-action="Logout" class="text-center mt-4">
<button type="submit" class="btn btn-danger"> <button type="submit" class="btn btn-danger">
<i class="bi bi-box-arrow-right me-1"></i>Abmelden <i class="bi bi-box-arrow-right me-1"></i>Abmelden

39
Watcher/Views/User/UserSettings.cshtml
View File

@@ -4,23 +4,13 @@
var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin"; var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin";
var isLocalUser = ViewBag.IdentityProvider == "local"; var isLocalUser = ViewBag.IdentityProvider == "local";
var DbEngine = ViewBag.DbProvider; var DbEngine = ViewBag.DbProvider;
var mail = ViewBag.mail;
} }
<style> <head>
.Settingscontainer { <link rel="stylesheet" href="~/css/site.css" />
display: flex; <link rel="stylesheet" href="~/css/user-settings.css" />
flex-wrap: wrap; </head>
/* Wichtig: erlaubt Umbruch */
gap: 1rem;
/* optionaler Abstand */
}
.Settingscontainer>* {
flex: 1 1 calc(50% - 0.5rem);
/* 2 Elemente pro Zeile, inkl. Gap */
box-sizing: border-box;
}
</style>
<div class="Settingscontainer"> <div class="Settingscontainer">
@if (isLocalUser) @if (isLocalUser)
@@ -40,7 +30,7 @@
<label for="ConfirmPassword" class="form-label">Passwort bestätigen</label> <label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" /> <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
</div> </div>
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i>Speichern <i class="bi bi-save me-1"></i>Speichern
</button> </button>
</form> </form>
@@ -63,26 +53,26 @@
<hr class="my-4" /> <hr class="my-4" />
<h5>Authentifizierungsmethode: </h5> <h5>Authentifizierungsmethode: <strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></h5>
<p><strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></p>
<hr class="my-4" /> <hr class="my-4" />
<h5>Datenbank-Engine: </h5> <h5>Datenbank-Engine: <strong>@(DbEngine ?? "nicht gefunden")</strong></h5>
<strong>@(DbEngine ?? "nicht gefunden")</strong>
<!-- Falls Sqlite verwendet wird können Backups erstellt werden --> <!-- Falls Sqlite verwendet wird können Backups erstellt werden -->
@if (DbEngine == "Microsoft.EntityFrameworkCore.Sqlite") @if (DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
{ {
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<form asp-action="CreateSqlDump" method="post" asp-controller="Database"> <form asp-action="CreateSqlDump" method="post" asp-controller="Database">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i> Backup erstellen <i class="bi bi-save me-1"></i> Backup erstellen
</button> </button>
</form> </form>
<form asp-action="ManageSqlDumps" method="post" asp-controller="Database"> <form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i> Backups verwalten <i class="bi bi-save me-1"></i> Backups verwalten
</button> </button>
</form> </form>
@@ -111,9 +101,8 @@
</div> </div>
<div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;"> <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
<h4><i class="bi bi-pencil-square me-2"></i>Systemeinstellungen</h4> <h4><i class="bi bi-pencil-square me-2"></i>Benachrichtungen</h4>
<h5>Benachrichtigungen: </h5>
<p>Registrierte E-Mail Adresse: <strong>@(ViewBag.mail ?? "nicht gefunden")</strong></p> <p>Registrierte E-Mail Adresse: <strong>@(ViewBag.mail ?? "nicht gefunden")</strong></p>
<!-- action="/Notification/UpdateSettings" existiert noch nicht--> <!-- action="/Notification/UpdateSettings" existiert noch nicht-->
@@ -143,7 +132,7 @@
<label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label> <label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label>
</div> </div>
<button type="submit" class="btn btn-primary mt-3"> <button type="submit" class="btn btn-db mt-3">
<i class="bi bi-save me-1"></i>Speichern <i class="bi bi-save me-1"></i>Speichern
</button> </button>
</div> </div>

BIN
Watcher/persistence/watcher.db-shm Normal file
View File

Binary file not shown.

0
Watcher/persistence/watcher.db-wal Normal file
View File

4
Watcher/wwwroot/css/dashboardstats.css Normal file
View File

@@ -0,0 +1,4 @@
.serverlist {
background-color: var(--color-surface);
color: var(--color-text);
}

0
Watcher/wwwroot/css/server-overview.css Normal file
View File

12
Watcher/wwwroot/css/services-overview.css Normal file
View File

@@ -0,0 +1,12 @@
.ServiceList {
width: 80%;
}
.ServiceRow {
border-style: solid;
border-color: var(--color-text);
}
.ServiceEntry {
text-decoration: none;
}

6
Watcher/wwwroot/css/site.css
View File

@@ -25,7 +25,7 @@ a {
} }
.form-control { .form-control {
background-color: var(--color-accent); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
} }
@@ -57,10 +57,6 @@ a {
background-color: #0f8c3c; background-color: #0f8c3c;
} }
.table {
color: var(--color-text);
}
hr { hr {
border-top: 1px solid var(--color-accent); border-top: 1px solid var(--color-accent);
} }

15
Watcher/wwwroot/css/user-info.css Normal file
View File

@@ -0,0 +1,15 @@
.table {
color: red;
}
.picture {
width: 120px;
height: 120px;
object-fit: cover;
}
.usertable {
background-color: var(--color-surface);
color: var(--color-text);
}

24
Watcher/wwwroot/css/user-settings.css Normal file
View File

@@ -0,0 +1,24 @@
.Settingscontainer {
display: flex;
flex-wrap: wrap;
/* Wichtig: erlaubt Umbruch */
gap: 1rem;
/* optionaler Abstand */
}
.Settingscontainer>* {
flex: 1 1 calc(50% - 0.5rem);
/* 2 Elemente pro Zeile, inkl. Gap */
box-sizing: border-box;
}
.btn-db {
background-color: var(--color-primary);
border: none;
}
.btn-db:hover {
background-color: var(--color-accent);
border: none;
}