Widget:Hotspots: Unterschied zwischen den Versionen

Aus Freifunk Dresden - Anwender-Wiki
Zur Navigation springen Zur Suche springen
Zeile 1: Zeile 1:
 
+
<script type="text/javascript" src="/hotspots/js/jquery.js"></script>
 
<link rel="stylesheet" type="text/css" href="/hotspots/datatables/datatables.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>
 
<script type="text/javascript" src="/hotspots/datatables/datatables.min.js"></script>
Zeile 36: Zeile 36:
 
}
 
}
  
 
+
$(document).ready(function() {
$('#example').DataTable( {
+
  $('#example').DataTable( {
 
"processing": true,
 
"processing": true,
 
//"responsive": true,
 
//"responsive": true,
Zeile 125: Zeile 125:
 
         ]
 
         ]
 
     } );
 
     } );
 
+
  } );
 
</script>
 
</script>

Version vom 15. September 2018, 13:31 Uhr

<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> <script type="text/javascript" src="https://api.main.freifunk-dresden.de/freifunk-dresden-hotspots.json.js"></script>

<thead> </thead> <tfoot> </tfoot>
Node IP Online
Gateway
Offline Tage
Registriert Name Map Firmware 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();

}

$(document).ready(function() {

 $('#example').DataTable( {

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

       "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" }, { "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" }, { "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": "model" }, { "data": "location" }, { "data": "note" },

       ]
   } );
 } );

</script>