gitea-mms/Network-MGMT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): Layout-Einstellungen, Dark-Mode, Logo, Hilfe-Menü

Browse Source 
- Settings Key-Value Store (DB + Cache)
- Einstellungen → Layout: Seitenname, Logo, Button-Farbe, Dark/Light-Mode
- Hilfe-Menü (Ebene 0): Handbuch + Changelog im Browser
- Navigation erweitert: Einstellungen-Dropdown + Hilfe-Dropdown
- CHANGELOG v0.4.0

Version: 0.4.0
This commit is contained in:
Andreas Rudolph
2026-06-29 14:15:41 +02:00
parent 69ce876138
commit eb57be730b
18 changed files with 613 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/layout/index.blade.php
+137
View File
@@ -0,0 +1,137 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Layout-Einstellungen
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8 space-y-6">
@if(session('success'))
<div class="p-4 bg-green-100 text-green-800 rounded-md">
{{ session('success') }}
</div>
@endif
<form method="POST" action="{{ route('admin.layout.update') }}" enctype="multipart/form-data"
class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 space-y-8">
@csrf
@method('PUT')
{{-- Site-Name --}}
<div>
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
Allgemein
</h3>
<div>
<x-input-label for="site_name" value="Seitenname" />
<x-text-input id="site_name" name="site_name" type="text" class="mt-1 block w-full"
value="{{ old('site_name', $settings['site_name'] ?? 'Network-MGMT') }}" required />
<p class="mt-1 text-xs text-gray-500">Wird im Browser-Tab und in der Navigation angezeigt.</p>
<x-input-error :messages="$errors->get('site_name')" class="mt-2" />
</div>
</div>
{{-- Logo --}}
<div>
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
Logo
</h3>
@if(!empty($settings['site_logo']))
<div class="mb-4 flex items-center space-x-4">
<img src="{{ asset('storage/' . $settings['site_logo']) }}"
alt="Logo" class="h-12 object-contain border rounded p-1 bg-gray-50">
<a href="{{ route('admin.layout.removeLogo') }}"
onclick="return confirm('Logo wirklich entfernen?')"
class="text-sm text-red-600 hover:text-red-800">Logo entfernen</a>
</div>
@endif
<div>
<x-input-label for="site_logo" value="Logo hochladen (PNG, JPG – max. 2 MB)" />
<input id="site_logo" name="site_logo" type="file" accept="image/*"
class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0 file:text-sm file:font-medium
file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
<x-input-error :messages="$errors->get('site_logo')" class="mt-2" />
</div>
</div>
{{-- Button-Farbe --}}
<div>
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
Button-Farbe
</h3>
<div class="flex items-center space-x-4">
<input id="button_color" name="button_color" type="color"
value="{{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
class="h-10 w-20 rounded border border-gray-300 cursor-pointer p-1" />
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">Primärfarbe für Buttons und Akzente</p>
<p class="text-xs text-gray-500" id="color_preview_text">
{{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}
</p>
</div>
<button type="button"
id="preview_btn"
style="background-color: {{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
class="px-4 py-2 text-white text-sm font-medium rounded-md transition">
Vorschau
</button>
</div>
<x-input-error :messages="$errors->get('button_color')" class="mt-2" />
</div>
{{-- Dark / Light Mode --}}
<div>
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
Erscheinungsbild
</h3>
<div class="flex space-x-4">
<label class="flex items-center space-x-2 cursor-pointer">
<input type="radio" name="theme_mode" value="light"
{{ ($settings['theme_mode'] ?? 'light') === 'light' ? 'checked' : '' }}
class="text-indigo-600 focus:ring-indigo-500" />
<span class="text-sm text-gray-700 dark:text-gray-300">
☀️ Hell (Light Mode)
</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer">
<input type="radio" name="theme_mode" value="dark"
{{ ($settings['theme_mode'] ?? 'light') === 'dark' ? 'checked' : '' }}
class="text-indigo-600 focus:ring-indigo-500" />
<span class="text-sm text-gray-700 dark:text-gray-300">
🌙 Dunkel (Dark Mode)
</span>
</label>
</div>
</div>
{{-- Speichern --}}
<div class="flex justify-end pt-2 border-t border-gray-200">
<button type="submit"
id="save_btn"
style="background-color: {{ $settings['button_color'] ?? '#4f46e5' }}"
class="inline-flex items-center px-6 py-2 text-white text-sm font-medium rounded-md hover:opacity-90 transition">
Einstellungen speichern
</button>
</div>
</form>
</div>
</div>
<script>
const colorInput = document.getElementById('button_color');
const previewBtn = document.getElementById('preview_btn');
const saveBtn = document.getElementById('save_btn');
const colorText = document.getElementById('color_preview_text');
colorInput.addEventListener('input', function () {
previewBtn.style.backgroundColor = this.value;
saveBtn.style.backgroundColor = this.value;
colorText.textContent = this.value;
});
</script>
</x-app-layout>
resources/views/admin/users/index.blade.php
+11 -9
View File
@@ -1,19 +1,21 @@
<x-app-layout>
<x-slot name="header">
<div class="flex items-center justify-between">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Benutzerverwaltung
</h2>
<a href="{{ route('admin.users.create') }}"
class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">
+ Neuer Benutzer
</a>
</div>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Benutzerverwaltung
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
{{-- Toolbar --}}
<div class="flex justify-end mb-4">
<a href="{{ route('admin.users.create') }}"
class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">
+ Neuer Benutzer
</a>
</div>
{{-- Flash-Meldungen --}}
@if(session('success'))
<div class="mb-4 p-4 bg-green-100 text-green-800 rounded-md">
resources/views/help/changelog.blade.php
+42
View File
@@ -0,0 +1,42 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Changelog
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-8">
<div class="prose dark:prose-invert max-w-none">
@php
// Einfaches Markdown-to-HTML für den Changelog
$lines = explode("\n", $content);
$html = '';
foreach ($lines as $line) {
if (str_starts_with($line, '## ')) {
$html .= '<h2 class="text-xl font-bold mt-6 mb-2 text-gray-900 dark:text-gray-100 border-b pb-1">'
. e(substr($line, 3)) . '</h2>';
} elseif (str_starts_with($line, '### ')) {
$html .= '<h3 class="text-base font-semibold mt-4 mb-1 text-indigo-700 dark:text-indigo-400">'
. e(substr($line, 4)) . '</h3>';
} elseif (str_starts_with($line, '# ')) {
$html .= '<h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">'
. e(substr($line, 2)) . '</h1>';
} elseif (str_starts_with($line, '- ')) {
$html .= '<li class="ml-4 text-sm text-gray-700 dark:text-gray-300 list-disc">'
. e(substr($line, 2)) . '</li>';
} elseif (trim($line) === '---') {
$html .= '<hr class="my-4 border-gray-200 dark:border-gray-700">';
} elseif (trim($line) !== '') {
$html .= '<p class="text-sm text-gray-600 dark:text-gray-400 my-1">'
. e($line) . '</p>';
}
}
@endphp
{!! $html !!}
</div>
</div>
</div>
</div>
</x-app-layout>
resources/views/help/manual.blade.php
+77
View File
@@ -0,0 +1,77 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Handbuch
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-8 space-y-8">
<section>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Erste Schritte</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
Network-MGMT ist eine webbasierte Verwaltungsplattform für Netzwerk-Ressourcen
mit rollenbasierter Zugriffskontrolle.
</p>
</section>
<section>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Rollen &amp; Rechte</h2>
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
<table class="min-w-full text-sm">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Rolle</th>
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Beschreibung</th>
<th class="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">Berechtigungen</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs">admin</span></td>
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Administrator</td>
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Vollzugriff auf alle Funktionen</td>
</tr>
<tr>
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs">manager</span></td>
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Manager</td>
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Netzwerk lesen, anlegen, bearbeiten; Benutzer lesen</td>
</tr>
<tr>
<td class="px-4 py-2"><span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs">user</span></td>
<td class="px-4 py-2 text-gray-700 dark:text-gray-300">Benutzer</td>
<td class="px-4 py-2 text-gray-600 dark:text-gray-400">Netzwerk lesen</td>
</tr>
</tbody>
</table>
</div>
</section>
<section>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Benutzerverwaltung</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
Unter <strong>Einstellungen → Benutzerverwaltung</strong> können Administratoren
neue Benutzer anlegen, bestehende bearbeiten und Rollen zuweisen.
Der eigene Account kann nicht gelöscht werden.
</p>
</section>
<section>
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">Layout-Einstellungen</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
Unter <strong>Einstellungen → Layout</strong> kann der Seitenname, das Logo,
die Button-Farbe sowie der Dark/Light-Mode konfiguriert werden.
Änderungen werden sofort für alle Benutzer wirksam.
</p>
</section>
<div class="pt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-400 dark:text-gray-500">
Network-MGMT · Version {{ config('app.version', '0.4.0') }}
</div>
</div>
</div>
</div>
</x-app-layout>
resources/views/layouts/app.blade.php
+19 -4
View File
@@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
class="{{ ($appSettings['theme_mode'] ?? 'light') === 'dark' ? 'dark' : '' }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ $appSettings['site_name'] ?? config('app.name', 'Network-MGMT') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
@@ -13,14 +14,28 @@
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Dynamic Settings -->
<style>
:root {
--color-primary: {{ $appSettings['button_color'] ?? '#4f46e5' }};
}
.btn-primary {
background-color: var(--color-primary) !important;
color: #fff;
}
.btn-primary:hover {
opacity: 0.88;
}
</style>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@include('layouts.navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white shadow">
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
resources/views/layouts/navigation.blade.php
+62 -6
View File
@@ -15,11 +15,50 @@
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
@role('admin')
<x-nav-link :href="route('admin.users.index')" :active="request()->routeIs('admin.*')">
Benutzerverwaltung
</x-nav-link>
{{-- Einstellungen-Dropdown --}}
<x-dropdown align="left" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none
{{ request()->routeIs('admin.*') ? 'border-indigo-400 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
Einstellungen
<svg class="ms-1 fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('admin.users.index')">
👥 Benutzerverwaltung
</x-dropdown-link>
<x-dropdown-link :href="route('admin.layout.index')">
🎨 Layout
</x-dropdown-link>
</x-slot>
</x-dropdown>
@endrole
{{-- Hilfe-Dropdown --}}
<x-dropdown align="left" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none
{{ request()->routeIs('help.*') ? 'border-indigo-400 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
Hilfe
<svg class="ms-1 fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('help.manual')">
📖 Handbuch
</x-dropdown-link>
<x-dropdown-link :href="route('help.changelog')">
📋 Changelog
</x-dropdown-link>
</x-slot>
</x-dropdown>
</div>
</div>
@@ -75,11 +114,28 @@
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
@role('admin')
<x-responsive-nav-link :href="route('admin.users.index')" :active="request()->routeIs('admin.*')">
Benutzerverwaltung
</x-responsive-nav-link>
<div class="pt-2 pb-1 border-t border-gray-200">
<div class="px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Einstellungen</div>
<x-responsive-nav-link :href="route('admin.users.index')">
&nbsp;&nbsp;👥 Benutzerverwaltung
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('admin.layout.index')">
&nbsp;&nbsp;🎨 Layout
</x-responsive-nav-link>
</div>
@endrole
<div class="pt-2 pb-1 border-t border-gray-200">
<div class="px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Hilfe</div>
<x-responsive-nav-link :href="route('help.manual')">
&nbsp;&nbsp;📖 Handbuch
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('help.changelog')">
&nbsp;&nbsp;📋 Changelog
</x-responsive-nav-link>
</div>
</div>
<!-- Responsive Settings Options -->