Standardize ASP filenames: remove underscores
Renamed 45 ASP files to follow lowercase concatenated naming convention: - Direct handlers: save_machine_direct.asp -> savemachinedirect.asp - USB files: checkin_usb.asp -> checkinusb.asp - API files: api_usb.asp -> apiusb.asp - Map files: network_map.asp -> networkmap.asp - Printer files: printer_lookup.asp -> printerlookup.asp Also: - Updated 84+ internal references across all ASP and JS files - Deleted 6 test/duplicate files (editmacine.asp, test_*.asp) - Updated production migration guide with filename changes - Added rename scripts for Linux (bash) and Windows (PowerShell)
This commit is contained in:
cproudlock
456
networkmap.asp
Normal file
456
networkmap.asp
Normal file
@@ -0,0 +1,456 @@
|
||||
<!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) " &_
|
||||
"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>
|
||||
Reference in New Issue
Block a user