1 files changed, 119 insertions, 0 deletions
diff --git a/files/common/www/service/js/settings.js b/files/common/www/service/js/settings.js
new file mode 100644
index 0000000..094ea5f
--- /dev/null
+++ b/files/common/www/service/js/settings.js
@@ -0,0 +1,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", cached: 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 &auml;ndert sich diese nicht.</p>"
+	 + "<p>Wenn dein Computer mit verschiedenen Netzwerkkarten auf "
+	 + "das Frei&shy;funk&shy;netz&shy;werk zugreift (zum Beispiel per Kabel- und per "
+	 + "Drahtlosnetzwerk), dann werden auch verschiedene MAC-Adres&shy;sen &uuml;bertragen. "
+	 + "Du musst die Einstellungen f&uuml;r jede MAC-Adresse wiederholen.</p>", 
+	 delay: 50})});