8945fe2a0a
- Add getPCMachineRelationships API endpoint for PC-to-machine mappings - Add pcmachinerelationships.asp report page with copy table/CSV/JSON export - Fix shopfloor dashboard to immediately hide deactivated notifications - Add Firewall (machinetypeid 46) support to network device pages - Add model migration warning banner to networkdevices.asp - Create SQL script for hybrid model/machine type view Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
457 lines
18 KiB
Plaintext
457 lines
18 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-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; display:inline-block;">
|
|
<i class='zmdi zmdi-network'></i> Network Infrastructure Map
|
|
</h5>
|
|
<div style="float:right;">
|
|
<input type="text" id="machineSearch" class="form-control form-control-sm" placeholder="Search by name, IP, vendor, model..." style="display:inline-block; width:250px; margin-right:15px;">
|
|
<label style="margin-right:10px; display:inline-block; color:#aaa;">Filter by Type:</label>
|
|
<select id="machineTypeFilter" class="form-control form-control-sm" style="display:inline-block; width:200px;">
|
|
<option value="all">All Equipment</option>
|
|
<option value="Access Point">Access Point</option>
|
|
<option value="Camera">Camera</option>
|
|
<option value="IDF">IDF</option>
|
|
<option value="Printer">Printer</option>
|
|
<option value="Server">Server</option>
|
|
<option value="Switch">Switch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="card">
|
|
<div class="card-header" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
|
|
<i class="zmdi zmdi-info"></i> Legend
|
|
</div>
|
|
<div class="card-body">
|
|
<p style="font-size:12px; color:#aaa; margin-bottom:15px;">
|
|
Equipment type color codes:
|
|
</p>
|
|
|
|
<div style="margin-bottom:20px;">
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#4CAF50; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">Printer</span>
|
|
</div>
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#2196F3; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">Access Point</span>
|
|
</div>
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#FF9800; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">IDF</span>
|
|
</div>
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#F44336; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">Camera</span>
|
|
</div>
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#9C27B0; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">Switch</span>
|
|
</div>
|
|
<div style="margin:8px 0; display:flex; align-items:center;">
|
|
<span style="display:inline-block; width:16px; height:16px; background:#607D8B; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
|
|
<span style="font-size:13px; color:#fff;">Server</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:20px; padding:15px; background:#2a2a2a; border-radius:4px; font-size:12px;">
|
|
<strong style="color:#4fc3f7;">Tips:</strong>
|
|
<ul style="margin:8px 0; padding-left:20px; color:#aaa;">
|
|
<li style="margin:5px 0;">Hover over markers for details</li>
|
|
<li style="margin:5px 0;">Use search to find specific equipment</li>
|
|
<li style="margin:5px 0;">Filter by type to focus on specific equipment</li>
|
|
<li style="margin:5px 0;">Click "View Details" for full information</li>
|
|
</ul>
|
|
</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: #1f1f1f !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;
|
|
}
|
|
</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 machine data and markers
|
|
var machineMarkers = [];
|
|
|
|
// Machine type colors
|
|
var machineTypeColors = {
|
|
'Printer': '#4CAF50',
|
|
'Access Point': '#2196F3',
|
|
'IDF': '#FF9800',
|
|
'Camera': '#F44336',
|
|
'Switch': '#9C27B0',
|
|
'Server': '#607D8B',
|
|
'default': '#FFC107'
|
|
};
|
|
|
|
<%
|
|
' Query active network infrastructure with map coordinates
|
|
Dim strSQL, rs, mapleft, maptop, machineid, machinenumber, machineType, machineTypeId, modelnumber, vendor, alias, ipaddress, sourceTable
|
|
|
|
' NOTE: machinetypeid is now sourced from models table (models.machinetypeid) not machines table
|
|
strSQL = "SELECT printers.printerid AS id, machines.machinenumber AS name, machines.alias, " &_
|
|
"printers.mapleft, printers.maptop, printers.ipaddress, NULL AS machinetypeid, " &_
|
|
"'Printer' AS type, models.modelnumber, vendors.vendor, 'printers' AS source " &_
|
|
"FROM printers " &_
|
|
"INNER JOIN machines ON printers.machineid = machines.machineid " &_
|
|
"LEFT JOIN models ON printers.modelid = models.modelnumberid " &_
|
|
"LEFT JOIN vendors ON models.vendorid = vendors.vendorid " &_
|
|
"WHERE printers.isactive = 1 " &_
|
|
"AND printers.mapleft IS NOT NULL " &_
|
|
"AND printers.maptop IS NOT NULL " &_
|
|
"" &_
|
|
"UNION ALL " &_
|
|
"" &_
|
|
"SELECT m.machineid AS id, m.machinenumber AS name, m.alias, " &_
|
|
"m.mapleft, m.maptop, c.address AS ipaddress, m.machinetypeid, " &_
|
|
"mt.machinetype AS type, mo.modelnumber, v.vendor, 'machines' AS source " &_
|
|
"FROM machines m " &_
|
|
"LEFT JOIN models mo ON m.modelnumberid = mo.modelnumberid " &_
|
|
"LEFT JOIN machinetypes mt ON m.machinetypeid = mt.machinetypeid " &_
|
|
"LEFT JOIN vendors v ON mo.vendorid = v.vendorid " &_
|
|
"LEFT JOIN communications c ON m.machineid = c.machineid AND c.isprimary = 1 AND c.comstypeid = 1 " &_
|
|
"WHERE m.machinetypeid IN (16, 17, 18, 19, 20, 46) " &_
|
|
"AND m.isactive = 1 " &_
|
|
"AND m.mapleft IS NOT NULL " &_
|
|
"AND m.maptop IS NOT NULL " &_
|
|
"" &_
|
|
"ORDER BY type, name ASC"
|
|
|
|
set rs = objConn.Execute(strSQL)
|
|
|
|
while not rs.eof
|
|
mapleft = rs("mapleft")
|
|
maptop = rs("maptop")
|
|
maptop = 2550-maptop
|
|
machineid = rs("id")
|
|
machinenumber = rs("name")
|
|
machineType = rs("type")
|
|
sourceTable = rs("source")
|
|
|
|
' machinetypeid may be NULL for infrastructure devices
|
|
if NOT IsNull(rs("machinetypeid")) then
|
|
machineTypeId = rs("machinetypeid")
|
|
else
|
|
machineTypeId = 0
|
|
end if
|
|
|
|
if NOT IsNull(rs("alias")) AND rs("alias") <> "" then
|
|
alias = rs("alias")
|
|
else
|
|
alias = machinenumber
|
|
end if
|
|
|
|
if NOT IsNull(rs("modelnumber")) then
|
|
modelnumber = rs("modelnumber")
|
|
else
|
|
modelnumber = "N/A"
|
|
end if
|
|
|
|
if NOT IsNull(rs("vendor")) then
|
|
vendor = rs("vendor")
|
|
else
|
|
vendor = "N/A"
|
|
end if
|
|
|
|
if NOT IsNull(rs("ipaddress")) then
|
|
ipaddress = rs("ipaddress")
|
|
else
|
|
ipaddress = "N/A"
|
|
end if
|
|
%>
|
|
(function() {
|
|
var machineId = '<%Response.Write(machineid)%>';
|
|
var machineName = '<%Response.Write(Server.HTMLEncode(alias))%>';
|
|
var machineNumber = '<%Response.Write(Server.HTMLEncode(machinenumber))%>';
|
|
var machineType = '<%Response.Write(Server.HTMLEncode(machineType))%>';
|
|
var machineTypeId = '<%Response.Write(machineTypeId)%>';
|
|
var model = '<%Response.Write(Server.HTMLEncode(modelnumber))%>';
|
|
var vendor = '<%Response.Write(Server.HTMLEncode(vendor))%>';
|
|
var ipAddress = '<%Response.Write(Server.HTMLEncode(ipaddress))%>';
|
|
var sourceTable = '<%Response.Write(sourceTable)%>';
|
|
|
|
// Get color for this machine type
|
|
var color = machineTypeColors[machineType] || machineTypeColors['default'];
|
|
|
|
// Create custom marker icon
|
|
var icon = L.divIcon({
|
|
html: '<div style="background:' + color + '; width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10],
|
|
popupAnchor: [0, -15],
|
|
className: 'custom-marker'
|
|
});
|
|
|
|
var marker = L.marker([<%Response.Write(maptop)%>, <%Response.Write(mapleft)%>], {
|
|
title: machineName,
|
|
icon: icon,
|
|
machineId: machineId,
|
|
machineTypeId: machineTypeId
|
|
}).addTo(map);
|
|
|
|
// Store marker with searchable data for filtering
|
|
machineMarkers.push({
|
|
marker: marker,
|
|
machineType: machineType,
|
|
searchData: {
|
|
name: machineName.toLowerCase(),
|
|
number: machineNumber.toLowerCase(),
|
|
type: machineType.toLowerCase(),
|
|
vendor: vendor.toLowerCase(),
|
|
model: model.toLowerCase(),
|
|
ip: ipAddress.toLowerCase()
|
|
}
|
|
});
|
|
|
|
// Open popup on hover, but don't close immediately on mouseout
|
|
// This allows users to click links in the popup
|
|
var popupTimeout;
|
|
|
|
marker.on('mouseover', function() {
|
|
clearTimeout(popupTimeout);
|
|
this.openPopup();
|
|
});
|
|
|
|
marker.on('mouseout', function(e) {
|
|
var popup = this.getPopup();
|
|
var popupElement = popup.getElement();
|
|
|
|
// Delay closing so user can move mouse to popup
|
|
popupTimeout = setTimeout(function() {
|
|
marker.closePopup();
|
|
}, 500); // 500ms delay
|
|
|
|
// Keep popup open if mouse moves over it
|
|
if (popupElement) {
|
|
popupElement.addEventListener('mouseenter', function() {
|
|
clearTimeout(popupTimeout);
|
|
});
|
|
|
|
popupElement.addEventListener('mouseleave', function() {
|
|
marker.closePopup();
|
|
});
|
|
}
|
|
});
|
|
|
|
// Determine the correct detail page URL based on source table
|
|
var detailUrl;
|
|
if (sourceTable === 'printers') {
|
|
detailUrl = './displayprinter.asp?printerid=' + machineId;
|
|
} else if (sourceTable === 'machines') {
|
|
detailUrl = './displaymachine.asp?machineid=' + machineId;
|
|
} else if (sourceTable === 'servers') {
|
|
detailUrl = './displayserver.asp?id=' + machineId;
|
|
} else if (sourceTable === 'switches') {
|
|
detailUrl = './displayswitch.asp?id=' + machineId;
|
|
} else if (sourceTable === 'cameras') {
|
|
detailUrl = './displaycamera.asp?id=' + machineId;
|
|
} else if (sourceTable === 'accesspoints') {
|
|
detailUrl = './displayaccesspoint.asp?id=' + machineId;
|
|
} else if (sourceTable === 'idfs') {
|
|
detailUrl = './displayidf.asp?id=' + machineId;
|
|
} else {
|
|
detailUrl = './networkdevices.asp';
|
|
}
|
|
|
|
var popupContent = '<div style="background:#1f1f1f; color:#fff; min-width:250px; 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;">' + machineName + '</h6>' +
|
|
'</div>' +
|
|
'<div style="padding:10px 15px; font-size:12px;">' +
|
|
'<div style="margin:5px 0;"><strong style="color:#aaa;">Number:</strong> <span style="color:#fff;">' + machineNumber + '</span></div>' +
|
|
'<div style="margin:5px 0;"><strong style="color:#aaa;">Type:</strong> <span style="color:' + color + '; font-weight:bold;">' + machineType + '</span></div>' +
|
|
(ipAddress !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">IP Address:</strong> <span style="color:#fff;">' + ipAddress + '</span></div>' : '') +
|
|
(vendor !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">Vendor:</strong> <span style="color:#fff;">' + vendor + '</span></div>' : '') +
|
|
(model !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">Model:</strong> <span style="color:#fff;">' + model + '</span></div>' : '') +
|
|
'</div>' +
|
|
'<div style="padding:10px 15px; border-top:1px solid #444; text-align:center;">' +
|
|
'<a href="' + detailUrl + '" style="display:inline-block; background:' + config.gradient + '; color:#fff; padding:8px 18px; border-radius:4px; text-decoration:none; font-size:13px; font-weight:500; transition:all 0.2s;" target="_blank" onmouseover="this.style.opacity=\'0.9\'" onmouseout="this.style.opacity=\'1\'"><i class="zmdi zmdi-eye"></i> View Details</a>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
marker.bindPopup(popupContent);
|
|
})();
|
|
<%
|
|
rs.movenext
|
|
wend
|
|
objConn.Close
|
|
%>
|
|
|
|
// Combined filter functionality (type + search)
|
|
function applyFilters() {
|
|
var selectedType = document.getElementById('machineTypeFilter').value;
|
|
var searchTerm = document.getElementById('machineSearch').value.toLowerCase().trim();
|
|
|
|
machineMarkers.forEach(function(item) {
|
|
var typeMatch = (selectedType === 'all' || item.machineType === selectedType);
|
|
var searchMatch = true;
|
|
|
|
if (searchTerm !== '') {
|
|
// Search across all searchable fields
|
|
searchMatch = item.searchData.name.indexOf(searchTerm) > -1 ||
|
|
item.searchData.number.indexOf(searchTerm) > -1 ||
|
|
item.searchData.type.indexOf(searchTerm) > -1 ||
|
|
item.searchData.vendor.indexOf(searchTerm) > -1 ||
|
|
item.searchData.model.indexOf(searchTerm) > -1 ||
|
|
item.searchData.ip.indexOf(searchTerm) > -1;
|
|
}
|
|
|
|
// Show marker only if it matches both type and search filters
|
|
if (typeMatch && searchMatch) {
|
|
item.marker.setOpacity(1);
|
|
} else {
|
|
item.marker.setOpacity(0.15);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Listen to filter changes
|
|
document.getElementById('machineTypeFilter').addEventListener('change', applyFilters);
|
|
|
|
// Listen to search input with debouncing for better performance
|
|
var searchTimeout;
|
|
document.getElementById('machineSearch').addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(applyFilters, 300);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|