810dda29a8
jQuery's data() caches values; attr() reads directly from DOM 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
706 lines
29 KiB
Plaintext
706 lines
29 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include file="./includes/header.asp"-->
|
|
<!--#include file="./includes/sql.asp"-->
|
|
</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="container-fluid">
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-lg-8 offset-lg-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
|
|
<h5 class="card-title" style="margin:0;">
|
|
<i class="zmdi zmdi-print"></i> Add Printer
|
|
</h5>
|
|
<a href="./displayprinters.asp" class="btn btn-sm btn-secondary">
|
|
<i class="zmdi zmdi-arrow-left"></i> Back
|
|
</a>
|
|
</div>
|
|
|
|
<form method="post" action="./saveprinter_direct.asp">
|
|
<div class="form-group">
|
|
<label for="modelid">Model <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<select class="form-control" id="modelid" name="modelid" required>
|
|
<option value="">-- Select Printer Model --</option>
|
|
<%
|
|
Dim strSQL, rsModels
|
|
strSQL = "SELECT models.*, vendors.vendor FROM models " &_
|
|
"INNER JOIN vendors ON models.vendorid = vendors.vendorid " &_
|
|
"WHERE vendors.isprinter = 1 AND models.isactive = 1 " &_
|
|
"ORDER BY vendors.vendor ASC, models.modelnumber ASC"
|
|
Set rsModels = objconn.Execute(strSQL)
|
|
While Not rsModels.EOF
|
|
Response.Write("<option value='" & rsModels("modelnumberid") & "' data-vendor='" & Server.HTMLEncode(rsModels("vendor")) & "' data-model='" & Server.HTMLEncode(rsModels("modelnumber")) & "'>" & Server.HTMLEncode(rsModels("vendor") & " - " & rsModels("modelnumber")) & "</option>")
|
|
rsModels.MoveNext
|
|
Wend
|
|
rsModels.Close
|
|
Set rsModels = Nothing
|
|
%>
|
|
<option value="new">+ Add New Model</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-info" id="addModelBtn">
|
|
<i class="zmdi zmdi-plus"></i> New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden section for adding new model -->
|
|
<div id="newModelSection" style="display:none; padding:15px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:5px; margin-bottom:15px;">
|
|
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Printer Model</h6>
|
|
|
|
<div class="form-group">
|
|
<label for="newmodelnumber">Model Number <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="newmodelnumber" name="newmodelnumber"
|
|
maxlength="255" placeholder="e.g., LaserJet Pro 400">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newvendorid">Vendor <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<select class="form-control" id="newvendorid" name="newvendorid">
|
|
<option value="">-- Select Vendor --</option>
|
|
<%
|
|
Dim rsVendors
|
|
strSQL = "SELECT vendorid, vendor FROM vendors WHERE isprinter = 1 AND isactive = 1 ORDER BY vendor ASC"
|
|
Set rsVendors = objConn.Execute(strSQL)
|
|
While Not rsVendors.EOF
|
|
Response.Write("<option value='" & rsVendors("vendorid") & "'>" & Server.HTMLEncode(rsVendors("vendor")) & "</option>")
|
|
rsVendors.MoveNext
|
|
Wend
|
|
rsVendors.Close
|
|
Set rsVendors = Nothing
|
|
%>
|
|
<option value="new">+ Add New Vendor</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-info" id="addVendorBtn">
|
|
<i class="zmdi zmdi-plus"></i> New
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden section for adding new vendor ---->
|
|
<div id="newVendorSection" style="display:none; padding:15px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:5px; margin-bottom:15px;">
|
|
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Vendor</h6>
|
|
|
|
<div class="form-group">
|
|
<label for="newvendorname">Vendor Name <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="newvendorname" name="newvendorname"
|
|
maxlength="50" placeholder="e.g., HP, Canon, Epson">
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-sm btn-secondary" id="cancelNewVendor">
|
|
<i class="zmdi zmdi-close"></i> Cancel
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newmodelnotes">Model Notes</label>
|
|
<textarea class="form-control" id="newmodelnotes" name="newmodelnotes"
|
|
rows="2" maxlength="255"
|
|
placeholder="Additional notes about this model..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newmodeldocpath">Documentation Path</label>
|
|
<input type="text" class="form-control" id="newmodeldocpath" name="newmodeldocpath"
|
|
maxlength="255" placeholder="\\server\docs\printer.pdf or http://...">
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-sm btn-secondary" id="cancelNewModel">
|
|
<i class="zmdi zmdi-close"></i> Cancel
|
|
</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="serialnumber">Serial Number <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="serialnumber" name="serialnumber"
|
|
required maxlength="100" placeholder="Printer serial number">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="ipaddress">IP Address <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="ipaddress" name="ipaddress"
|
|
required maxlength="15" placeholder="e.g., 192.168.1.100"
|
|
pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
|
|
<small class="form-text text-muted">Must be a valid IPv4 address</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="fqdn">FQDN (Optional)</label>
|
|
<input type="text" class="form-control" id="fqdn" name="fqdn"
|
|
maxlength="255" placeholder="e.g., printer01.company.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="printerwindowsname">Windows Name <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="printerwindowsname" name="printerwindowsname"
|
|
required maxlength="255" placeholder="Name as it appears in Windows">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="printercsfname">CSF Name (Optional)</label>
|
|
<input type="text" class="form-control" id="printercsfname" name="printercsfname"
|
|
maxlength="50" placeholder="Name in CSF system">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="printerpin">PIN (Optional)</label>
|
|
<input type="text" class="form-control" id="printerpin" name="printerpin"
|
|
maxlength="10" placeholder="e.g., 012345">
|
|
<small class="form-text text-muted">Printer PIN code (leading zeros are preserved)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="machineid">Associated Machine <span class="text-muted">(Optional)</span></label>
|
|
<!-- FIXED 2025-11-14 16:00 -->
|
|
<select class="form-control" id="machineid" name="machineid">
|
|
<option value="">-- None --</option>
|
|
<%
|
|
Dim rsMachines, displayText
|
|
' Get all active machines
|
|
strSQL = "SELECT machineid, machinenumber, alias FROM machines WHERE isactive = 1 ORDER BY COALESCE(alias, machinenumber) ASC"
|
|
Set rsMachines = objconn.Execute(strSQL)
|
|
|
|
While Not rsMachines.EOF
|
|
displayText = ""
|
|
|
|
' Build display text: prefer alias, fallback to machinenumber
|
|
If NOT IsNull(rsMachines("alias")) AND Trim(rsMachines("alias") & "") <> "" Then
|
|
If NOT IsNull(rsMachines("machinenumber")) AND Trim(rsMachines("machinenumber") & "") <> "" Then
|
|
displayText = Trim(rsMachines("machinenumber") & "") & " (" & Trim(rsMachines("alias") & "") & ")"
|
|
Else
|
|
displayText = Trim(rsMachines("alias") & "")
|
|
End If
|
|
ElseIf NOT IsNull(rsMachines("machinenumber")) AND Trim(rsMachines("machinenumber") & "") <> "" Then
|
|
displayText = Trim(rsMachines("machinenumber") & "")
|
|
End If
|
|
|
|
' Only output if we have display text
|
|
If displayText <> "" Then
|
|
Dim machineAlias, machineNum
|
|
machineAlias = Trim(rsMachines("alias") & "")
|
|
machineNum = Trim(rsMachines("machinenumber") & "")
|
|
Response.Write("<option value='" & rsMachines("machineid") & "' data-alias='" & Server.HTMLEncode(machineAlias) & "' data-number='" & Server.HTMLEncode(machineNum) & "'>" & Server.HTMLEncode(displayText) & "</option>")
|
|
End If
|
|
|
|
rsMachines.MoveNext
|
|
Wend
|
|
|
|
rsMachines.Close
|
|
Set rsMachines = Nothing
|
|
%>
|
|
</select>
|
|
<small class="form-text text-muted">Optional: Associate with a machine/location. Otherwise, use map coordinates below.</small>
|
|
</div>
|
|
|
|
<!-- Hidden coordinate fields - populated by map selector -->
|
|
<input type="hidden" id="maptop" name="maptop" value="50">
|
|
<input type="hidden" id="mapleft" name="mapleft" value="50">
|
|
|
|
<h6 class="mt-4 mb-3"><i class="zmdi zmdi-map"></i> Map Location</h6>
|
|
<div class="form-group">
|
|
<button type="button" class="btn btn-secondary" id="selectLocationBtn">
|
|
<i class="zmdi zmdi-pin"></i> Select Location on Map
|
|
</button>
|
|
<div id="coordinateDisplay" style="margin-top:10px; color:#aaa; font-size:13px;">
|
|
Current position: X=50, Y=50 (default)
|
|
</div>
|
|
<small class="form-text text-muted">Specify the exact position of this printer on the shop floor map</small>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="form-group text-right">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="zmdi zmdi-check"></i> Add Printer
|
|
</button>
|
|
<a href="./displayprinters.asp" class="btn btn-secondary btn-lg">
|
|
<i class="zmdi zmdi-close"></i> Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- 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">
|
|
</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>
|
|
|
|
<!-- simplebar js -->
|
|
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
|
|
<!-- sidebar-menu js -->
|
|
<script src="assets/js/sidebar-menu.js"></script>
|
|
|
|
<!-- Custom scripts -->
|
|
<script src="assets/js/app-script.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Show/hide new model section
|
|
$('#addModelBtn, #modelid').on('change click', function() {
|
|
if ($('#modelid').val() === 'new' || $(this).attr('id') === 'addModelBtn') {
|
|
$('#modelid').val('new');
|
|
$('#newModelSection').slideDown();
|
|
$('#newmodelnumber').prop('required', true);
|
|
$('#newvendorid').prop('required', true);
|
|
}
|
|
});
|
|
|
|
$('#cancelNewModel').on('click', function() {
|
|
$('#newModelSection').slideUp();
|
|
$('#newVendorSection').slideUp();
|
|
$('#modelid').val('');
|
|
$('#newmodelnumber').val('').prop('required', false);
|
|
$('#newvendorid').val('').prop('required', false);
|
|
$('#newmodelnotes').val('');
|
|
$('#newmodeldocpath').val('');
|
|
$('#newvendorname').val('').prop('required', false);
|
|
});
|
|
|
|
// Show/hide new vendor section
|
|
$('#addVendorBtn, #newvendorid').on('change click', function() {
|
|
if ($('#newvendorid').val() === 'new' || $(this).attr('id') === 'addVendorBtn') {
|
|
$('#newvendorid').val('new');
|
|
$('#newVendorSection').slideDown();
|
|
$('#newvendorname').prop('required', true);
|
|
}
|
|
});
|
|
|
|
$('#cancelNewVendor').on('click', function() {
|
|
$('#newVendorSection').slideUp();
|
|
$('#newvendorid').val('');
|
|
$('#newvendorname').val('').prop('required', false);
|
|
});
|
|
|
|
// Auto-populate printer name and FQDN
|
|
function generatePrinterName() {
|
|
var csfName = $('#printercsfname').val().trim();
|
|
var machineOption = $('#machineid option:selected');
|
|
var modelOption = $('#modelid option:selected');
|
|
|
|
// Use attr() instead of data() for reliable reading
|
|
var vendor = modelOption.attr('data-vendor') || '';
|
|
var model = modelOption.attr('data-model') || '';
|
|
var machineAlias = machineOption.attr('data-alias') || '';
|
|
var machineNumber = machineOption.attr('data-number') || '';
|
|
|
|
// Only generate if we have model AND (machine OR CSF name)
|
|
if (!vendor || (!csfName && !machineAlias && !machineNumber)) {
|
|
return; // Not enough info yet
|
|
}
|
|
|
|
// Use alias if available, otherwise machine number
|
|
var location = machineAlias || machineNumber;
|
|
location = location.replace(/\s+/g, '').replace('Machine', '');
|
|
|
|
// Extract short description from model
|
|
var shortDesc = '';
|
|
var cleanModel = model.replace(/\s+/g, '');
|
|
if (cleanModel.indexOf('ColorLaserJet') >= 0) shortDesc = 'ColorLaserJet';
|
|
else if (cleanModel.indexOf('LaserJetPro') >= 0) shortDesc = 'LaserJetPro';
|
|
else if (cleanModel.indexOf('LaserJet') >= 0) shortDesc = 'LaserJet';
|
|
else if (cleanModel.indexOf('Altalink') >= 0) shortDesc = 'Altalink';
|
|
else if (cleanModel.indexOf('Versalink') >= 0) shortDesc = 'Versalink';
|
|
else if (cleanModel.indexOf('DesignJet') >= 0) shortDesc = 'DesignJet';
|
|
else if (cleanModel.indexOf('DTC') >= 0) shortDesc = 'DTC';
|
|
else {
|
|
// Extract letters before first number
|
|
var match = cleanModel.match(/^([A-Za-z]+)/);
|
|
shortDesc = match ? match[1] : cleanModel;
|
|
}
|
|
|
|
// Build name: CSFName-Location-Vendor-Description or Location-Vendor-Description
|
|
var parts = [];
|
|
if (csfName && csfName !== 'NONE') parts.push(csfName);
|
|
if (location && location.toLowerCase() !== csfName.toLowerCase()) parts.push(location);
|
|
if (vendor) parts.push(vendor + shortDesc);
|
|
|
|
var printerName = parts.join('-');
|
|
if (printerName) {
|
|
$('#printerwindowsname').val(printerName);
|
|
}
|
|
}
|
|
|
|
function generateFQDN() {
|
|
var ip = $('#ipaddress').val().trim();
|
|
if (ip && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)) {
|
|
var fqdn = 'Printer-' + ip.replace(/\./g, '-') + '.printer.geaerospace.net';
|
|
$('#fqdn').val(fqdn);
|
|
}
|
|
}
|
|
|
|
// Trigger auto-populate on field changes
|
|
$('#printercsfname, #machineid, #modelid').on('change keyup', function() {
|
|
generatePrinterName();
|
|
});
|
|
|
|
$('#ipaddress').on('change keyup blur', function() {
|
|
generateFQDN();
|
|
});
|
|
|
|
// Form validation
|
|
$('form').on('submit', function(e) {
|
|
// If adding new model, make sure fields are filled
|
|
if ($('#modelid').val() === 'new') {
|
|
if ($('#newmodelnumber').val().trim() === '') {
|
|
e.preventDefault();
|
|
alert('Please enter a model number or select an existing model');
|
|
$('#newmodelnumber').focus();
|
|
return false;
|
|
}
|
|
if ($('#newvendorid').val() === '' || $('#newvendorid').val() === 'new') {
|
|
// If vendor is 'new', check vendor name
|
|
if ($('#newvendorid').val() === 'new') {
|
|
if ($('#newvendorname').val().trim() === '') {
|
|
e.preventDefault();
|
|
alert('Please enter a vendor name or select an existing vendor');
|
|
$('#newvendorname').focus();
|
|
return false;
|
|
}
|
|
} else {
|
|
e.preventDefault();
|
|
alert('Please select a vendor for the new model');
|
|
$('#newvendorid').focus();
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Map Location Picker Modal -->
|
|
<link rel="stylesheet" href="./leaflet/leaflet.css">
|
|
<script src="./leaflet/leaflet.js"></script>
|
|
|
|
<style>
|
|
#mapPickerModal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 10000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.7);
|
|
}
|
|
#mapPickerContent {
|
|
background-color: #1f1f1f;
|
|
margin: 2% auto;
|
|
padding: 0;
|
|
border: 2px solid #667eea;
|
|
border-radius: 8px;
|
|
width: 70%;
|
|
max-width: 900px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
|
|
}
|
|
#mapPickerHeader {
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 6px 6px 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
#mapPickerClose {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 26px;
|
|
}
|
|
#mapPickerClose:hover {
|
|
opacity: 0.8;
|
|
}
|
|
#mapPickerBody {
|
|
padding: 0;
|
|
background: #2a2a2a;
|
|
}
|
|
#locationPickerMap {
|
|
width: 100%;
|
|
height: 500px;
|
|
background-color: #1a1a1a;
|
|
}
|
|
#mapPickerFooter {
|
|
padding: 12px 15px;
|
|
background: #1a1a1a;
|
|
border-radius: 0 0 6px 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
#selectedCoords {
|
|
color: #aaa;
|
|
font-size: 13px;
|
|
}
|
|
.map-picker-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-left: 8px;
|
|
}
|
|
#confirmLocationBtn {
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
#confirmLocationBtn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
#cancelLocationBtn {
|
|
background: #555;
|
|
color: white;
|
|
}
|
|
#cancelLocationBtn:hover {
|
|
background: #666;
|
|
}
|
|
</style>
|
|
|
|
<div id="mapPickerModal">
|
|
<div id="mapPickerContent">
|
|
<div id="mapPickerHeader">
|
|
<span style="font-size:14px; font-weight:600;"><i class="zmdi zmdi-pin"></i> Select Printer Location</span>
|
|
<button id="mapPickerClose">×</button>
|
|
</div>
|
|
<div id="mapPickerBody">
|
|
<div id="locationPickerMap"></div>
|
|
</div>
|
|
<div id="mapPickerFooter">
|
|
<span id="selectedCoords">Click on the map to select a location</span>
|
|
<div>
|
|
<button id="cancelLocationBtn" class="map-picker-btn">Cancel</button>
|
|
<button id="confirmLocationBtn" class="map-picker-btn">Confirm Location</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var pickerMap = null;
|
|
var currentMarker = null;
|
|
var selectedX = null;
|
|
var selectedY = null;
|
|
|
|
// Get current theme
|
|
var bodyClass = document.body.className;
|
|
var themeMatch = bodyClass.match(/bg-theme(\d+)/);
|
|
var theme = themeMatch ? 'bg-theme' + themeMatch[1] : 'bg-theme1';
|
|
|
|
// Theme-specific configurations
|
|
var themeConfig = {
|
|
'bg-theme1': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme2': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme3': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme4': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme5': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme6': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme7': { bg: '#0c675e', filter: 'brightness(0.8) contrast(1.1) hue-rotate(-10deg)' },
|
|
'bg-theme8': { bg: '#4a3020', filter: 'brightness(0.75) contrast(1.1) saturate(0.8)' },
|
|
'bg-theme9': { bg: '#29323c', filter: 'brightness(0.7) contrast(1.1)' },
|
|
'bg-theme10': { bg: '#795548', filter: 'brightness(0.8) contrast(1.05) sepia(0.2)' },
|
|
'bg-theme11': { bg: '#1565C0', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)' },
|
|
'bg-theme12': { bg: '#65379b', filter: 'brightness(0.8) contrast(1.1) hue-rotate(5deg)' },
|
|
'bg-theme13': { bg: '#d03050', filter: 'brightness(0.85) contrast(1.05) saturate(0.9)' },
|
|
'bg-theme14': { bg: '#2a7a2e', filter: 'brightness(0.8) contrast(1.1) saturate(0.95)' },
|
|
'bg-theme15': { bg: '#4643d3', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)' },
|
|
'bg-theme16': { bg: '#6a11cb', filter: 'brightness(0.8) contrast(1.1)' }
|
|
};
|
|
|
|
var config = themeConfig[theme] || { bg: '#1a1a1a', filter: 'brightness(0.7) contrast(1.1)' };
|
|
|
|
// Determine which map image to use based on theme
|
|
var lightThemes = ['bg-theme11', 'bg-theme13'];
|
|
var mapImage = lightThemes.includes(theme) ? './images/sitemap2025-light.png' : './images/sitemap2025-dark.png';
|
|
|
|
function updateCoordinateDisplay() {
|
|
if (selectedX !== null && selectedY !== null) {
|
|
var displayY = 2550 - selectedY;
|
|
$('#selectedCoords').text('Selected: X=' + Math.round(selectedX) + ', Y=' + Math.round(displayY));
|
|
} else {
|
|
$('#selectedCoords').text('Click on the map to select a location');
|
|
}
|
|
}
|
|
|
|
$('#selectLocationBtn').click(function() {
|
|
$('#mapPickerModal').fadeIn(200);
|
|
|
|
if (!pickerMap) {
|
|
// Initialize map
|
|
pickerMap = L.map('locationPickerMap', {
|
|
crs: L.CRS.Simple,
|
|
minZoom: -3
|
|
});
|
|
|
|
var bounds = [[0, 0], [2550, 3300]];
|
|
var image = L.imageOverlay(mapImage, bounds);
|
|
|
|
// Apply theme-specific filter
|
|
image.on('load', function() {
|
|
var imgElement = this.getElement();
|
|
if (imgElement) {
|
|
imgElement.style.filter = config.filter;
|
|
}
|
|
});
|
|
|
|
image.addTo(pickerMap);
|
|
pickerMap.fitBounds(bounds);
|
|
|
|
// Add click handler
|
|
pickerMap.on('click', function(e) {
|
|
selectedX = e.latlng.lng;
|
|
selectedY = e.latlng.lat;
|
|
|
|
// Remove existing marker
|
|
if (currentMarker) {
|
|
pickerMap.removeLayer(currentMarker);
|
|
}
|
|
|
|
// Add new draggable marker
|
|
currentMarker = L.marker([selectedY, selectedX], {
|
|
draggable: true,
|
|
icon: L.divIcon({
|
|
className: 'custom-marker-icon',
|
|
html: '<div style="width:20px; height:20px; background:#667eea; border:3px solid #fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.5); cursor:move;"></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
})
|
|
}).addTo(pickerMap);
|
|
|
|
// Update coordinates when dragged
|
|
currentMarker.on('dragend', function(e) {
|
|
var position = e.target.getLatLng();
|
|
selectedX = position.lng;
|
|
selectedY = position.lat;
|
|
updateCoordinateDisplay();
|
|
});
|
|
|
|
updateCoordinateDisplay();
|
|
});
|
|
}
|
|
|
|
// Load existing coordinates if available
|
|
var existingLeft = $('#mapleft').val();
|
|
var existingTop = $('#maptop').val();
|
|
|
|
if (existingLeft && existingTop && existingLeft != '' && existingTop != '') {
|
|
selectedX = parseFloat(existingLeft);
|
|
selectedY = 2550 - parseFloat(existingTop);
|
|
|
|
if (currentMarker) {
|
|
pickerMap.removeLayer(currentMarker);
|
|
}
|
|
|
|
currentMarker = L.marker([selectedY, selectedX], {
|
|
draggable: true,
|
|
icon: L.divIcon({
|
|
className: 'custom-marker-icon',
|
|
html: '<div style="width:20px; height:20px; background:#667eea; border:3px solid #fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.5); cursor:move;"></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
})
|
|
}).addTo(pickerMap);
|
|
|
|
// Update coordinates when dragged
|
|
currentMarker.on('dragend', function(e) {
|
|
var position = e.target.getLatLng();
|
|
selectedX = position.lng;
|
|
selectedY = position.lat;
|
|
updateCoordinateDisplay();
|
|
});
|
|
|
|
// Pan to marker
|
|
pickerMap.panTo([selectedY, selectedX]);
|
|
|
|
updateCoordinateDisplay();
|
|
}
|
|
|
|
setTimeout(function() {
|
|
pickerMap.invalidateSize();
|
|
}, 250);
|
|
});
|
|
|
|
$('#confirmLocationBtn').click(function() {
|
|
if (selectedX !== null && selectedY !== null) {
|
|
var convertedY = 2550 - selectedY;
|
|
$('#mapleft').val(Math.round(selectedX));
|
|
$('#maptop').val(Math.round(convertedY));
|
|
|
|
// Update the display on the form
|
|
$('#coordinateDisplay').html('Current position: X=' + Math.round(selectedX) + ', Y=' + Math.round(convertedY));
|
|
|
|
updateCoordinateDisplay();
|
|
$('#mapPickerModal').fadeOut(200);
|
|
} else {
|
|
alert('Please select a location on the map first.');
|
|
}
|
|
});
|
|
|
|
$('#cancelLocationBtn, #mapPickerClose').click(function() {
|
|
$('#mapPickerModal').fadeOut(200);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
<%
|
|
objConn.Close
|
|
%>
|