Files
shopdb/addmachine.asp
cproudlock 1b7946900c Remove category grouping from machine type dropdowns
Simplified machine type dropdowns to flat list without category
grouping. This removes dependency on the 'category' column in
machinetypes table which may not exist on all environments.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-22 16:24:07 -05:00

967 lines
44 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="container-fluid">
<div class="row mt-3">
<div class="col-lg-10 offset-lg-1">
<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-memory"></i> Add New Equipment
</h5>
<a href="./displaymachines.asp" class="btn btn-sm btn-secondary">
<i class="zmdi zmdi-arrow-left"></i> Back to Machines
</a>
</div>
<form method="post" action="./savemachinedirect.asp" id="addMachineForm">
<!-- Tab Navigation -->
<ul class="nav nav-tabs nav-tabs-primary top-icon" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab_basic" role="tab" aria-selected="true">
<i class="zmdi zmdi-info"></i><span class="hidden-xs-down"> Basic Info</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab_network" role="tab" aria-selected="false">
<i class="zmdi zmdi-network"></i><span class="hidden-xs-down"> Network</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab_relationships" role="tab" aria-selected="false">
<i class="zmdi zmdi-link"></i><span class="hidden-xs-down"> Relationships</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab_compliance" role="tab" aria-selected="false">
<i class="zmdi zmdi-shield-security"></i><span class="hidden-xs-down"> Compliance</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab_location" role="tab" aria-selected="false">
<i class="zmdi zmdi-pin"></i><span class="hidden-xs-down"> Location</span>
</a>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content p-3">
<!-- ============================================================ -->
<!-- TAB 1: BASIC INFO -->
<!-- ============================================================ -->
<div class="tab-pane fade show active" id="tab_basic" role="tabpanel">
<div class="form-group">
<label for="machinenumber">Machine Number <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="machinenumber" name="machinenumber"
required maxlength="50" placeholder="e.g., M-1001">
<small class="form-text text-muted">Unique identifier for this machine</small>
</div>
<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 Model --</option>
<%
Dim strSQL, rsModels
strSQL = "SELECT models.*, vendors.vendor FROM models " &_
"INNER JOIN vendors ON models.vendorid = vendors.vendorid " &_
"WHERE vendors.ismachine = 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") & "'>" & 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>
<!-- New Model Section -->
<div id="newModelSection" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #667eea; background-color:rgba(102,126,234,0.05); margin-bottom:15px;">
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New 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="50">
</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 * FROM vendors WHERE ismachine = 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>
<!-- New Vendor Section -->
<div id="newVendorSectionMachine" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #764ba2; background-color:rgba(118,75,162,0.05); 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">
</div>
</div>
<div class="form-group">
<label for="newmodelmachinetypeid">Machine Type <span class="text-danger">*</span></label>
<div class="input-group">
<select class="form-control" id="newmodelmachinetypeid" name="newmodelmachinetypeid">
<option value="">-- Select Machine Type --</option>
<%
Dim rsMachineTypes
strSQL = "SELECT machinetypeid, machinetype FROM machinetypes WHERE isactive = 1 ORDER BY machinetype ASC"
Set rsMachineTypes = objconn.Execute(strSQL)
While Not rsMachineTypes.EOF
Response.Write("<option value='" & rsMachineTypes("machinetypeid") & "'>" & Server.HTMLEncode(rsMachineTypes("machinetype")) & "</option>")
rsMachineTypes.MoveNext
Wend
rsMachineTypes.Close
Set rsMachineTypes = Nothing
%>
<option value="new">+ Add New Machine Type</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-info" id="addMachineTypeBtn">
<i class="zmdi zmdi-plus"></i> New
</button>
</div>
</div>
</div>
<!-- New Machine Type Section -->
<div id="newMachineTypeSection" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #f093fb; background-color:rgba(240,147,251,0.05); margin-bottom:15px;">
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Machine Type</h6>
<div class="form-group">
<label for="newmachinetype">Machine Type Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="newmachinetype" name="newmachinetype" maxlength="50" placeholder="e.g., 5-Axis Mill">
</div>
<div class="form-group">
<label for="newmachinedescription">Description (Optional)</label>
<input type="text" class="form-control" id="newmachinedescription" name="newmachinedescription" maxlength="255">
</div>
<div class="form-group">
<label for="newfunctionalaccountid">Functional Account <span class="text-danger">*</span></label>
<div class="input-group">
<select class="form-control" id="newfunctionalaccountid" name="newfunctionalaccountid">
<option value="">-- Select Account --</option>
<%
Dim rsFunctionalAccounts
strSQL = "SELECT * FROM functionalaccounts WHERE isactive = 1 ORDER BY functionalaccount ASC"
Set rsFunctionalAccounts = objconn.Execute(strSQL)
While Not rsFunctionalAccounts.EOF
Response.Write("<option value='" & rsFunctionalAccounts("functionalaccountid") & "'>" & Server.HTMLEncode(rsFunctionalAccounts("functionalaccount")) & "</option>")
rsFunctionalAccounts.MoveNext
Wend
rsFunctionalAccounts.Close
Set rsFunctionalAccounts = Nothing
%>
<option value="new">+ Add New Functional Account</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-info" id="addFunctionalAccountBtn">
<i class="zmdi zmdi-plus"></i> New
</button>
</div>
</div>
</div>
<!-- New Functional Account Section -->
<div id="newFunctionalAccountSection" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #4facfe; background-color:rgba(79,172,254,0.05); margin-bottom:15px;">
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Functional Account</h6>
<div class="form-group">
<label for="newfunctionalaccount">Account Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="newfunctionalaccount" name="newfunctionalaccount" maxlength="50" placeholder="e.g., ACCT1234">
</div>
<div class="form-group">
<label for="newfunctionalaccountdescription">Description (Optional)</label>
<textarea class="form-control" id="newfunctionalaccountdescription" name="newfunctionalaccountdescription" rows="2" maxlength="255"></textarea>
</div>
</div>
</div>
<div class="form-group">
<label for="newmodelimage">Image Filename (Optional)</label>
<input type="text" class="form-control" id="newmodelimage" name="newmodelimage" maxlength="100" placeholder="e.g., haas-vf2.jpg">
<small class="form-text text-muted">Filename of image in images/machines/</small>
</div>
</div>
<div class="form-group">
<label for="businessunitid">Business Unit <span class="text-danger">*</span></label>
<div class="input-group">
<select class="form-control" id="businessunitid" name="businessunitid" required>
<option value="">-- Select BU --</option>
<%
Dim rsBU
strSQL = "SELECT * FROM businessunits WHERE isactive = 1 ORDER BY businessunit ASC"
Set rsBU = objconn.Execute(strSQL)
While Not rsBU.EOF
Response.Write("<option value='" & rsBU("businessunitid") & "'>" & Server.HTMLEncode(rsBU("businessunit")) & "</option>")
rsBU.MoveNext
Wend
rsBU.Close
Set rsBU = Nothing
%>
<option value="new">+ Add New Business Unit</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-info" id="addBusinessUnitBtn">
<i class="zmdi zmdi-plus"></i> New
</button>
</div>
</div>
</div>
<!-- New Business Unit Section -->
<div id="newBusinessUnitSection" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #667eea; background-color:rgba(102,126,234,0.05); margin-bottom:15px;">
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Business Unit</h6>
<div class="form-group">
<label for="newbusinessunit">Business Unit Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="newbusinessunit" name="newbusinessunit" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="alias">Alias (Optional)</label>
<input type="text" class="form-control" id="alias" name="alias"
maxlength="50" placeholder="Friendly name or nickname">
</div>
<div class="form-group">
<label for="machinenotes">Notes (Optional)</label>
<textarea class="form-control" id="machinenotes" name="machinenotes"
rows="3" placeholder="Additional notes about this machine"></textarea>
</div>
</div>
<!-- ============================================================ -->
<!-- TAB 2: NETWORK -->
<!-- ============================================================ -->
<div class="tab-pane fade" id="tab_network" role="tabpanel">
<h5 class="mb-3"><i class="zmdi zmdi-network"></i> Network Communications</h5>
<p class="text-muted">Configure network interfaces for this equipment. You can add up to 3 interfaces.</p>
<!-- Interface 1 -->
<div class="card mb-3">
<div class="card-header bg-primary text-white">
<i class="zmdi zmdi-network-setting"></i> Interface 1 (Primary)
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip1">IP Address</label>
<input type="text" class="form-control" id="ip1" name="ip1"
placeholder="192.168.1.100"
pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$">
<small class="form-text text-muted">Example: 192.168.1.100</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="mac1">MAC Address</label>
<input type="text" class="form-control" id="mac1" name="mac1"
placeholder="00:1A:2B:3C:4D:5E"
pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$">
<small class="form-text text-muted">Example: 00:1A:2B:3C:4D:5E</small>
</div>
</div>
</div>
</div>
</div>
<!-- Interface 2 -->
<div class="card mb-3">
<div class="card-header bg-secondary text-white">
<i class="zmdi zmdi-network-setting"></i> Interface 2 (Optional)
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip2">IP Address</label>
<input type="text" class="form-control" id="ip2" name="ip2"
placeholder="192.168.1.101"
pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="mac2">MAC Address</label>
<input type="text" class="form-control" id="mac2" name="mac2"
placeholder="00:1A:2B:3C:4D:5F"
pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$">
</div>
</div>
</div>
</div>
</div>
<!-- Interface 3 -->
<div class="card mb-3">
<div class="card-header bg-secondary text-white">
<i class="zmdi zmdi-network-setting"></i> Interface 3 (Optional)
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip3">IP Address</label>
<input type="text" class="form-control" id="ip3" name="ip3"
placeholder="192.168.1.102"
pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="mac3">MAC Address</label>
<input type="text" class="form-control" id="mac3" name="mac3"
placeholder="00:1A:2B:3C:4D:60"
pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================ -->
<!-- TAB 3: RELATIONSHIPS -->
<!-- ============================================================ -->
<div class="tab-pane fade" id="tab_relationships" role="tabpanel">
<h5 class="mb-3"><i class="zmdi zmdi-link"></i> Machine Relationships</h5>
<p class="text-muted">Define relationships between this equipment and other machines or PCs.</p>
<div class="form-group">
<label for="controllingpc">Controlling PC</label>
<select class="form-control" id="controllingpc" name="controllingpc">
<option value="">-- None --</option>
<%
Dim rsControlPCs
strSQL = "SELECT machineid, machinenumber, hostname FROM machines WHERE pctypeid IS NOT NULL AND isactive = 1 ORDER BY machinenumber ASC"
Set rsControlPCs = objconn.Execute(strSQL)
While Not rsControlPCs.EOF
Dim controlPCDisplay
controlPCDisplay = ""
If NOT IsNull(rsControlPCs("hostname")) AND rsControlPCs("hostname") <> "" Then
controlPCDisplay = rsControlPCs("hostname") & ""
ElseIf NOT IsNull(rsControlPCs("machinenumber")) AND rsControlPCs("machinenumber") <> "" Then
controlPCDisplay = rsControlPCs("machinenumber") & ""
Else
controlPCDisplay = "Machine ID " & rsControlPCs("machineid")
End If
Response.Write("<option value='" & rsControlPCs("machineid") & "'>" & Server.HTMLEncode(controlPCDisplay) & "</option>")
rsControlPCs.MoveNext
Wend
rsControlPCs.Close
Set rsControlPCs = Nothing
%>
</select>
<small class="form-text text-muted">Select a PC that controls this equipment</small>
</div>
<div class="form-group">
<label for="dualpathid">Dualpath / Redundant Machine</label>
<select class="form-control" id="dualpathid" name="dualpathid">
<option value="">-- None --</option>
<%
Dim rsDualpath
strSQL = "SELECT machineid, machinenumber, alias FROM machines WHERE pctypeid IS NULL AND isactive = 1 ORDER BY machinenumber ASC"
Set rsDualpath = objconn.Execute(strSQL)
While Not rsDualpath.EOF
Dim dualpathDisplay
dualpathDisplay = ""
If NOT IsNull(rsDualpath("machinenumber")) AND rsDualpath("machinenumber") <> "" Then
dualpathDisplay = rsDualpath("machinenumber") & ""
If NOT IsNull(rsDualpath("alias")) AND rsDualpath("alias") <> "" Then
dualpathDisplay = dualpathDisplay & " (" & rsDualpath("alias") & ")"
End If
Else
dualpathDisplay = "Machine ID " & rsDualpath("machineid")
End If
Response.Write("<option value='" & rsDualpath("machineid") & "'>" & Server.HTMLEncode(dualpathDisplay) & "</option>")
rsDualpath.MoveNext
Wend
rsDualpath.Close
Set rsDualpath = Nothing
%>
</select>
<small class="form-text text-muted">Select a backup/redundant machine (creates bidirectional relationship)</small>
</div>
</div>
<!-- ============================================================ -->
<!-- TAB 4: COMPLIANCE -->
<!-- ============================================================ -->
<div class="tab-pane fade" id="tab_compliance" role="tabpanel">
<h5 class="mb-3"><i class="zmdi zmdi-shield-security"></i> Compliance & Security</h5>
<p class="text-muted">Track compliance and security information for this equipment.</p>
<div class="form-group">
<label for="thirdpartymanaged">Third Party Managed</label>
<select class="form-control" id="thirdpartymanaged" name="thirdpartymanaged">
<option value="NA">N/A</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<small class="form-text text-muted">Is this equipment managed by a third party?</small>
</div>
<div class="form-group">
<label for="thirdpartyvendorid">Third Party Vendor</label>
<div class="input-group">
<select class="form-control" id="thirdpartyvendorid" name="thirdpartyvendorid">
<option value="">-- Select Vendor --</option>
<%
Dim rsThirdPartyVendors
strSQL = "SELECT vendorid, vendor FROM vendors WHERE isactive = 1 ORDER BY vendor ASC"
Set rsThirdPartyVendors = objconn.Execute(strSQL)
While Not rsThirdPartyVendors.EOF
Response.Write("<option value='" & rsThirdPartyVendors("vendorid") & "'>" & Server.HTMLEncode(rsThirdPartyVendors("vendor") & "") & "</option>")
rsThirdPartyVendors.MoveNext
Wend
rsThirdPartyVendors.Close
Set rsThirdPartyVendors = Nothing
%>
<option value="new">+ Add New Vendor</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-info" id="addThirdPartyVendorBtn">
<i class="zmdi zmdi-plus"></i> New
</button>
</div>
</div>
<small class="form-text text-muted">Select the vendor managing this equipment</small>
</div>
<!-- New Third Party Vendor Section -->
<div id="newThirdPartyVendorSection" style="display:none; margin-left:20px; padding:15px; border-left:3px solid #667eea; background-color:rgba(102,126,234,0.05); margin-bottom:15px;">
<h6 class="mb-3"><i class="zmdi zmdi-plus-circle"></i> New Third Party Vendor</h6>
<div class="form-group">
<label for="newthirdpartyvendorname">Vendor Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="newthirdpartyvendorname" name="newthirdpartyvendorname" maxlength="50">
<small class="form-text text-muted">This vendor will be added to the system</small>
</div>
</div>
<div class="form-group">
<label for="otassetsystem">OT Asset System</label>
<input type="text" class="form-control" id="otassetsystem" name="otassetsystem" maxlength="100" placeholder="e.g., Production Control">
<small class="form-text text-muted">Operational Technology asset classification</small>
</div>
<div class="form-group">
<label for="dodassettype">DoD Asset Device Type</label>
<input type="text" class="form-control" id="dodassettype" name="dodassettype" maxlength="100" placeholder="e.g., CNC Lathe">
<small class="form-text text-muted">Department of Defense asset classification</small>
</div>
</div>
<!-- ============================================================ -->
<!-- TAB 5: LOCATION -->
<!-- ============================================================ -->
<div class="tab-pane fade" id="tab_location" role="tabpanel">
<h5 class="mb-3"><i class="zmdi zmdi-pin"></i> Location</h5>
<p class="text-muted">Set the physical location of this equipment on the shop floor map.</p>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Map X Coordinate:</label>
<div class="col-lg-9">
<input type="text" id="mapleft" name="mapleft" class="form-control" placeholder="Leave blank if unknown">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Map Y Coordinate:</label>
<div class="col-lg-9">
<input type="text" id="maptop" name="maptop" class="form-control" placeholder="Leave blank if unknown">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label"></label>
<div class="col-lg-9">
<button type="button" class="btn btn-info" id="selectLocationBtn">
<i class="zmdi zmdi-pin"></i> Select Location on Map
</button>
</div>
</div>
</div>
</div><!-- End Tab Content -->
<!-- Submit Buttons -->
<hr>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">
<i class="zmdi zmdi-check"></i> Save Equipment
</button>
<a href="./displaymachines.asp" class="btn btn-secondary btn-lg">
<i class="zmdi zmdi-close"></i> Cancel
</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End Row -->
</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">
</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>
<!-- Map Location Picker Modal -->
<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: 15px 20px;
border-radius: 6px 6px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#mapPickerClose {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
#mapPickerClose:hover {
background: rgba(255, 255, 255, 0.2);
}
#mapPickerBody {
padding: 0;
background: #2a2a2a;
}
#locationPickerMap {
width: 100%;
height: 500px;
background-color: #1a1a1a;
}
#mapPickerFooter {
padding: 12px 20px;
background: #1f1f1f;
border-top: 1px solid #444;
border-radius: 0 0 6px 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
#selectedCoords {
color: #aaa;
font-size: 14px;
}
.map-picker-btn {
padding: 10px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.map-picker-btn-primary {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
}
.map-picker-btn-primary:hover {
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.map-picker-btn-secondary {
background: #444;
color: #ddd;
}
.map-picker-btn-secondary:hover {
background: #555;
}
</style>
<div id="mapPickerModal">
<div id="mapPickerContent">
<div id="mapPickerHeader">
<h5 style="margin:0;"><i class="zmdi zmdi-pin"></i> Select Location on Map</h5>
<button id="mapPickerClose">&times;</button>
</div>
<div id="mapPickerBody">
<div id="locationPickerMap"></div>
</div>
<div id="mapPickerFooter">
<div id="selectedCoords">No location selected</div>
<div>
<button class="map-picker-btn map-picker-btn-secondary" id="cancelLocationBtn">Cancel</button>
<button class="map-picker-btn map-picker-btn-primary" id="confirmLocationBtn">Confirm Location</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Model section toggle
$('#modelid').on('change', function() {
if ($(this).val() === 'new') {
$('#newModelSection').slideDown();
} else {
$('#newModelSection').slideUp();
}
});
$('#addModelBtn').on('click', function(e) {
e.preventDefault();
$('#modelid').val('new').trigger('change');
});
// Vendor section toggle
$('#newvendorid').on('change', function() {
if ($(this).val() === 'new') {
$('#newVendorSectionMachine').slideDown();
} else {
$('#newVendorSectionMachine').slideUp();
}
});
$('#addVendorBtn').on('click', function(e) {
e.preventDefault();
$('#newvendorid').val('new').trigger('change');
});
// Machine Type section toggle
$('#newmodelmachinetypeid').on('change', function() {
if ($(this).val() === 'new') {
$('#newMachineTypeSection').slideDown();
} else {
$('#newMachineTypeSection').slideUp();
}
});
$('#addMachineTypeBtn').on('click', function(e) {
e.preventDefault();
$('#newmodelmachinetypeid').val('new').trigger('change');
});
// Functional Account section toggle
$('#newfunctionalaccountid').on('change', function() {
if ($(this).val() === 'new') {
$('#newFunctionalAccountSection').slideDown();
} else {
$('#newFunctionalAccountSection').slideUp();
}
});
$('#addFunctionalAccountBtn').on('click', function(e) {
e.preventDefault();
$('#newfunctionalaccountid').val('new').trigger('change');
});
// Business Unit section toggle
$('#businessunitid').on('change', function() {
if ($(this).val() === 'new') {
$('#newBusinessUnitSection').slideDown();
} else {
$('#newBusinessUnitSection').slideUp();
}
});
$('#addBusinessUnitBtn').on('click', function(e) {
e.preventDefault();
$('#businessunitid').val('new').trigger('change');
});
// Third Party Vendor section toggle (in Compliance tab)
$('#thirdpartyvendorid').on('change', function() {
if ($(this).val() === 'new') {
$('#newThirdPartyVendorSection').slideDown();
} else {
$('#newThirdPartyVendorSection').slideUp();
}
});
$('#addThirdPartyVendorBtn').on('click', function(e) {
e.preventDefault();
$('#thirdpartyvendorid').val('new').trigger('change');
});
// Map picker
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);
currentMarker.on('dragend', function(e) {
var position = e.target.getLatLng();
selectedX = position.lng;
selectedY = position.lat;
updateCoordinateDisplay();
});
pickerMap.setView([selectedY, selectedX], pickerMap.getZoom());
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));
$('#mapPickerModal').fadeOut(200);
} else {
alert('Please click on the map to select a location first.');
}
});
$('#cancelLocationBtn, #mapPickerClose').click(function() {
$('#mapPickerModal').fadeOut(200);
});
});
</script>
</body>
</html>
<%
objConn.Close
%>