Widget:Hotspots: Unterschied zwischen den Versionen

Aus Freifunk Dresden - Anwender-Wiki
Zur Navigation springen Zur Suche springen
(add button color)
(41 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 37: Zeile 37:
 
<div>
 
<div>
 
<b>Spalten anzeigen:</b>  
 
<b>Spalten anzeigen:</b>  
<!-- <a class="toggle-vis" data-column="1">Stats</a>, -->
+
<!-- <a class="toggle-vis" data-column="2">Stats</a>, -->
  <a class="toggle-vis" data-column="2">IP-Adresse</a>,
+
  <a class="toggle-vis" data-column="3">IP-Adresse</a>,
  <a class="toggle-vis" data-column="4">Registriert</a>,
+
  <a class="toggle-vis" data-column="5">Uptime</a>,
 +
<a class="toggle-vis" data-column="6">Erstmalig registriert</a>,
 +
<a class="toggle-vis" data-column="7">Registriert</a>,
  
  <a class="toggle-vis" data-column="9">SSID</a>,
+
  <a class="toggle-vis" data-column="12">SSID</a>,
  <a class="toggle-vis" data-column="10">Gateway</a>,
+
  <a class="toggle-vis" data-column="13">Gateway</a>,
  <a class="toggle-vis" data-column="11">Model</a>
+
  <a class="toggle-vis" data-column="14">Model</a>
 
</div>
 
</div>
  
Zeile 51: Zeile 53:
 
                 <th>Node</th>
 
                 <th>Node</th>
 
                 <th>Stat</th>
 
                 <th>Stat</th>
 +
                <th>Conn.</th>
 
                 <th>IP</th>
 
                 <th>IP</th>
                 <th tilte="Online / Gateway / Offline Tage">Ok<br>GW<br>Tage</th>
+
                 <th title="Online / Gateway / Offline Tage">Ok<br>GW<br>Tage</th>
 +
                <th>Uptime</th>
 +
                <th>Erstmalig<br>registriert</th>
 
                 <th>Registriert</th>
 
                 <th>Registriert</th>
 
                 <th>Name</th>
 
                 <th>Name</th>
Zeile 67: Zeile 72:
 
         <tfoot>
 
         <tfoot>
 
             <tr style="background-color:#434244;color:#cccccc;">
 
             <tr style="background-color:#434244;color:#cccccc;">
  <th colspan="14" ></th>
+
  <th colspan="17" ></th>
 
             </tr>
 
             </tr>
 
         </tfoot>
 
         </tfoot>
Zeile 102: Zeile 107:
 
   var myTable = my.query('#hotspots').DataTable( {
 
   var myTable = my.query('#hotspots').DataTable( {
 
"processing": true,
 
"processing": true,
 
 
//"pageLength" : 25,
 
//"pageLength" : 25,
 
//"lengthMenu": [[ 25, 50, 100, 200, -1 ], [25,50,100,200,"All"]],
 
//"lengthMenu": [[ 25, 50, 100, 200, -1 ], [25,50,100,200,"All"]],
 
paging: false,
 
paging: false,
 
 
"order" : [[0,'asc']],
 
"order" : [[0,'asc']],
  
Zeile 112: Zeile 115:
 
"fixedHeader": true,
 
"fixedHeader": true,
 
//"responsive": true,
 
//"responsive": true,
 +
"language":{
 +
"search":"Filter"
 +
},
  
 
// define nowrap for specific columns
 
// define nowrap for specific columns
 
"columnDefs": [
 
"columnDefs": [
{ className: "dt-nowrap", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13 ] },
+
{ className: "dt-nowrap", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] },
 
// default: visible
 
// default: visible
{ visible: false, "targets": [ 2,4,9,10,11 ] }
+
{ visible: false, "targets": [3,5,6,7,12,13,14] }
  
 
],
 
],
Zeile 147: Zeile 153:
 
         // see: https://datatables.net/manual/data/orthogonal-data
 
         // see: https://datatables.net/manual/data/orthogonal-data
 
         "columns": [
 
         "columns": [
 +
                // node
 
{ "data": "id",
 
{ "data": "id",
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
 
// If display or filter data is requested, format the date
 
// If display or filter data is requested, format the date
 
if ( type === 'display' || type === 'filter' ) {
 
if ( type === 'display' || type === 'filter' ) {
return '<a href="http://' + data + '.freifunk-dresden.de/">' + data + '</a>';
+
return '<a href="http://' + data + '.freifunk-dresden.de/" target="_blank">' + data + '</a>';
 
}
 
}
 
//else return id that is used when sorting this column
 
//else return id that is used when sorting this column
Zeile 157: Zeile 164:
 
}
 
}
 
},
 
},
 +
                // statistic icon
 
{ "data": "id",
 
{ "data": "id",
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
Zeile 167: Zeile 175:
 
}
 
}
 
},
 
},
 
+
                //connections
 +
{ "data": "status.connection_types",
 +
  "render" : function (data, type, row) {
 +
if ( type === 'display' || type === 'filter' ) {
 +
var wifi = data.wifi ? 'wifi-on-24.png' : 'wifi-off-24.png';
 +
var backbone = data.backbone ? 'backbone-on-24.png' : 'backbone-off-24.png';
 +
var lan = data.lan ? 'lan-on-24.png' : 'lan-off-24.png';
 +
return '<img alt="Ja" src="/hotspots/images/' + wifi + '">&nbsp;'
 +
+ '<img alt="Ja" src="/hotspots/images/' + backbone + '">&nbsp;'
 +
+ '<img alt="Ja" src="/hotspots/images/' + lan+ '">';
 +
}
 +
                                // sort
 +
                                var sort_value = data.lan ? 1 : 0;
 +
                                if(data.backbone) sort_value += 10;
 +
                                if(data.wifi) sort_value += 100;
 +
return sort_value;
 +
}
 +
},
 +
                //ip
 
{ "data": "id",  //use "id" as input data for renderer
 
{ "data": "id",  //use "id" as input data for renderer
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
Zeile 173: Zeile 199:
 
if ( type === 'display' || type === 'filter' ) {
 
if ( type === 'display' || type === 'filter' ) {
 
var ip = getIp(data);
 
var ip = getIp(data);
return '<a href="http://' + ip + '/">' + ip + '</a>';
+
return '<a href="http://' + ip + '/" target="_blank">' + ip + '</a>';
 
}
 
}
 
//else return id that is used when sorting this column
 
//else return id that is used when sorting this column
Zeile 179: Zeile 205:
 
}
 
}
 
},
 
},
 +
                //online/gw/offline
 
{ "data": "status",  
 
{ "data": "status",  
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
 
if ( type === 'display' || type === 'filter' ) {
 
if ( type === 'display' || type === 'filter' ) {
 +
                                        var t = new Date(data.lastseen*1000);
 +
var day = ( '0' + t.getDate() ).slice(-2);
 +
var month = ( '0' + (t.getMonth() + 1) ).slice(-2);
 +
var h = ( '0' + t.getHours() ).slice(-2);
 +
var m = ( '0' + t.getMinutes() ).slice(-2);
 +
var stat_time = day + '.' + month + '.' + t.getFullYear()
 +
      + ' ' + h + ':' + m;
 +
 
var img_o = data.online ? 'yes.png' : 'no.png';
 
var img_o = data.online ? 'yes.png' : 'no.png';
var img_g = data.gateway ? 'yes.png' : 'no.png';
+
var title_o = data.online ? 'online' : 'offline';
return '<img alt="Ja" src="/hotspots/images/' + img_o + '">'
+
var img_g = data.gateway && data.online ? 'yes.png' : 'no-grey.png';
+ '<img alt="Ja" src="/hotspots/images/' + img_g + '">'
+
                                        var title_g = data.gateway && data.online ? 'gateway' : '!gw';
 +
 
 +
return '<img title="'+title_o+'(StatTime: '+stat_time+')" src="/hotspots/images/' + img_o + '">'
 +
+ '<img title="'+title_g+'" src="/hotspots/images/' + img_g + '">'
 
+ '[' + data.offline_since + ']';
 
+ '[' + data.offline_since + ']';
 
}
 
}
Zeile 191: Zeile 229:
 
}
 
}
 
},
 
},
 +
                //uptime
 +
                { "data": "status",
 +
                  "render" : function (data, type, row) {
 +
                                var rest = 0;
 +
                                if(data.online){ rest = data.uptime };
 +
// If display or filter data is requested, format the date
 +
if ( type === 'display' || type === 'filter' ) {
 +
                                       
 +
                                        var days = Math.floor(rest / 86400);
 +
                                        rest = rest % 86400;
 +
                                        var hours = Math.floor(rest / 3600);
 +
                                        rest = rest % 3600;
 +
                                        var minutes = Math.floor(rest/60);
 +
 +
return days+'d '+hours+'h '+minutes+'m';
 +
}
 +
//else return id that is used when sorting this column
 +
return rest;
 +
}
 +
                },
 +
                //firstseen
 +
{ "data": "status.firstseen",
 +
  "render" : function (data, type, row) {
 +
if ( type === 'display' || type === 'filter' ) {
 +
var t = new Date(data*1000);
 +
var day = ( '0' + t.getDate() ).slice(-2);
 +
var month = ( '0' + (t.getMonth() + 1) ).slice(-2);
 +
var h = ( '0' + t.getHours() ).slice(-2);
 +
var m = ( '0' + t.getMinutes() ).slice(-2);
 +
return day + '.' + month + '.' + t.getFullYear()
 +
      + ' ' + h + ':' + m;
 +
}
 +
return data;
 +
}
 +
},
 +
                //registerred
 
{ "data": "status.registered",  
 
{ "data": "status.registered",  
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
Zeile 196: Zeile 270:
 
var t = new Date(data*1000);
 
var t = new Date(data*1000);
 
var day = ( '0' + t.getDate() ).slice(-2);
 
var day = ( '0' + t.getDate() ).slice(-2);
var month = ( '0' + t.getMonth() ).slice(-2);
+
var month = ( '0' + (t.getMonth() + 1) ).slice(-2);
 
var h = ( '0' + t.getHours() ).slice(-2);
 
var h = ( '0' + t.getHours() ).slice(-2);
 
var m = ( '0' + t.getMinutes() ).slice(-2);
 
var m = ( '0' + t.getMinutes() ).slice(-2);
Zeile 205: Zeile 279:
 
}
 
}
 
},
 
},
 +
                //nick
 
{ "data": "name",
 
{ "data": "name",
 
  "render" : function (data, type, row) { return data.substring(0,15); }
 
  "render" : function (data, type, row) { return data.substring(0,15); }
 
},
 
},
{ "data": "position",
+
                //map
 +
{ "data": "id",
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
 
if ( type === 'display' || type === 'filter' ) {
 
if ( type === 'display' || type === 'filter' ) {
  return '<a href="http://maps.google.de/maps?f=q&hl=de&q='
+
  return '<a href="https://meshviewer.freifunk-dresden.de/' + data + '" target="_blank">Map</a>';  
                                      + data.lat.toString() + ','
 
                                      + data.lon.toString() + '&ie=UTF8&z=15&iwloc=addr&om=1">Map</a>';  
 
 
}
 
}
 
return 0;
 
return 0;
 
}
 
}
 
},
 
},
 +
                //firmware version
 
{ "data": "firmware" },
 
{ "data": "firmware" },
 +
                //autoupdate
 
{ "data": "status.autoupdate",
 
{ "data": "status.autoupdate",
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
 
if ( type === 'display' || type === 'filter' ) {
 
if ( type === 'display' || type === 'filter' ) {
var img_o = data ? 'yes.png' : 'no.png';
+
var img_au = data ? 'yes.png' : 'no.png';
return '<img alt="Ja" src="/hotspots/images/' + img_o + '">';
+
                                        var title_au = data ? 'autoupdate' : '!au';
 +
return '<img title="'+title_au+'" src="/hotspots/images/' + img_au + '">';
 
}
 
}
 
return data;
 
return data;
 
}
 
}
 
},
 
},
 +
                //wifi ssid
 
{ "data": "status.ssid"},
 
{ "data": "status.ssid"},
 +
                //preverred gateway
 
{ "data": "status",
 
{ "data": "status",
 
  "render" : function (data, type, row) {
 
  "render" : function (data, type, row) {
Zeile 237: Zeile 316:
 
}
 
}
 
},
 
},
 +
                //device model
 
{ "data": "model",
 
{ "data": "model",
 
  "render" : function (data, type, row) { return data.substring(0,25); }
 
  "render" : function (data, type, row) { return data.substring(0,25); }
 
},
 
},
 +
                //location
 
{ "data": "location",
 
{ "data": "location",
 
  "render" : function (data, type, row) { return data.substring(0,25); }
 
  "render" : function (data, type, row) { return data.substring(0,25); }
 
},
 
},
 +
                //comment
 
{ "data": "note",
 
{ "data": "note",
 
  "render" : function (data, type, row) { return data.substring(0,40); }
 
  "render" : function (data, type, row) { return data.substring(0,40); }
Zeile 267: Zeile 349:
  
 
         //create  <div>
 
         //create  <div>
         var popup = '<div id="statdialog" title="Statistik Knoten: '+ id +'">'
+
         var popup = '<div id="statdialog' + id + '" title="Statistik">'
                   + '<button onclick=\'switchTime(' + id + ', "6hour")\'>6 Stunden</button>'
+
                  + '<b>Knoten:</b> ' + id + '<br>'
                   + '<button onclick=\'switchTime(' + id + ', "1day")\'>Tag</button>'
+
                   + '<button id="btn_h_'+id+'" onclick=\'switchTime(' + id + ', "6hour")\'>6 Stunden</button>'
                   + '<button onclick=\'switchTime(' + id + ', "1week")\'>Woche</button>'
+
                   + '<button id="btn_d_'+id+'" onclick=\'switchTime(' + id + ', "1day")\'>Tag</button>'
                   + '<button onclick=\'switchTime(' + id + ', "1month")\'>Monat</button>'
+
                   + '<button id="btn_w_'+id+'" onclick=\'switchTime(' + id + ', "1week")\'>Woche</button>'
                   + '<button onclick=\'switchTime(' + id + ', "1year")\'>Jahr</button>'
+
                   + '<button id="btn_m_'+id+'" onclick=\'switchTime(' + id + ', "1month")\'>Monat</button>'
 +
                   + '<button id="btn_y_'+id+'" onclick=\'switchTime(' + id + ', "1year")\'>Jahr</button>'
 +
                  + '<br>'
 +
                  + '<img id="img_timing_'+id+'" height="150" width="350" >'
 +
                  + '<br>'
 +
                  + '<img id="img_clients_'+id+'" height="150" width="350" >'
 
                   + '<br>'
 
                   + '<br>'
                   + '<img id="img_timing" height="150" width="350" >'
+
                   + '<img id="img_backbone_'+id+'" height="150" width="350" >'
                  + '<img id="img_clients" height="150" width="350" >'
 
 
                   + '<br>'
 
                   + '<br>'
                   + '<img id="img_backbone" height="150" width="350" >'
+
                   + '<img id="img_wifi_'+id+'" height="150" width="350" >'
                  + '<img id="img_wifi" height="150" width="350" >'
 
 
                   + '<br>'
 
                   + '<br>'
                   + '<img id="img_ovpn" height="150" width="350" >'
+
                   + '<img id="img_ovpn_'+id+'" height="150" width="350" >'
 
                   + '</div>';
 
                   + '</div>';
 
         my.query('body').append(popup);
 
         my.query('body').append(popup);
Zeile 288: Zeile 373:
  
 
         //show popup
 
         //show popup
         my.query( '#statdialog' ).dialog({
+
         my.query( '#statdialog' + id ).dialog({
 
           resizable: false,
 
           resizable: false,
 
           height: "auto",
 
           height: "auto",
Zeile 294: Zeile 379:
 
           //width: 792, //16+350+16 (margin is 16)
 
           //width: 792, //16+350+16 (margin is 16)
 
           width: "auto",
 
           width: "auto",
           modal: true,
+
           modal: false,
 
           // position: { my: "left top", at: "left top"},
 
           // position: { my: "left top", at: "left top"},
 
           close: function( event, ui ) {
 
           close: function( event, ui ) {
Zeile 313: Zeile 398:
 
             var srcWifi='https://stats.freifunk-dresden.de/' + id + '/wifi/' + period;
 
             var srcWifi='https://stats.freifunk-dresden.de/' + id + '/wifi/' + period;
 
             var srcOvpn='https://stats.freifunk-dresden.de/' + id + '/ovpn/' + period;
 
             var srcOvpn='https://stats.freifunk-dresden.de/' + id + '/ovpn/' + period;
             my.query('#img_timing').attr("src",srcTiming);
+
             my.query('#img_timing_'+id).attr("src",srcTiming);
             my.query('#img_clients').attr("src",srcClients);
+
             my.query('#img_clients_'+id).attr("src",srcClients);
             my.query('#img_backbone').attr("src",srcBackbone);
+
             my.query('#img_backbone_'+id).attr("src",srcBackbone);
             my.query('#img_wifi').attr("src",srcWifi);
+
             my.query('#img_wifi_'+id).attr("src",srcWifi);
             my.query('#img_ovpn').attr("src",srcOvpn);
+
             my.query('#img_ovpn_'+id).attr("src",srcOvpn);
 +
            //mark button (boarder)
 +
            my.query('#btn_h_'+id).attr("style","background-color:none;");
 +
            my.query('#btn_d_'+id).attr("style","background-color:none;");
 +
            my.query('#btn_w_'+id).attr("style","background-color:none;");
 +
            my.query('#btn_m_'+id).attr("style","background-color:none;");
 +
            my.query('#btn_y_'+id).attr("style","background-color:none;");
 +
            if(period=="6hour") my.query('#btn_h_'+id).attr("style","background-color:powderblue;");
 +
            if(period=="1day") my.query('#btn_d_'+id).attr("style","background-color:powderblue;");
 +
            if(period=="1week") my.query('#btn_w_'+id).attr("style","background-color:powderblue;");
 +
            if(period=="1month") my.query('#btn_m_'+id).attr("style","background-color:powderblue;");
 +
            if(period=="1year") my.query('#btn_y_'+id).attr("style","background-color:powderblue;");
 
         }
 
         }
  
 
</script>
 
</script>

Version vom 3. Juni 2020, 14:41 Uhr

<script type="text/javascript" src="https://api.freifunk-dresden.de/freifunk-dresden-hotspots.json.js"></script>

<script type="text/javascript" src="/hotspots/jquery/jquery.js"></script> <script type="text/javascript" src="/hotspots/jquery/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="/hotspots/jquery/jquery-ui.min.css"/>

<link rel="stylesheet" type="text/css" href="/hotspots/datatables/datatables.min.css"/> <script type="text/javascript" src="/hotspots/datatables/datatables.min.js"></script>

<style> .stats {

  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOCSURBVEiJ5ZfLbxtVGMV/c2fcelon9diOG1dGNN4QYiJYsGGBQGp4qkiwQbBBleiGP6AS/AM8VB5LNoAilmzKhrJBQgoIdYVAbVVqSBrn4feMX01dxzO+LBzfempHrcGhC87mes74+879zpwZzcADggbw3idfnTaE/mXH7cQPSigQMIpex337/XNnvwMwAHQhll99+dloLGJxdW2LdCrpK5oEV7arx7/9/sdlYAZAALiuG41FrEkOOISZqIXrurH+sTG4s1G/D4pTwn2L7mVht1FHTB/7R/avrNzhxdBW7oHdzPVxS0ZifOHVvx6McGftz4kIjxcuKQlnrqvz/1m4us0mhVaLR+NhrpVqvv955RJ/NHcPJlxe1fatg7j926/jtNpf2CuXRghXfesg2lcuT0a4demXIa5rV3yrgpTsXvkdTcr7Ft43XFM//0Q2/aSPC66tYwKF1XV4eF7ViEaNYzs7cLPx78K1kIiS37jBQiKKZpoqILUfOrRn4kRkh+2Bmva1OjagV8o88nh6SPS+w+XmcyBlbx2AV3UIzKXoVh0/Xyz0mjn+S9Dd2UFrtUZJ7CO83bPGzW37GzkOh+ZSeI4/1W6xiAiFEHel3d3Mopfy4wmLUEht4I6wTeBkCs/xT9wtFTi8+AT6XaHrbGTRC37X+hgZLieTQc4v0s5k2Og/pTI3sG42WTWOEm42wHVVzXQ2S/upZzh8acXX58jlqxja6HCpidOppAqBWbNJLC1h1mzFzVtH0YJBFhbn0YJBRLOuagL1GnPPLyEcW3HpVJKpegVRzPt6D02s4Hl4VYdDjy3iOTbS83q0Y6NbEQD0sIWo1wCQt26hGQb61DRSCGSrhWaaICWdrU30rgQpQdNGT9yH7lQwjs+iGQGM+KxKrOfYiD1hYUUQzQYAbrGAMZsAoBuL4xZ7YfLKJURoCmkewauU97daEaUCRvKhnh3JJO7W5p6wgx4O93jLQtSre8J59MSJnnB0Rm20s5ElcHIO70SSTnZ9SFhZnXvjNQBCgPPcaXJrW5jmNK1PP8ICGsDtp0/1eC2AefECuYsXAGi98Arba1sEIzGcz86r5q1TL6FNRXA+/qBHvPimOqcBvHv+C/nOmdeBybzK7sd9vvwNH547q8Ge1bqhV4tl/705aRRLNoZhqCeM+pLQhfa163oH9nJt6LrT9by3+l8S/z/8Dfo07AAuLNF8AAAAAElFTkSuQmCC');
   background-size: 30px;
   background-repeat: no-repeat;
   background-position: center;
   display: block;
   width: 30px;
   height: 30px;
   text-decoration: none;
   cursor: pointer;
   overflow: hidden;
   text-indent: 100%;
   white-space:nowrap;

} </style>


Spalten anzeigen:

<a class="toggle-vis" data-column="3">IP-Adresse</a>,
<a class="toggle-vis" data-column="5">Uptime</a>,
<a class="toggle-vis" data-column="6">Erstmalig registriert</a>,
<a class="toggle-vis" data-column="7">Registriert</a>,
<a class="toggle-vis" data-column="12">SSID</a>,
<a class="toggle-vis" data-column="13">Gateway</a>,
<a class="toggle-vis" data-column="14">Model</a>
<thead> </thead> <tfoot> </tfoot>
Node Stat Conn. IP Ok
GW
Tage
Uptime Erstmalig
registriert
Registriert Name Map Firmware AU SSID Gateway
aktuell/bevorzugt.
Model Ort Kommentar


<script type="text/javascript">

function getIp(node) {

var _middle = Math.floor((node / 255)) % 256;
var _minor  = (node % 255) + 1;
return '10.200.' + _middle.toString() + '.' + _minor.toString();

}

/* https://api.jquery.com/jquery.noconflict/

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version. Some times it could be issue with older version (or not stable) of JQuery files.

Solution: move new jQuery completely in new object and use this.

  • /

var my = {}; my.query = jQuery.noConflict( true );

// use new way to call function when DOM is ready. old way was $(document).ready(handler) my.query(function() {

 // remember Table, to later access it via event function when a link is clicked with
 // specific class name to make columns visible
 var myTable = my.query('#hotspots').DataTable( {

"processing": true, //"pageLength" : 25, //"lengthMenu": [[ 25, 50, 100, 200, -1 ], [25,50,100,200,"All"]], paging: false, "order" : 0,'asc',

// extensions "fixedHeader": true, //"responsive": true, "language":{ "search":"Filter" },

// define nowrap for specific columns "columnDefs": [ { className: "dt-nowrap", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] }, // default: visible { visible: false, "targets": [3,5,6,7,12,13,14] }

],

       "data": dataSet,
       // https://datatables.net/reference/option/rowCallback

"rowCallback": function( row, data ) {

if ( data.id < 1000 ) { row.style.backgroundColor= (row.className=="odd") ? "#bbddbb" : "#cceecc"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; }

if ( data.id > 1000 && data.id < 51000 ) { row.style.backgroundColor= (row.className=="odd") ? "#ddddee" : "#eeeeff"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; }

if ( data.status.offline_since > 2 ) { //row.style.backgroundColor= (row.className=="odd") ? "#cccccc" : "#dddddd"; row.style.backgroundColor= "#cccccc"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; } },

       // see: https://datatables.net/manual/data/orthogonal-data
       "columns": [
               // node

{ "data": "id", "render" : function (data, type, row) { // If display or filter data is requested, format the date if ( type === 'display' || type === 'filter' ) { return '<a href="http://' + data + '.freifunk-dresden.de/" target="_blank">' + data + '</a>'; } //else return id that is used when sorting this column return data; } },

               // statistic icon

{ "data": "id", "render" : function (data, type, row) { // If display or filter data is requested, format the date if ( type === 'display' || type === 'filter' ) { return '<a class="stats" data="' + data + '"></a>'; } //else return id that is used when sorting this column return data; } },

               //connections

{ "data": "status.connection_types", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var wifi = data.wifi ? 'wifi-on-24.png' : 'wifi-off-24.png'; var backbone = data.backbone ? 'backbone-on-24.png' : 'backbone-off-24.png'; var lan = data.lan ? 'lan-on-24.png' : 'lan-off-24.png'; return 'Ja ' + 'Ja ' + 'Ja'; }

                               // sort
                               var sort_value = data.lan ? 1 : 0;
                               if(data.backbone) sort_value += 10;
                               if(data.wifi) sort_value += 100;

return sort_value; } },

               //ip

{ "data": "id", //use "id" as input data for renderer "render" : function (data, type, row) { // If display or filter data is requested, format the date if ( type === 'display' || type === 'filter' ) { var ip = getIp(data); return '<a href="http://' + ip + '/" target="_blank">' + ip + '</a>'; } //else return id that is used when sorting this column return data; } },

               //online/gw/offline

{ "data": "status", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) {

                                       var t = new Date(data.lastseen*1000);

var day = ( '0' + t.getDate() ).slice(-2); var month = ( '0' + (t.getMonth() + 1) ).slice(-2); var h = ( '0' + t.getHours() ).slice(-2); var m = ( '0' + t.getMinutes() ).slice(-2); var stat_time = day + '.' + month + '.' + t.getFullYear() + ' ' + h + ':' + m;

var img_o = data.online ? 'yes.png' : 'no.png'; var title_o = data.online ? 'online' : 'offline'; var img_g = data.gateway && data.online ? 'yes.png' : 'no-grey.png';

                                       var title_g = data.gateway && data.online ? 'gateway' : '!gw';

return '' + '' + '[' + data.offline_since + ']'; } return data.offline_since; } },

               //uptime
               { "data": "status",
                 "render" : function (data, type, row) {
                               var rest = 0;
                               if(data.online){ rest = data.uptime };

// If display or filter data is requested, format the date if ( type === 'display' || type === 'filter' ) {

                                       var days = Math.floor(rest / 86400);
                                       rest = rest % 86400;
                                       var hours = Math.floor(rest / 3600);
                                       rest = rest % 3600;
                                       var minutes = Math.floor(rest/60);

return days+'d '+hours+'h '+minutes+'m'; } //else return id that is used when sorting this column return rest; }

               },
               //firstseen

{ "data": "status.firstseen", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var t = new Date(data*1000); var day = ( '0' + t.getDate() ).slice(-2); var month = ( '0' + (t.getMonth() + 1) ).slice(-2); var h = ( '0' + t.getHours() ).slice(-2); var m = ( '0' + t.getMinutes() ).slice(-2); return day + '.' + month + '.' + t.getFullYear() + ' ' + h + ':' + m; } return data; } },

               //registerred

{ "data": "status.registered", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var t = new Date(data*1000); var day = ( '0' + t.getDate() ).slice(-2); var month = ( '0' + (t.getMonth() + 1) ).slice(-2); var h = ( '0' + t.getHours() ).slice(-2); var m = ( '0' + t.getMinutes() ).slice(-2); return day + '.' + month + '.' + t.getFullYear() + ' ' + h + ':' + m; } return data; } },

               //nick

{ "data": "name", "render" : function (data, type, row) { return data.substring(0,15); } },

               //map

{ "data": "id", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { return '<a href="https://meshviewer.freifunk-dresden.de/' + data + '" target="_blank">Map</a>'; } return 0; } },

               //firmware version

{ "data": "firmware" },

               //autoupdate

{ "data": "status.autoupdate", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var img_au = data ? 'yes.png' : 'no.png';

                                       var title_au = data ? 'autoupdate' : '!au';

return ''; } return data; } },

               //wifi ssid

{ "data": "status.ssid"},

               //preverred gateway

{ "data": "status", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { return data.selected_gateway + '(' + data.preferred_gateway + ')'; } return data.selected_gateway; } },

               //device model

{ "data": "model", "render" : function (data, type, row) { return data.substring(0,25); } },

               //location

{ "data": "location", "render" : function (data, type, row) { return data.substring(0,25); } },

               //comment

{ "data": "note", "render" : function (data, type, row) { return data.substring(0,40); } },

       ]
   } );
   //function that is called each time a link with class "toggle-vis" is clicked.
   //Then corresponding column visibility toggles
   my.query('a.toggle-vis').on( 'click', function (e) {
       e.preventDefault();

       // Get the column API object
       var column = myTable.column( $(this).attr('data-column') );

       // Toggle the visibility
       column.visible( ! column.visible() );
   } );


   //register event handler
   my.query('#hotspots tbody').on('click', 'a.stats', function () {
       var id = this.attributes['data'].nodeValue;

//create

var popup = '
'
                 + 'Knoten: ' + id + '
' + '<button id="btn_h_'+id+'" onclick=\'switchTime(' + id + ', "6hour")\'>6 Stunden</button>' + '<button id="btn_d_'+id+'" onclick=\'switchTime(' + id + ', "1day")\'>Tag</button>' + '<button id="btn_w_'+id+'" onclick=\'switchTime(' + id + ', "1week")\'>Woche</button>' + '<button id="btn_m_'+id+'" onclick=\'switchTime(' + id + ', "1month")\'>Monat</button>' + '<button id="btn_y_'+id+'" onclick=\'switchTime(' + id + ', "1year")\'>Jahr</button>' + '
' + '' + '
' + '' + '
' + '' + '
' + '' + '
' + ''
+ '
';
       my.query('body').append(popup);
      // elements must exist as DOM objects before accessing
      switchTime(id, '1day');
       //show popup
       my.query( '#statdialog' + id ).dialog({
          resizable: false,
          height: "auto",
          //width: 792, //16+380+380+16 (margin is 16)
          //width: 792, //16+350+16 (margin is 16)
          width: "auto",
          modal: false,
          // position: { my: "left top", at: "left top"},
          close: function( event, ui ) {
                   my.query( '#statdialog' ).remove();  //remove div
                 }
       });
   }); //event handler statistic
} );
//function must be global, so it can be found by onclick handlers.
       function switchTime(id,period){
           //var period='1day'; //6hour,1day,1week,1month,1year
           var srcTiming='https://stats.freifunk-dresden.de/' + id + '/timing/' + period;
           var srcClients='https://stats.freifunk-dresden.de/' + id + '/clients/' + period;
           var srcBackbone='https://stats.freifunk-dresden.de/' + id + '/backbone/' + period;
           var srcWifi='https://stats.freifunk-dresden.de/' + id + '/wifi/' + period;
           var srcOvpn='https://stats.freifunk-dresden.de/' + id + '/ovpn/' + period;
           my.query('#img_timing_'+id).attr("src",srcTiming);
           my.query('#img_clients_'+id).attr("src",srcClients);
           my.query('#img_backbone_'+id).attr("src",srcBackbone);
           my.query('#img_wifi_'+id).attr("src",srcWifi);
           my.query('#img_ovpn_'+id).attr("src",srcOvpn);
           //mark button (boarder)
           my.query('#btn_h_'+id).attr("style","background-color:none;");
           my.query('#btn_d_'+id).attr("style","background-color:none;");
           my.query('#btn_w_'+id).attr("style","background-color:none;");
           my.query('#btn_m_'+id).attr("style","background-color:none;");
           my.query('#btn_y_'+id).attr("style","background-color:none;");
           if(period=="6hour") my.query('#btn_h_'+id).attr("style","background-color:powderblue;");
           if(period=="1day") my.query('#btn_d_'+id).attr("style","background-color:powderblue;");
           if(period=="1week") my.query('#btn_w_'+id).attr("style","background-color:powderblue;");
           if(period=="1month") my.query('#btn_m_'+id).attr("style","background-color:powderblue;");
           if(period=="1year") my.query('#btn_y_'+id).attr("style","background-color:powderblue;");
       }

</script>