|
|
| Zeile 1: |
Zeile 1: |
| <script type="text/javascript" src="https://api.freifunk-dresden.de/freifunk-dresden-hotspots.json.js"></script>
| | Widget Parameter Test |
| | | Empfangene Parameter: |
| // Filter aus dem Parameter 'filter' anwenden
| | - param1: value1 |
| var filterParam = "<!--{$filter|escape:'html'}-->";
| | - param2: value2 |
| if (filterParam) {
| | - filter: online |
| myTable.search(filterParam).draw();
| |
| }
| |
| | |
| <!-- now load jQuery (before datatables. datatable initialisation depend on jQuery -->
| |
| <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 {}
| |
| .statsx {
| |
| 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;
| |
| }
| |
| .grafanax {
| |
| background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAABYhJREFUSImdln1sldUdxz/nPC/33t5Su7RYirSsKJDBVlKsmQkoCoti4prokgkxZG9ZhvtjJm5LDC/6h875p2+Jc6KQadSsccoGIYrGzaHorLBWZVBaBhRKu9rS1/v2POf89sctvX287a3wS07uy/md7+d8f+d5zjlKRIQrDHPhvygvjq6uvaxxIoK+UmjQ8QHjD21ifMcPCDoOXdZYpRTqShybvjNM7PwhkhrNCyUrSD7SilNT/7U1LtuxiJB989kpKIBMjJJtfQrTdwYRmWr2y15Mz0lm8jajYxFBKRX5JMgSfLif3If7MMfbwIQzTkxVzsdtXIvpasf2ngKtKf/9XpxF10Xy3Ok/7NhFcgdfxXR+iuk7CwhObQO6bhnh0b/nheaqyPAAwftvTBO1hJ1HSoNNVzvZ15+OJIQD52Gmh0cpVHkluqYedVUVyothh/qx57uRiZFobhgUDY+AVSI5pyMcF2/N9/HXtuBc24iKl0W6JT1B2N1O8P5ego/2gzFk9+3CW30runphgTV9je3wAGO/Wj/r+ukFiym7/0mc+uVzTxAwPSdJ/3Eb5tTnOEubSG7fjfJiea2I44oqnOVNoKSo6WsaSO586WtDAZy6pSS378Ft/h6m6yi5d14pmIiAtSa2cQv4gCdTTZV5JH7+KLpyfpG4WIMd6iM82UbYfRR7sR+ZVjEVT1J23+O4K1eTe2cPkk0DX1ljALdpA05dA/ZCFyhAwLtxI851TVGgCPbsF2T+/DvM6Q4IcyCA6+EsWo5382a8G+9CuR4qniTxs8cYf+xuwhOH8RrXF28gMnERGe0Bf9JxDPwNW1BKRfLCtr+SeuIezJlPQGXzub6AzmF6PyPz2jZST27GDvbkS3v1YmK3/wTTdbi41AD27L9BpVC+RfkWffUCdP13Ijnm3BdkWh8ElcZtvImyrX8gufMtyh54jdjGraiKJMq32PNHSD17L3akDwBv7SZkvL+41JJLER47kJ/9ZDiLV0bcigjBP58DlcFb9yNid+5AOQUZd0kzbnMLmZd+gf3yNDLWQ/bNHcS3PIeeV4276raoYzt0mvSL9xB2tE65Vb5FV1ZFSxJkMOc+RlfNJ3bbAxHo1GQXLCN+7zOouEb5FtP9LvZ8R971qjsLYDvSS+blTdiB9vw6TW8qF1U1WTDDON9sRCUqiqCXQteuwP3WuslnxRAe3x/tF2vJHdyGpM6hPFvU7EhXVNFLoCqrQdKzQiF/5uq6xikdGTr2FfDgcey594qdTjYZbEfSQwVBN4bbeDe2/yNM7ycl4UimoCWpKFhVLcP77n0oX83oGJ0m/Gw3TDs9vRt+idOwhtyBnxIeewU73osd7cH2HSkwRZCBtoLj8S7s4H8KBiQf2FN/I/jX48joDEefP49Yy1501YqCsMliOl/HnNqHZAbRlUtxV21FV38bAHvxBNnW9SCmAKtaSeyuAyjHjx4SYgPs2YPY/o8xnS8jwVhh0Lx6/Ntb0RUNpcsLSJgi9/ZmbN/hYg93/AWndu0sdy4RwhO7CNu2k98HJ+GJGtzVD6PrW1BObGZoup/g8P3Y3nejHTqGXrgBt/lRdHnd7Jc9EUv46W8x3XuiHUqhypfgNGxG16xDJRaAcpDx09j+f2C6diOZ/xXS/W/grfkTat4SiNdMbUYlb5l24BDBoZbZui9Jg3bBFt8ycBK4zbtwFt5R1FW87UwLGf8cfDsHGMAU/aO8atym59Hzb51xREkwKkB5sxakZDgNW2aFzglW5dfmX35AoaBsOU79byC+CBk7gqQ6IRhCUsfz3y+NQ6Gqbi45sZJrLOEw9sIL4CRQ5dejyptQ2i/Oy/VhTvwYGfsARFBX3YKz4g2U9q4MfDkhEiLDB5GRt9G1v0bFFpXM/z/LE5JTSgZnuwAAAABJRU5ErkJggg==');
| |
| | |
| 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>
| |
| | |
| <div>
| |
| <b>Spalten anzeigen:</b>
| |
| <!-- <a class="toggle-vis" data-column="2">Stats</a>, -->
| |
| <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>,</div>
| |
| | |
| <table id="hotspots" class="display cell-border compact" style="width:100%;">
| |
| <thead>
| |
| <tr style="background-color:#434244;color:#cccccc;">
| |
| <th>Node</th>
| |
| <th>Stat</th>
| |
| <th>Meshing</th>
| |
| <th>IP</th>
| |
| <th title="Online / Gateway / [Online oder Offline Tage]">Ok<br>GW<br>Tage</th>
| |
| <th>Uptime</th>
| |
| <th>Erstmalig<br>registriert</th>
| |
| <th>Registriert</th>
| |
| <th>Name</th>
| |
| <th>Map</th>
| |
| <th>Firmware</th>
| |
| <th>AU</th>
| |
| <th>SSID</th>
| |
| <th>Gateway<br>aktuell/bevorzugt.</th>
| |
| <th>Model</th>
| |
| <th>Ort</th>
| |
| <th>Kommentar</th>
| |
| </tr>
| |
| </thead>
| |
| <tfoot>
| |
| <tr style="background-color:#434244;color:#cccccc;">
| |
| <th colspan="17" ></th>
| |
| </tr>
| |
| </tfoot>
| |
| </table>
| |
| | |
| <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,
| |
| "searching": false, // Deaktiviert das Suchfeld
| |
| | |
| // 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' ) {
| |
| var stat = '<a class="stats" data="' + data + '"><img src="/hotspots/images/stat.png"></a>';
| |
| var grafana = '<a href="https://grafana.freifunk-dresden.de/' + data + '" target="_blank"><img src="/hotspots/images/grafana.png"></a>';
| |
| return stat + grafana;
| |
| }
| |
| //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 ? '<img title="meshing via wifi" src="/hotspots/images/wifi-on-24.png">'
| |
| : '<img title="Kein wifi meshing" src="/hotspots/images/wifi-off-24.png">';
| |
| var backbone = data.backbone ? '<img title="meshing via backbone" src="/hotspots/images/backbone-on-24.png">'
| |
| : '<img title="Kein backbone meshing" src="/hotspots/images/backbone-off-24.png">';
| |
| var lan = data.lan ? '<img title="meshing via lan" src="/hotspots/images/lan-on-24.png">'
| |
| : '<img title="Kein lan meshing" src="/hotspots/images/lan-off-24.png">';
| |
| return wifi + ' ' + backbone + ' ' + 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
| |
| "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/tage
| |
| { "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 img_g = data.gateway && data.online ? 'yes.png' : 'no-grey.png';
| |
| | |
| // tage sind offline oder online tage, abhaengig vom aktuellen zustand.
| |
| var days = data.online ? Math.floor(data.uptime / 86400) : data.offline_since;
| |
| var title_o = data.online ? 'Online seit ' + Math.floor(data.uptime / 86400) + ' Tagen': 'Offline seit ' + data.offline_since + ' Tagen';
| |
| var title_g = data.gateway && data.online ? 'Gateway' : 'Kein Gateway';
| |
| | |
| // definiere einfach ein attribut, was ebenfalls von data-table beim filtern verwendet wird.
| |
| var search_g= data.gateway && data.online ? '+gw' : '-gw';
| |
| | |
| return '<img search="'+search_g+'" title="'+title_o+'" src="/hotspots/images/' + img_o + '">'
| |
| + '<img title="'+title_g+'" src="/hotspots/images/' + img_g + '">'
| |
| + '[' + days + ']';
| |
| }
| |
| return data.online ? - Math.floor(data.uptime / 86400) : 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 ? 'Auto-Update' : 'Kein Auto-Update';
| |
| | |
| // definiere einfach ein attribut, was ebenfalls von data-table beim filtern verwendet wird.
| |
| var search_au= data ? '+au' : '-au';
| |
| | |
| return '<img search="'+search_au+'" title="'+title_au+'" src="/hotspots/images/' + img_au + '">';
| |
| }
| |
| 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,60); }
| |
| },
| |
| ]
| |
| } );
| |
| | |
| //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 <div>
| |
| var popup = '<div id="statdialog' + id + '" title="Statistik">'
| |
| + '<b>Knoten:</b> ' + id + '<br>'
| |
| + '<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>'
| |
| + '<br>'
| |
| + '<img id="img_timing_'+id+'" height="150" width="350" >'
| |
| + '<br>'
| |
| + '<img id="img_clients_'+id+'" height="150" width="350" >'
| |
| + '<br>'
| |
| + '<img id="img_backbone_'+id+'" height="150" width="350" >'
| |
| + '<br>'
| |
| + '<img id="img_ap_'+id+'" height="150" width="350" >'
| |
| + '<br>'
| |
| + '<img id="img_vpn_'+id+'" height="150" width="350" >'
| |
| + '</div>';
| |
| 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 srcAp='https://stats.freifunk-dresden.de/' + id + '/ap/' + period;
| |
| var srcVpn='https://stats.freifunk-dresden.de/' + id + '/vpn/' + 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_ap_'+id).attr("src",srcAp);
| |
| my.query('#img_vpn_'+id).attr("src",srcVpn);
| |
| //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>
| |