Add project files.
This commit is contained in:
EugeneTes
263
ConfigurationPannel/Pages/Configure.cshtml
Normal file
263
ConfigurationPannel/Pages/Configure.cshtml
Normal file
@@ -0,0 +1,263 @@
|
||||
@page
|
||||
@model ConfigurationPannel.Pages.ConfigureModel
|
||||
@{
|
||||
ViewData["Title"] = "Printer Configuration";
|
||||
}
|
||||
|
||||
<div class="container mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Printer Configuration</h2>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary" onclick="discoverPrinters()">
|
||||
<span id="discover-spinner" class="spinner-border spinner-border-sm d-none"></span>
|
||||
Discover Printers
|
||||
</button>
|
||||
<a asp-page="/Logout" class="btn btn-outline-secondary">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="discovery-status" class="alert alert-info d-none">
|
||||
Discovering printers...
|
||||
</div>
|
||||
|
||||
<div id="discovered-printers" class="mb-4">
|
||||
<h5>Discovered Printers: <span id="printer-count">@Model.DiscoveredPrinters.Count</span></h5>
|
||||
<ul id="printer-list" class="list-group">
|
||||
@foreach (var printer in Model.DiscoveredPrinters)
|
||||
{
|
||||
<li class="list-group-item">@printer.IPAddress </li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4>Logo Management</h4>
|
||||
<button type="button" class="btn btn-sm btn-warning" onclick="document.getElementById('cleanLogosForm').submit()">
|
||||
Clean Unused Logos
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" asp-page-handler="UploadLogo" enctype="multipart/form-data" class="d-flex gap-2 align-items-center">
|
||||
<input type="file" name="UploadedLogo" accept=".png,.jpg,.jpeg,.gif,.bmp" class="form-control" style="max-width: 400px;" />
|
||||
<button type="submit" class="btn btn-primary">Upload Logo</button>
|
||||
</form>
|
||||
<small class="text-muted">Supported formats: PNG, JPG, JPEG, GIF, BMP</small>
|
||||
|
||||
@if (Model.AvailableLogos.Any())
|
||||
{
|
||||
<div class="mt-3">
|
||||
<strong>Available logos (@Model.AvailableLogos.Count):</strong>
|
||||
<div class="d-flex flex-wrap gap-2 mt-2">
|
||||
@foreach (var logo in Model.AvailableLogos)
|
||||
{
|
||||
<div class="border p-2 text-center" style="width: 120px;">
|
||||
<a href="/logos/@logo" target="_blank">
|
||||
<img src="/logos/@logo" alt="@logo" style="max-width: 100px; max-height: 80px;" class="d-block mx-auto" />
|
||||
</a>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 10px; word-break: break-all;">@logo</small>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden form for cleaning logos -->
|
||||
<form id="cleanLogosForm" method="post" asp-page-handler="CleanLogos" style="display: none;"></form>
|
||||
|
||||
<form method="post" asp-page-handler="Save">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Work Area Assignments</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if (Model.WorkAreas == null || !Model.WorkAreas.Any())
|
||||
{
|
||||
<div class="alert alert-warning">No work areas found. Check configuration.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Work Area</th>
|
||||
<th>Assigned Printer</th>
|
||||
<th>Font Size</th>
|
||||
<th>Logo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (int i = 0; i < Model.WorkAreas.Count; i++)
|
||||
{
|
||||
var workArea = Model.WorkAreas[i];
|
||||
var currentPrinter = Model.CurrentAssignments.TryGetValue(workArea.Id, out var assigned) ? assigned.Address : "";
|
||||
var currentFontSize = Model.CurrentAssignments.TryGetValue(workArea.Id, out var cfg) ? cfg.FontSize : 1;
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>@workArea.Name</strong>
|
||||
<input type="hidden" name="WorkAreaAssignments[@i].WorkAreaId" value="@workArea.Id" />
|
||||
<input type="hidden" name="WorkAreaAssignments[@i].WorkAreaName" value="@workArea.Name" />
|
||||
</td>
|
||||
<td>
|
||||
<select name="WorkAreaAssignments[@i].PrinterAddress"
|
||||
class="form-select printer-select"
|
||||
data-workarea="@workArea.Id">
|
||||
<option value="">None</option>
|
||||
@foreach (var printer in Model.DiscoveredPrinters)
|
||||
{
|
||||
var selected = currentPrinter == printer.IPAddress;
|
||||
<option value="@printer.IPAddress" selected="@selected">
|
||||
@printer.IPAddress @(!string.IsNullOrEmpty(printer.ModelName) ? $"({printer.ModelName})" : "")
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
name="WorkAreaAssignments[@i].FontSize"
|
||||
class="form-control"
|
||||
min="1"
|
||||
max="4"
|
||||
value="@currentFontSize"
|
||||
style="width: 80px;" />
|
||||
</td>
|
||||
<td>
|
||||
@{
|
||||
var currentLogo = Model.CurrentAssignments.TryGetValue(workArea.Id, out var cfgLogo) ? cfgLogo.LogoFilename : "";
|
||||
}
|
||||
<select name="WorkAreaAssignments[@i].LogoFilename"
|
||||
id="logo-select-@i"
|
||||
class="form-select logo-select"
|
||||
onchange="updateLogoPreview(@i)"
|
||||
style="max-width: 200px;">
|
||||
<option value="">None</option>
|
||||
@foreach (var logo in Model.AvailableLogos)
|
||||
{
|
||||
var selected = currentLogo == logo;
|
||||
<option value="@logo" selected="@selected">@logo</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
<div id="logo-preview-@i" class="mt-2" style="display: none;">
|
||||
<a href="#" target="_blank" id="logo-link-@i">
|
||||
<img id="logo-img-@i" src="" alt="Logo preview" style="max-height: 100px; cursor: pointer;" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Save Configuration</button>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(Model.SuccessMessage))
|
||||
{
|
||||
<div class="alert alert-success mt-3">@Model.SuccessMessage</div>
|
||||
}
|
||||
@if (!string.IsNullOrEmpty(Model.ErrorMessage))
|
||||
{
|
||||
<div class="alert alert-danger mt-3">@Model.ErrorMessage</div>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
async function discoverPrinters() {
|
||||
const button = document.querySelector('button[onclick="discoverPrinters()"]');
|
||||
const spinner = document.getElementById('discover-spinner');
|
||||
const status = document.getElementById('discovery-status');
|
||||
const printerList = document.getElementById('printer-list');
|
||||
const printerCount = document.getElementById('printer-count');
|
||||
|
||||
button.disabled = true;
|
||||
spinner.classList.remove('d-none');
|
||||
status.classList.remove('d-none');
|
||||
printerList.innerHTML = '';
|
||||
printerCount.textContent = '0';
|
||||
|
||||
try {
|
||||
const response = await fetch('/Configure?handler=Discover', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
|
||||
}
|
||||
});
|
||||
|
||||
const printers = await response.json();
|
||||
|
||||
printerCount.textContent = printers.length;
|
||||
|
||||
if (printers.length === 0) {
|
||||
printerList.innerHTML = '<li class="list-group-item">No printers found</li>';
|
||||
} else {
|
||||
// Update all select dropdowns with discovered printers
|
||||
document.querySelectorAll('.printer-select').forEach(select => {
|
||||
const currentValue = select.value;
|
||||
// Keep "None" option
|
||||
select.innerHTML = '<option value="">None</option>';
|
||||
|
||||
printers.forEach(printer => {
|
||||
const option = document.createElement('option');
|
||||
option.value = printer.ipAddress;
|
||||
option.textContent = `${printer.ipAddress} ${printer.modelName ? '(' + printer.modelName + ')' : ''}`;
|
||||
if (printer.ipAddress === currentValue) {
|
||||
option.selected = true;
|
||||
}
|
||||
select.appendChild(option);
|
||||
});
|
||||
});
|
||||
|
||||
// Show discovered printers list
|
||||
printers.forEach(printer => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'list-group-item';
|
||||
li.textContent = `${printer.ipAddress}`;
|
||||
printerList.appendChild(li);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
printerList.innerHTML = `<li class="list-group-item text-danger">Error: ${error.message}</li>`;
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
spinner.classList.add('d-none');
|
||||
status.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
function updateLogoPreview(index) {
|
||||
const select = document.getElementById(`logo-select-${index}`);
|
||||
const preview = document.getElementById(`logo-preview-${index}`);
|
||||
const img = document.getElementById(`logo-img-${index}`);
|
||||
const link = document.getElementById(`logo-link-${index}`);
|
||||
|
||||
if (select.value) {
|
||||
const logoUrl = `/logos/${select.value}`;
|
||||
img.src = logoUrl;
|
||||
link.href = logoUrl;
|
||||
preview.style.display = 'block';
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize previews on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selects = document.querySelectorAll('.logo-select');
|
||||
selects.forEach((select, index) => {
|
||||
if (select.value) {
|
||||
updateLogoPreview(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
Reference in New Issue
Block a user