|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Comprehensive Permit to Work (PTW) Application</title> |
|
|
<style> |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
margin: 0; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: #f4f7fa; |
|
|
color: #333; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 20px; |
|
|
} |
|
|
#app { |
|
|
max-width: 1100px; |
|
|
width: 100%; |
|
|
background: #fff; |
|
|
padding: 30px 40px; |
|
|
box-shadow: 0 0 20px rgb(0 0 0 / 0.1); |
|
|
border-radius: 12px; |
|
|
} |
|
|
h1 { |
|
|
margin-bottom: 10px; |
|
|
color: #00467f; |
|
|
} |
|
|
h2 { |
|
|
color: #006bb3; |
|
|
margin-top: 40px; |
|
|
margin-bottom: 15px; |
|
|
border-bottom: 3px solid #0077cc; |
|
|
padding-bottom: 5px; |
|
|
} |
|
|
|
|
|
|
|
|
.main-tabs { |
|
|
display: flex; |
|
|
margin-top: 15px; |
|
|
border-bottom: 2px solid #d3d9e6; |
|
|
gap: 20px; |
|
|
user-select: none; |
|
|
} |
|
|
.main-tab { |
|
|
padding: 12px 26px; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
border-radius: 10px 10px 0 0; |
|
|
background: #e9f0f6; |
|
|
color: #0059b3; |
|
|
box-shadow: inset 0 3px 7px rgb(0 71 127 / 0.1); |
|
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
|
} |
|
|
.main-tab:hover:not(.active) { |
|
|
background-color: #c6d9f2; |
|
|
} |
|
|
.main-tab.active { |
|
|
background-color: #0077cc; |
|
|
color: white; |
|
|
box-shadow: 0 6px 10px rgb(0 119 204 / 0.3); |
|
|
border-bottom: 2px solid white; |
|
|
} |
|
|
|
|
|
|
|
|
.tabs { |
|
|
display: flex; |
|
|
margin-top: 15px; |
|
|
border-bottom: 2px solid #d3d9e6; |
|
|
gap: 20px; |
|
|
user-select: none; |
|
|
} |
|
|
.tab { |
|
|
padding: 10px 22px; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
border-radius: 10px 10px 0 0; |
|
|
background: #e9f0f6; |
|
|
color: #0059b3; |
|
|
box-shadow: inset 0 3px 7px rgb(0 71 127 / 0.1); |
|
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
|
} |
|
|
.tab:hover:not(.active) { |
|
|
background-color: #c6d9f2; |
|
|
} |
|
|
.tab.active { |
|
|
background-color: #0077cc; |
|
|
color: white; |
|
|
box-shadow: 0 6px 10px rgb(0 119 204 / 0.3); |
|
|
border-bottom: 2px solid white; |
|
|
} |
|
|
|
|
|
|
|
|
form { |
|
|
background: #e9f0f6; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
box-shadow: inset 1px 1px 5px rgb(0 71 127 / 0.1); |
|
|
} |
|
|
form .row { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 15px 20px; |
|
|
} |
|
|
form label { |
|
|
flex: 1 1 160px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 5px; |
|
|
color: #004d99; |
|
|
} |
|
|
form input, form textarea, form select { |
|
|
flex: 2 1 280px; |
|
|
padding: 8px 10px; |
|
|
border: 1.5px solid #a9c4db; |
|
|
border-radius: 6px; |
|
|
font-size: 16px; |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
form input:focus, form textarea:focus, form select:focus { |
|
|
outline: none; |
|
|
border-color: #0077cc; |
|
|
} |
|
|
form textarea { |
|
|
resize: vertical; |
|
|
min-height: 60px; |
|
|
} |
|
|
.form-group { |
|
|
margin-bottom: 18px; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
|
|
|
.filter-container { |
|
|
margin-top: 10px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.filter-container label { |
|
|
font-weight: 600; |
|
|
color: #004d99; |
|
|
margin-right: 10px; |
|
|
} |
|
|
.filter-container input { |
|
|
padding: 6px 10px; |
|
|
border-radius: 6px; |
|
|
border: 1.5px solid #a9c4db; |
|
|
font-size: 16px; |
|
|
width: 220px; |
|
|
max-width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
button { |
|
|
background-color: #0077cc; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
padding: 12px 24px; |
|
|
font-size: 16px; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
margin-top: 10px; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
button:disabled { |
|
|
background-color: #7aaed9; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
button:hover:not(:disabled) { |
|
|
background-color: #005fa3; |
|
|
} |
|
|
.btn-approve { |
|
|
background-color: #308446; |
|
|
} |
|
|
.btn-approve:hover { |
|
|
background-color: #257234; |
|
|
} |
|
|
.btn-reject { |
|
|
background-color: #cc3b3b; |
|
|
} |
|
|
.btn-reject:hover { |
|
|
background-color: #a92b2b; |
|
|
} |
|
|
.btn-print { |
|
|
background-color: #0077cc; |
|
|
} |
|
|
.btn-print:hover { |
|
|
background-color: #005fa3; |
|
|
} |
|
|
|
|
|
|
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin-top: 15px; |
|
|
} |
|
|
thead { |
|
|
background: #0077cc; |
|
|
color: #fff; |
|
|
} |
|
|
thead th { |
|
|
padding: 12px 15px; |
|
|
text-align: left; |
|
|
} |
|
|
tbody tr { |
|
|
border-bottom: 1.5px solid #d6e4f3; |
|
|
transition: background-color 0.2s ease; |
|
|
} |
|
|
tbody tr:hover { |
|
|
background-color: #f0f7ff; |
|
|
cursor: pointer; |
|
|
} |
|
|
tbody td { |
|
|
padding: 12px 15px; |
|
|
vertical-align: middle; |
|
|
} |
|
|
.status-created { |
|
|
color: #3066BE; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-inprogress { |
|
|
color: #F5AB35; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-closed { |
|
|
color: #308446; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-pending { |
|
|
color: #f5a623; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-approved { |
|
|
color: #2e8b57; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-rejected { |
|
|
color: #cc3b3b; |
|
|
font-weight: 600; |
|
|
} |
|
|
.status-nonactive { |
|
|
color: #888888; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 100; |
|
|
left: 0; top: 0; right: 0; bottom: 0; |
|
|
background-color: rgba(0,0,0,0.6); |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
.modal.active { |
|
|
display: flex; |
|
|
} |
|
|
.modal-content { |
|
|
background: white; |
|
|
max-width: 600px; |
|
|
width: 90%; |
|
|
border-radius: 12px; |
|
|
padding: 25px 30px; |
|
|
box-shadow: 0 8px 30px rgb(0 0 0 / 0.15); |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
position: relative; |
|
|
} |
|
|
.modal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.modal-header h3 { |
|
|
margin: 0; |
|
|
color: #00467f; |
|
|
} |
|
|
.modal-close { |
|
|
font-size: 24px; |
|
|
font-weight: 700; |
|
|
cursor: pointer; |
|
|
color: #777; |
|
|
border: none; |
|
|
background: none; |
|
|
} |
|
|
.modal-close:hover { |
|
|
color: #00467f; |
|
|
} |
|
|
|
|
|
|
|
|
.printable-permit { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
padding: 20px; |
|
|
border: 1px solid #ccc; |
|
|
} |
|
|
.printable-permit h2 { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.printable-permit dl { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 2fr; |
|
|
gap: 8px 20px; |
|
|
} |
|
|
.printable-permit dt { |
|
|
font-weight: 700; |
|
|
color: #00467f; |
|
|
} |
|
|
.printable-permit dd { |
|
|
margin: 0 0 8px 0; |
|
|
white-space: pre-line; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 720px) { |
|
|
form .row { |
|
|
flex-direction: column; |
|
|
} |
|
|
form label, form input, form textarea, form select { |
|
|
flex: 1 1 100%; |
|
|
} |
|
|
.form-group { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
tbody td { |
|
|
padding: 10px 8px; |
|
|
} |
|
|
.printable-permit dl { |
|
|
grid-template-columns: 1fr 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.sr-only { |
|
|
position: absolute; |
|
|
width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="app"> |
|
|
<h1>Permit to Work (PTW) Management System</h1> |
|
|
<p>Manage work permits with creation, approval, monitoring, and closing for HSE compliance.</p> |
|
|
|
|
|
<nav class="main-tabs" role="tablist" aria-label="Main application tabs"> |
|
|
<div class="main-tab active" data-tab="create" role="tab" aria-selected="true" tabindex="0" aria-controls="createTabPanel" id="mainTabCreate">Create Permit</div> |
|
|
<div class="main-tab" data-tab="monitor" role="tab" aria-selected="false" tabindex="-1" aria-controls="monitorTabPanel" id="mainTabMonitor">Monitor Permits</div> |
|
|
<div class="main-tab" data-tab="approval" role="tab" aria-selected="false" tabindex="-1" aria-controls="approvalTabPanel" id="mainTabApproval">Approval</div> |
|
|
</nav> |
|
|
|
|
|
<section id="createTabPanel" role="tabpanel" tabindex="0" aria-labelledby="mainTabCreate"> |
|
|
<h2>Create New Permit</h2> |
|
|
<form id="createPermitForm" autocomplete="off"> |
|
|
<div class="form-group row"> |
|
|
<label for="workTitle">Work Title<span style="color:#cc0000">*</span></label> |
|
|
<input type="text" id="workTitle" name="workTitle" required placeholder="Brief work title" /> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="workDescription">Work Description<span style="color:#cc0000">*</span></label> |
|
|
<textarea id="workDescription" name="workDescription" required placeholder="Describe the job details"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="location">Location<span style="color:#cc0000">*</span></label> |
|
|
<input type="text" id="location" name="location" required placeholder="Work location" /> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="responsiblePerson">Responsible Person<span style="color:#cc0000">*</span></label> |
|
|
<input type="text" id="responsiblePerson" name="responsiblePerson" required placeholder="Name of person responsible" /> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="startDate">Start Date & Time<span style="color:#cc0000">*</span></label> |
|
|
<input type="datetime-local" id="startDate" name="startDate" required /> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="endDate">Expected End Date & Time<span style="color:#cc0000">*</span></label> |
|
|
<input type="datetime-local" id="endDate" name="endDate" required /> |
|
|
</div> |
|
|
|
|
|
<div class="form-group row"> |
|
|
<label for="safetyChecks">Safety Checks (comma separated)</label> |
|
|
<input type="text" id="safetyChecks" name="safetyChecks" placeholder="e.g. PPE check, Lockout tagout" /> |
|
|
</div> |
|
|
|
|
|
<button type="submit">Create Permit</button> |
|
|
</form> |
|
|
</section> |
|
|
|
|
|
<section id="monitorTabPanel" role="tabpanel" tabindex="0" aria-labelledby="mainTabMonitor" hidden> |
|
|
<h2>Monitor Permits</h2> |
|
|
|
|
|
<div class="filter-container"> |
|
|
<label for="monitorFilter">Filter (search in ID, Title, Responsible Person, Location): </label> |
|
|
<input type="text" id="monitorFilter" placeholder="Type to filter..." aria-label="Filter permits for monitoring" /> |
|
|
</div> |
|
|
|
|
|
<nav class="tabs" role="tablist" aria-label="Permit Status Filter Tabs"> |
|
|
<div class="tab active" data-view="active" role="tab" aria-selected="true" tabindex="0" aria-controls="permitsTable" id="tabActive">Active</div> |
|
|
<div class="tab" data-view="nonactive" role="tab" aria-selected="false" tabindex="-1" aria-controls="permitsTable" id="tabNonActive">Non-Active</div> |
|
|
<div class="tab" data-view="complete" role="tab" aria-selected="false" tabindex="-1" aria-controls="permitsTable" id="tabComplete">Complete</div> |
|
|
</nav> |
|
|
|
|
|
<table id="permitsTable" aria-live="polite" aria-describedby="permitsDesc" aria-label="List of permits"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Permit ID</th> |
|
|
<th>Work Title</th> |
|
|
<th>Responsible Person</th> |
|
|
<th>Location</th> |
|
|
<th>Start Date</th> |
|
|
<th>End Date</th> |
|
|
<th>Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
<div id="permitsDesc" class="sr-only">This table shows permits filtered by the selected status tab and filter above.</div> |
|
|
</section> |
|
|
|
|
|
<section id="approvalTabPanel" role="tabpanel" tabindex="0" aria-labelledby="mainTabApproval" hidden> |
|
|
<h2>Approval Management</h2> |
|
|
|
|
|
<div class="filter-container"> |
|
|
<label for="approvalFilter">Filter (search in ID, Title, Responsible Person, Location): </label> |
|
|
<input type="text" id="approvalFilter" placeholder="Type to filter..." aria-label="Filter permits for approval" /> |
|
|
</div> |
|
|
|
|
|
<nav class="tabs" role="tablist" aria-label="Approval Status Filter Tabs"> |
|
|
<div class="tab active" data-view="pending" role="tab" aria-selected="true" tabindex="0" aria-controls="approvalTable" id="tabPending">Pending Approval</div> |
|
|
<div class="tab" data-view="approved" role="tab" aria-selected="false" tabindex="-1" aria-controls="approvalTable" id="tabApproved">Approved</div> |
|
|
<div class="tab" data-view="rejected" role="tab" aria-selected="false" tabindex="-1" aria-controls="approvalTable" id="tabRejected">Rejected</div> |
|
|
</nav> |
|
|
|
|
|
<table id="approvalTable" aria-live="polite" aria-describedby="approvalDesc" aria-label="List of permits for approval"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Permit ID</th> |
|
|
<th>Work Title</th> |
|
|
<th>Responsible Person</th> |
|
|
<th>Location</th> |
|
|
<th>Start Date</th> |
|
|
<th>End Date</th> |
|
|
<th>Status</th> |
|
|
<th>Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
<div id="approvalDesc" class="sr-only">This table shows permits filtered by the selected approval status tab and filter above.</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="permitModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDesc"> |
|
|
<div class="modal-content" tabindex="0"> |
|
|
<div class="modal-header"> |
|
|
<h3 id="modalTitle">Permit Details</h3> |
|
|
<button class="modal-close" id="modalCloseBtn" aria-label="Close modal">×</button> |
|
|
</div> |
|
|
<div id="modalDesc" tabindex="0"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="printModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="printModalTitle" aria-describedby="printModalDesc"> |
|
|
<div class="modal-content" tabindex="0"> |
|
|
<div class="modal-header"> |
|
|
<h3 id="printModalTitle">Printable Permit</h3> |
|
|
<button class="modal-close" id="printModalCloseBtn" aria-label="Close print modal">×</button> |
|
|
</div> |
|
|
<div id="printModalDesc" tabindex="0" class="printable-permit"> |
|
|
|
|
|
</div> |
|
|
<div style="margin-top: 20px; text-align: center;"> |
|
|
<button type="button" id="printBtn" class="btn-print">Print Permit</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
(() => { |
|
|
const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000; |
|
|
|
|
|
|
|
|
function formatDateTimeLocal(date) { |
|
|
if (!date) return ''; |
|
|
const d = new Date(date); |
|
|
return d.toLocaleString([], { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' }); |
|
|
} |
|
|
function generatePermitID() { |
|
|
return 'PTW-' + Math.random().toString(36).substr(2, 6).toUpperCase(); |
|
|
} |
|
|
function escapeHtml(unsafe) { |
|
|
return unsafe.replace(/[&<"'>]/g, function(m) { |
|
|
switch(m) { |
|
|
case '&': return '&'; |
|
|
case '<': return '<'; |
|
|
case '>': return '>'; |
|
|
case '"': return '"'; |
|
|
case "'": return '''; |
|
|
default: return m; |
|
|
} |
|
|
}); |
|
|
} |
|
|
function daysBetween(date1, date2) { |
|
|
return Math.floor((date2 - date1) / (1000 * 60 * 60 * 24)); |
|
|
} |
|
|
|
|
|
|
|
|
let permits = JSON.parse(localStorage.getItem('permits') || '[]'); |
|
|
let currentEditingPermitId = null; |
|
|
let currentView = 'active'; |
|
|
let currentApprovalView = 'pending'; |
|
|
|
|
|
|
|
|
const createForm = document.getElementById('createPermitForm'); |
|
|
const permitsTableBody = document.querySelector('#permitsTable tbody'); |
|
|
const approvalTableBody = document.querySelector('#approvalTable tbody'); |
|
|
|
|
|
|
|
|
const mainTabs = Array.from(document.querySelectorAll('.main-tab')); |
|
|
const createTabPanel = document.getElementById('createTabPanel'); |
|
|
const monitorTabPanel = document.getElementById('monitorTabPanel'); |
|
|
const approvalTabPanel = document.getElementById('approvalTabPanel'); |
|
|
|
|
|
|
|
|
const statusTabs = Array.from(monitorTabPanel.querySelectorAll('.tab')); |
|
|
const monitorFilterInput = document.getElementById('monitorFilter'); |
|
|
|
|
|
|
|
|
const approvalStatusTabs = Array.from(approvalTabPanel.querySelectorAll('.tab')); |
|
|
const approvalFilterInput = document.getElementById('approvalFilter'); |
|
|
|
|
|
const permitModal = document.getElementById('permitModal'); |
|
|
const modalCloseBtn = document.getElementById('modalCloseBtn'); |
|
|
const modalDesc = document.getElementById('modalDesc'); |
|
|
const modalTitle = document.getElementById('modalTitle'); |
|
|
|
|
|
const printModal = document.getElementById('printModal'); |
|
|
const printModalCloseBtn = document.getElementById('printModalCloseBtn'); |
|
|
const printModalDesc = document.getElementById('printModalDesc'); |
|
|
const printBtn = document.getElementById('printBtn'); |
|
|
|
|
|
|
|
|
function savePermits() { |
|
|
localStorage.setItem('permits', JSON.stringify(permits)); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function filterPermitsByView() { |
|
|
let filtered = []; |
|
|
const now = new Date(); |
|
|
|
|
|
switch(currentView) { |
|
|
case 'active': |
|
|
|
|
|
filtered = permits.filter(p => p.status === 'Approved' || p.status === 'In Progress'); |
|
|
break; |
|
|
case 'nonactive': |
|
|
|
|
|
filtered = permits.filter(p => { |
|
|
if(p.status !== 'Pending Approval') return false; |
|
|
const createdDate = new Date(p.createdDate || p.submittedDate || p.startDate || now); |
|
|
return (now - createdDate) > SEVEN_DAYS_MS; |
|
|
}); |
|
|
break; |
|
|
case 'complete': |
|
|
|
|
|
filtered = permits.filter(p => p.status === 'Closed'); |
|
|
break; |
|
|
default: |
|
|
filtered = permits; |
|
|
} |
|
|
const filterText = monitorFilterInput.value.trim().toLowerCase(); |
|
|
if(filterText.length === 0) return filtered; |
|
|
|
|
|
return filtered.filter(p => |
|
|
p.id.toLowerCase().includes(filterText) || |
|
|
p.workTitle.toLowerCase().includes(filterText) || |
|
|
p.responsiblePerson.toLowerCase().includes(filterText) || |
|
|
p.location.toLowerCase().includes(filterText) |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
function filterPermitsByApprovalView() { |
|
|
let filtered = []; |
|
|
switch(currentApprovalView) { |
|
|
case 'pending': |
|
|
filtered = permits.filter(p => p.status === 'Pending Approval'); |
|
|
break; |
|
|
case 'approved': |
|
|
filtered = permits.filter(p => p.status === 'Approved' || p.status === 'In Progress'); |
|
|
break; |
|
|
case 'rejected': |
|
|
filtered = permits.filter(p => p.status === 'Rejected'); |
|
|
break; |
|
|
default: |
|
|
filtered = []; |
|
|
} |
|
|
const filterText = approvalFilterInput.value.trim().toLowerCase(); |
|
|
if(filterText.length === 0) return filtered; |
|
|
|
|
|
return filtered.filter(p => |
|
|
p.id.toLowerCase().includes(filterText) || |
|
|
p.workTitle.toLowerCase().includes(filterText) || |
|
|
p.responsiblePerson.toLowerCase().includes(filterText) || |
|
|
p.location.toLowerCase().includes(filterText) |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
function renderPermits() { |
|
|
permitsTableBody.innerHTML = ''; |
|
|
let filteredPermits = filterPermitsByView(); |
|
|
|
|
|
if (filteredPermits.length === 0) { |
|
|
const tr = document.createElement('tr'); |
|
|
const td = document.createElement('td'); |
|
|
td.colSpan = 7; |
|
|
td.style.textAlign = 'center'; |
|
|
td.style.color = '#777'; |
|
|
td.textContent = { |
|
|
active: 'No active permits found.', |
|
|
nonactive: 'No non-active permits found.', |
|
|
complete: 'No completed permits found.' |
|
|
}[currentView] || 'No permits found.'; |
|
|
tr.appendChild(td); |
|
|
permitsTableBody.appendChild(tr); |
|
|
return; |
|
|
} |
|
|
filteredPermits.forEach(p => { |
|
|
const tr = document.createElement('tr'); |
|
|
tr.tabIndex = 0; |
|
|
tr.setAttribute('data-id', p.id); |
|
|
|
|
|
let td = document.createElement('td'); |
|
|
td.textContent = p.id; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.workTitle; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.responsiblePerson; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.location; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = formatDateTimeLocal(p.startDate); |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = formatDateTimeLocal(p.endDate); |
|
|
tr.appendChild(td); |
|
|
|
|
|
|
|
|
let statusClass = 'status-' + p.status.toLowerCase().replace(/\s/g, ''); |
|
|
|
|
|
if(currentView === 'nonactive') statusClass = 'status-nonactive'; |
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.status; |
|
|
td.classList.add(statusClass); |
|
|
tr.appendChild(td); |
|
|
|
|
|
tr.addEventListener('click', () => openPermitModal(p.id)); |
|
|
tr.addEventListener('keypress', e => { |
|
|
if(e.key === 'Enter' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
openPermitModal(p.id); |
|
|
} |
|
|
}); |
|
|
|
|
|
permitsTableBody.appendChild(tr); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderApprovalPermits() { |
|
|
approvalTableBody.innerHTML = ''; |
|
|
let filteredPermits = filterPermitsByApprovalView(); |
|
|
|
|
|
if (filteredPermits.length === 0) { |
|
|
const tr = document.createElement('tr'); |
|
|
const td = document.createElement('td'); |
|
|
td.colSpan = 8; |
|
|
td.style.textAlign = 'center'; |
|
|
td.style.color = '#777'; |
|
|
td.textContent = { |
|
|
pending: 'No permits pending approval.', |
|
|
approved: 'No approved permits found.', |
|
|
rejected: 'No rejected permits found.' |
|
|
}[currentApprovalView] || 'No permits found.'; |
|
|
tr.appendChild(td); |
|
|
approvalTableBody.appendChild(tr); |
|
|
return; |
|
|
} |
|
|
|
|
|
filteredPermits.forEach(p => { |
|
|
const tr = document.createElement('tr'); |
|
|
tr.tabIndex = 0; |
|
|
tr.setAttribute('data-id', p.id); |
|
|
|
|
|
let td = document.createElement('td'); |
|
|
td.textContent = p.id; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.workTitle; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.responsiblePerson; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.location; |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = formatDateTimeLocal(p.startDate); |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = formatDateTimeLocal(p.endDate); |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
td.textContent = p.status; |
|
|
td.classList.add('status-'+p.status.toLowerCase().replace(/\s/g, '')); |
|
|
tr.appendChild(td); |
|
|
|
|
|
td = document.createElement('td'); |
|
|
if(p.status === 'Pending Approval') { |
|
|
const btnApprove = document.createElement('button'); |
|
|
btnApprove.textContent = 'Approve'; |
|
|
btnApprove.className = 'btn-approve'; |
|
|
btnApprove.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
approvePermit(p.id); |
|
|
}); |
|
|
td.appendChild(btnApprove); |
|
|
|
|
|
const btnReject = document.createElement('button'); |
|
|
btnReject.textContent = 'Reject'; |
|
|
btnReject.className = 'btn-reject'; |
|
|
btnReject.style.marginLeft = '10px'; |
|
|
btnReject.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
rejectPermit(p.id); |
|
|
}); |
|
|
td.appendChild(btnReject); |
|
|
} else if(p.status === 'Approved' || p.status === 'In Progress') { |
|
|
const btnPrint = document.createElement('button'); |
|
|
btnPrint.textContent = 'Print'; |
|
|
btnPrint.className = 'btn-print'; |
|
|
btnPrint.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
openPrintModal(p.id); |
|
|
}); |
|
|
td.appendChild(btnPrint); |
|
|
} else { |
|
|
td.textContent = '-'; |
|
|
} |
|
|
tr.appendChild(td); |
|
|
|
|
|
tr.addEventListener('click', () => openPermitModal(p.id)); |
|
|
tr.addEventListener('keypress', e => { |
|
|
if(e.key === 'Enter' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
openPermitModal(p.id); |
|
|
} |
|
|
}); |
|
|
|
|
|
approvalTableBody.appendChild(tr); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function openPermitModal(permitId) { |
|
|
currentEditingPermitId = permitId; |
|
|
const permit = permits.find(p => p.id === permitId); |
|
|
if (!permit) return; |
|
|
|
|
|
modalTitle.textContent = `Permit Details - ${permit.id}`; |
|
|
modalDesc.innerHTML = ''; |
|
|
|
|
|
|
|
|
const infoList = document.createElement('dl'); |
|
|
infoList.style.marginBottom = '20px'; |
|
|
|
|
|
function addInfoItem(label, value) { |
|
|
const dt = document.createElement('dt'); |
|
|
dt.textContent = label; |
|
|
dt.style.fontWeight = '600'; |
|
|
dt.style.marginTop = '8px'; |
|
|
const dd = document.createElement('dd'); |
|
|
dd.textContent = value; |
|
|
dd.style.marginLeft = '0'; |
|
|
dd.style.marginBottom = '8px'; |
|
|
infoList.appendChild(dt); |
|
|
infoList.appendChild(dd); |
|
|
} |
|
|
|
|
|
addInfoItem('Work Title:', permit.workTitle); |
|
|
addInfoItem('Work Description:', permit.workDescription); |
|
|
addInfoItem('Location:', permit.location); |
|
|
addInfoItem('Responsible Person:', permit.responsiblePerson); |
|
|
addInfoItem('Start Date & Time:', formatDateTimeLocal(permit.startDate)); |
|
|
addInfoItem('Expected End Date & Time:', formatDateTimeLocal(permit.endDate)); |
|
|
addInfoItem('Status:', permit.status); |
|
|
addInfoItem('Approval Status:', ['Pending Approval', 'Approved', 'Rejected'].includes(permit.status) ? permit.status : 'Not submitted for approval'); |
|
|
addInfoItem('Safety Checks:', permit.safetyChecks.length > 0 ? permit.safetyChecks.join(', ') : 'None'); |
|
|
addInfoItem('Comments:', permit.comments.length > 0 ? permit.comments.join('; ') : 'None'); |
|
|
|
|
|
modalDesc.appendChild(infoList); |
|
|
|
|
|
|
|
|
if (permit.status !== 'Closed' && permit.status !== 'Rejected') { |
|
|
const formUpdate = document.createElement('form'); |
|
|
formUpdate.id = 'monitorForm'; |
|
|
|
|
|
|
|
|
if(permit.safetyChecks.length>0){ |
|
|
const checksLabel = document.createElement('label'); |
|
|
checksLabel.textContent = 'Mark Safety Checks Completed:'; |
|
|
checksLabel.style.fontWeight = '600'; |
|
|
formUpdate.appendChild(checksLabel); |
|
|
|
|
|
permit.safetyChecks.forEach((check,idx)=>{ |
|
|
const div = document.createElement('div'); |
|
|
div.style.marginBottom = '6px'; |
|
|
|
|
|
const input = document.createElement('input'); |
|
|
input.type = 'checkbox'; |
|
|
input.id = 'check_'+idx; |
|
|
input.name = 'safetyCheck'; |
|
|
input.value = check; |
|
|
input.checked = permit.completedSafetyChecks.includes(check); |
|
|
|
|
|
const label = document.createElement('label'); |
|
|
label.htmlFor = 'check_'+idx; |
|
|
label.textContent = ' ' + check; |
|
|
|
|
|
div.appendChild(input); |
|
|
div.appendChild(label); |
|
|
formUpdate.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const commentLabel = document.createElement('label'); |
|
|
commentLabel.htmlFor = 'newComment'; |
|
|
commentLabel.textContent = 'Add Monitoring Comment:'; |
|
|
commentLabel.style.fontWeight = '600'; |
|
|
commentLabel.style.marginTop = '12px'; |
|
|
formUpdate.appendChild(commentLabel); |
|
|
|
|
|
const commentInput = document.createElement('textarea'); |
|
|
commentInput.id = 'newComment'; |
|
|
commentInput.placeholder = 'Add notes or observations here...'; |
|
|
commentInput.rows = 3; |
|
|
formUpdate.appendChild(commentInput); |
|
|
|
|
|
|
|
|
const btnContainer = document.createElement('div'); |
|
|
btnContainer.style.marginTop = '18px'; |
|
|
btnContainer.style.display = 'flex'; |
|
|
btnContainer.style.gap = '12px'; |
|
|
|
|
|
|
|
|
if (permit.status === 'Created') { |
|
|
const submitApprovalBtn = document.createElement('button'); |
|
|
submitApprovalBtn.type = 'button'; |
|
|
submitApprovalBtn.textContent = 'Submit for Approval'; |
|
|
submitApprovalBtn.style.backgroundColor = '#0066cc'; |
|
|
submitApprovalBtn.style.color = 'white'; |
|
|
submitApprovalBtn.addEventListener('click', () => submitForApproval(permit.id)); |
|
|
btnContainer.appendChild(submitApprovalBtn); |
|
|
} |
|
|
|
|
|
if (permit.status === 'Approved' || permit.status === 'In Progress') { |
|
|
const closeBtn = document.createElement('button'); |
|
|
closeBtn.type = 'button'; |
|
|
closeBtn.textContent = 'Close Permit'; |
|
|
closeBtn.style.backgroundColor = '#308446'; |
|
|
closeBtn.style.color = 'white'; |
|
|
closeBtn.addEventListener('click', () => updatePermitStatus('Closed')); |
|
|
btnContainer.appendChild(closeBtn); |
|
|
} |
|
|
|
|
|
const saveBtn = document.createElement('button'); |
|
|
saveBtn.type = 'submit'; |
|
|
saveBtn.textContent = 'Save Monitoring Updates'; |
|
|
btnContainer.appendChild(saveBtn); |
|
|
|
|
|
formUpdate.appendChild(btnContainer); |
|
|
|
|
|
formUpdate.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
saveMonitoringData(); |
|
|
}); |
|
|
|
|
|
modalDesc.appendChild(formUpdate); |
|
|
} else if (permit.status === 'Rejected') { |
|
|
const rejectedNote = document.createElement('p'); |
|
|
rejectedNote.textContent = 'This permit has been rejected and cannot be updated.'; |
|
|
rejectedNote.style.fontStyle = 'italic'; |
|
|
rejectedNote.style.color = '#cc3b3b'; |
|
|
modalDesc.appendChild(rejectedNote); |
|
|
} else { |
|
|
const closedNote = document.createElement('p'); |
|
|
closedNote.textContent = 'This permit is closed and can no longer be updated.'; |
|
|
closedNote.style.fontStyle = 'italic'; |
|
|
closedNote.style.color = '#308446'; |
|
|
modalDesc.appendChild(closedNote); |
|
|
} |
|
|
|
|
|
permitModal.classList.add('active'); |
|
|
modalDesc.focus(); |
|
|
} |
|
|
|
|
|
|
|
|
function saveMonitoringData() { |
|
|
const permit = permits.find(p => p.id === currentEditingPermitId); |
|
|
if (!permit) return; |
|
|
|
|
|
|
|
|
const checkboxes = permitModal.querySelectorAll('input[name="safetyCheck"]'); |
|
|
permit.completedSafetyChecks = []; |
|
|
checkboxes.forEach(cb => { |
|
|
if(cb.checked){ |
|
|
permit.completedSafetyChecks.push(cb.value); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const newComment = permitModal.querySelector('#newComment').value.trim(); |
|
|
if(newComment.length > 0){ |
|
|
permit.comments.push(newComment); |
|
|
permitModal.querySelector('#newComment').value = ''; |
|
|
} |
|
|
|
|
|
savePermits(); |
|
|
renderPermits(); |
|
|
renderApprovalPermits(); |
|
|
|
|
|
|
|
|
openPermitModal(permit.id); |
|
|
} |
|
|
|
|
|
|
|
|
function updatePermitStatus(newStatus) { |
|
|
const permit = permits.find(p => p.id === currentEditingPermitId); |
|
|
if (!permit) return; |
|
|
|
|
|
permit.status = newStatus; |
|
|
if(newStatus === 'In Progress'){ |
|
|
permit.monitoringStart = new Date().toISOString(); |
|
|
} |
|
|
if(newStatus === 'Approved'){ |
|
|
permit.approvedDate = new Date().toISOString(); |
|
|
|
|
|
permit.status = 'Approved'; |
|
|
} |
|
|
if(newStatus === 'Closed'){ |
|
|
permit.closedAt = new Date().toISOString(); |
|
|
} |
|
|
|
|
|
savePermits(); |
|
|
renderPermits(); |
|
|
renderApprovalPermits(); |
|
|
openPermitModal(permit.id); |
|
|
} |
|
|
|
|
|
|
|
|
function submitForApproval(id) { |
|
|
const permit = permits.find(p => p.id === id); |
|
|
if (!permit) return; |
|
|
if (permit.status !== 'Created') { |
|
|
alert('Only permits in "Created" status can be submitted for approval.'); |
|
|
return; |
|
|
} |
|
|
permit.status = 'Pending Approval'; |
|
|
permit.submittedDate = new Date().toISOString(); |
|
|
savePermits(); |
|
|
alert('Permit submitted for leader approval.'); |
|
|
renderPermits(); |
|
|
renderApprovalPermits(); |
|
|
activateMainTab('approval'); |
|
|
activateApprovalStatusTab('pending'); |
|
|
} |
|
|
|
|
|
|
|
|
function approvePermit(id) { |
|
|
const permit = permits.find(p => p.id === id); |
|
|
if (!permit) return; |
|
|
if (permit.status !== 'Pending Approval') { |
|
|
alert('Only permits pending approval can be approved.'); |
|
|
return; |
|
|
} |
|
|
permit.status = 'Approved'; |
|
|
permit.approvedDate = new Date().toISOString(); |
|
|
savePermits(); |
|
|
alert('Permit approved.'); |
|
|
renderApprovalPermits(); |
|
|
renderPermits(); |
|
|
} |
|
|
|
|
|
|
|
|
function rejectPermit(id) { |
|
|
const permit = permits.find(p => p.id === id); |
|
|
if (!permit) return; |
|
|
if (permit.status !== 'Pending Approval') { |
|
|
alert('Only permits pending approval can be rejected.'); |
|
|
return; |
|
|
} |
|
|
permit.status = 'Rejected'; |
|
|
savePermits(); |
|
|
alert('Permit rejected.'); |
|
|
renderApprovalPermits(); |
|
|
renderPermits(); |
|
|
} |
|
|
|
|
|
|
|
|
function openPrintModal(id) { |
|
|
const permit = permits.find(p => p.id === id); |
|
|
if (!permit) return; |
|
|
|
|
|
let content = ` |
|
|
<h2>Permit to Work (PTW)</h2> |
|
|
<dl> |
|
|
<dt>Permit ID:</dt><dd>${escapeHtml(permit.id)}</dd> |
|
|
<dt>Work Title:</dt><dd>${escapeHtml(permit.workTitle)}</dd> |
|
|
<dt>Work Description:</dt><dd>${escapeHtml(permit.workDescription)}</dd> |
|
|
<dt>Location:</dt><dd>${escapeHtml(permit.location)}</dd> |
|
|
<dt>Responsible Person:</dt><dd>${escapeHtml(permit.responsiblePerson)}</dd> |
|
|
<dt>Start Date & Time:</dt><dd>${formatDateTimeLocal(permit.startDate)}</dd> |
|
|
<dt>Expected End Date & Time:</dt><dd>${formatDateTimeLocal(permit.endDate)}</dd> |
|
|
<dt>Status:</dt><dd>${escapeHtml(permit.status)}</dd> |
|
|
<dt>Safety Checks:</dt><dd>${permit.safetyChecks.length > 0 ? escapeHtml(permit.safetyChecks.join(', ')) : 'None'}</dd> |
|
|
<dt>Comments:</dt><dd>${permit.comments.length > 0 ? escapeHtml(permit.comments.join('\n')) : 'None'}</dd> |
|
|
</dl> |
|
|
`; |
|
|
printModalDesc.innerHTML = content; |
|
|
printModal.classList.add('active'); |
|
|
printModalDesc.focus(); |
|
|
} |
|
|
|
|
|
|
|
|
function closeModal() { |
|
|
permitModal.classList.remove('active'); |
|
|
currentEditingPermitId = null; |
|
|
} |
|
|
function closePrintModal() { |
|
|
printModal.classList.remove('active'); |
|
|
} |
|
|
|
|
|
|
|
|
function printPermit() { |
|
|
const printWindow = window.open('', '', 'width=800,height=600'); |
|
|
if (!printWindow) { |
|
|
alert('Pop-up blocked. Please allow pop-ups for this website to print.'); |
|
|
return; |
|
|
} |
|
|
printWindow.document.write(` |
|
|
<html> |
|
|
<head> |
|
|
<title>Print Permit</title> |
|
|
<style> |
|
|
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } |
|
|
h2 { text-align: center; margin-bottom: 20px; } |
|
|
dl { display: grid; grid-template-columns: 1fr 2fr; gap: 8px 20px; } |
|
|
dt { font-weight: 700; color: #00467f; } |
|
|
dd { margin: 0 0 8px 0; white-space: pre-line; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
${printModalDesc.innerHTML} |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alterzick/ptw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
`); |
|
|
printWindow.document.close(); |
|
|
printWindow.focus(); |
|
|
printWindow.print(); |
|
|
printWindow.close(); |
|
|
} |
|
|
|
|
|
|
|
|
createForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const start = createForm.startDate.value; |
|
|
const end = createForm.endDate.value; |
|
|
if(start >= end){ |
|
|
alert('Start date/time must be before end date/time.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const newPermit = { |
|
|
id: generatePermitID(), |
|
|
workTitle: createForm.workTitle.value.trim(), |
|
|
workDescription: createForm.workDescription.value.trim(), |
|
|
location: createForm.location.value.trim(), |
|
|
responsiblePerson: createForm.responsiblePerson.value.trim(), |
|
|
startDate: start, |
|
|
endDate: end, |
|
|
safetyChecks: createForm.safetyChecks.value.trim() ? createForm.safetyChecks.value.split(',').map(s => s.trim()).filter(s => s.length > 0) : [], |
|
|
completedSafetyChecks: [], |
|
|
comments: [], |
|
|
status: 'Pending Approval', |
|
|
monitoringStart: null, |
|
|
closedAt: null, |
|
|
submittedDate: new Date().toISOString() |
|
|
}; |
|
|
|
|
|
permits.unshift(newPermit); |
|
|
savePermits(); |
|
|
renderPermits(); |
|
|
renderApprovalPermits(); |
|
|
|
|
|
activateMainTab('approval'); |
|
|
activateApprovalStatusTab('pending'); |
|
|
|
|
|
createForm.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
monitorFilterInput.addEventListener('input', () => { |
|
|
renderPermits(); |
|
|
}); |
|
|
|
|
|
approvalFilterInput.addEventListener('input', () => { |
|
|
renderApprovalPermits(); |
|
|
}); |
|
|
|
|
|
modalCloseBtn.addEventListener('click', closeModal); |
|
|
permitModal.addEventListener('click', (e) => { |
|
|
if(e.target === permitModal){ |
|
|
closeModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
printModalCloseBtn.addEventListener('click', closePrintModal); |
|
|
printModal.addEventListener('click', (e) => { |
|
|
if(e.target === printModal){ |
|
|
closePrintModal(); |
|
|
} |
|
|
}); |
|
|
printBtn.addEventListener('click', printPermit); |
|
|
|
|
|
|
|
|
mainTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
if(tab.classList.contains('active')) return; |
|
|
deactivateAllMainTabs(); |
|
|
activateMainTab(tab.getAttribute('data-tab')); |
|
|
}); |
|
|
tab.addEventListener('keypress', e => { |
|
|
if(e.key === 'Enter' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
tab.click(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function deactivateAllMainTabs() { |
|
|
mainTabs.forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
tab.setAttribute('aria-selected', 'false'); |
|
|
tab.tabIndex = -1; |
|
|
}); |
|
|
createTabPanel.hidden = true; |
|
|
monitorTabPanel.hidden = true; |
|
|
approvalTabPanel.hidden = true; |
|
|
} |
|
|
function activateMainTab(tabName) { |
|
|
deactivateAllMainTabs(); |
|
|
const tab = mainTabs.find(t => t.getAttribute('data-tab') === tabName); |
|
|
if(!tab) return; |
|
|
tab.classList.add('active'); |
|
|
tab.setAttribute('aria-selected', 'true'); |
|
|
tab.tabIndex = 0; |
|
|
if(tabName === 'create') { |
|
|
createTabPanel.hidden = false; |
|
|
createTabPanel.focus(); |
|
|
} else if(tabName === 'monitor') { |
|
|
monitorTabPanel.hidden = false; |
|
|
monitorTabPanel.focus(); |
|
|
} else if(tabName === 'approval') { |
|
|
approvalTabPanel.hidden = false; |
|
|
approvalTabPanel.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
statusTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
if(tab.classList.contains('active')) return; |
|
|
deactivateAllStatusTabs(); |
|
|
activateStatusTab(tab.getAttribute('data-view')); |
|
|
}); |
|
|
tab.addEventListener('keypress', e => { |
|
|
if(e.key === 'Enter' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
tab.click(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function deactivateAllStatusTabs() { |
|
|
statusTabs.forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
tab.setAttribute('aria-selected', 'false'); |
|
|
tab.tabIndex = -1; |
|
|
}); |
|
|
} |
|
|
function activateStatusTab(viewName) { |
|
|
deactivateAllStatusTabs(); |
|
|
const tab = statusTabs.find(t => t.getAttribute('data-view') === viewName); |
|
|
if(!tab) return; |
|
|
tab.classList.add('active'); |
|
|
tab.setAttribute('aria-selected', 'true'); |
|
|
tab.tabIndex = 0; |
|
|
currentView = viewName; |
|
|
renderPermits(); |
|
|
} |
|
|
|
|
|
|
|
|
approvalStatusTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
if(tab.classList.contains('active')) return; |
|
|
deactivateAllApprovalStatusTabs(); |
|
|
activateApprovalStatusTab(tab.getAttribute('data-view')); |
|
|
}); |
|
|
tab.addEventListener('keypress', e => { |
|
|
if(e.key === 'Enter' || e.key === ' ') { |
|
|
e.preventDefault(); |
|
|
tab.click(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function deactivateAllApprovalStatusTabs() { |
|
|
approvalStatusTabs.forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
tab.setAttribute('aria-selected', 'false'); |
|
|
tab.tabIndex = -1; |
|
|
}); |
|
|
} |
|
|
function activateApprovalStatusTab(viewName) { |
|
|
deactivateAllApprovalStatusTabs(); |
|
|
const tab = approvalStatusTabs.find(t => t.getAttribute('data-view') === viewName); |
|
|
if(!tab) return; |
|
|
tab.classList.add('active'); |
|
|
tab.setAttribute('aria-selected', 'true'); |
|
|
tab.tabIndex = 0; |
|
|
currentApprovalView = viewName; |
|
|
renderApprovalPermits(); |
|
|
} |
|
|
|
|
|
|
|
|
activateMainTab('create'); |
|
|
activateStatusTab('active'); |
|
|
activateApprovalStatusTab('pending'); |
|
|
|
|
|
renderPermits(); |
|
|
renderApprovalPermits(); |
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
