feat: redesign phone directory UI and add new department-specific JSON data files
This commit is contained in:
1 parent
611553efbc
commit
7ab089839e
18 files changed
+1664
-565
No files matched your search
+388
-206
@@ -1,216 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bossier City Phone Directory</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/phone.css" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bossier City Phone Directory</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
|
||||
|
||||
body {
|
||||
background-color: #eef2f7;
|
||||
font-family: 'PT Serif', serif;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
font-size: clamp(1.6rem, 5vw, 2.75rem);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 1rem 0 0.5rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* Property tabs */
|
||||
.property-tabs {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.property-tabs .nav-link {
|
||||
font-family: 'PT Serif', serif;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
background: #d8e4f5;
|
||||
color: #444;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.property-tabs .nav-link.active {
|
||||
background: #aaccfa;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Logo bar */
|
||||
.logo-bar {
|
||||
background: #aaccfa;
|
||||
border-radius: 0 0.5rem 0.5rem 0.5rem;
|
||||
padding: 0.9rem 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
min-height: 80px;
|
||||
}
|
||||
.logo-bar img { height: 50px; }
|
||||
.btbc-logo { filter: invert(1); }
|
||||
.mville-logo { height: 55px; }
|
||||
.bt-svg-flip { transform: scaleX(-1); }
|
||||
.palm-flip { transform: scaleX(-1); }
|
||||
|
||||
/* Department section */
|
||||
.dept-panel {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem 1.25rem 0.75rem;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
.dept-category {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.dept-category-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: #7a8fa8;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.dept-btn {
|
||||
display: inline-block;
|
||||
font-family: 'PT Serif', serif;
|
||||
font-size: 0.88rem;
|
||||
margin: 0.2rem 0.2rem 0.2rem 0;
|
||||
padding: 0.3rem 1rem;
|
||||
border: 1.5px solid #aaccfa;
|
||||
border-radius: 2rem;
|
||||
background: #f5f8ff;
|
||||
color: #334;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s, border-color 0.12s, color 0.12s;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dept-btn:hover {
|
||||
background: #d2e6ff;
|
||||
border-color: #7aacf0;
|
||||
}
|
||||
.dept-btn.active {
|
||||
background: #aaccfa;
|
||||
border-color: #5599e8;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Table section */
|
||||
.table-panel {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||||
}
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
margin: 0;
|
||||
}
|
||||
#searchInput {
|
||||
max-width: 260px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#mainTable thead {
|
||||
background-color: #aaccfa;
|
||||
}
|
||||
#mainTable thead th {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: #9ab;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo-bar img { height: 36px; }
|
||||
.dept-btn { font-size: 0.8rem; padding: 0.25rem 0.75rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container text-center">
|
||||
|
||||
<div class="header text-center title">
|
||||
<a class= "homelink" href="index.html"> Bossier City Phone Directory </a>
|
||||
</div>
|
||||
<!-- Boomtown Images -->
|
||||
<div class="text-center images">
|
||||
<img class="bt-svg bt-svg-left" src="images/bt.svg">
|
||||
<img class="btbc" src="images/bbc-logo-283x93-white.png">
|
||||
<img class="bt-svg" src="images/bt.svg">
|
||||
</div>
|
||||
<!-- Boomtown Images End -->
|
||||
<!-- Boomtown Navbar -->
|
||||
<nav class="navbar navbar-expand-sm navbar-color">
|
||||
<div class="container buffer">
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Casino Operations
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\casino-operation.html">Casino Operations</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\security.html">Security</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\slots.html">Slots</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\slots-performance.html">Slots Performance</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\sport.html">Sports Betting</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\surveillance.html">Surveillance</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\table.html">Table Games</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Executive
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\executive.html">Executive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Finance & Admin
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\accounting.html">Accounting</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\cage.html">Cage</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\compliance.html">Compliance</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\count.html">Count</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\purchasing.html">Purchasing</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\receiving.html">Receiving</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Food & Beverage
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\food.html">Food & Beverage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Hotel
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\hotel.html">Hotel</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Human Resources
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\human-resources.html">Human Resources</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Sales & Marketing
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\sales-marketing.html">Sales & Marketing</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\entertainment.html">Entertainment</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Support Services
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="btbc\facilities.html">Facilities</a></li>
|
||||
<li><a class="dropdown-item" href="btbc\it.html">Information Technology</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Boomtown Navbar End -->
|
||||
|
||||
|
||||
<!-- Margaritaville Images -->
|
||||
<div class="text-center images">
|
||||
<img class="palm-tree palm-tree-left" src = "images/Palm-tree.svg">
|
||||
<img class="mville" src="images/margaritaville.svg">
|
||||
<img class="palm-tree palm-tree-right" src="images/Palm-tree.svg">
|
||||
</div>
|
||||
<!-- Margaritaville Images End -->
|
||||
<!-- Margaritaville Navbar -->
|
||||
<nav class="navbar navbar-expand-sm navbar-color">
|
||||
<div class="container buffer">
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Casino Operations
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/casino-operation.html">Casino Operations</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/security.html">Security</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/slots.html">Slots</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/slots-performance.html">Slots Performance</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/sport.html">Sports Betting</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/surveillance.html">Surveillance</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/table.html">Table Games</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Executive
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/executive.html">Executive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Finance & Admin
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/accounting.html">Accounting</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/cage.html">Cage</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/compliance.html">Compliance</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/count.html">Count</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/purchasing.html">Purchasing</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/receiving.html">Receiving</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Food & Beverage
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/food.html">Food & Beverage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Hotel
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/hotel.html">Hotel</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Human Resources
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/human-resources.html">Human Resources</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Sales & Marketing
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/sales-marketing.html">Sales & Marketing</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/entertainment.html">Entertainment</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-body" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Support Services
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="mvbc/facilities.html">Facilities</a></li>
|
||||
<li><a class="dropdown-item" href="mvbc/it.html">Information Technology</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Margaritaville Navbar End -->
|
||||
|
||||
<div class="container py-3">
|
||||
|
||||
<div class="d-flex justify-content-end">
|
||||
<a href="admin.html" class="btn btn-sm btn-outline-secondary" style="font-family:'PT Serif',serif;font-size:0.8rem;">Admin</a>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
<h1 class="site-header">Bossier City Phone Directory</h1>
|
||||
|
||||
<!-- Property Tabs -->
|
||||
<ul class="nav property-tabs mt-2 mb-0" id="propertyTabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" data-property="btbc">Boomtown BC</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-property="mvbc">Margaritaville</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Logo Bar -->
|
||||
<div class="logo-bar mb-3" id="logoBar">
|
||||
<div id="logo-btbc" class="d-flex align-items-center gap-3">
|
||||
<img src="images/bt.svg" class="bt-svg-flip" alt="">
|
||||
<img src="images/bbc-logo-283x93-white.png" class="btbc-logo" alt="Boomtown BC">
|
||||
<img src="images/bt.svg" alt="">
|
||||
</div>
|
||||
<div id="logo-mvbc" class="d-flex align-items-center gap-3" style="display:none!important;">
|
||||
<img src="images/Palm-tree.svg" class="palm-flip" alt="">
|
||||
<img src="images/margaritaville.svg" class="mville-logo" alt="Margaritaville">
|
||||
<img src="images/Palm-tree.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Department Navigation -->
|
||||
<div class="dept-panel mb-3" id="deptNav"></div>
|
||||
|
||||
<!-- Table Panel -->
|
||||
<div class="table-panel">
|
||||
<div class="table-toolbar">
|
||||
<h2 class="section-title" id="sectionTitle">Select a department above</h2>
|
||||
<input type="search" class="form-control" id="searchInput" placeholder="Filter results..." style="display:none;" aria-label="Filter table">
|
||||
</div>
|
||||
<div id="tableContainer">
|
||||
<div class="empty-state">Select a department above to view the phone directory.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
const DEPARTMENTS = {
|
||||
btbc: [
|
||||
{ category: 'Casino Operations', items: [
|
||||
{ label: 'Casino Operations', json: 'json/btbc-casino-ops.json' },
|
||||
{ label: 'Security', json: 'json/btbc-security.json' },
|
||||
{ label: 'Slots', json: 'json/btbc-slots.json' },
|
||||
{ label: 'Slots Performance', json: 'json/btbc-slots-performance.json' },
|
||||
{ label: 'Sports Betting', json: 'json/btbc-sport-betting.json' },
|
||||
{ label: 'Surveillance', json: 'json/btbc-sureillance.json' },
|
||||
{ label: 'Table Games', json: 'json/btbc-table-games.json' },
|
||||
]},
|
||||
{ category: 'Executive', items: [
|
||||
{ label: 'Executive', json: 'json/btbc-executive.json' },
|
||||
]},
|
||||
{ category: 'Finance & Admin', items: [
|
||||
{ label: 'Accounting', json: 'json/btbc-accounting.json' },
|
||||
{ label: 'Cage', json: 'json/btbc-cage.json' },
|
||||
{ label: 'Compliance', json: 'json/btbc-compliance.json' },
|
||||
{ label: 'Count', json: 'json/btbc-count.json' },
|
||||
{ label: 'Purchasing', json: 'json/btbc-purchasing.json' },
|
||||
{ label: 'Receiving', json: 'json/btbc-receiving.json' },
|
||||
]},
|
||||
{ category: 'Food & Beverage', items: [
|
||||
{ label: 'Food & Beverage', json: 'json/btbc-food-and-beverage.json' },
|
||||
]},
|
||||
{ category: 'Hotel', items: [
|
||||
{ label: 'Hotel', json: 'json/btbc-hotel.json' },
|
||||
]},
|
||||
{ category: 'Human Resources', items: [
|
||||
{ label: 'Human Resources', json: 'json/btbc-human-resources.json' },
|
||||
]},
|
||||
{ category: 'Sales & Marketing', items: [
|
||||
{ label: 'Sales & Marketing', json: 'json/btbc-sales-and-marketing.json' },
|
||||
{ label: 'Entertainment', json: 'json/btbc-entertainment.json' },
|
||||
]},
|
||||
{ category: 'Support Services', items: [
|
||||
{ label: 'Facilities', json: 'json/btbc-facilties.json' },
|
||||
{ label: 'Information Technology',json: 'json/btbc-information-technology.json' },
|
||||
]},
|
||||
],
|
||||
mvbc: [
|
||||
{ category: 'Casino Operations', items: [
|
||||
{ label: 'Casino Operations', json: 'json/mvbc-casino-ops.json' },
|
||||
{ label: 'Security', json: 'json/mvbc-security.json' },
|
||||
{ label: 'Slots', json: 'json/mvbc-slots.json' },
|
||||
{ label: 'Slots Performance', json: 'json/mvbc-slots-performance.json' },
|
||||
{ label: 'Sports Betting', json: 'json/mvbc-sport-betting.json' },
|
||||
{ label: 'Surveillance', json: 'json/mvbc-surveillance.json' },
|
||||
{ label: 'Table Games', json: 'json/mvbc-table-games.json' },
|
||||
]},
|
||||
{ category: 'Executive', items: [
|
||||
{ label: 'Executive', json: 'json/mvbc-executive.json' },
|
||||
]},
|
||||
{ category: 'Finance & Admin', items: [
|
||||
{ label: 'Accounting', json: 'json/mvbc-accounting.json' },
|
||||
{ label: 'Cage', json: 'json/mvbc-cage.json' },
|
||||
{ label: 'Compliance', json: 'json/mvbc-compliance.json' },
|
||||
{ label: 'Count', json: 'json/mvbc-count.json' },
|
||||
{ label: 'Purchasing', json: 'json/mvbc-purchasing.json' },
|
||||
{ label: 'Receiving', json: 'json/mvbc-receiving.json' },
|
||||
]},
|
||||
{ category: 'Food & Beverage', items: [
|
||||
{ label: 'Food & Beverage', json: 'json/mvbc-food-and-beverage.json' },
|
||||
]},
|
||||
{ category: 'Hotel', items: [
|
||||
{ label: 'Hotel', json: 'json/mvbc-hotel.json' },
|
||||
]},
|
||||
{ category: 'Human Resources', items: [
|
||||
{ label: 'Human Resources', json: 'json/mvbc-human-resources.json' },
|
||||
]},
|
||||
{ category: 'Sales & Marketing', items: [
|
||||
{ label: 'Sales & Marketing', json: 'json/mvbc-sales-and-marketing.json' },
|
||||
{ label: 'Entertainment', json: 'json/mvbc-entertainment.json' },
|
||||
]},
|
||||
{ category: 'Support Services', items: [
|
||||
{ label: 'Facilities', json: 'json/mvbc-facilties.json' },
|
||||
{ label: 'Information Technology',json: 'json/mvbc-information-technology.json' },
|
||||
]},
|
||||
]
|
||||
};
|
||||
|
||||
let currentProperty = 'btbc';
|
||||
let currentData = [];
|
||||
let activeBtn = null;
|
||||
|
||||
function renderDeptNav(property) {
|
||||
const nav = document.getElementById('deptNav');
|
||||
const groups = DEPARTMENTS[property];
|
||||
let html = '<div class="row g-3">';
|
||||
groups.forEach(group => {
|
||||
html += '<div class="col-6 col-sm-4 col-md-3 dept-category">';
|
||||
html += `<div class="dept-category-label">${group.category}</div>`;
|
||||
group.items.forEach(item => {
|
||||
html += `<button class="dept-btn" data-json="${item.json}" data-label="${item.label}">${item.label}</button>`;
|
||||
});
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
nav.innerHTML = html;
|
||||
|
||||
nav.querySelectorAll('.dept-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (activeBtn) activeBtn.classList.remove('active');
|
||||
btn.classList.add('active');
|
||||
activeBtn = btn;
|
||||
loadDepartment(btn.dataset.json, btn.dataset.label);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function loadDepartment(jsonPath, label) {
|
||||
document.getElementById('sectionTitle').textContent = label;
|
||||
document.getElementById('searchInput').style.display = '';
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.getElementById('tableContainer').innerHTML =
|
||||
'<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
|
||||
|
||||
fetch(jsonPath, { cache: 'no-store' })
|
||||
.then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||
.then(data => { currentData = data; renderTable(data); })
|
||||
.catch(() => {
|
||||
document.getElementById('tableContainer').innerHTML =
|
||||
'<div class="empty-state">Could not load data for this department.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderTable(data) {
|
||||
if (!data || data.length === 0) {
|
||||
document.getElementById('tableContainer').innerHTML =
|
||||
'<div class="empty-state">No records found.</div>';
|
||||
return;
|
||||
}
|
||||
let rows = '';
|
||||
data.forEach(item => {
|
||||
rows += `<tr>
|
||||
<td>${item.name || ''}</td>
|
||||
<td>${item.title || ''}</td>
|
||||
<td>${item.extension || ''}</td>
|
||||
<td>${item.exterior || ''}</td>
|
||||
</tr>`;
|
||||
});
|
||||
document.getElementById('tableContainer').innerHTML = `
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0" id="mainTable">
|
||||
<thead><tr><th>Name</th><th>Title</th><th>Extension</th><th>Exterior</th></tr></thead>
|
||||
<tbody>${rows}</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function resetTable() {
|
||||
activeBtn = null;
|
||||
document.getElementById('sectionTitle').textContent = 'Select a department above';
|
||||
document.getElementById('searchInput').style.display = 'none';
|
||||
document.getElementById('tableContainer').innerHTML =
|
||||
'<div class="empty-state">Select a department above to view the phone directory.</div>';
|
||||
currentData = [];
|
||||
}
|
||||
|
||||
// Property tab switching
|
||||
document.getElementById('propertyTabs').addEventListener('click', e => {
|
||||
const link = e.target.closest('[data-property]');
|
||||
if (!link) return;
|
||||
e.preventDefault();
|
||||
const prop = link.dataset.property;
|
||||
if (prop === currentProperty) return;
|
||||
currentProperty = prop;
|
||||
|
||||
document.querySelectorAll('#propertyTabs .nav-link').forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
|
||||
document.getElementById('logo-btbc').style.display = prop === 'btbc' ? '' : 'none';
|
||||
document.getElementById('logo-mvbc').style.display = prop === 'mvbc' ? '' : 'none';
|
||||
|
||||
resetTable();
|
||||
renderDeptNav(prop);
|
||||
});
|
||||
|
||||
// Search / filter
|
||||
document.getElementById('searchInput').addEventListener('input', function () {
|
||||
const q = this.value.toLowerCase();
|
||||
if (!q) { renderTable(currentData); return; }
|
||||
const filtered = currentData.filter(item =>
|
||||
(item.name || '').toLowerCase().includes(q) ||
|
||||
(item.title || '').toLowerCase().includes(q) ||
|
||||
String(item.extension || '').includes(q) ||
|
||||
String(item.exterior || '').includes(q)
|
||||
);
|
||||
renderTable(filtered);
|
||||
});
|
||||
|
||||
// Init
|
||||
renderDeptNav('btbc');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user