a063d5a2c9
- Create public/utils.js with shared frontend utility functions - Extract parseUTCDate, getTimeAgo, getTimeRemaining, getRemainingClass to utils.js - Remove duplicate functions from admin.js, app-mapbox.js, app-google.js, and app.js - Add utils.js script import to index.html and admin.html - Add comprehensive JSDoc documentation for all utility functions - Ensure consistent UTC timestamp parsing across all frontend scripts This addresses Copilot AI feedback about function duplication across multiple frontend scripts. Now all timestamp and time calculation logic is centralized in one maintainable module. Benefits: - Single source of truth for time-related utilities - Easier maintenance and updates - Consistent behavior across all frontend components - Better code organization and documentation - Reduced bundle size through deduplication
564 lines
18 KiB
HTML
564 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Great Lakes Ice Report Admin</title>
|
|
<link rel="icon" type="image/svg+xml" href="https://iceymi.b-cdn.net/favicon.svg">
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnNub3dmbGFrZSB7IGZpbGw6ICMyMTk2RjM7IH0KICAgICAgLmNlbnRlciB7IGZpbGw6ICMxOTc2RDI7IH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIAogIDxnIGNsYXNzPSJzbm93Zmxha2UiPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiAvPgogICAgPHJlY3QgeD0iMiIgeT0iMTUiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyIiAvPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cmVjdCB4PSIxNSIgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMjgiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE2LDIgMTQsNiAxOCw2IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSIxNiwzMCAxNCwyNiAxOCwyNiIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMiwxNiA2LDE0IDYsMTgiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjMwLDE2IDI2LDE0IDI2LDE4IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSI2LjMsNi4zIDguNiw0IDkuOSw3LjciIHRyYW5zZm9ybT0icm90YXRlKDQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNywyNS43IDIzLjQsMjggMjIuMSwyNC4zIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjYuMywyNS43IDguNiwyOCA5LjksMjQuMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNyw2LjMgMjMuNCw0IDIyLjEsNy43IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTYgMTYpIiAvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIzIiBjbGFzcz0iY2VudGVyIiAvPgo8L3N2Zz4K">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.admin-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.login-section {
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
max-width: 400px;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
.admin-section {
|
|
display: none;
|
|
}
|
|
|
|
.locations-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
}
|
|
|
|
.locations-table th,
|
|
.locations-table td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.locations-table th {
|
|
background-color: var(--table-header-bg);
|
|
color: var(--text-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.locations-table tr:hover {
|
|
background-color: var(--table-hover);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-edit {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.btn-delete {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-save {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.edit-row {
|
|
background-color: #fff3cd !important;
|
|
}
|
|
|
|
.edit-input {
|
|
width: 100%;
|
|
padding: 4px;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
background-color: var(--input-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.status-indicator {
|
|
padding: 2px 6px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-active {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-expired {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.admin-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-btn {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
padding: 10px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.theme-toggle-admin {
|
|
background: var(--card-bg) !important;
|
|
color: var(--text-color) !important;
|
|
border: 2px solid var(--border-color) !important;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.header-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.header-btn.btn-refresh {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.header-btn.btn-home {
|
|
background-color: #28a745;
|
|
}
|
|
|
|
.header-btn.btn-logout {
|
|
background-color: #dc3545;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
|
|
.address-cell {
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Tab Navigation */
|
|
.tab-navigation {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid #ddd;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 12px 20px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #666;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: #007bff;
|
|
border-bottom-color: #007bff;
|
|
background: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
color: #007bff;
|
|
background: rgba(0, 123, 255, 0.05);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Profanity Management Forms */
|
|
.profanity-add-form,
|
|
.profanity-test-form {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.profanity-add-form h4,
|
|
.profanity-test-form h4 {
|
|
margin-top: 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-row input,
|
|
.form-row select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-row input[type="text"] {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.form-row select {
|
|
min-width: 140px;
|
|
}
|
|
|
|
.test-results {
|
|
margin-top: 15px;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
min-height: 40px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.test-results.clean {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
|
|
.test-results.profane {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
|
|
.test-results.empty {
|
|
background: #e2e3e5;
|
|
border: 1px solid #d6d8db;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Mobile responsiveness for admin panel */
|
|
@media (max-width: 768px) {
|
|
.admin-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.login-section {
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.admin-header {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.admin-header h1 {
|
|
font-size: 1.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
.header-buttons {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header-btn {
|
|
font-size: 12px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 15px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.locations-table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.locations-table th,
|
|
.locations-table td {
|
|
padding: 6px 4px;
|
|
}
|
|
|
|
.address-cell {
|
|
max-width: 120px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.edit-input {
|
|
font-size: 12px;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header-buttons {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-btn {
|
|
font-size: 11px;
|
|
padding: 6px 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.locations-table th,
|
|
.locations-table td {
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
.address-cell {
|
|
max-width: 100px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 3px 4px;
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-container">
|
|
<!-- Login Section -->
|
|
<div id="login-section" class="login-section">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h2 style="margin: 0;">🔐 Admin Login</h2>
|
|
<a href="/" class="header-btn btn-home" style="text-decoration: none; font-size: 12px; padding: 8px 12px;">🏠 Back to Homepage</a>
|
|
</div>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="password">Admin Password:</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
<div id="login-message" class="message"></div>
|
|
</div>
|
|
|
|
<!-- Admin Section -->
|
|
<div id="admin-section" class="admin-section">
|
|
<div class="admin-header">
|
|
<h1>❄️ Great Lakes Ice Report Admin Panel</h1>
|
|
<div class="header-buttons">
|
|
<button id="theme-toggle" class="header-btn theme-toggle-admin" title="Toggle dark mode">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
<a href="/" class="header-btn btn-home">🏠 Homepage</a>
|
|
<button id="refresh-btn" class="header-btn btn-refresh">🔄 Refresh Data</button>
|
|
<button id="logout-btn" class="header-btn btn-logout">🚪 Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="total-count">0</div>
|
|
<div>Total Reports</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="active-count">0</div>
|
|
<div>Active (48hrs)</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="expired-count">0</div>
|
|
<div>Expired</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="persistent-count">0</div>
|
|
<div>Persistent</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="tab-navigation">
|
|
<button class="tab-btn active" data-tab="locations">📍 Location Reports</button>
|
|
<button class="tab-btn" data-tab="profanity">🚫 Profanity Filter</button>
|
|
</div>
|
|
|
|
<!-- Locations Tab -->
|
|
<div id="locations-tab" class="tab-content active">
|
|
<div class="form-section">
|
|
<h3>All Location Reports</h3>
|
|
<table class="locations-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Status</th>
|
|
<th>Address</th>
|
|
<th>Description</th>
|
|
<th>Persistent</th>
|
|
<th>Reported</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="locations-tbody">
|
|
<tr>
|
|
<td colspan="7">Loading...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profanity Management Tab -->
|
|
<div id="profanity-tab" class="tab-content">
|
|
<div class="form-section">
|
|
<h3>Custom Profanity Words</h3>
|
|
|
|
<!-- Add new word form -->
|
|
<div class="profanity-add-form">
|
|
<h4>Add Custom Word</h4>
|
|
<form id="add-profanity-form">
|
|
<div class="form-row">
|
|
<input type="text" id="new-word" placeholder="Enter word or phrase" required>
|
|
<select id="new-severity">
|
|
<option value="low">Low Severity</option>
|
|
<option value="medium" selected>Medium Severity</option>
|
|
<option value="high">High Severity</option>
|
|
</select>
|
|
<input type="text" id="new-category" placeholder="Category (optional)" value="custom">
|
|
<button type="submit">Add Word</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Test profanity filter -->
|
|
<div class="profanity-test-form">
|
|
<h4>Test Profanity Filter</h4>
|
|
<form id="test-profanity-form">
|
|
<div class="form-row">
|
|
<input type="text" id="test-text" placeholder="Enter text to test" required>
|
|
<button type="submit">Test Filter</button>
|
|
</div>
|
|
<div id="test-results" class="test-results"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Custom words table -->
|
|
<table class="locations-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Word</th>
|
|
<th>Severity</th>
|
|
<th>Category</th>
|
|
<th>Added</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="profanity-tbody">
|
|
<tr>
|
|
<td colspan="6">Loading...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="utils.js"></script>
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html>
|