Erstes Formular + QR Integration
This commit is contained in:
parent
d0dc254e9b
commit
b039e23f91
@ -1,4 +1,5 @@
|
||||
@inherits LayoutComponentBase
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
|
||||
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
@ -33,19 +34,21 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 🔐 Login/Logout -->
|
||||
<!-- 🔐 Login/Logout Bereich -->
|
||||
<AuthorizeView>
|
||||
<Authorized Context="auth">
|
||||
<span class="navbar-text me-3 text-white">
|
||||
|
||||
</span>
|
||||
<NavLink href="authentication/logout" class="btn btn-outline-light btn-sm">
|
||||
Abmelden
|
||||
</NavLink>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-white small">
|
||||
👋 @auth.User.Identity?.Name
|
||||
</span>
|
||||
<NavLink href="authentication/logout" class="btn btn-outline-light btn-sm">
|
||||
<i class="bi bi-box-arrow-right me-1"></i> Abmelden
|
||||
</NavLink>
|
||||
</div>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<NavLink href="authentication/login" class="btn btn-light btn-sm">
|
||||
Anmelden
|
||||
<i class="bi bi-person-lock me-1"></i> Anmelden
|
||||
</NavLink>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
@ -62,6 +65,6 @@
|
||||
|
||||
<!-- 🔹 FOOTER -->
|
||||
<footer class="footer text-center small text-secondary py-2 mt-auto border-top">
|
||||
© @DateTime.Now.Year FilterCair - FPM Service GmbH
|
||||
© @DateTime.Now.Year FilterCair – FPM Service GmbH
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -1,79 +1,63 @@
|
||||
@page "/"
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
|
||||
@inject IJSRuntime JS
|
||||
@inject NavigationManager Nav
|
||||
|
||||
<PageTitle>FilterCair</PageTitle>
|
||||
<PageTitle>FilterCair Dashboard</PageTitle>
|
||||
|
||||
<div class="container py-4 text-center">
|
||||
<div class="container py-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold text-primary mb-2">
|
||||
<i class="bi bi-wind me-2"></i> Willkommen bei FilterCair
|
||||
</h2>
|
||||
<p class="text-secondary fs-5">FÜÜS - Filter Überprüf- und Überwachungssoftware</p>
|
||||
|
||||
<!-- 🔐 Login / Logout Bereich -->
|
||||
<AuthorizeView Context="auth">
|
||||
<Authorized>
|
||||
<div class="mb-4">
|
||||
👋 Willkommen, <strong>@auth.User.Identity?.Name</strong>!
|
||||
<br />
|
||||
<button class="btn btn-outline-danger btn-sm mt-2" @onclick="Logout">
|
||||
<i class="bi bi-box-arrow-right me-1"></i> Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<div class="mb-4">
|
||||
<button class="btn btn-success btn-lg rounded-pill" @onclick="Login">
|
||||
<i class="bi bi-person-lock me-2"></i> Mit Microsoft anmelden
|
||||
</button>
|
||||
</div>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
|
||||
<!-- 🌐 Online/Offline-Status -->
|
||||
<div class="mb-4">
|
||||
<span class="badge rounded-pill px-3 py-2 fs-6"
|
||||
<span class="badge rounded-pill px-3 py-2 mt-3 fs-6"
|
||||
style="background-color:@(isOnline ? "#198754" : "#dc3545")">
|
||||
@(isOnline ? "🟢 Online" : "🔴 Offline")
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 💬 Begrüßung -->
|
||||
<h4 class="fw-semibold mb-3">Willkommen bei <span class="text-primary">FilterCair</span></h4>
|
||||
<p class="text-secondary mb-4">
|
||||
Wähle deine Produktionshalle und starte den Wartungsrundgang.
|
||||
</p>
|
||||
<!-- Dashboard-Kacheln -->
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card dashboard-tile h-100" @onclick="@(() => Nav.NavigateTo("/qrscanner"))">
|
||||
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<i class="bi bi-qr-code-scan display-5 mb-3 text-primary"></i>
|
||||
<h5 class="fw-semibold mb-2">QR-Code scannen</h5>
|
||||
<p class="text-muted small mb-0">Starte den Scan und erfasse Filterdaten direkt vor Ort.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🏭 Auswahl der Produktionshalle -->
|
||||
<div class="mb-4">
|
||||
<select class="form-select text-center" @onchange="OnHallChange">
|
||||
<option value="">Bitte Halle auswählen...</option>
|
||||
@foreach (var hall in halls)
|
||||
{
|
||||
<option value="@hall">@hall</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card dashboard-tile h-100" @onclick="@(() => Nav.NavigateTo("/filterform"))">
|
||||
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<i class="bi bi-funnel display-5 mb-3 text-primary"></i>
|
||||
<h5 class="fw-semibold mb-2">Filter erfassen</h5>
|
||||
<p class="text-muted small mb-0">Erfasse technische Daten oder ergänze Wartungsnotizen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ⚙️ Aktionen -->
|
||||
<div class="d-grid gap-3">
|
||||
<button class="btn btn-primary btn-lg rounded-pill" @onclick="StartScan">
|
||||
<i class="bi bi-qr-code-scan me-2"></i> QR-Code scannen
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline-secondary btn-lg rounded-pill" @onclick="ShowOfflineData">
|
||||
<i class="bi bi-database-down me-2"></i> Offline-Daten anzeigen
|
||||
</button>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card dashboard-tile h-100" @onclick="@ShowOfflineData">
|
||||
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<i class="bi bi-database-down display-5 mb-3 text-primary"></i>
|
||||
<h5 class="fw-semibold mb-2">Offline-Daten</h5>
|
||||
<p class="text-muted small mb-0">Zeige gespeicherte Daten, wenn du ohne Verbindung arbeitest.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 📍 Standortanzeige -->
|
||||
<div class="mt-4 text-muted small">
|
||||
📍 Standort: @currentLocation
|
||||
<div class="text-center mt-5 text-muted small">
|
||||
📍 Aktueller Standort: @currentLocation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool isOnline = true;
|
||||
private string? selectedHall;
|
||||
private List<string> halls = new() { "Halle A", "Halle B", "Halle C" };
|
||||
private string currentLocation = "unbekannt";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
@ -90,32 +74,8 @@
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void OnHallChange(ChangeEventArgs e)
|
||||
{
|
||||
selectedHall = e.Value?.ToString();
|
||||
}
|
||||
|
||||
private void StartScan()
|
||||
{
|
||||
Console.WriteLine($"Starte Scan in {selectedHall}");
|
||||
}
|
||||
|
||||
private void ShowOfflineData()
|
||||
{
|
||||
Console.WriteLine("Offline-Daten anzeigen");
|
||||
}
|
||||
|
||||
// 🔐 Auth-Methoden
|
||||
[Inject] private IAccessTokenProvider TokenProvider { get; set; } = default!;
|
||||
|
||||
private void Login()
|
||||
{
|
||||
Nav.NavigateTo("authentication/login", forceLoad: true);
|
||||
|
||||
}
|
||||
|
||||
private void Logout()
|
||||
{
|
||||
Nav.NavigateTo("authentication/logout");
|
||||
}
|
||||
}
|
||||
|
||||
@ -166,3 +166,47 @@ code {
|
||||
.bg-primary {
|
||||
background-color: var(--freudenberg-blue) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Dashboard Style */
|
||||
.dashboard-tile {
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 91, 153, 0.1);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dashboard-tile:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 91, 153, 0.25);
|
||||
}
|
||||
|
||||
.dashboard-tile:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.display-5 {
|
||||
color: var(--freudenberg-blue);
|
||||
}
|
||||
|
||||
.card-body h5 {
|
||||
color: var(--freudenberg-blue);
|
||||
}
|
||||
|
||||
.container {
|
||||
animation: fadeIn 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user