Files
shopdb/displaydevice.asp
cproudlock 8194f5cdf0 Standardize UI consistency across ShopDB pages
Security fixes:
- Add HTMLEncode to displaysubnets.asp output
- Add HTMLEncode to displayapplications.asp URL attributes

Icon standardization:
- Use zmdi-plus-circle for all Add buttons (displaypcs, pcs, pclist, computers, listpcs)
- Use zmdi-edit for all Edit tab icons (displayapplication, displayprinter, displaysubnet, displaydevice)
- Replace icon-note with zmdi icons throughout

Layout consistency:
- Standardize title row margin-bottom to 15px across all pages
- Add table-hover class to all data tables
- Fix editpc.asp title from "Edit Equipment" to "Edit PC"
- Fix editpc.asp back link to point to displaypcs.asp

Terminology:
- Change "Make" to "Vendor" in displayprinters.asp
- Standardize Back button text to "Back to [Page]" format

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-10 14:20:35 -05:00

460 lines
17 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>
<%
On Error Resume Next
theme = Request.Cookies("theme")
If theme = "" Then
theme = "bg-theme1"
End If
' Get device type and ID from query string
Dim deviceType, deviceId
deviceType = Trim(Request.Querystring("type"))
deviceId = Trim(Request.Querystring("id"))
' Validate inputs
If deviceType = "" Or deviceId = "" Or Not IsNumeric(deviceId) Or CLng(deviceId) < 1 Then
Response.Redirect("network_devices.asp")
Response.End
End If
' Build query based on device type
Dim strSQL, rs, tableName, idField, editUrl, listUrl
Select Case LCase(deviceType)
Case "idf"
tableName = "idfs"
idField = "idfid"
editUrl = "deviceidf.asp?id=" & deviceId
listUrl = "network_devices.asp?filter=IDF"
strSQL = "SELECT i.idfid, i.idfname, i.description, i.maptop, i.mapleft, i.isactive, " & _
"NULL AS vendor, NULL AS modelnumber, NULL AS serialnumber, NULL AS ipaddress, NULL AS macaddress, 'IDF' AS devicetype " & _
"FROM idfs i WHERE i.idfid = " & CLng(deviceId)
Case "server"
tableName = "servers"
idField = "serverid"
editUrl = "deviceserver.asp?id=" & deviceId
listUrl = "network_devices.asp?filter=Server"
strSQL = "SELECT s.*, v.vendor, m.modelnumber, s.serialnumber, s.ipaddress, NULL AS macaddress, NULL AS idfname, 'Server' AS devicetype, " & _
"s.servername AS devicename " & _
"FROM servers s " & _
"LEFT JOIN models m ON s.modelid = m.modelnumberid " & _
"LEFT JOIN vendors v ON m.vendorid = v.vendorid " & _
"WHERE s.serverid = " & CLng(deviceId)
Case "switch"
tableName = "switches"
idField = "switchid"
editUrl = "deviceswitch.asp?id=" & deviceId
listUrl = "network_devices.asp?filter=Switch"
strSQL = "SELECT s.*, v.vendor, m.modelnumber, s.serialnumber, s.ipaddress, NULL AS macaddress, NULL AS idfname, 'Switch' AS devicetype, " & _
"s.switchname AS devicename " & _
"FROM switches s " & _
"LEFT JOIN models m ON s.modelid = m.modelnumberid " & _
"LEFT JOIN vendors v ON m.vendorid = v.vendorid " & _
"WHERE s.switchid = " & CLng(deviceId)
Case "camera"
tableName = "cameras"
idField = "cameraid"
editUrl = "devicecamera.asp?id=" & deviceId
listUrl = "network_devices.asp?filter=Camera"
strSQL = "SELECT c.*, v.vendor, m.modelnumber, c.serialnumber, c.ipaddress, c.macaddress, i.idfname, 'Camera' AS devicetype, " & _
"c.cameraname AS devicename " & _
"FROM cameras c " & _
"LEFT JOIN models m ON c.modelid = m.modelnumberid " & _
"LEFT JOIN vendors v ON m.vendorid = v.vendorid " & _
"LEFT JOIN idfs i ON c.idfid = i.idfid " & _
"WHERE c.cameraid = " & CLng(deviceId)
Case "accesspoint", "access point"
tableName = "accesspoints"
idField = "apid"
editUrl = "deviceaccesspoint.asp?id=" & deviceId
listUrl = "network_devices.asp?filter=Access Point"
strSQL = "SELECT ap.apid, ap.apname AS devicename, ap.modelid, ap.serialnumber, ap.ipaddress, ap.description, ap.maptop, ap.mapleft, ap.isactive, " & _
"v.vendor, m.modelnumber, NULL AS macaddress, NULL AS idfname, NULL AS idfid, 'Access Point' AS devicetype " & _
"FROM accesspoints ap " & _
"LEFT JOIN models m ON ap.modelid = m.modelnumberid " & _
"LEFT JOIN vendors v ON m.vendorid = v.vendorid " & _
"WHERE ap.apid = " & CLng(deviceId)
Case Else
Response.Redirect("network_devices.asp")
Response.End
End Select
Set rs = objConn.Execute(strSQL)
' Check if device exists
If rs.EOF Then
rs.Close
Set rs = Nothing
Response.Redirect("network_devices.asp")
Response.End
End If
' Get device name based on type
Dim deviceName
Select Case LCase(deviceType)
Case "idf"
deviceName = rs("idfname")
Case "server"
deviceName = rs("servername")
Case "switch"
deviceName = rs("switchname")
Case "camera"
deviceName = rs("cameraname")
Case "accesspoint", "access point"
deviceName = rs("devicename")
End Select
%>
<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="container-fluid">
<div class="row mt-3">
<div class="col-lg-4">
<div class="card profile-card-2">
<div class="card-img-block">
<img class="img-fluid" src="./images/devices/<%=LCase(deviceType)%>.png" alt="Card image cap" onerror="this.onerror=null; this.src='./images/devices/default.png'">
</div>
<div class="card-body pt-5">
<img src="./images/devices/<%=LCase(deviceType)%>.png" alt="profile-image" class="profile" onerror="this.onerror=null; this.src='./images/devices/default.png'">
<h5 class="card-title"><%=Server.HTMLEncode(deviceName)%></h5>
<h5 class="card-title"><%If Not IsNull(rs("vendor")) Then Response.Write(Server.HTMLEncode(rs("vendor"))) Else Response.Write("&nbsp;") End If%></h5>
<h5 class="card-text"><%=Server.HTMLEncode(rs("devicetype"))%></h5>
<p class="card-text"><%If Not IsNull(rs("description")) Then Response.Write(Server.HTMLEncode(rs("description"))) Else Response.Write("&nbsp;") End If%></p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs nav-tabs-primary top-icon nav-justified">
<li class="nav-item">
<a href="javascript:void();" data-target="#settings" data-toggle="pill" class="nav-link active"><i class="icon-wrench"></i> <span class="hidden-xs">Settings</span></a>
</li>
<%If LCase(deviceType) = "server" Then%>
<li class="nav-item">
<a href="javascript:void();" data-target="#applications" data-toggle="pill" class="nav-link"><i class="zmdi zmdi-apps"></i> <span class="hidden-xs">Applications</span></a>
</li>
<%End If%>
<li class="nav-item">
<a href="<%=editUrl%>" class="nav-link"><i class="zmdi zmdi-edit"></i> <span class="hidden-xs">Edit</span></a>
</li>
</ul>
<div class="tab-content p-3">
<div class="tab-pane active" id="settings">
<h5 class="mb-3">Configuration</h5>
<div class="row">
<div class="col-md-3">
<p class="mb-2"><strong>Type:</strong></p>
<p class="mb-2"><strong>Name:</strong></p>
<%If Not IsNull(rs("vendor")) Then%>
<p class="mb-2"><strong>Vendor:</strong></p>
<p class="mb-2"><strong>Model:</strong></p>
<%End If%>
<%If Not IsNull(rs("serialnumber")) And rs("serialnumber") <> "" Then%>
<p class="mb-2"><strong>Serial:</strong></p>
<%End If%>
<%If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then%>
<p class="mb-2"><strong>IP Address:</strong></p>
<%End If%>
<%If Not IsNull(rs("macaddress")) And rs("macaddress") <> "" Then%>
<p class="mb-2"><strong>MAC Address:</strong></p>
<%End If%>
<%If Not IsNull(rs("idfname")) Then%>
<p class="mb-2"><strong>IDF:</strong></p>
<%End If%>
<p class="mb-2"><strong>Location:</strong></p>
</div>
<div class="col-md-5">
<p class="mb-2"><%=Server.HTMLEncode(rs("devicetype"))%></p>
<p class="mb-2"><%=Server.HTMLEncode(deviceName)%></p>
<%If Not IsNull(rs("vendor")) Then%>
<p class="mb-2"><%=Server.HTMLEncode(rs("vendor"))%></p>
<p class="mb-2"><%=Server.HTMLEncode(rs("modelnumber"))%></p>
<%End If%>
<%If Not IsNull(rs("serialnumber")) And rs("serialnumber") <> "" Then%>
<p class="mb-2"><%=Server.HTMLEncode(rs("serialnumber"))%></p>
<%End If%>
<%If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then%>
<p class="mb-2"><a href="http://<%=Server.HTMLEncode(rs("ipaddress"))%>" target="_blank"><%=Server.HTMLEncode(rs("ipaddress"))%></a></p>
<%End If%>
<%If Not IsNull(rs("macaddress")) And rs("macaddress") <> "" Then%>
<p class="mb-2"><code><%=Server.HTMLEncode(rs("macaddress"))%></code></p>
<%End If%>
<%If Not IsNull(rs("idfname")) Then%>
<p class="mb-2"><a href="displaydevice.asp?type=idf&id=<%=rs("idfid")%>"><%=Server.HTMLEncode(rs("idfname"))%></a></p>
<%End If%>
<p class="mb-2">
<%If Not IsNull(rs("maptop")) And Not IsNull(rs("mapleft")) Then%>
<span class="location-link" data-deviceid="<%=deviceId%>" data-devicetype="<%=LCase(deviceType)%>" style="cursor:pointer; color:#007bff;">
<i class="zmdi zmdi-pin" style="margin-right:4px;"></i>View on Map
</span>
<%Else%>
<em>Not set</em>
<%End If%>
</p>
</div>
</div>
<!--/row-->
</div>
<%If LCase(deviceType) = "server" Then%>
<div class="tab-pane" id="applications">
<div class="table-responsive">
<table class="table table-hover table-striped">
<tbody>
<tr><td><span class='text-muted'><em>Application tracking not yet implemented for servers</em></span></td></tr>
</tbody>
</table>
</div>
</div>
<%End If%>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End container-fluid-->
</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 class="container">
<div class="text-center">
Copyright © 2018 DayTrader Template
</div>
</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>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<style>
.location-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.location-popup {
display: none;
position: fixed;
background: #2a2a2a;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
z-index: 9999;
overflow: hidden;
border: 1px solid #444;
}
.location-popup-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 12px 16px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.location-popup-close {
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 24px;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
transition: background 0.2s;
}
.location-popup-close:hover {
background: rgba(255,255,255,0.3);
}
.location-popup-body {
padding: 0;
background: #1a1a1a;
}
.location-popup-body iframe {
display: block;
border: none;
border-radius: 0 0 6px 6px;
}
.location-link:hover {
text-decoration: underline;
}
</style>
<script>
$(document).ready(function() {
var $overlay = $('<div class="location-popup-overlay"></div>').appendTo('body');
var $popup = $('<div class="location-popup"></div>').appendTo('body');
$popup.html(
'<div class="location-popup-header">' +
'<h6 style="margin:0; font-size:16px;"><i class="zmdi zmdi-pin"></i> <span class="location-title">Loading...</span></h6>' +
'<button class="location-popup-close" title="Close (Esc)">&times;</button>' +
'</div>' +
'<div class="location-popup-body">' +
'<iframe src="" width="440" height="340"></iframe>' +
'</div>'
);
var $iframe = $popup.find('iframe');
var $title = $popup.find('.location-title');
var currentDeviceId = null;
var currentDeviceType = null;
var hoverTimer = null;
function showLocationPopup(deviceId, deviceType, deviceName, mouseEvent) {
if (currentDeviceId === deviceId && currentDeviceType === deviceType && $popup.is(':visible')) {
return;
}
currentDeviceId = deviceId;
currentDeviceType = deviceType;
$title.text(deviceName);
$iframe.attr('src', './displaylocation.asp?type=' + deviceType + '&id=' + deviceId);
var popupWidth = 440;
var popupHeight = 400;
var mouseX = mouseEvent.clientX;
var mouseY = mouseEvent.clientY;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var left, top;
left = mouseX + 10;
if (left + popupWidth > windowWidth - 10) {
left = mouseX - popupWidth - 10;
}
if (left < 10) {
left = 10;
}
top = mouseY + 10;
if (top + popupHeight > windowHeight - 10) {
top = mouseY - popupHeight - 10;
}
if (top < 10) {
top = 10;
}
$popup.css({
left: left + 'px',
top: top + 'px'
});
$overlay.fadeIn(200);
$popup.fadeIn(200);
}
function hideLocationPopup() {
$overlay.fadeOut(200);
$popup.fadeOut(200, function() {
$iframe.attr('src', '');
});
currentDeviceId = null;
currentDeviceType = null;
}
$('.location-link').on('mouseenter', function(e) {
var $link = $(this);
var deviceId = $link.data('deviceid');
var deviceType = $link.data('devicetype');
var deviceName = $link.closest('.col-md-5').prev('.col-md-3').find('strong').first().parent().next().text().trim();
var mouseEvent = e;
if (hoverTimer) {
clearTimeout(hoverTimer);
}
hoverTimer = setTimeout(function() {
showLocationPopup(deviceId, deviceType, deviceName, mouseEvent);
}, 300);
});
$('.location-link').on('mouseleave', function() {
if (hoverTimer) {
clearTimeout(hoverTimer);
hoverTimer = null;
}
});
$('.location-link').on('click', function(e) {
e.preventDefault();
var deviceId = $(this).data('deviceid');
var deviceType = $(this).data('devicetype');
window.open('network_map.asp', '_blank');
});
$popup.on('mouseenter', function() {});
$popup.on('mouseleave', function() {
hideLocationPopup();
});
$overlay.on('click', hideLocationPopup);
$popup.find('.location-popup-close').on('click', hideLocationPopup);
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && $popup.is(':visible')) {
hideLocationPopup();
}
});
});
</script>
</body>
</html>
<%
rs.Close
Set rs = Nothing
objConn.Close
%>