1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// adapt to small window sizes .. TODO: solution that sucks less
var sizeAdaptor = function() {
if ($(window).width() < 800) {
$('.tabs-left')
.removeClass('tabs-left')
.addClass('tabs-above');
}else{
$('.tabs-above')
.removeClass('tabs-above')
.addClass('tabs-left');
}
}
sizeAdaptor();
$(window).resize(sizeAdaptor);
/// helper functions to hold & update data
function data(key) {
if (typeof data[key] == "undefined") {
var f = function(val) { fillData(key, val); };
data[key] = $.Deferred().then(f, [], f);
}
return data[key];
}
function fillData(key, val, def) {
$('pre.data-' + key
+ ',p.data-' + key
+ ',span.data-' + key)
.empty().append(val ? val : def)
.removeClass('loading');
if (val) {
$('input.data[name=' + key + ']').val(val);
$('.only-' + key)
.removeClass('hidden only-' + key)
.addClass('only-' + key)
.attr('class', function(i, ca) {
if (ca.indexOf('only-') == -1) this.css('display', 'block');
});
}else{
$('.has-' + key)
.removeClass('has-' + key)
.addClass('only-' + key)
.css('display', 'none');
}
}
/// load data
var loadBootstrap = $.ajax({url: "js/bootstrap.min.js", dataType: "script", cache: true});
var loadCfg = {};
$.each(['client_net', 'cfg_client', 'cfg_router', 'node_position'],
function(i,name) {
loadCfg[name] = $.getJSON('cgi-bin/' + name + '.json')
.done(function(res) {
$.each(res, function(k,v) { data(k).notify(v); });
});
});
/// add event handlers
var formChangeHandler = function() {
$(this.form).find('[type="submit"]')
.removeClass('disabled btn-success btn-danger')
.addClass('btn-primary');
};
var formSubmitHandler = function() {
form = this;
btn = $(form).find('[type="submit"]');
btn.addClass('disabled');
$.post(form.action, $(form).serialize())
.done(function(res) {
btn.addClass('btn-success')
.removeClass('btn-primary');
$(form).find('.alert').remove();
$.each(res, function(k,v) { data(k).notify(v); });
if (form.id == 'geo')
$.getJSON('cgi-bin/node_position.json')
.always(function() {
$.each(['lon', 'lat', 'street'], function(i,name) {
data('router_pos_' + name).notify(''); });
}).done(function(res) {
$.each(res, function(k,v) { data(k).notify(v); });
});
})
.fail(function(v) {
btn.addClass('btn-danger');
$(form).prepend('<div class="alert alert-error">' + v.responseText + '</div>');
});
return false;
}
$('form.well input')
.change( formChangeHandler)
.keypress(formChangeHandler)
$('form.well')
.submit(formSubmitHandler);
/// add data handlers
$.when(loadCfg['client_net']).done(function(cn) {
fillData('net_desc',
'Im Moment bist du per '
+ (cn.wired ? 'Ethernet' : 'WLAN')
+ ' mit '
+ (cn.router_name
? 'dem Router <strong><span class="data-router_name">' + cn.router_name + '</span></strong>'
: '<span class="data-router_name">einem unbenannten Router</span>')
+ ' verbunden.');
});
$.when(loadBootstrap).done(function() {
$('#tooltip-mac').popover(
{title: "Was ist eine MAC-Adresse?", content: "<p>Jede "
+ "Netzwerkkarte hat eine weltweit eindeutige Nummer: die "
+ "MAC-Adresse. Im Gegensatz zu einer IP-Adresse ändert sich diese nicht.</p>"
+ "<p>Wenn dein Computer mit verschiedenen Netzwerkkarten auf "
+ "das Frei­funk­netz­werk zugreift (zum Beispiel per Kabel- und per "
+ "Drahtlosnetzwerk), dann werden auch verschiedene MAC-Adres­sen übertragen. "
+ "Du musst die Einstellungen für jede MAC-Adresse wiederholen.</p>",
delay: 50})});
|
