Widget:Hotspots: Unterschied zwischen den Versionen

Aus Freifunk Dresden - Anwender-Wiki
Zur Navigation springen Zur Suche springen
Zeile 264: Zeile 264:
 
     my.query('#hotspots tbody').on('click', 'a.stats', function () {
 
     my.query('#hotspots tbody').on('click', 'a.stats', function () {
 
         var id = this.attributes['data'].nodeValue;
 
         var id = this.attributes['data'].nodeValue;
var period='1day'; //6hour,1day,1week,1month,1year
+
 
var srcTiming='https://stats.freifunk-dresden.de/' + id + '/timing/' + period;
+
        function switchTime(period){
var srcClients='https://stats.freifunk-dresden.de/' + id + '/clients/' + period;
+
            //var period='1day'; //6hour,1day,1week,1month,1year
var srcBackbone='https://stats.freifunk-dresden.de/' + id + '/backbone/' + period;
+
            var srcTiming='https://stats.freifunk-dresden.de/' + id + '/timing/' + period;
var srcWifi='https://stats.freifunk-dresden.de/' + id + '/wifi/' + period;
+
            var srcClients='https://stats.freifunk-dresden.de/' + id + '/clients/' + period;
var srcOvpn='https://stats.freifunk-dresden.de/' + id + '/ovpn/' + 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')..attr("src",srcTiming);
 +
            my.query('#img_clients')..attr("src",srcClients);
 +
            my.query('#img_backbone')..attr("src",srcBackbone);
 +
            my.query('#img_wifi')..attr("src",srcWifi);
 +
            my.query('#img_ovpn')..attr("src",srcOvpn);
 +
        }
 +
switchTime('1day');
 
         //create  <div>
 
         //create  <div>
 
         var popup = '<div id="statdialog" title="Statistik Knoten: '+ id +'">'
 
         var popup = '<div id="statdialog" title="Statistik Knoten: '+ id +'">'
                   + '<img id="img_timing" height="150" width="350" src="https://stats.freifunk-dresden.de/' + id + '/timing/1day">'
+
+ '<button onclick=\'switchTime("6hour")\'>1</button>'
                   + '<img id="img_clients" height="150" width="350" src="https://stats.freifunk-dresden.de/' + id + '/clients/1day">'
+
+ '<button onclick=\'switchtime("1day")\'>2</button>'
 +
                   + '<img id="img_timing" height="150" width="350" >'
 +
                   + '<img id="img_clients" height="150" width="350" src="' + srcClients + '">'
 
                   + '<br>'
 
                   + '<br>'
                   + '<img id="img_backbone" height="150" width="350" src="https://stats.freifunk-dresden.de/' + id + '/backbone/1day">'
+
                   + '<img id="img_backbone" height="150" width="350" src="' + srcBackbone + '">'
                   + '<img id="img_wifi" height="150" width="350" src="https://stats.freifunk-dresden.de/' + id + '/wifi/1day">'
+
                   + '<img id="img_wifi" height="150" width="350" src="' + srcWifi + '">'
 
                   + '<br>'
 
                   + '<br>'
 
                   + '<img id="img_ovpn" height="150" width="350" src="' + srcOvpn + '">'
 
                   + '<img id="img_ovpn" height="150" width="350" src="' + srcOvpn + '">'

Version vom 29. Oktober 2018, 22:11 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="2">IP-Adresse</a>,
<a class="toggle-vis" data-column="4">Registriert</a>,
<a class="toggle-vis" data-column="9">SSID</a>,
<a class="toggle-vis" data-column="10">Gateway</a>,
<a class="toggle-vis" data-column="11">Model</a>
<thead> </thead> <tfoot> </tfoot>
Node Stat IP Ok
GW
Tage
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,

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

],

       "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": [

{ "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/">' + data + '</a>'; } //else return id that is used when sorting this column return data; } }, { "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; } },

{ "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 + '/">' + ip + '</a>'; } //else return id that is used when sorting this column return data; } }, { "data": "status", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var img_o = data.online ? 'yes.png' : 'no.png'; var img_g = data.gateway ? 'yes.png' : 'no.png'; return 'Ja' + 'Ja' + '[' + data.offline_since + ']'; } return data.offline_since; } }, { "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() ).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; } }, { "data": "name", "render" : function (data, type, row) { return data.substring(0,15); } }, { "data": "position", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { return '<a href="http://maps.google.de/maps?f=q&hl=de&q='

                                     + data.lat.toString() + ','
                                     + data.lon.toString() + '&ie=UTF8&z=15&iwloc=addr&om=1">Map</a>'; 

} return 0; } }, { "data": "firmware" }, { "data": "status.autoupdate", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { var img_o = data ? 'yes.png' : 'no.png'; return 'Ja'; } return data; } }, { "data": "status.ssid"}, { "data": "status", "render" : function (data, type, row) { if ( type === 'display' || type === 'filter' ) { return data.selected_gateway + '(' + data.preferred_gateway + ')'; } return data.selected_gateway; } }, { "data": "model", "render" : function (data, type, row) { return data.substring(0,25); } }, { "data": "location", "render" : function (data, type, row) { return data.substring(0,25); } }, { "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;
       function switchTime(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')..attr("src",srcTiming);
           my.query('#img_clients')..attr("src",srcClients);
           my.query('#img_backbone')..attr("src",srcBackbone);
           my.query('#img_wifi')..attr("src",srcWifi);
           my.query('#img_ovpn')..attr("src",srcOvpn);
       }

switchTime('1day');

//create

var popup = '
'

+ '<button onclick=\'switchTime("6hour")\'>1</button>' + '<button onclick=\'switchtime("1day")\'>2</button>'

                 + ''
                 + ''
                 + '
' + '' + '' + '
' + ''
+ '
';
       my.query('body').append(popup);
       //show popup
       my.query( '#statdialog' ).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: true,
          // position: { my: "left top", at: "left top"},
          close: function( event, ui ) {
                   my.query( '#statdialog' ).remove();  //remove div
                 }
       });
   }); //event handler statistic
} );

</script>