add new webif (client side)

author: Jan Huwald <jh@sotun.de> 2012-03-30 11:29:23 (GMT)
committer: Jan Huwald <jh@sotun.de> 2012-03-30 11:29:23 (GMT)
commit: ba08eb8e76f10b01a7c244b6818c0c09588314f7 (patch)
tree: 72d231a1d73a687153b17f0c30edcfc8c1f700d3 /files/common/www
parent: 9714619910807dece2fb3c7af5b1fc2108b3d774 (diff)
13 files changed, 608 insertions, 175 deletions
diff --git a/files/common/www/service/css/ffj.css b/files/common/www/service/css/ffj.css
new file mode 100644
index 0000000..96f60fc
--- /dev/null
+++ b/files/common/www/service/css/ffj.css
@@ -0,0 +1,3 @@
+.hidden { display: none; }
+.loading:before { content: "wird geladen ..."; font-style: italic }
+img.olTileImage { max-width: none; }
diff --git a/files/common/www/service/ff-jena_signet.png b/files/common/www/service/ff-jena_signet.png
deleted file mode 100644
index 15d216c..0000000
--- a/files/common/www/service/ff-jena_signet.png
+++ /dev/null
diff --git a/files/common/www/service/ffj.css b/files/common/www/service/ffj.css
deleted file mode 100644
index 3542611..0000000
--- a/files/common/www/service/ffj.css
+++ /dev/null
@@ -1,61 +0,0 @@
-div#body {
-width: 100%;
-text-align: center;
-}
-div#maincontent{
-margin-left: auto;
-margin-right: auto;
-max-width: 600px;
-font-family: Arial, Verdana, sans-serif;
-font-size: 12pt;
-text-align: left;
-}
-div#maincontent a, a:link, a:visited {
-color: #464646;
-text-decoration: none;
-}
-
-div#button_area{
-padding-left:150px;
-padding-right:150px;
-text-align:center;
-}
-
-div#button_left{
-float:left;
-width: 50%;
-text-align:center;
-}
-
-div#button_right{
-float:right;
-width: 50%;
-text-align:center;
-}
-
-input.button{
-border-color:white black black white;
-border-style:solid;
-border-width:1px;
-background-color: #E5E5E5;
-padding: 5px;
-color: black;
-font-weight: bold;
-border-radius: 5px;
--moz-border-radius: 5px;
--webkit-border-radius: 5px;
-}
-input.button:hover {
-background-color: grey;
-border-color:white black black white;
-border-style:solid;
-border-width:1px;
-}
-div#logo {
-height: 125px;
-font-size: 24px;
-}
-img.logo {
-float: left;
-padding: 5px;
-}
diff --git a/files/common/www/service/img/logo.png b/files/common/www/service/img/logo.png
new file mode 100644
index 0000000..1eed6f0
--- /dev/null
+++ b/files/common/www/service/img/logo.png
diff --git a/files/common/www/service/img/wifi.png b/files/common/www/service/img/wifi.png
new file mode 100644
index 0000000..a935fb7
--- /dev/null
+++ b/files/common/www/service/img/wifi.png
diff --git a/files/common/www/service/index.html b/files/common/www/service/index.html
new file mode 100644
index 0000000..3c4f14a
--- /dev/null
+++ b/files/common/www/service/index.html
@@ -0,0 +1,124 @@
+<html lang="de">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Freifunk Jena</title>
+<link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/ffj.css">
+</head>
+<body>
+
+<div class="navbar"><div class="navbar-inner"><div class="container-fluid">
+<a class="brand" href="/">Freifunk Jena </a>
+<div class="nav-collapse"><ul class="nav">
+<li><a href="/services.html"><i class="icon-home   icon-white"></i> Lokale Dienste</a></li>
+<li><a href="/internet.html"><i class="icon-road   icon-white"></i> Internet</a></li>
+<li><a href="/status.html"><i   class="icon-signal icon-white"></i> Netzstatus</a></li>
+<li><a href="/settings.html"><i class="icon-cog    icon-white"></i> Einstellungen</a></li>
+</ul></div>
+</div></div></div>
+
+<div class="container-fluid">
+
+  <div class="hero-unit">
+    <img class="pull-right" src="/img/logo.png">
+    <h1><a id="content" name="content"></a>Willkommen!</h1>
+
+    <p>Du bist jetzt mit dem freien Funknetz
+    <a href="http://www.freifunk-jena.de">Freifunk Jena</a>
+    verbunden.</p>
+
+    <p>Wir sind ein experimentelles Gemeinschaftsnetzwerk, aber kein
+    Internetanbieter.</p>
+
+    <p><a href="foo" class="btn btn-success btn-large">Mehr lernen</a></p>
+  </div>
+
+  <div class="alert alert-error hidden" id="offline">
+    <p><b>Das Internet ist in dieser Wolke vorr&uuml;bergehend nicht
+      verf&uuml;gbar.</b> Die <a href="/services.html"><i class="icon-home"></i>
+      lokalen Dienste</a> der Wolke stehen weiter zur
+      Verf&uuml;gung. F&uuml;r Details
+      siehe <a href="/status.html"><i class="icon-signal"></i>
+      Netzstatus</a>.</p>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h2>Lokales Netzwerk</h2>
+      <p>Im Freifunknetz kann <emph>jeder</emph> Dienste anbieten:
+      alle teilnehmenden Computer k&ouml;nnen direkt miteinander
+      kommunizieren. Unter <a href="/settings.html" style="white-space: nowrap"><i class="icon-cog"></i>&nbsp;Einstellungen</a>
+      kannst du festlegen, wie du das Netzwerk nutzen m&ouml;chtest
+      und Resourcen mit anderen Freifunkern teilen.</p>
+      
+      <p><a href="foo"><i class="icon-home"></i> Lokale Dienste</a> in
+      dieser Wolke:
+	<ul>
+	  <li>3 <a href="foo">Netzlaufwerke</a> (15,5 TB)</li>
+	  <li><a href="foo">Suche</a> in lokalen Resourcen</li>
+	  <li>5 <a href="foo">Internetzug&auml;nge</a> (<i class="icon-arrow-down"></i> 55 MB / <i class="icon-arrow-up"></i> 8,2 MB)</li>
+	  <li>2 <a href="foo">Videostreams</a></li>
+	  <li>4 <a href="foo">Gameserver</a> (23 <i class="icon-user"></i>)</li>
+	  <li>und <a href="foo">42 weitere</a></li>
+	</ul>
+      </p>
+    </div>
+    
+    <div class="span4">
+      <h2>Internet</h2>
+      <p>Ein Zugang ins Internet ist m&ouml;glich, da einige
+	Freifunker ihre privaten Internetzug&auml;nge zur
+	Verf&uuml;gung stellen. Diese Zug&auml;nge m&uuml;ssen sich
+	hier alle teilen. Bitte sei Dir dessen bewusst und verhalte
+	Dich dementsprechend:
+      </p>
+      
+      <ul>
+	<li><strong>keine Filesharing-Programme</strong></li>
+	<li><strong>keine unn&ouml;tigen Downloads oder Streams</strong></li>
+	<li><strong>keine illegalen Aktivit&auml;ten</strong></li>
+      </ul>
+
+      <p>Mit einem Klick auf <em>Akzeptieren</em> kannst du f&uuml;r 1
+	Stunde unser Netz verwenden. Dann wirst du erneut aufgefordet,
+	diese Bedingungen zu akzeptieren.</p>
+      
+      <form action="/cgi-bin/splash_click.html" method="POST">
+	<input type="hidden" name="target_url" value="targeturl"/>
+	<input type="submit" class="btn btn-primary" value="Akzeptieren" />
+	<a class="btn" href="/services.html">Ablehnen</a>
+      </form>
+    </div>
+    
+    <div class="span4">
+      <h2>Mitmachen</h2>
+      
+      <p>Wenn Du unsere Idee gut findest und das Netz regelm&auml;ssig
+	benutzt, dann bitten wir Dich um Unterst&uuml;tzung:
+      </p>
+      
+      <ul>
+	<li><a href="http://www.freifunk-jena.de">Werde selbst
+	Freifunker</a>. Dazu muss man nur einen handels&uuml;blichen
+	WLAN-Router ins Fensterbrett stellen.</a></li>
+	<li><a href="foo">Spende</a> ein paar Euro, damit wir unser
+	Netz weiter betreiben und ausbauen k&ouml;nnen.</li>
+	<li>Wenn Du selbst privat genutzte WLAN-Ger&auml;te betreibst
+	nutze daf&uuml;r bitte <a href="foo">andere Kan&auml;le</a>
+	als wir.</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script src="/js/jquery.min.js"></script>
+<script src="/js/bootstrap.min.js" defer></script>
+<script>
+$.getJSON("cgi-bin/online.json", function(haveInternet) {
+    if(!haveInternet)
+	$('#offline').removeClass('hidden');
+})
+</script>
+
+</body>
+</html>
diff --git a/files/common/www/service/internet.html b/files/common/www/service/internet.html
new file mode 100644
index 0000000..cd5d2bf
--- /dev/null
+++ b/files/common/www/service/internet.html
@@ -0,0 +1,23 @@
+<html lang="de">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Freifunk Jena</title>
+<link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/ffj.css">
+</head>
+<body>
+
+<div class="navbar"><div class="navbar-inner"><div class="container-fluid">
+<a class="brand" href="/">Freifunk Jena </a>
+<div class="nav-collapse"><ul class="nav">
+<li><a href="/services.html"><i class="icon-home   icon-white"></i> Lokale Dienste</a></li>
+<li class="active"><a href="/internet.html"><i class="icon-road   icon-white"></i> Internet</a></li>
+<li><a href="/status.html"><i   class="icon-signal icon-white"></i> Netzstatus</a></li>
+<li><a href="/settings.html"><i class="icon-cog    icon-white"></i> Einstellungen</a></li>
+</ul></div>
+</div></div></div>
+
+hier steht irgendwann mal was ueber das internet
+
+</body>
+</html>
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})});
diff --git a/files/common/www/service/robinson.html b/files/common/www/service/robinson.html
deleted file mode 100644
index 45961b9..0000000
--- a/files/common/www/service/robinson.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<h1>Don't Panic</h1>
-
-<p>Du befindest dich in einer Datenwolke des Freifunk Jena Netzes
-(<a href="todo">mehr Infos</a>). Das Internet ist in dieser Wolke
-vorr&uuml;bergehend nicht verf&uuml;gbar. Die <a href="todo">lokalen
-Dienste</a> der Wolke stehen weiter zur Verf&uuml;gung.</p>
-
-<p>Es gibt drei M&ouml;glichkeiten Internet in dieser Freifunk Wolke
-zu verteilen:
-<list>
-<li>einen Router dieser Wolke mit einem Internetzugang verbinden
-(<a href="todo">mehr Infos</a>)</li>
-<li>die Wolke mit einer anderen Wolke verbinden, die Internet hat
-(<a href="todo">mehr Infos</a>)</li>
-<li>falls das Internet gerade noch ging, reicht es meist einfach zu
-warten</li>
-</list>
-Falls du Hilfe dabei brauchst, melde dich einfach bei todo lorem
-ipsum.</p>
-
-<p>An dieser Stelle w&auml;ren ein paar Debuginformationen gut:
-<list>
-<li>wie viele Knoten sind in der Wolke?
-<li>wann gab es das letzte mal Netz?
-<li>welche Dienste sind verf&uuml;gbar?
-</list></p>
diff --git a/files/common/www/service/services.html b/files/common/www/service/services.html
new file mode 100644
index 0000000..e3e17d0
--- /dev/null
+++ b/files/common/www/service/services.html
@@ -0,0 +1,23 @@
+<html lang="de">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Freifunk Jena</title>
+<link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/ffj.css">
+</head>
+<body>
+
+<div class="navbar"><div class="navbar-inner"><div class="container-fluid">
+<a class="brand" href="/">Freifunk Jena </a>
+<div class="nav-collapse"><ul class="nav">
+<li class="active"><a href="/services.html"><i class="icon-home   icon-white"></i> Lokale Dienste</a></li>
+<li><a href="/internet.html"><i class="icon-road   icon-white"></i> Internet</a></li>
+<li><a href="/status.html"><i   class="icon-signal icon-white"></i> Netzstatus</a></li>
+<li><a href="/settings.html"><i class="icon-cog    icon-white"></i> Einstellungen</a></li>
+</ul></div>
+</div></div></div>
+
+hier gibt es irgendwann einmal eine automatisch generierte liste aller in der wolke verfuegbaren dienste
+
+</body>
+</html>
diff --git a/files/common/www/service/settings.html b/files/common/www/service/settings.html
new file mode 100644
index 0000000..72b7192
--- /dev/null
+++ b/files/common/www/service/settings.html
@@ -0,0 +1,212 @@
+<html lang="de">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Freifunk Jena</title>
+<link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/ffj.css">
+</head>
+<body>
+
+<div class="navbar"><div class="navbar-inner"><div class="container-fluid">
+<a class="brand" href="/">Freifunk Jena </a>
+<div class="nav-collapse"><ul class="nav">
+<li><a href="/services.html"><i class="icon-home   icon-white"></i> Lokale Dienste</a></li>
+<li><a href="/internet.html"><i class="icon-road   icon-white"></i> Internet</a></li>
+<li><a href="/status.html"><i   class="icon-signal icon-white"></i> Netzstatus</a></li>
+<li class="active"><a href="/settings.html"><i class="icon-cog    icon-white"></i> Einstellungen</a></li>
+</ul></div>
+</div></div></div>
+
+<div class="container-fluid">
+
+  <div class="tabbable tabs-left"><!-- TODO: remove tabs-left if
+  screen is too narrow !-->
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#overview" data-toggle="tab">&Uuml;bersicht</a></li>
+      <li><a href="#device" data-toggle="tab">Mein Ger&auml;t</a></li>
+      <li><a href="#lan" data-toggle="tab">Ger&auml;te im LAN</a></li>
+      <li><a href="#node" data-toggle="tab">Router</a></li>
+    </ul>
+
+    <div class="tab-content">
+      <div class="tab-pane active" id="overview">
+	<div class="container-fluid">
+	  <div class="span3">
+	    <p>Unter <a href="#device" data-toggle="tab">Mein
+	      Ger&auml;t</a> kannst Du einstellen, wie sich Dein
+	      Computer im Freifunknetzwerk verhalten soll.</p>
+
+	    <p>Dein Computer wird dabei &uuml;ber seine <a href="#"
+	      id="tooltip-mac">MAC-Adresse</a> wiedererkannt. Deine aktuelle MAC-Adresse ist:</p>
+    
+	    <p><pre class="data-client_mac loading"></pre></p>
+	      
+	  </div>
+	  
+	  <div class="span3 only-wired hidden">
+	    <p>Unter <a href="#lan" data-toggle="tab">Ger&auml;te im
+	      LAN</a> kannst Du einstellen, wie sich per Kabel
+	      angeschlossene Ger&auml;te mit dem Freifunknetz
+	      verbinden sollen und Dienste im Freifunknetz bekannt
+	      machen.</p>
+	  </div>
+
+	  <div class="span3">
+	    <p>Um Deinen Freifunk <a href="#node"
+	      data-toggle="tab">Router</a> zu konfigurieren, musst Du
+	      Dich per Ethernetkabel mit ihm verbinden. Dies
+	      verhindert unberechtigen Zugriff auf das Ger&auml;t.</p>
+
+	    <p class="data-net_desc loading"></p>
+	  </div>
+
+	  <div class="span3">
+	    <p>Wenn Du noch keinen eigenen Router hast, kannst Du Dir
+	    unter <a href="http://www.freifunk-jena.de">Freifunk-Jena.de</a>
+	    einen besorgen.</p>
+	  </div>
+	</div>
+      </div>
+
+      <div class="tab-pane" id="device">
+	<h3>Ger&auml;teeinstellungen <small>f&uuml;r <span class="data-client_name loading"></span>
+	(<span class="data-client_mac"></span>)</small></h3>
+	
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Name <small>wird benutzt um die MAC-Adresse zu verstecken</small></h4>
+	  <input type="text" name="client_name" class="data">
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Internetzugang</h4>
+	  <label class="checkbox inline">
+	    <input type="checkbox" name="client_splash" value="true" class="data">
+	    Splash dauerhaft deaktivieren
+	  </label>
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Zugang zum Freifunknetz</h4>
+	  <label class="radio">
+	    <input type="radio" name="client_access" class="data" value="bridged"> direkte Verbindung mit dem
+	    Freifunknetzwerk (bridging). Uneingeschr&auml;nkte
+	    Funktionalit&auml;t und Dienstfreigabe m&ouml;glich
+	  </label>
+	  <label class="radio">
+	    <input type="radio" name="client_access" class="data" value="routed"> geroutete Verbindung: Zugriff auf das
+	    Freifunknetz funktioniert so wie Internetzugriff. Eine
+	    Programme (Chat, diverse Computerspiele) funktionieren
+	    nicht. Dienste koennen nicht freigegeben werden
+	  </label>
+	  <label class="radio">
+	    <input type="radio" name="client_access" class="data" value="isolated"> keine Verbindung
+	  </label>
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+      </div>
+
+      <div class="tab-pane" id="lan">
+	<h3>Ger&auml;teeinstellungen f&uuml;r andere Ger&auml;te im LAN</h3>
+
+	<p>Liste aller Gerate, Option neue hinzuzufuegen (per IP), per
+	Click auf ein Device kommt der gleiche Dialog wie fuer das
+	eigene Device</p>
+      </div>
+
+      <div class="tab-pane" id="node">
+	<h3>Routereinstellungen <small>f&uuml;r <span class="data-router_name loading"></span></h3>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Name</h4>
+	  <input type="text" name="router_name" class="data">
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Passwort</h4>
+	  <input type="text" name="router_password" class="data">
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+
+	  <div class="row-fluid">
+	    <div class="span6">
+	      <p>Ist ein Passwort gesetzt, dann muss dieses f&uuml;r
+		alle Einstellung angegeben werden, die den Router oder
+		andere Ger&auml;te im Kabelnetzwerk
+		betreffen. Einstellungen, die nur den eigenen Rechner
+		betreffen kann jeder Nutzer weiterhin ohne Passwort
+		vornehmen.</p>
+
+	      <p>Normalerweise sollte man kein Passwort setzen: die
+	        betroffenen Einstellung d&uuml;rfen auch ohne Passwort
+	        nur von Nutzern ge&auml;ndert werden, die per Kabel an
+	        den Router angeschlossen sind. Und die haben i.d.R
+	        bereits physische Gewalt &uuml;ber den Router und das
+	        Netzwerk.</p>
+	    </div>
+
+	    <div class="span6">
+	      <p><b>Kein wichtiges Passwort verwenden!</b>  Das hier
+		angegebene Passwort wird unsicher gespeichert,
+		&uuml;ber das Netzwerk &uuml;bertragen und im Klartext
+		angezeigt.</p>
+
+	      <p>Wurde das Passwort vergessen, dann muss der
+		Router <a href="foo">in den Auslieferungszustand
+		zur&uuml;ckgesetzt</a> werden. Das ist nicht tragisch
+		:-)</p>
+	    </div>
+	  </div>
+	</form>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post">
+	  <h4>Internetzugang</h4>
+	  <label class="checkbox">
+	    <input type="checkbox" name="router_qos" value="true" class="data">
+	    LAN-Traffic gegen&uuml;ber WLAN-Traffic bevorzugen (QoS)
+	  </label>
+	  <label class="checkbox">
+	    <input type="checkbox" name="router_vpn" value="true" class="data">
+	    VPN verwenden
+	  </label>
+	  <label class="checkbox">
+	    <input type="checkbox" name="router_filter_wan" value="true" class="data">
+	    Zugriff auf lokale Netzwerke hinterm WAN-Port sperren
+	  </label>
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+
+	<form class="well" action="cgi-bin/cfg_router.json" method="post" id="geo">
+	  <h4>Routerstandort</h4>
+	  <div class="row-fluid">
+	    <div class="span6">
+	      <label class="radio">
+		<input type="radio" name="router_geo" class="data" value="automatic">automatisch ermitteln
+	      </label>
+	      <label class="radio">
+		<input type="radio" name="router_geo" class="data" value="manual">von Hand eingeben
+	      </label>
+	      <label class="radio">
+		<input type="radio" name="router_geo" class="data" value="private">nicht ver&ouml;ffentlichen
+	      </label>
+	    </div>
+	    <div class="span6">
+	      <input type="text" name="router_pos_lon" class="data">
+	      <input type="text" name="router_pos_lat" class="data">
+	      <input type="text" name="router_pos_street" class="data">
+	    </div>
+	  </div>
+	  <input type="submit" class="btn btn-mini disabled" value="Speichern">
+	</form>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/jquery.min.js"></script>
+<script src="/js/settings.js"></script>
+
+</body>
+</html>
diff --git a/files/common/www/service/splash.html b/files/common/www/service/splash.html
deleted file mode 100644
index 7b85b5e..0000000
--- a/files/common/www/service/splash.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
-<head>
-<script type="text/javascript" src="https://static.jappix.com/php/get.php?l=de&amp;t=js&amp;g=mini.xml&amp;f=jquery.js"></script>
-
-<script type="text/javascript">
-   jQuery(document).ready(function() {
-      MINI_GROUPCHATS = ["chat@chat.freifunk-jena.de"];
-      launchMini(false, true, "anonymous.jappix.com");
-   });
-</script>
-
-  <title>Freifunk Jena</title>
-
-  <link rel="stylesheet" type="text/css" href="/ffj.css" />
-
-</head>
-<body>
-    <div id="body">
-        <div id="maincontent">
-
-            <div id="logo">
-                <img src="/ff-jena_signet.png" class="logo" alt="Freifunk-Logo"/><br /><strong>Freifunk Jena</strong><br />Das freie B&uuml;rgernetz f&uuml;r Jena
-            </div>
-
-            <h2><a id="content" name="content">Willkommen!</a></h2>
-            <p>
-                Du bist jetzt mit dem freien Funknetz <a href="http://www.freifunk-jena.de">Freifunk Jena</a> verbunden.<br />
-
-                Wir sind ein experimentelles Gemeinschaftsnetzwerk, aber kein Internetanbieter.
-            </p>
-
-            <p>
-                Ein Zugang <strong>ins Internet</strong> ist trotzdem m&ouml;glich,
-                da einige Freifunker ihre privaten Internetzug&auml;nge zur Verf&uuml;gung stellen.
-                Diese Zug&auml;nge m&uuml;ssen sich hier alle teilen.
-                Bitte sei Dir dessen bewusst und verhalte Dich dementsprechend:
-            </p>
-
-            <ul>
-                <li>bitte <strong>keine Filesharing-Programme</strong> betreiben!</li>
-                <li>bitte <strong>keine unn&ouml;tigen Downloads oder Streams</strong> starten!</li>
-                <li>bitte <strong>keine illegalen Aktivit&auml;ten</strong>!</li>
-            </ul>
-
-            <p>
-                Wenn Du unsere Idee gut findest und das Netz regelm&auml;ssig benutzt, dann bitten wir Dich um Unterst&uuml;tzung:
-            </p>
-
-            <ul>
-                <li><a href="http://www.freifunk-jena.de">Werde selbst Freifunker oder teile deinen Internetzugang!</a></li>
-                <li>Spende ein paar Euro, damit wir unser Netz weiter betreiben und ausbauen k&ouml;nnen.</li>
-                <li>Wenn Du selbst privat genutzte WLAN-Ger&auml;te betreibst nutze daf&uuml;r bitte andere Kan&auml;le als wir.</li>
-            </ul>
-
-            <p>
-                Mit einem Klick auf <em>Akzeptieren</em> kannst du f&uuml;r
-                1 Stunde(n) unser Netz verwenden. Dann wirst du
-                erneut aufgefordet, diese Bedingungen zu akzeptieren.
-            </p>
-
-
-            <div id="button_area">
-                <div id="button_left">
-                    <div class="buttons">
-                        <form action="/cgi-bin/splash_click" method="post">
-                            <input type="hidden" name="target_url" value="targeturl"/>
-                            <input class="button" type="submit" value="Akzeptieren"/>
-                        </form>
-                    </div>
-                </div>
-                <div id="button_right">
-                    <div class="buttons">
-                        <form action="http://www.freifunk-jena.de/Decline" method="get">
-                            <input class="button" type="submit" value="Ablehnen"/>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
diff --git a/files/common/www/service/status.html b/files/common/www/service/status.html
new file mode 100644
index 0000000..ce8acf0
--- /dev/null
+++ b/files/common/www/service/status.html
@@ -0,0 +1,104 @@
+<html lang="de">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Freifunk Jena</title>
+<link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/ffj.css">
+</head>
+<body>
+
+<div class="navbar"><div class="navbar-inner"><div class="container-fluid">
+<a class="brand" href="/">Freifunk Jena </a>
+<div class="nav-collapse"><ul class="nav">
+<li><a href="/services.html"><i class="icon-home   icon-white"></i> Lokale Dienste</a></li>
+<li><a href="/internet.html"><i class="icon-road   icon-white"></i> Internet</a></li>
+<li class="active"><a href="/status.html"><i   class="icon-signal icon-white"></i> Netzstatus</a></li>
+<li><a href="/settings.html"><i class="icon-cog    icon-white"></i> Einstellungen</a></li>
+</ul></div>
+</div></div></div>
+
+<div class="container-fluid">
+  <div class="span6">
+    <h2>&Uuml;bersichtskarte</h2>
+    <div style="width: 100%" id="nodemap"></div>
+  </div>
+  <div class="span6">
+    <h2>Liste aller Knoten</h2>
+    <table class="table table-striped">
+      <thead><tr>
+	<th>Knoten</th>
+	<th>Betreiber</th>
+	<th>Uplink</th>
+      </tr></thead>
+      <tbody id="nodetbl">
+	<tr><td colspan="3"><i>wird geladen ...</i></td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script src="/js/jquery.min.js"></script>
+<script src="/js/bootstrap.min.js" defer></script>
+<script>
+$.getJSON('cgi-bin/online.json', function(haveInternet) {
+    var nodeTbl = $('#nodetbl');
+    var loadNodeData = $.getJSON("cgi-bin/nodes.json");
+
+    var nodeMap = $('#nodemap');
+    if (haveInternet) {
+	nodeMap.height(nodeMap.width() * 1.5);
+	var loadMap = $.ajax({url: "http://www.feinsterfug.de/ffj/webif/OpenLayers.js", dataType: "script", cached: true});
+    }else{
+	nodeMap.append("<div class=alert>Ohne Internetzugang funktioniert die Kartendarstellung in dieser Wolke nicht.</div>");
+	var loadMap = $.Deferred().reject();
+    }
+
+    $.when(loadNodeData).then(function(nodeData) {
+	nodeTbl.empty();	
+	$.each(nodeData, function(idx, node) {
+            nodeTbl.append("<tr><td>"
+			   + (node.name ? node.name : ("<i style=\"color: grey\">Unbenannt " + idx + "</i>")) 
+			   + "</td><td>"
+			   + (node.owner ? node.owner : ("<i style=\"color: grey\">Unbekannt " + idx + "</i>")) 
+			   + "</td><td>"
+			   + (node.uplink ? "<i class=\"icon-ok\"></i>" : "") + "</td></tr>");  
+	});
+    });
+
+    $.when(loadNodeData, loadMap).then(function(rawData) {
+	var nodeData = rawData[0];
+	var map = new OpenLayers.Map({
+	    div: 'nodemap',
+	    controls: [new OpenLayers.Control.Navigation(),
+		       new OpenLayers.Control.PanZoomBar(),
+		       new OpenLayers.Control.ScaleLine()]});
+        map.addLayer(new OpenLayers.Layer.OSM());
+
+	var nodeLayer = new OpenLayers.Layer.Vector("Nodes");
+        var t0 = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
+        var t1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection,
+	$.each(nodeData, function(idx, node) {
+	    if (node.pos)
+		nodeLayer.addFeatures(new OpenLayers.Feature.Vector(
+		    new OpenLayers.Geometry.Point(node.pos.lon, node.pos.lat).transform(t0,t1),
+		    {node: node},
+		    {externalGraphic: 'wifi.png', 
+		     graphicWidth:   32, graphicHeight: 37,
+		     graphicXOffset: -16, graphicYOffset: -36}));
+	});
+	map.addLayer(nodeLayer);
+	map.zoomToExtent(nodeLayer.getDataExtent(), true);
+
+	var markers = new OpenLayers.Control.SelectFeature(nodeLayer, {
+	    onSelect: function(feat) { alert("foo"); },
+	    onUnselect: function(feat) { alert(feat.data.node.id); },
+	    toogle: true
+	});
+	map.addControl(markers);
+	markers.activate();
+    });
+});
+</script>
+
+</body>
+</html>
author	Jan Huwald <jh@sotun.de>	2012-03-30 11:29:23 (GMT)
committer	Jan Huwald <jh@sotun.de>	2012-03-30 11:29:23 (GMT)
commit	ba08eb8e76f10b01a7c244b6818c0c09588314f7 (patch)
tree	72d231a1d73a687153b17f0c30edcfc8c1f700d3 /files/common/www
parent	9714619910807dece2fb3c7af5b1fc2108b3d774 (diff)