mirror of https://github.com/craigerl/aprsd.git
193 lines
8.7 KiB
HTML
193 lines
8.7 KiB
HTML
<html>
|
|
<head>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script src="https://cdn.socket.io/4.7.1/socket.io.min.js" integrity="sha512-+NaO7d6gQ1YPxvc/qHIqZEchjGm207SszoNeMgppoqD/67fEqmc1edS8zrbxPD+4RQI3gDgT/83ihpFW61TG/Q==" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="/static/css/index.css">
|
|
<link rel="stylesheet" href="/static/css/tabs.css">
|
|
<link rel="stylesheet" href="/static/css/prism.css">
|
|
<script src="/static/js/prism.js"></script>
|
|
<script src="/static/js/main.js"></script>
|
|
<script src="/static/js/echarts.js"></script>
|
|
<script src="/static/js/tabs.js"></script>
|
|
<script src="/static/js/send-message.js"></script>
|
|
<script src="/static/js/logs.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var initial_stats = {{ initial_stats|tojson|safe }};
|
|
|
|
var memory_chart = null
|
|
var message_chart = null
|
|
var color = Chart.helpers.color;
|
|
|
|
$(document).ready(function() {
|
|
start_update();
|
|
start_charts();
|
|
init_messages();
|
|
init_logs();
|
|
|
|
$("#toggleStats").click(function() {
|
|
$("#jsonstats").fadeToggle(1000);
|
|
});
|
|
|
|
// Pretty print the config json so it's readable
|
|
var cfg_data = $("#configjson").text();
|
|
var cfg_json = JSON.parse(cfg_data);
|
|
var cfg_pretty = JSON.stringify(cfg_json, null, '\t');
|
|
const html_pretty = Prism.highlight( cfg_pretty, Prism.languages.json, 'json');
|
|
$("#configjson").html(html_pretty);
|
|
$("#jsonstats").fadeToggle(1000);
|
|
|
|
//var log_text_pretty = $('#logtext').text();
|
|
//const log_pretty = Prism.highlight( log_text_pretty, Prism.languages.log, 'log');
|
|
//$('#logtext').html(log_pretty);
|
|
|
|
$('.ui.accordion').accordion({exclusive: false});
|
|
$('.menu .item').tab('change tab', 'charts-tab');
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class='ui text container'>
|
|
<h1 class='ui dividing header'>APRSD {{ version }}</h1>
|
|
</div>
|
|
|
|
<div class='ui grid text container'>
|
|
<div class='left floated ten wide column'>
|
|
<span style='color: green'>{{ callsign }}</span>
|
|
connected to
|
|
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
|
</div>
|
|
|
|
<div class='right floated four wide column'>
|
|
<span id='uptime'>NONE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab links -->
|
|
<div class="ui top attached tabular menu">
|
|
<div class="active item" data-tab="charts-tab">Charts</div>
|
|
<div class="item" data-tab="msgs-tab">Messages</div>
|
|
<div class="item" data-tab="seen-tab">Seen List</div>
|
|
<div class="item" data-tab="watch-tab">Watch List</div>
|
|
<div class="item" data-tab="plugin-tab">Plugins</div>
|
|
<div class="item" data-tab="threads-tab">Threads</div>
|
|
<div class="item" data-tab="config-tab">Config</div>
|
|
<div class="item" data-tab="log-tab">LogFile</div>
|
|
<!-- <div class="item" data-tab="oslo-tab">OSLO CONFIG</div> //-->
|
|
<div class="item" data-tab="raw-tab">Raw JSON</div>
|
|
</div>
|
|
|
|
<!-- Tab content -->
|
|
<div class="ui bottom attached active tab segment" data-tab="charts-tab">
|
|
<h3 class="ui dividing header">Charts</h3>
|
|
<div class="ui equal width relaxed grid">
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment" style="height: 300px" id="packetsChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment" style="height: 300px" id="packetTypesChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment" style="height: 300px" id="messagesChart"></div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui segment" style="height: 300px" id="acksChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<div class="ui segment" style="height: 300px" id="memChart">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row">
|
|
<div id="stats" class="two column">
|
|
<button class="ui button" id="toggleStats">Toggle raw json</button>
|
|
<pre id="jsonstats" class="language-json">{{ stats }}</pre>
|
|
</div> //-->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="msgs-tab">
|
|
<h3 class="ui dividing header">Messages (<span id="packets_count">0</span>)</h3>
|
|
<div class="ui styled fluid accordion" id="accordion">
|
|
<div id="packetsDiv" class="ui mini text">Loading</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="seen-tab">
|
|
<h3 class="ui dividing header">
|
|
Callsign Seen List (<span id="seen_count">{{ seen_count }}</span>)
|
|
</h3>
|
|
<div id="seenDiv" class="ui mini text">Loading</div>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="watch-tab">
|
|
<h3 class="ui dividing header">
|
|
Callsign Watch List (<span id="watch_count">{{ watch_count }}</span>)
|
|
|
|
Notification age - <span id="watch_age">{{ watch_age }}</span>
|
|
</h3>
|
|
<div id="watchDiv" class="ui mini text">Loading</div>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="plugin-tab">
|
|
<h3 class="ui dividing header">
|
|
Plugins Loaded (<span id="plugin_count">{{ plugin_count }}</span>)
|
|
</h3>
|
|
<div id="pluginDiv" class="ui mini text">Loading</div>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="threads-tab">
|
|
<h3 class="ui dividing header">
|
|
Threads Loaded (<span id="thread_count">{{ thread_count }}</span>)
|
|
</h3>
|
|
<div id="threadsDiv" class="ui mini text">Loading</div>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="config-tab">
|
|
<h3 class="ui dividing header">Config</h3>
|
|
<pre id="configjson" class="language-json">{{ config_json|safe }}</pre>
|
|
</div>
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="log-tab">
|
|
<h3 class="ui dividing header">LOGFILE</h3>
|
|
<pre id="logContainer" style="height: 600px;overflow-y:auto;overflow-x:auto;"><code id="logtext" class="language-log" ></code></pre>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="ui bottom attached tab segment" data-tab="oslo-tab">
|
|
<h3 class="ui dividing header">OSLO</h3>
|
|
<pre id="osloContainer" style="height:600px;overflow-y:auto;" class="language-json">{{ oslo_out|safe }}</pre>
|
|
</div> //-->
|
|
|
|
<div class="ui bottom attached tab segment" data-tab="raw-tab">
|
|
<h3 class="ui dividing header">Raw JSON</h3>
|
|
<pre id="jsonstats" class="language-yaml" style="height:600px;overflow-y:auto;">{{ initial_stats|safe }}</pre>
|
|
</div>
|
|
|
|
<div class="ui text container">
|
|
<a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
|
|
<a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
|
|
</div>
|
|
</body>
|
|
</html>
|