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

This commit is contained in:
2025-09-08 15:06:39 +02:00
parent ab6f99eb6b
commit 6e6d17b134
15 changed files with 154 additions and 98 deletions

View File

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

View File

@@ -6,6 +6,7 @@
<head>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/dashboardstats.css" />
</head>
<body>
@@ -102,7 +103,7 @@
<div class="col-12 col-lg-6">
<div class="card shadow rounded-3 p-4 h-100">
<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)
{
<li class="list-group-item d-flex justify-content-between align-items-center">
@@ -123,7 +124,7 @@
<ul class="list-group list-group-flush">
@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 class="badge bg-info")">
CPU: 30.45%

View File

@@ -4,7 +4,7 @@
<div class="row g-4">
@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-body d-flex flex-column gap-3">
<div class="d-flex justify-content-between align-items-center mb-3">
@@ -12,38 +12,37 @@
<i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
</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-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
</div>
<span class="badge
@(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
<span class="badge @(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
<i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
@(s.IsOnline ? "Online" : "Offline")
</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 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>

View File

@@ -2,24 +2,32 @@
@{
ViewData["Title"] = "Serverübersicht";
}
<head>
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="~/css/server-overview.css" />
</head>
<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>
<form asp-action="AddServer" method="get" asp-controller="Server">
<button type="submit" class="btn btn-primary">
<i class="bi"></i> neuen Server erstellen
</button>
</form>
<a class="nav-link" href="/Server/addServer">
<button class="btn btn-primary"> Server hnzufügen </button>
</a>
</div>
<div id="server-cards-container">
@await Html.PartialAsync("_ServerCard", Model.Servers)
</div>
@section Scripts {
<script>
async function loadServerCards() {

View File

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

View File

@@ -4,14 +4,20 @@
var Id = ViewBag.Id;
var preferredUsername = ViewBag.name;
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="card shadow-lg rounded-3 p-4" style="max-width: 700px; margin: auto;">
<div class="text-center mb-4">
@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
{
@@ -21,12 +27,12 @@
</div>
}
<h3 class="mt-3">
<i class="bi bi-person-circle me-1"></i>@preferredUsername
<i class="bi"></i>@preferredUsername
</h3>
</div>
<table class="table table-hover">
<table class="usertable">
<tbody>
<tr>
<th><i class="bi bi-person-badge me-1"></i>Username</th>
@@ -34,11 +40,11 @@
</tr>
<tr>
<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>
<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>
@if(IdProvider != "local")
{
@@ -84,11 +90,6 @@
</tbody>
</table>
<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">
<button type="submit" class="btn btn-danger">
<i class="bi bi-box-arrow-right me-1"></i>Abmelden

View File

@@ -4,23 +4,13 @@
var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin";
var isLocalUser = ViewBag.IdentityProvider == "local";
var DbEngine = ViewBag.DbProvider;
var mail = ViewBag.mail;
}
<style>
.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;
}
</style>
<head>
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/user-settings.css" />
</head>
<div class="Settingscontainer">
@if (isLocalUser)
@@ -40,7 +30,7 @@
<label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
</div>
<button type="submit" class="btn btn-primary">
<button type="submit" class="btn btn-db">
<i class="bi bi-save me-1"></i>Speichern
</button>
</form>
@@ -63,26 +53,26 @@
<hr class="my-4" />
<h5>Authentifizierungsmethode: </h5>
<p><strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></p>
<h5>Authentifizierungsmethode: <strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></h5>
<hr class="my-4" />
<h5>Datenbank-Engine: </h5>
<strong>@(DbEngine ?? "nicht gefunden")</strong>
<h5>Datenbank-Engine: <strong>@(DbEngine ?? "nicht gefunden")</strong></h5>
<!-- Falls Sqlite verwendet wird können Backups erstellt werden -->
@if (DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
{
<div class="d-flex gap-2">
<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
</button>
</form>
<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
</button>
</form>
@@ -111,9 +101,8 @@
</div>
<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>
<!-- action="/Notification/UpdateSettings" existiert noch nicht-->
@@ -143,7 +132,7 @@
<label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label>
</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
</button>
</div>

Binary file not shown.

View File

View File

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

View File

View File

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

View File

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

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);
}

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;
}