14caad857d
Use location (machine number/alias) as display name fallback when printercsfname is not set. Show model number as secondary info instead of location to avoid redundancy. Fixes Coaching 115 and similar printers without CSF names assigned. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
449 lines
15 KiB
Plaintext
449 lines
15 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!--#include file="./includes/header.asp"-->
|
||
<!--#include file="./includes/sql.asp"-->
|
||
<link rel="stylesheet" href="./leaflet/leaflet.css">
|
||
<script src="./leaflet/leaflet.js"></script>
|
||
</head>
|
||
|
||
<%
|
||
theme = Request.Cookies("theme")
|
||
IF theme = "" THEN
|
||
theme="bg-theme1"
|
||
END IF
|
||
%>
|
||
<body class="bg-theme <%Response.Write(theme)%>">
|
||
|
||
<!-- start loader -->
|
||
<div id="pageloader-overlay" class="visible incoming"><div class="loader-wrapper-outer"><div class="loader-wrapper-inner" ><div class="loader"></div></div></div></div>
|
||
<!-- end loader -->
|
||
<!-- Start wrapper-->
|
||
<div id="wrapper">
|
||
<!--#include file="./includes/leftsidebar.asp"-->
|
||
<!--Start topbar header-->
|
||
<!--#include file="./includes/topbarheader.asp"-->
|
||
<!--End topbar header-->
|
||
<div class="clearfix"></div>
|
||
<div class="content-wrapper">
|
||
<div class="row">
|
||
<div class="col-lg-8 col-xl-9">
|
||
<div class="card">
|
||
<div class="card-body" style="padding:0;">
|
||
<div style="padding:15px; border-bottom:1px solid #444;">
|
||
<h5 class="card-title" style="margin:0;">
|
||
<i class='zmdi zmdi-map'></i> Printer Installation Map
|
||
<span style="float:right; font-size:14px; font-weight:normal;">
|
||
<span id="selectedCount" style="color:#4fc3f7;">0</span> printer(s) selected
|
||
</span>
|
||
</h5>
|
||
</div>
|
||
<div id="map"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-xl-3">
|
||
<div class="card">
|
||
<div class="card-header" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
|
||
<i class="zmdi zmdi-download"></i> Printer Installer
|
||
</div>
|
||
<div class="card-body">
|
||
<p style="font-size:13px; color:#aaa; margin-bottom:15px;">
|
||
Click printers on the map to select them. Selected printers will turn green.
|
||
</p>
|
||
|
||
<div id="selectedPrinters" style="margin-bottom:20px; max-height:300px; overflow-y:auto;">
|
||
<div style="color:#888; font-size:12px; text-align:center; padding:20px;">
|
||
No printers selected yet
|
||
</div>
|
||
</div>
|
||
|
||
<button id="installBtn" class="btn btn-primary btn-block" style="display:none;" onclick="downloadInstaller()">
|
||
<i class="zmdi zmdi-download"></i> Download Installer
|
||
</button>
|
||
|
||
<button class="btn btn-outline-secondary btn-block btn-sm" onclick="clearSelection()">
|
||
<i class="zmdi zmdi-close"></i> Clear Selection
|
||
</button>
|
||
|
||
<div style="margin-top:20px; padding:15px; background:#2a2a2a; border-radius:4px; font-size:12px;">
|
||
<strong style="color:#4fc3f7;">Legend:</strong>
|
||
<div style="margin-top:8px;">
|
||
<span style="display:inline-block; width:10px; height:10px; background:#888; border-radius:50%; margin-right:8px;"></span> Not Selected<br>
|
||
<span style="display:inline-block; width:10px; height:10px; background:#4caf50; border-radius:50%; margin-right:8px; margin-top:5px;"></span> Selected
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!--End Row-->
|
||
|
||
</div><!--End content-wrapper-->
|
||
<!--Start Back To Top Button-->
|
||
<a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
|
||
<!--End Back To Top Button-->
|
||
|
||
<!--Start footer-->
|
||
<footer class="footer">
|
||
</div>
|
||
</footer>
|
||
<!--End footer-->
|
||
|
||
</div><!--End wrapper-->
|
||
|
||
<!-- Bootstrap core JavaScript-->
|
||
<script src="assets/js/jquery.min.js"></script>
|
||
<script src="assets/js/popper.min.js"></script>
|
||
<script src="assets/js/bootstrap.min.js"></script>
|
||
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
|
||
<script src="assets/js/sidebar-menu.js"></script>
|
||
<script src="assets/js/app-script.js"></script>
|
||
|
||
<style>
|
||
#map {
|
||
width: 100%;
|
||
height: calc(100vh - 250px);
|
||
min-height: 600px;
|
||
background-color: #1a1a1a;
|
||
}
|
||
|
||
.leaflet-control-zoom a {
|
||
background-color: #2a2a2a !important;
|
||
color: #fff !important;
|
||
border-color: #444 !important;
|
||
}
|
||
.leaflet-control-zoom a:hover {
|
||
background-color: #3a3a3a !important;
|
||
}
|
||
.leaflet-bar {
|
||
border: 1px solid #444 !important;
|
||
}
|
||
|
||
.leaflet-popup-content-wrapper {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
box-shadow: 0 3px 14px rgba(0,0,0,0.6) !important;
|
||
border-radius: 4px !important;
|
||
padding: 0 !important;
|
||
}
|
||
.leaflet-popup-content {
|
||
margin: 0 !important;
|
||
}
|
||
.leaflet-popup-tip-container {
|
||
display: none !important;
|
||
}
|
||
.leaflet-popup-close-button {
|
||
color: #fff !important;
|
||
font-size: 24px !important;
|
||
padding: 4px 8px 0 0 !important;
|
||
}
|
||
|
||
.leaflet-control-attribution {
|
||
display: none !important;
|
||
}
|
||
|
||
.selected-printer-item {
|
||
padding: 8px;
|
||
margin-bottom: 8px;
|
||
background: #2a2a2a;
|
||
border-left: 3px solid #4caf50;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
}
|
||
|
||
.selected-printer-item .remove-btn {
|
||
float: right;
|
||
color: #f44336;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Get current theme
|
||
var bodyClass = document.body.className;
|
||
var themeMatch = bodyClass.match(/bg-theme(\d+)/);
|
||
var theme = themeMatch ? 'bg-theme' + themeMatch[1] : 'bg-theme1';
|
||
|
||
var themeConfig = {
|
||
'bg-theme1': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
|
||
'bg-theme7': { bg: '#0c675e', filter: 'brightness(0.8) contrast(1.1) hue-rotate(-10deg)', gradient: 'linear-gradient(45deg, #0c675e, #069e90)' },
|
||
'bg-theme11': { bg: '#1565C0', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)', gradient: 'linear-gradient(45deg, #1565C0, #1E88E5)' }
|
||
};
|
||
|
||
var config = themeConfig[theme] || { bg: '#1a1a1a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #667eea, #764ba2)' };
|
||
|
||
document.getElementById('map').style.backgroundColor = config.bg;
|
||
|
||
var map = L.map('map', {
|
||
crs: L.CRS.Simple,
|
||
minZoom: -3
|
||
});
|
||
var bounds = [[0,0], [2550,3300]];
|
||
|
||
var lightThemes = ['bg-theme11', 'bg-theme13'];
|
||
var mapImage = lightThemes.includes(theme) ? './images/sitemap2025-light.png' : './images/sitemap2025-dark.png';
|
||
var image = L.imageOverlay(mapImage, bounds);
|
||
|
||
image.on('load', function() {
|
||
var imgElement = this.getElement();
|
||
if (imgElement) {
|
||
imgElement.style.filter = config.filter;
|
||
}
|
||
});
|
||
|
||
image.addTo(map);
|
||
var center = [1275, 1650];
|
||
map.setView(center, -2.3);
|
||
|
||
// Store printer data and markers
|
||
var printerData = {};
|
||
var selectedPrinters = {};
|
||
|
||
<%
|
||
strSQL = "SELECT printers.mapleft, printers.maptop, machines.machinenumber, printers.printerid, " &_
|
||
"printers.printercsfname, printers.printerwindowsname, models.modelnumber, models.image, " &_
|
||
"printers.ipaddress, printers.fqdn, machines.alias, vendors.vendor " &_
|
||
"FROM machines, printers, models, vendors WHERE " &_
|
||
"printers.modelid = models.modelnumberid AND " &_
|
||
"models.vendorid = vendors.vendorid AND " &_
|
||
"printers.machineid != 1 AND " &_
|
||
"printers.machineid = machines.machineid AND " &_
|
||
"printers.isactive = 1 AND " &_
|
||
"printers.mapleft IS NOT NULL AND " &_
|
||
"printers.maptop IS NOT NULL AND " &_
|
||
"(vendors.vendor = 'HP' OR vendors.vendor = 'Xerox' OR vendors.vendor = 'HID')"
|
||
set rs = objconn.Execute(strSQL)
|
||
while not rs.eof
|
||
mapleft = rs("mapleft")
|
||
maptop = rs("maptop")
|
||
maptop = 2550-maptop
|
||
printerid = rs("printerid")
|
||
printercsfname = rs("printercsfname")
|
||
modelnumber = rs("modelnumber")
|
||
image = rs("image")
|
||
ipaddress = rs("ipaddress")
|
||
fqdn = rs("fqdn")
|
||
vendor = rs("vendor")
|
||
|
||
' Get machine name
|
||
if NOT IsNull(rs("alias")) AND rs("alias") <> "" THEN
|
||
machineName = rs("alias")
|
||
else
|
||
machineName = rs("machinenumber")
|
||
end if
|
||
|
||
location = machineName
|
||
|
||
if image = "" THEN
|
||
image = "Versalink-C7125.png"
|
||
end if
|
||
|
||
' Generate standardized printer name using same logic as api_printers.asp
|
||
Dim cleanMachine, cleanModel, shortDescription, standardName
|
||
cleanMachine = Replace(machineName, " ", "")
|
||
cleanMachine = Replace(cleanMachine, "Machine", "")
|
||
cleanModel = Replace(modelnumber, " ", "")
|
||
|
||
' Extract short description from model number
|
||
If InStr(cleanModel, "ColorLaserJet") > 0 Then
|
||
shortDescription = "ColorLaserJet"
|
||
ElseIf InStr(cleanModel, "LaserJetPro") > 0 Then
|
||
shortDescription = "LaserJetPro"
|
||
ElseIf InStr(cleanModel, "LaserJet") > 0 Then
|
||
shortDescription = "LaserJet"
|
||
ElseIf InStr(cleanModel, "Altalink") > 0 Then
|
||
shortDescription = "Altalink"
|
||
ElseIf InStr(cleanModel, "Versalink") > 0 Then
|
||
shortDescription = "Versalink"
|
||
ElseIf InStr(cleanModel, "DesignJet") > 0 Then
|
||
shortDescription = "DesignJet"
|
||
Else
|
||
' Extract model prefix before numbers
|
||
Dim i, char
|
||
shortDescription = ""
|
||
For i = 1 To Len(cleanModel)
|
||
char = Mid(cleanModel, i, 1)
|
||
If char >= "0" And char <= "9" Then
|
||
Exit For
|
||
End If
|
||
shortDescription = shortDescription & char
|
||
Next
|
||
If shortDescription = "" Then
|
||
shortDescription = cleanModel
|
||
End If
|
||
End If
|
||
|
||
' Build standard name: CSFName-Location-VendorModel (no dash between vendor and model)
|
||
If printercsfname <> "" And printercsfname <> "NONE" And printercsfname <> "gage lab " Then
|
||
If cleanMachine <> "" Then
|
||
standardName = printercsfname & "-" & cleanMachine & "-" & vendor & shortDescription
|
||
Else
|
||
standardName = printercsfname & "-" & vendor & shortDescription
|
||
End If
|
||
Else
|
||
If cleanMachine <> "" Then
|
||
standardName = cleanMachine & "-" & vendor & shortDescription
|
||
Else
|
||
standardName = "Printer" & printerid & "-" & vendor & shortDescription
|
||
End If
|
||
End If
|
||
|
||
printerwindowsname = standardName
|
||
%>
|
||
(function() {
|
||
var printerId = '<%Response.Write(printerid)%>';
|
||
var printerName = '<%Response.Write(printerwindowsname)%>';
|
||
var csfName = '<%Response.Write(printercsfname)%>';
|
||
var location = '<%Response.Write(location)%>';
|
||
|
||
printerData[printerId] = {
|
||
name: printerName,
|
||
csf: csfName,
|
||
location: location,
|
||
model: '<%Response.Write(modelnumber)%>',
|
||
ip: '<%Response.Write(ipaddress)%>',
|
||
fqdn: '<%Response.Write(fqdn)%>'
|
||
};
|
||
|
||
var normalIcon = L.icon({
|
||
iconUrl: './images/printers/<%Response.Write(image)%>',
|
||
iconSize: [60, 60],
|
||
iconAnchor: [30, 30],
|
||
popupAnchor: [0, -30],
|
||
className: 'printer-icon-normal'
|
||
});
|
||
|
||
var selectedIcon = L.icon({
|
||
iconUrl: './images/printers/<%Response.Write(image)%>',
|
||
iconSize: [70, 70],
|
||
iconAnchor: [35, 35],
|
||
popupAnchor: [0, -35],
|
||
className: 'printer-icon-selected'
|
||
});
|
||
|
||
var marker = L.marker([<%Response.Write(maptop)%>, <%Response.Write(mapleft)%>], {
|
||
title: printerName,
|
||
icon: normalIcon,
|
||
printerId: printerId
|
||
}).addTo(map);
|
||
|
||
printerData[printerId].marker = marker;
|
||
printerData[printerId].normalIcon = normalIcon;
|
||
printerData[printerId].selectedIcon = selectedIcon;
|
||
|
||
marker.on('click', function() {
|
||
togglePrinter(printerId);
|
||
});
|
||
|
||
marker.on('mouseover', function() {
|
||
this.openPopup();
|
||
});
|
||
|
||
marker.on('mouseout', function() {
|
||
this.closePopup();
|
||
});
|
||
|
||
var popupContent = '<div style="background:#1f1f1f; color:#fff; min-width:280px; border-radius:4px; overflow:hidden;">' +
|
||
'<div style="background:' + config.gradient + '; padding:10px 15px; border-bottom:1px solid #444;">' +
|
||
'<h6 style="margin:0; color:#fff; font-size:14px;"><%Response.Write(printerwindowsname)%></h6>' +
|
||
'</div>' +
|
||
'<div style="padding:10px 15px; font-size:12px;">' +
|
||
'<div style="margin:5px 0;"><strong style="color:#aaa;">CSF:</strong> <span style="color:#fff;"><%Response.Write(printercsfname)%></span></div>' +
|
||
'<div style="margin:5px 0;"><strong style="color:#aaa;">Location:</strong> <span style="color:#fff;"><%Response.Write(location)%></span></div>' +
|
||
'<div style="margin:5px 0;"><strong style="color:#aaa;">Model:</strong> <span style="color:#fff;"><%Response.Write(modelnumber)%></span></div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
|
||
marker.bindPopup(popupContent);
|
||
})();
|
||
<%
|
||
rs.movenext
|
||
Wend
|
||
objConn.Close
|
||
%>
|
||
|
||
// Add CSS for selected markers
|
||
var style = document.createElement('style');
|
||
style.innerHTML = `
|
||
.printer-icon-selected {
|
||
filter: drop-shadow(0 0 10px #4caf50) brightness(1.3);
|
||
z-index: 1000 !important;
|
||
}
|
||
.printer-icon-normal {
|
||
filter: grayscale(50%) brightness(0.8);
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
function togglePrinter(printerId) {
|
||
if (selectedPrinters[printerId]) {
|
||
// Deselect
|
||
delete selectedPrinters[printerId];
|
||
printerData[printerId].marker.setIcon(printerData[printerId].normalIcon);
|
||
} else {
|
||
// Select
|
||
selectedPrinters[printerId] = true;
|
||
printerData[printerId].marker.setIcon(printerData[printerId].selectedIcon);
|
||
}
|
||
|
||
updateSelectionUI();
|
||
}
|
||
|
||
function updateSelectionUI() {
|
||
var count = Object.keys(selectedPrinters).length;
|
||
document.getElementById('selectedCount').innerText = count;
|
||
|
||
var container = document.getElementById('selectedPrinters');
|
||
var installBtn = document.getElementById('installBtn');
|
||
|
||
if (count === 0) {
|
||
container.innerHTML = '<div style="color:#888; font-size:12px; text-align:center; padding:20px;">No printers selected yet</div>';
|
||
installBtn.style.display = 'none';
|
||
} else {
|
||
var html = '';
|
||
for (var printerId in selectedPrinters) {
|
||
var printer = printerData[printerId];
|
||
// Use CSF name if available, otherwise fall back to location
|
||
var displayName = (printer.csf && printer.csf !== '') ? printer.csf : printer.location;
|
||
html += '<div class="selected-printer-item">' +
|
||
'<span class="remove-btn" onclick="togglePrinter(\'' + printerId + '\')">×</span>' +
|
||
'<strong>' + displayName + '</strong><br>' +
|
||
'<span style="font-size:11px; color:#aaa;">' + printer.model + '</span>' +
|
||
'</div>';
|
||
}
|
||
container.innerHTML = html;
|
||
installBtn.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function clearSelection() {
|
||
for (var printerId in selectedPrinters) {
|
||
printerData[printerId].marker.setIcon(printerData[printerId].normalIcon);
|
||
}
|
||
selectedPrinters = {};
|
||
updateSelectionUI();
|
||
}
|
||
|
||
function downloadInstaller() {
|
||
var printerIds = [];
|
||
for (var printerId in selectedPrinters) {
|
||
printerIds.push(printerId);
|
||
}
|
||
|
||
if (printerIds.length === 0) {
|
||
alert('Please select at least one printer');
|
||
return;
|
||
}
|
||
|
||
// Pass printer IDs for reliable lookup (names are generated dynamically and may not match DB)
|
||
var printerParam = printerIds.join(',');
|
||
window.location.href = 'install_printer.asp?printerid=' + encodeURIComponent(printerParam);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|