mirror of
https://github.com/craigerl/aprsd.git
synced 2025-02-20 12:42:15 -05:00
reworked the admin ui to use semenatic ui more
This commit is contained in:
parent
5afc7fb664
commit
3c45d8bd0f
@ -5,6 +5,7 @@ from logging import NullHandler
|
||||
from logging.handlers import RotatingFileHandler
|
||||
import sys
|
||||
|
||||
import aprsd
|
||||
from aprsd import messaging, packets, plugin, stats, utils
|
||||
import flask
|
||||
import flask_classful
|
||||
@ -49,6 +50,7 @@ class APRSDFlask(flask_classful.FlaskView):
|
||||
"index.html",
|
||||
initial_stats=stats,
|
||||
callsign=self.config["aprs"]["login"],
|
||||
version=aprsd.__version__,
|
||||
config_json=json.dumps(self.config),
|
||||
)
|
||||
|
||||
|
||||
@ -1,29 +1,20 @@
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background: #eeeeee;
|
||||
margin: 2em;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-family: system-ui, sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 2em;
|
||||
height: 10vh;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#main {
|
||||
padding: 2em;
|
||||
height: 80vh;
|
||||
}
|
||||
footer {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
.ui.segment {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
#graphs {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
@ -191,6 +191,9 @@ function update_stats( data ) {
|
||||
function update_packets( data ) {
|
||||
var packetsdiv = $("#packetsDiv");
|
||||
//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) {
|
||||
if ( packet_list.hasOwnProperty(i) == false ) {
|
||||
packet_list[i] = val;
|
||||
|
||||
@ -48,54 +48,60 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="title">APRSD <span id="version"></span></div>
|
||||
<div id="callsign">{{ callsign }}</div>
|
||||
<div id="aprsis"></div>
|
||||
<div id="uptime"></div>
|
||||
</header>
|
||||
<div class='ui text container'>
|
||||
<h1 class='ui dividing header'>APRSD {{ version }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="main" class="main ui container">
|
||||
<!-- Tab links -->
|
||||
<div class="ui 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="config-tab">Config</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='aprsis'>NONE</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab content -->
|
||||
<div class="ui active tab" data-tab="charts-tab">
|
||||
<h3>Charts</h3>
|
||||
<div id="graphs">
|
||||
<div id="left"><canvas id="messageChart"></canvas></div>
|
||||
<div id="right"><canvas class="right" id="emailChart"></canvas></div>
|
||||
</div>
|
||||
<div id="graphs_center">
|
||||
<div id="center"><canvas id="memChart"></canvas></div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
<button id="toggleStats">Toggle raw json</button>
|
||||
<pre id="jsonstats" class="language-json">{{ stats }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui tab" data-tab="msgs-tab">
|
||||
<h3>Messages (<span id="packets_count">0</span>)</h3>
|
||||
<div class="ui styled fluid accordion" id="accordion">
|
||||
<div id="packetsDiv">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui tab" data-tab="config-tab">
|
||||
<h3>Config</h3>
|
||||
<pre id="configjson" class="language-json">{{ config_json|safe }}</pre>
|
||||
<div class='right floated four wide column'>
|
||||
<span id='uptime'>NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<!-- 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="config-tab">Config</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab content -->
|
||||
<div class="ui bottom attached active tab segment" data-tab="charts-tab">
|
||||
<h3 class="ui dividing header">Charts</h3>
|
||||
<div id="graphs">
|
||||
<div id="left"><canvas id="messageChart"></canvas></div>
|
||||
<div id="right"><canvas class="right" id="emailChart"></canvas></div>
|
||||
</div>
|
||||
<div id="graphs_center">
|
||||
<div id="center"><canvas id="memChart"></canvas></div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
<button class="ui button" id="toggleStats">Toggle raw json</button>
|
||||
<pre id="jsonstats" class="language-json">{{ stats }}</pre>
|
||||
</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="config-tab">
|
||||
<h3 class="ui dividing header">Config</h3>
|
||||
<pre id="configjson" class="language-json">{{ config_json|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>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user