Widget:Hotspots: Unterschied zwischen den Versionen
| Zeile 96: | Zeile 96: | ||
// remember Table, to later access it via event function when a link is clicked with | // remember Table, to later access it via event function when a link is clicked with | ||
// specific class name to make columns visible | // specific class name to make columns visible | ||
| − | var myTable = my.query('# | + | var myTable = my.query('#hotspots').DataTable( { |
"processing": true, | "processing": true, | ||
| Zeile 262: | Zeile 262: | ||
//register event handler | //register event handler | ||
| − | my.query(' | + | my.query('#hotspots tbody').on('click', function () { |
alert( 'You clicked' ); | alert( 'You clicked' ); | ||
Version vom 8. Oktober 2018, 14:04 Uhr
<script type="text/javascript" src="https://api.freifunk-dresden.de/freifunk-dresden-hotspots.json.js"></script>
<script type="text/javascript" src="/hotspots/js/jquery.js"></script> <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="1">IP-Adresse</a>, <a class="toggle-vis" data-column="3">Registriert</a>, <a class="toggle-vis" data-column="6">Stats</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>
| Node | IP | Ok GW Tage |
Registriert | Name | Map | Stat | 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": [ 1,3,6, 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", //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 ''
+ '
'
+ '[' + 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": "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" value="' + data + '"></a>'
+ ' <a target="_blank" href="https://stats.freifunk-dresden.de/' + data + '/clients/6hour">C</a>' + '/' + '<a target="_blank" href="https://stats.freifunk-dresden.de/' + data + '/wifi/6hour">W</a>' + '/' + '<a target="_blank" href="https://stats.freifunk-dresden.de/' + data + '/backbone/6hour">B</a>' + '/' + '<a target="_blank" href="https://stats.freifunk-dresden.de/' + data + '/ovpn/6hour">O</a>'
} //else return id that is used when sorting this column return data; } },
{ "data": "firmware" },
{ "data": "status.autoupdate",
"render" : function (data, type, row) {
if ( type === 'display' || type === 'filter' ) {
var img_o = data ? 'yes.png' : 'no.png';
return '';
}
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', function () {
alert( 'You clicked' );
} );
} );
</script>
