1
0
mirror of https://github.com/craigerl/aprsd.git synced 2025-08-01 13:12:26 -04:00

reworked the admin ui to use semenatic ui more

This commit is contained in:
Hemna 2021-07-14 15:00:23 -04:00
parent 5afc7fb664
commit 3c45d8bd0f
4 changed files with 57 additions and 55 deletions

View File

@ -5,6 +5,7 @@ from logging import NullHandler
from logging.handlers import RotatingFileHandler from logging.handlers import RotatingFileHandler
import sys import sys
import aprsd
from aprsd import messaging, packets, plugin, stats, utils from aprsd import messaging, packets, plugin, stats, utils
import flask import flask
import flask_classful import flask_classful
@ -49,6 +50,7 @@ class APRSDFlask(flask_classful.FlaskView):
"index.html", "index.html",
initial_stats=stats, initial_stats=stats,
callsign=self.config["aprs"]["login"], callsign=self.config["aprs"]["login"],
version=aprsd.__version__,
config_json=json.dumps(self.config), config_json=json.dumps(self.config),
) )

View File

@ -1,29 +1,20 @@
body { body {
display: grid;
grid-template-rows: auto 1fr auto;
background: #eeeeee; background: #eeeeee;
margin: 2em; margin: 2em;
padding: 0;
text-align: center; text-align: center;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
height: 100vh;
} }
header {
padding: 2em;
height: 10vh;
margin: 10px;
}
#main {
padding: 2em;
height: 80vh;
}
footer { footer {
padding: 2em; padding: 2em;
text-align: center; text-align: center;
height: 10vh; height: 10vh;
} }
.ui.segment {
background: #eeeeee;
}
#graphs { #graphs {
display: grid; display: grid;
width: 100%; width: 100%;

View File

@ -191,6 +191,9 @@ function update_stats( data ) {
function update_packets( data ) { function update_packets( data ) {
var packetsdiv = $("#packetsDiv"); var packetsdiv = $("#packetsDiv");
//nuke the contents first, then add to it. //nuke the contents first, then add to it.
if (size_dict(packet_list) == 0 && size_dict(data) > 0) {
packetsdiv.html('')
}
jQuery.each(data, function(i, val) { jQuery.each(data, function(i, val) {
if ( packet_list.hasOwnProperty(i) == false ) { if ( packet_list.hasOwnProperty(i) == false ) {
packet_list[i] = val; packet_list[i] = val;

View File

@ -48,24 +48,32 @@
</head> </head>
<body> <body>
<header> <div class='ui text container'>
<div id="title">APRSD <span id="version"></span></div> <h1 class='ui dividing header'>APRSD {{ version }}</h1>
<div id="callsign">{{ callsign }}</div> </div>
<div id="aprsis"></div>
<div id="uptime"></div> <div class='ui grid text container'>
</header> <div class='left floated ten wide column'>
<span style='color: green'>{{ callsign }}</span>
connected to
<span style='color: blue' id='aprsis'>NONE</span>
</div>
<div class='right floated four wide column'>
<span id='uptime'>NONE</span>
</div>
</div>
<div id="main" class="main ui container">
<!-- Tab links --> <!-- Tab links -->
<div class="ui tabular menu"> <div class="ui top attached tabular menu">
<div class="active item" data-tab="charts-tab">Charts</div> <div class="active item" data-tab="charts-tab">Charts</div>
<div class="item" data-tab="msgs-tab">Messages</div> <div class="item" data-tab="msgs-tab">Messages</div>
<div class="item" data-tab="config-tab">Config</div> <div class="item" data-tab="config-tab">Config</div>
</div> </div>
<!-- Tab content --> <!-- Tab content -->
<div class="ui active tab" data-tab="charts-tab"> <div class="ui bottom attached active tab segment" data-tab="charts-tab">
<h3>Charts</h3> <h3 class="ui dividing header">Charts</h3>
<div id="graphs"> <div id="graphs">
<div id="left"><canvas id="messageChart"></canvas></div> <div id="left"><canvas id="messageChart"></canvas></div>
<div id="right"><canvas class="right" id="emailChart"></canvas></div> <div id="right"><canvas class="right" id="emailChart"></canvas></div>
@ -74,28 +82,26 @@
<div id="center"><canvas id="memChart"></canvas></div> <div id="center"><canvas id="memChart"></canvas></div>
</div> </div>
<div id="stats"> <div id="stats">
<button id="toggleStats">Toggle raw json</button> <button class="ui button" id="toggleStats">Toggle raw json</button>
<pre id="jsonstats" class="language-json">{{ stats }}</pre> <pre id="jsonstats" class="language-json">{{ stats }}</pre>
</div> </div>
</div> </div>
<div class="ui tab" data-tab="msgs-tab"> <div class="ui bottom attached tab segment" data-tab="msgs-tab">
<h3>Messages (<span id="packets_count">0</span>)</h3> <h3 class="ui dividing header">Messages (<span id="packets_count">0</span>)</h3>
<div class="ui styled fluid accordion" id="accordion"> <div class="ui styled fluid accordion" id="accordion">
<div id="packetsDiv"> <div id="packetsDiv" class="ui mini text">Loading</div>
</div>
</div> </div>
</div> </div>
<div class="ui tab" data-tab="config-tab"> <div class="ui bottom attached tab segment" data-tab="config-tab">
<h3>Config</h3> <h3 class="ui dividing header">Config</h3>
<pre id="configjson" class="language-json">{{ config_json|safe }}</pre> <pre id="configjson" class="language-json">{{ config_json|safe }}</pre>
</div> </div>
</div>
<footer> <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://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> <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
</footer> </div>
</body> </body>
</html> </html>