<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "MMDVM-Dashboard by DG9VH" >
< meta name = "author" content = "DG9VH" >
<!-- So refresh works every time -->
< meta http-equiv = "expires" content = "0" >
< title > MMDVM-Dashboard by DG9VH< / title >
<!-- Bootstrap core CSS -->
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous" >
<!-- Bootstrap core JavaScript -->
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous" > < / script >
< script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous" > < / script >
<!-- Datatables -->
< link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" >
< script type = "text/javascript" src = "https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" > < / script >
< script type = "text/javascript" src = "js/config.js" > < / script >
< script type = "text/javascript" src = "metar.js/metar.js" > < / script >
< script type = "text/javascript" src = "js/functions.js" > < / script >
< link rel = "stylesheet" href = "css/styles.css" >
< title > DG9VH - MMDVM-Dashboard by DG9VH< / title >
< / head >
< body >
<!-- Navigation -->
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark static-top" >
< div class = "container-fluid" >
< span class = "float:left" >
< a class = "navbar-brand" href = "#" > MMDVM-Dashboard by DG9VH< / a >
< / span >
< span class = "navbar-brand float:right" > Websocket-Based< / span >
< / div >
< / nav >
< ul class = "nav nav-tabs" id = "myTab" role = "tablist" >
< li class = "nav-item" >
< a class = "nav-link" id = "currtx-tab" data-toggle = "tab" href = "#currtx" role = "tab" aria-controls = "currtx" aria-selected = "true" > Currently TXing< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "lastheard-tab" data-toggle = "tab" href = "#lastheard" role = "tab" aria-controls = "lastheard" aria-selected = "false" > Last Heard< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "localheard-tab" data-toggle = "tab" href = "#localheard" role = "tab" aria-controls = "localheard" aria-selected = "false" > Local Heard< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "qso-tab" data-toggle = "tab" href = "#qso" role = "tab" aria-controls = "qso" aria-selected = "false" > In QSO< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "dapnet-tab" data-toggle = "tab" href = "#dapnet" role = "tab" aria-controls = "dapnet" aria-selected = "false" > DAPNET Messages< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "sysinfo-tab" data-toggle = "tab" href = "#sysinfo" role = "tab" aria-controls = "sysinfo" aria-selected = "false" > System Info< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" id = "about-tab" data-toggle = "tab" href = "#about" role = "tab" aria-controls = "about" aria-selected = "false" > About< / a >
< / li >
< / ul >
< div class = "tab-content" id = "myTabContent" >
< div class = "tab-pane fade" id = "currtx" role = "tabpanel" aria-labelledby = "currtx-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > Currently TXing< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
<!-- Tabelle -->
< div class = "table-responsive" >
< table id = "currTX" class = "table currTX table-condensed table-striped table-hover" >
< thead >
< tr >
< th > Mode< / th >
< th > Callsign< / th >
< th > Target< / th >
< th > Source< / th >
< th > Dur (s)< / th >
< / tr >
< / thead >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "lastheard" role = "tabpanel" aria-labelledby = "lastheard-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > Last Heard List of today's callsigns.< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
<!-- Tabelle -->
< div class = "table-responsive" >
< table id = "lastHeard" class = "table lastHeard table-condensed table-striped table-hover" >
< thead >
< tr >
< th > Time (UTC)< / th >
< th > Mode< / th >
< th > Callsign< / th >
< th > Target< / th >
< th > Source< / th >
< th > Dur (s)< / th >
< th > Loss< / th >
< th > BER< / th >
< th > QSO< / th >
< / tr >
< / thead >
< tr >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< td > < / td >
< / tr >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "localheard" role = "tabpanel" aria-labelledby = "localheard-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > Local Heard List of today< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
<!-- Tabelle -->
< div class = "table-responsive" >
< table id = "localHeard" class = "table localHeard table-condensed table-striped table-hover" >
< thead >
< tr >
< th > Time (UTC)< / th >
< th > Mode< / th >
< th > Callsign< / th >
< th > Target< / th >
< th > Source< / th >
< th > Dur (s)< / th >
< th > BER< / th >
< / tr >
< / thead >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "qso" role = "tabpanel" aria-labelledby = "qso-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > Currently in QSO< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
<!-- Tabelle -->
< div class = "table-responsive" >
< button id = "button" > Delete selected row< / button >
< table id = "inQSO" class = "table inQSO table-condensed table-striped table-hover" >
< thead >
< tr >
< th > Callsign< / th >
< th > Added at< / th >
< / tr >
< / thead >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "dapnet" role = "tabpanel" aria-labelledby = "dapnet-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > Dapnet-Messages< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
< span class = "badge badge-light" id = "messagesinqueue" > Messages in Queue: 0< / span >
<!-- Tabelle -->
< div class = "table-responsive" >
< table id = "dapnetmessages" class = "table dapnetmessages table-condensed table-striped table-hover" >
< thead >
< tr >
< th > Time (UTC)< / th >
< th > Slot< / th >
< th > RIC< / th >
< th > Message< / th >
< / tr >
< / thead >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "sysinfo" role = "tabpanel" aria-labelledby = "sysinfo-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > System Info< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
< b > CPU:< / b >
< ul >
< li > Temperature: < span id = "cputemp" > < / span > °C< / li >
< li > Frequency: < span id = "cpufrg" > < / span > MHz< / li >
< li > Usage: < span id = "cpuusage" > < / span > %< / li >
< / ul >
< b > Load:< / b >
< ul >
< li > Last Minute: < span id = "cpu_load1" > < / span > < / li >
< li > Last 5 Minutes: < span id = "cpu_load5" > < / span > < / li >
< li > Last 15 Minutes: < span id = "cpu_load15" > < / span > < / li >
< / ul >
< b > Memory:< / b >
< ul >
< li > Total: < span id = "ram_total" > < / span > MB< / li >
< li > Used: < span id = "ram_used" > < / span > MB< / li >
< li > Free: < span id = "ram_free" > < / span > MB< / li >
< li > Usage: < span id = "ram_percent_used" > < / span > %< / li >
< / ul >
< b > Disk:< / b >
< ul >
< li > Total: < span id = "disk_total" > < / span > GB< / li >
< li > Used: < span id = "disk_used" > < / span > GB< / li >
< li > Free: < span id = "disk_free" > < / span > GB< / li >
< li > Usage: < span id = "disk_percent_used" > < / span > %< / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "tab-pane fade" id = "about" role = "tabpanel" aria-labelledby = "about-tab" >
< div class = "panel panel-default" >
<!-- Standard - Panel - Inhalt -->
< div class = "panel-heading" > About the Dashboard< span class = "pull-right clickable" > < i class = "glyphicon glyphicon-chevron-up" > < / i > < / span > < / div >
< div class = "panel-body" >
< p > This Dashboard uses websockets-technology to transfer data from host to client. It actually uses the logfile of the MMDVMHost by G4KLX to get the entries into the different tables.< / p >
< p > If you have any ideas or issues feel free to leave a comment/issue in < a target = "_new" href = "https://github.com/dg9vh/MMDVMHost-Websocketboard" > github< / a > .< / p >
< / div >
< / div >
< / div >
< / div >
< footer class = "footer" >
< div class = "container" >
< span class = "text-muted" > MMDVM-Dashboard by DG9VH | get your own at: < a href = "https://github.com/dg9vh/MMDVMHost-Websocketboard" > https://github.com/dg9vh/MMDVMHost-Websocketboard< / a > | Follow me < a href = "https://twitter.com/DG9VH" > @DG9VH< / a > < / span >
< / div >
< / footer >
< script >
var t_ct = $('#currTX').DataTable( {
"order": [[ 0, "asc" ]]
} );
var t_lh = $('#lastHeard').DataTable( {
"order": [[ 0, "desc" ]]
} );
var t_localh = $('#localHeard').DataTable( {
"order": [[ 0, "desc" ]]
} );
var t_dapnet = $('#dapnetmessages').DataTable( {
"order": [[ 0, "desc" ]]
} );
var ws3 = new WebSocket("ws://" + window.location.hostname + ":5678/SYSINFO");
ws3.onmessage = function (event) {
getSysInfo(document, event);
};
var ws1 = new WebSocket("ws://" + window.location.hostname + ":5678/MMDVM");
ws1.onmessage = function (event) {
getLastHeard(document, event);
getLocalHeard(document, event);
};
t_lh.order( [ 0, 'desc' ] ).draw();
t_localh.order( [ 0, 'desc' ] ).draw();
var t_qso = $('#inQSO').DataTable( {
"order": [[ 0, "asc" ]]
} );
$('#inQSO tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
} else {
t_qso.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
t_qso.row('.selected').remove().draw( false );
} );
var ws2 = new WebSocket("ws://" + window.location.hostname + ":5678/DAPNET");
ws2.onmessage = function (event) {
getDapnetMessages(document, event);
};
t_dapnet.order( [ 0, 'desc' ] ).draw();
< / script >
< / body >
< / html >
