slinky55/ApplianceRepair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more stuff

Browse Source
This commit is contained in:
slinky55
2026-05-01 19:48:34 -05:00
parent e1d437fd49
commit 7e767541cf
18 changed files with 1292 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Components/Pages/admin/Admin.razor
View File

@@ -2,6 +2,37 @@
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles = "Admin")]
@rendermode InteractiveServer
@inject IJSRuntime JS
<dialog id="imageViewerModal" class="image-viewer-modal">
@if (SelectedRequestMedia?.Any() == true)
{
<div class="image-viewer-modal-header">
<span>Request: @SelectedRequestMedia[0].RequestNumber</span>
<button class="close-btn" @onclick="CloseImageViewer">&times;</button>
</div>
}
<div class="image-viewer-carousel-container">
@if (SelectedRequestMedia?.Any() == true)
{
<button class="image-viewer-nav-btn" @onclick="ImageViewerModal_PrevImage">&#10094;</button>
<div class="image-viewer-image-stage">
<img src="@GetWebPath(SelectedRequestMedia[SelectedRequestMediaImageIndex].MediaPath)" alt="Appliance repair evidence" />
<div class="image-viewer-image-counter">
Image @(SelectedRequestMediaImageIndex + 1) of @SelectedRequestMedia.Count
</div>
</div>
<button class="image-viewer-nav-btn" @onclick="ImageViewerModal_NextImage">&#10095;</button>
}
else
{
<div class="image-viewer-no-images">No images found for this request.</div>
}
</div>
</dialog>
<div class="admin-wrapper">
<div class="container">
@@ -72,6 +103,7 @@
@foreach (var card in HomePageModel.ServicesCards)
{
<div class="content-card">
<button class="close-btn" @onclick="async () => await DeleteContentCard(card)">&times;</button>
<div class="input-group">
<label>Header</label>
<InputTextArea @bind-Value="card.Header" class="form-input" />
@@ -93,6 +125,7 @@
@foreach (var card in HomePageModel.TrustCards)
{
<div class="content-card">
<button class="close-btn" @onclick="async () => await DeleteContentCard(card)">&times;</button>
<div class="input-group">
<label>Header</label>
<InputTextArea @bind-Value="card.Header" class="form-input" />
@@ -146,6 +179,8 @@
}
else if (CurrentTab == AdminTab.Requests)
{
<div class="form-section">
<h3><i class="icon">📋</i> Service Requests</h3>
@@ -187,7 +222,7 @@
</div>
<div class="request-actions">
<button class="btn-small btn-view" @onclick="() => {}">View Images</button>
<button class="btn-small btn-view" @onclick="async () => await ViewRequestImages(request)">View Images</button>
</div>
</div>
}

88
Components/Pages/admin/Admin.razor.cs
View File

@@ -1,13 +1,17 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace ApplianceRepair.Components.Pages.admin
{
public partial class Admin(HomePageReader homePageReader, ContentCardReader contentCardReader, BusinessConfigReader businessConfigReader, RepairRequestReader repairRequestReader) : ComponentBase
public partial class Admin(HomePageReader homePageReader, ContentCardReader contentCardReader, BusinessConfigReader businessConfigReader, RepairRequestReader repairRequestReader, RepairRequestMediaReader repairRequestMediaReader) : ComponentBase
{
public HomePageModel? HomePageModel;
public BusinessInfoModel? BusinessInfo;
public List<RepairRequestModel>? RepairRequests;
public List<RepairRequestMediaRecord>? SelectedRequestMedia;
public int SelectedRequestMediaImageIndex = 0;
private enum AdminTab { Home, Requests, BusinessInfo }
private AdminTab CurrentTab = AdminTab.Home;
@@ -28,6 +32,29 @@ namespace ApplianceRepair.Components.Pages.admin
});
}
private async void RefreshContentCards()
{
if (HomePageModel == null)
{
return;
}
var servicesList = await contentCardReader.ReadAllByPageAndGroup(HomePageModel.PageName, nameof(HomePageModel.ContentCardTypes.Services)) ?? [];
var trustList = await contentCardReader.ReadAllByPageAndGroup(HomePageModel.PageName, nameof(HomePageModel.ContentCardTypes.Trust)) ?? [];
HomePageModel.ServicesCards.Clear();
foreach (var card in servicesList)
{
HomePageModel.ServicesCards.Add(new ContentCardModel(card));
}
HomePageModel.TrustCards.Clear();
foreach (var card in trustList)
{
HomePageModel.TrustCards.Add(new ContentCardModel(card));
}
}
private async void RevertHomePageModel()
{
var businessConfig = await businessConfigReader.ReadLatestRecord() ?? Defaults.DefaultBusinessConfig;
@@ -69,6 +96,12 @@ namespace ApplianceRepair.Components.Pages.admin
await businessConfigReader.UpdateRecord(BusinessInfo);
}
private async Task DeleteContentCard(ContentCardModel card)
{
await contentCardReader.DeleteRecord(card);
RefreshContentCards();
}
private void AddServiceCard()
{
HomePageModel?.ServicesCards.Add(new ContentCardModel() {
@@ -93,5 +126,58 @@ namespace ApplianceRepair.Components.Pages.admin
Text = "Short Description"
});
}
private async Task ViewRequestImages(RepairRequestModel request)
{
if (!string.IsNullOrEmpty(request.RequestNumber))
{
SelectedRequestMedia = await repairRequestMediaReader.ReadAllByRequestNumber(request.RequestNumber);
SelectedRequestMediaImageIndex = 0;
await JS.InvokeVoidAsync("eval", $"document.getElementById('imageViewerModal').showModal()");
}
}
private async Task CloseImageViewer()
{
await JS.InvokeVoidAsync("eval", $"document.getElementById('imageViewerModal').close()");
SelectedRequestMedia = [];
}
private async Task ImageViewerModal_PrevImage()
{
if (SelectedRequestMedia == null) return;
SelectedRequestMediaImageIndex++;
if (SelectedRequestMediaImageIndex >= SelectedRequestMedia.Count())
{
SelectedRequestMediaImageIndex = 0;
}
}
private async Task ImageViewerModal_NextImage()
{
if (SelectedRequestMedia == null) return;
SelectedRequestMediaImageIndex--;
if (SelectedRequestMediaImageIndex < 0)
{
SelectedRequestMediaImageIndex = SelectedRequestMedia.Count() - 1;
}
}
private string GetWebPath(string fullPath = "")
{
if (string.IsNullOrEmpty(fullPath)) return "";
var marker = "wwwroot";
var index = fullPath.IndexOf(marker);
if (index != -1)
{
// Returns "/uploads/filename.jpg"
return fullPath.Substring(index + marker.Length).Replace('\\', '/');
}
return fullPath;
}
}
}

116
Components/Pages/admin/Admin.razor.css
View File

@@ -5,6 +5,107 @@
font-family: 'Open Sans', sans-serif;
}
/* Image Viewer Modal */
.image-viewer-modal[open] {
border: none;
border-radius: 12px;
padding: 0;
max-width: 90vw;
width: 1000px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
background-color: #fff;
overflow: hidden;
}
.image-viewer-modal::backdrop {
background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
}
.image-viewer-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
font-weight: 600;
}
.image-viewer-image-stage {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
max-height: 70vh;
background-color: #000;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.image-viewer-image-stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.image-viewer-carousel-container {
display: flex;
align-items: center;
padding: 1.5rem;
gap: 1rem;
background-color: #f1f3f5;
}
.image-viewer-nav-btn {
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.2s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 10;
}
.image-viewer-nav-btn:hover {
background-color: #007bff;
color: white;
transform: scale(1.1);
}
.image-viewer-nav-btn:active {
transform: scale(0.95);
}
.image-viewer-image-counter {
position: absolute;
bottom: 10px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
}
.image-viewer-no-images {
width: 100%;
text-align: center;
padding: 3rem;
color: #6c757d;
font-style: italic;
}
/* Image viewer modal */
.admin-header {
text-align: center;
margin-bottom: 40px;
@@ -109,12 +210,12 @@ label {
border: 1px solid #e0e6ed;
border-radius: 12px;
padding: 20px;
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
align-content: center;
position: relative;
}
.content-card:hover {
@@ -294,6 +395,17 @@ label {
animation: fadeIn 0.5s ease;
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
line-height: 1;
}
@keyframes fadeIn {
from {
opacity: 0;

0
Components/Pages/admin/Modal.razor Normal file
View File