Add sidebar navigation to station-assignment page
Station assignment was a standalone page with no sidebar. Added the same portal sidebar so users can navigate between pages. Also added Stations link to menu-builder sidebar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek
parent
2d3634693b
commit
9c09e18833
2 changed files with 121 additions and 21 deletions
|
|
@ -870,6 +870,13 @@
|
||||||
</svg>
|
</svg>
|
||||||
<span>Menu</span>
|
<span>Menu</span>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="station-assignment.html" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="18" rx="2"/>
|
||||||
|
<path d="M2 9h20M9 21V9"/>
|
||||||
|
</svg>
|
||||||
|
<span>Stations</span>
|
||||||
|
</a>
|
||||||
<a href="index.html#reports" class="nav-item">
|
<a href="index.html#reports" class="nav-item">
|
||||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,11 @@
|
||||||
<style>
|
<style>
|
||||||
.assignment-container {
|
.assignment-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 80px);
|
flex: 1;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
|
|
@ -346,26 +347,111 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app" style="flex-direction: column;">
|
<div class="app">
|
||||||
<!-- Toolbar -->
|
<!-- Sidebar -->
|
||||||
<div class="toolbar">
|
<aside class="sidebar" id="sidebar">
|
||||||
<div class="toolbar-title">
|
<div class="business-info" style="padding: 12px 16px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px;">
|
||||||
<a id="backLink" href="#" style="color: var(--text-muted); text-decoration: none;">
|
<div class="business-avatar" id="businessAvatar">B</div>
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<div class="business-details" style="flex: 1;">
|
||||||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
<div class="business-name" id="businessName">Loading...</div>
|
||||||
|
<div class="business-status online">Online</div>
|
||||||
|
</div>
|
||||||
|
<button class="sidebar-toggle" id="sidebarToggle" style="background: none; border: none; cursor: pointer; padding: 4px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M3 12h18M3 6h18M3 18h18"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
<h1>Station Assignment</h1>
|
</div>
|
||||||
<span class="business-name" id="businessName"></span>
|
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<a href="index.html#dashboard" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
|
||||||
|
<rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||||
|
</svg>
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#orders" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
|
||||||
|
<rect x="9" y="3" width="6" height="4" rx="1"/>
|
||||||
|
<path d="M9 12h6M9 16h6"/>
|
||||||
|
</svg>
|
||||||
|
<span>Orders</span>
|
||||||
|
</a>
|
||||||
|
<a href="menu-builder.html" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M3 6h18M3 12h18M3 18h18"/>
|
||||||
|
</svg>
|
||||||
|
<span>Menu</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item active">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="18" rx="2"/>
|
||||||
|
<path d="M2 9h20M9 21V9"/>
|
||||||
|
</svg>
|
||||||
|
<span>Stations</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#reports" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
||||||
|
</svg>
|
||||||
|
<span>Reports</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#team" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
|
||||||
|
<circle cx="9" cy="7" r="4"/>
|
||||||
|
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
||||||
|
</svg>
|
||||||
|
<span>Team</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#services" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||||
|
<path d="M13.73 21a2 2 0 01-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span>Services</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#service-points" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
|
||||||
|
<path d="M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
|
||||||
|
</svg>
|
||||||
|
<span>Service Points</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#admin-tasks" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Task Admin</span>
|
||||||
|
</a>
|
||||||
|
<a href="index.html#settings" class="nav-item">
|
||||||
|
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Settings</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="main-content" style="flex-direction: column;">
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="toolbar-title">
|
||||||
|
<h1>Station Assignment</h1>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" onclick="StationAssignment.save()">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
|
||||||
|
<path d="M17 21v-8H7v8M7 3v5h8"/>
|
||||||
|
</svg>
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-primary" onclick="StationAssignment.save()">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
|
|
||||||
<path d="M17 21v-8H7v8M7 3v5h8"/>
|
|
||||||
</svg>
|
|
||||||
Save Changes
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="assignment-container">
|
<div class="assignment-container">
|
||||||
<!-- Left Panel: Menu Items -->
|
<!-- Left Panel: Menu Items -->
|
||||||
|
|
@ -400,6 +486,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Toast Container -->
|
<!-- Toast Container -->
|
||||||
|
|
@ -460,7 +547,9 @@
|
||||||
});
|
});
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
if (data.OK && data.BUSINESS) {
|
if (data.OK && data.BUSINESS) {
|
||||||
document.getElementById('businessName').textContent = `- ${data.BUSINESS.BusinessName}`;
|
document.getElementById('businessName').textContent = data.BUSINESS.BusinessName;
|
||||||
|
const avatar = document.getElementById('businessAvatar');
|
||||||
|
if (avatar) avatar.textContent = (data.BUSINESS.BusinessName || 'B').charAt(0).toUpperCase();
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[StationAssignment] Error:', err);
|
console.error('[StationAssignment] Error:', err);
|
||||||
|
|
@ -935,7 +1024,11 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => StationAssignment.init());
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
StationAssignment.init();
|
||||||
|
const toggle = document.getElementById('sidebarToggle');
|
||||||
|
if (toggle) toggle.addEventListener('click', () => document.getElementById('sidebar').classList.toggle('collapsed'));
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Reference in a new issue