mirror of
https://github.com/craigerl/aprsd.git
synced 2025-02-21 13:08:32 -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
|
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),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -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%;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -48,54 +48,60 @@
|
|||||||
</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>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="main" class="main ui container">
|
<div class='ui grid text container'>
|
||||||
<!-- Tab links -->
|
<div class='left floated ten wide column'>
|
||||||
<div class="ui tabular menu">
|
<span style='color: green'>{{ callsign }}</span>
|
||||||
<div class="active item" data-tab="charts-tab">Charts</div>
|
connected to
|
||||||
<div class="item" data-tab="msgs-tab">Messages</div>
|
<span style='color: blue' id='aprsis'>NONE</span>
|
||||||
<div class="item" data-tab="config-tab">Config</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab content -->
|
<div class='right floated four wide column'>
|
||||||
<div class="ui active tab" data-tab="charts-tab">
|
<span id='uptime'>NONE</span>
|
||||||
<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>
|
</div>
|
||||||
</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://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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user