zyphlar
230 lines
11 KiB
HTML
230 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MeshCore Dashboard</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="http://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Login Screen -->
|
|
<div id="login-screen" class="screen">
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<h1>MeshCore Dashboard</h1>
|
|
<p class="subtitle">USB Serial Monitor</p>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" required autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" required autocomplete="current-password">
|
|
</div>
|
|
<div id="login-error" class="error-message"></div>
|
|
<button type="submit" class="btn btn-primary">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Dashboard -->
|
|
<div id="dashboard-screen" class="screen hidden">
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1>MeshCore Dashboard</h1>
|
|
<span id="device-name-badge" class="device-badge hidden"></span>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="serial-status" id="serial-status">
|
|
<span class="status-dot"></span>
|
|
USB
|
|
</span>
|
|
<span class="data-last-received" id="data-last-received" title="Time since last data update">
|
|
<span class="data-label">Last data:</span> <span id="data-timer">0s ago</span>
|
|
</span>
|
|
<span class="user-info" id="user-info"></span>
|
|
<button id="logout-btn" class="btn btn-secondary">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="nav-tabs">
|
|
<button class="nav-tab active" data-tab="overview">Overview</button>
|
|
<button class="nav-tab" data-tab="map">Map</button>
|
|
<button class="nav-tab" data-tab="messages">Messages</button>
|
|
<button class="nav-tab" data-tab="contacts">Contacts</button>
|
|
<button class="nav-tab" data-tab="settings">Settings</button>
|
|
</nav>
|
|
|
|
<div class="content">
|
|
<!-- Overview Tab -->
|
|
<div id="overview-tab" class="tab-content active">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📡</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="stat-contacts">0</div>
|
|
<div class="stat-label">Contacts</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">💬</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="stat-messages">0</div>
|
|
<div class="stat-label">Total Messages</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📍</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="stat-positions">0</div>
|
|
<div class="stat-label">Position Updates</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">💾</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="stat-db-size">0 MB</div>
|
|
<div class="stat-label">Database Size</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="device-info-panel" class="panel hidden">
|
|
<h2>Device</h2>
|
|
<div id="device-info-content" class="device-info-grid"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Recent Messages</h2>
|
|
<div id="recent-messages" class="message-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Tab -->
|
|
<div id="map-tab" class="tab-content">
|
|
<div id="map" class="map-container"></div>
|
|
<div class="map-controls">
|
|
<button id="refresh-map-btn" class="btn btn-primary">Refresh Map</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages Tab -->
|
|
<div id="messages-tab" class="tab-content">
|
|
<div class="panel">
|
|
<h2>Send Message</h2>
|
|
<form id="send-message-form" class="message-form">
|
|
<div class="form-group">
|
|
<div class="radio-group">
|
|
<label class="radio-label">
|
|
<input type="radio" name="msg-type" value="direct" id="type-direct" checked>
|
|
Direct
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="msg-type" value="channel" id="type-channel">
|
|
Channel
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="text" id="message-text" placeholder="Type your message..." required>
|
|
<select id="message-to-contact" title="Select contact">
|
|
<option value="">-- Select contact --</option>
|
|
</select>
|
|
<select id="message-channel-idx" class="hidden" title="Select channel">
|
|
<option value="0">Public (Ch 0)</option>
|
|
<option value="1">Channel 1</option>
|
|
<option value="2">Channel 2</option>
|
|
<option value="3">Channel 3</option>
|
|
<option value="4">Channel 4</option>
|
|
<option value="5">Channel 5</option>
|
|
<option value="6">Channel 6</option>
|
|
<option value="7">Channel 7</option>
|
|
</select>
|
|
<button type="submit" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Messages</h2>
|
|
<div style="display:flex;gap:0.5rem;align-items:center">
|
|
<div class="msg-filter-tabs" id="msg-filter-tabs">
|
|
<button class="msg-filter-btn active" data-filter="all">All</button>
|
|
<button class="msg-filter-btn" data-filter="channel" data-ch="0">Public (Ch 0)</button>
|
|
<button class="msg-filter-btn" data-filter="direct">Direct</button>
|
|
</div>
|
|
<button id="refresh-messages-btn" class="btn btn-secondary">Refresh</button>
|
|
</div>
|
|
</div>
|
|
<div id="message-history" class="message-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contacts Tab -->
|
|
<div id="contacts-tab" class="tab-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>MeshCore Contacts</h2>
|
|
<button id="refresh-contacts-btn" class="btn btn-secondary">Refresh</button>
|
|
</div>
|
|
<div id="contacts-grid" class="nodes-grid"></div>
|
|
</div>
|
|
|
|
<div id="contact-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="modal-close">×</span>
|
|
<h2>Contact Details</h2>
|
|
<div id="contact-detail" class="node-detail"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings-tab" class="tab-content">
|
|
<div class="panel">
|
|
<h2>Serial Port</h2>
|
|
<div id="port-info"></div>
|
|
<div id="available-ports" class="ports-list"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Data Management</h2>
|
|
<p>Purge old data from the database.</p>
|
|
<form id="purge-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="purge-hours">Keep data from the last:</label>
|
|
<select id="purge-hours">
|
|
<option value="1">1 hour</option>
|
|
<option value="6">6 hours</option>
|
|
<option value="12">12 hours</option>
|
|
<option value="24">1 day</option>
|
|
<option value="72">3 days</option>
|
|
<option value="168">7 days</option>
|
|
<option value="336">14 days</option>
|
|
<option value="720" selected>30 days</option>
|
|
<option value="1440">60 days</option>
|
|
<option value="2160">90 days</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-danger">Purge Old Data</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>About</h2>
|
|
<p>MeshCore USB Dashboard — Monitor and control your MeshCore network over USB serial.</p>
|
|
<p>Version 1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="http://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|