Will Bradley
197 lines
8.6 KiB
HTML
197 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Meshtastic MQTT Dashboard</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://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>Meshtastic Dashboard</h1>
|
|
<p class="subtitle">MQTT Monitoring & Control</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 -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1>Meshtastic Dashboard</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="mqtt-status" id="mqtt-status">
|
|
<span class="status-dot"></span>
|
|
MQTT
|
|
</span>
|
|
<span class="data-last-received" id="data-last-received" title="Time since last data update">
|
|
<span style="opacity: 0.7;">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>
|
|
|
|
<!-- Navigation -->
|
|
<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="nodes">Nodes</button>
|
|
<button class="nav-tab" data-tab="settings">Settings</button>
|
|
</nav>
|
|
|
|
<!-- Tab Contents -->
|
|
<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-nodes">0</div>
|
|
<div class="stat-label">Active Nodes</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 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-row">
|
|
<input type="text" id="message-text" placeholder="Type your message..." required>
|
|
<select id="message-channel">
|
|
<option value="0">Channel 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>Message History</h2>
|
|
<button id="refresh-messages-btn" class="btn btn-secondary">Refresh</button>
|
|
</div>
|
|
<div id="message-history" class="message-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nodes Tab -->
|
|
<div id="nodes-tab" class="tab-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Meshtastic Nodes</h2>
|
|
<button id="refresh-nodes-btn" class="btn btn-secondary">Refresh</button>
|
|
</div>
|
|
<div id="nodes-grid" class="nodes-grid"></div>
|
|
</div>
|
|
|
|
<!-- Node Detail Modal -->
|
|
<div id="node-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="modal-close">×</span>
|
|
<h2>Node Details</h2>
|
|
<div id="node-detail" class="node-detail"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings-tab" class="tab-content">
|
|
<div class="panel">
|
|
<h2>Data Management</h2>
|
|
<p>Purge old data from the database to free up space.</p>
|
|
<form id="purge-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="purge-days">Keep data from the last:</label>
|
|
<select id="purge-days">
|
|
<option value="7">7 days</option>
|
|
<option value="14">14 days</option>
|
|
<option value="30" selected>30 days</option>
|
|
<option value="60">60 days</option>
|
|
<option value="90">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>Meshtastic MQTT Dashboard - A complete monitoring solution for Meshtastic networks.</p>
|
|
<p>Version 1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/d3@7/dist/d3.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|