264 lines
12 KiB
Plaintext
264 lines
12 KiB
Plaintext
@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>
|
|
}
|