399 lines
14 KiB
HTML
399 lines
14 KiB
HTML
<!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">
|
|
<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 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>
|
|
<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/bootstrap@5.3.2/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>
|