webif: add service listing

Add two service lists:
- the index page has a short list with one item per service class
- the service page lists and links all services in full detail

3 files changed, 215 insertions, 10 deletions

diff --git a/files/common/www/service/index.html b/files/common/www/service/index.html
index 3c4f14a..7d99224 100644
--- a/files/common/www/service/index.html
+++ b/files/common/www/service/index.html
@@ -53,15 +53,9 @@
       
       <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>
+	<ul id="service-ul"></ul>
       </p>
+      <p id="service-loading" class="loading"></p>
     </div>
     
     <div class="span4">
@@ -112,12 +106,22 @@
 </div>
 
 <script src="/js/jquery.min.js"></script>
+<script src="/js/parse_services.js"></script>
 <script src="/js/bootstrap.min.js" defer></script>
 <script>
 $.getJSON("cgi-bin/online.json", function(haveInternet) {
     if(!haveInternet)
 	$('#offline').removeClass('hidden');
-})
+});
+
+$.when(
+    $.getJSON('/cgi-bin/services.json'),
+    $.ajax({url: '/js/parse_services.js', dataType: 'script', cache: true})
+).done(function(res) {
+    services(res[0]).drawLine($('#service-ul'));
+    $('p#service-loading').remove();
+});
+
 </script>
 
 </body>
diff --git a/files/common/www/service/js/parse_services.js b/files/common/www/service/js/parse_services.js
new file mode 100644
index 0000000..616fb56
--- /dev/null
+++ b/files/common/www/service/js/parse_services.js
@@ -0,0 +1,176 @@
+function services(json) {
+    /// class helpers
+    // human readable class name
+    var class_name = {
+	storage: "Netzlaufwerke",
+	internet: "Internetzug&auml;nge",
+	game: "Gameserver"
+    };
+    // table header
+    var table = {
+	storage: 
+	      '<th>Laufwerk</th>'
+	    + '<th>Kapazit&auml;t</th>'
+	    + '<th>Daten</th>'
+	    + '<th colspan=2 align="right">beschreibbar?</th>',
+	internet: '<th>Mesh IP</th>'
+	    + '<th>Public IP</th>'
+	    + '<th>Downstream</th>'
+	    + '<th>Upstream</th>',
+	game: '<th>Server</th><th>Spieler</th>'
+    };
+    // table row
+    var row = {
+	storage: function(v) {
+	    return '<td>'
+		+ (v.desc != ''
+		   ? ('<a href="' + v.url + '">' 
+		      + v.desc + '<br />'
+		      + '<small>' + v.url + '</small>'
+		      + '</a>')
+		   : ('<a href="' + v.url + '">' 
+		      + v.url
+		      + '</a>'))
+		+ '</td><td>'
+		+ (v.capacity ? SISuffixify(v.capacity) + 'B' : '')
+		+ '</td><td>'
+		+ (v.used ? SISuffixify(v.used) + 'B' : '')
+		+ '</td><td>'
+		+ ((v.used && v.capacity) 
+		   ? (v.used / v.capacity * 100).toPrecision(2) + '%' 
+		   : '')
+		+ '</td><td>'
+		+ ((v.custom3 == 'true')  ? '<i class="icon-ok"></i>' : '')
+		+ ((v.custom3 == 'false') ? '<i class="icon-remove"></i>' : '')
+		+ '</td>';
+	},
+	internet: function(v) {
+	    return '<td>'
+		+ (v.desc != ''
+		   ? v.desc
+		   : v.url.substr(7))
+		+ '</td><td>'
+		+ (v.public_ip ? v.public_ip : '')
+		+ '</td><td>'
+		+ (v.downstream ? SISuffixify(v.downstream * 8) + 'b/s' : '')
+		+ '</td><td>'
+		+ (v.upstream ? SISuffixify(v.upstream * 8) + 'b/s' : '')
+		+ '</td>';
+	},
+	game: function(v) {
+	    return '<td>'
+		+ (v.desc != ''
+		   ? ('<a href="' + v.url + '">' 
+		      + v.desc + '<br />'
+		      + '<small>' + v.url + '</small>'
+		      + '</a>')
+		   : ('<a href="' + v.url + '">' 
+		      + v.url
+		      + '</a>'))
+	    	+ '</td><td>'
+		+ (v.players ? v.players : '')
+		+ '</td>';
+	}
+    };
+    // mini row: emit one line per class (not one per service)
+    var miniRow = {
+	storage: function(c) {
+	    var cap = sum(c, 'capacity');
+	    return c.length
+		+ ' <a href="/services.html#storage">Netzlaufwerke</a>'
+		+ ((cap) ? ' (' + SISuffixify(cap) + 'B)' : '');
+	},
+	internet: function(c) {
+	    var up   = sum(c, 'upstream');
+	    var down = sum(c, 'downstream');
+	    var stream = function(dir, amount) {
+		return amount
+		    ? ('<i class="icon-arrow-' + dir + '"></i> '
+		       + SISuffixify(amount * 8) + 'b')
+		    : '';
+	    }		    
+	    return c.length
+		+ ' <a href="/services.html#internet">Internetzug&auml;nge</a>'
+		+ ((up || down)
+		   ? (' ('
+		      + stream('down', down)
+		      + ((up && down) ? ' / ' : '')
+		      + stream('up', up)
+		      + ')')
+		   : '');
+	},
+	game: function(c) {
+	    var pl = sum(c, 'players');
+	    return c.length
+		+ ' <a href="/services.html#game">Gameserver</a>'
+		+ ((pl) ? ' (' + pl + ' <i class="icon-user"></i>)' : '');
+
+	}
+    };
+    // aliases for customX values
+    var parseCustom = {
+	storage: ['capacity', 'used', 'writable'],
+	internet: ['public_ip', 'upstream', 'downstream'],
+	game: ['players']
+    };
+
+    /// parse JSON
+    var srv = {};
+    $.each(json, function(k,v) {
+	var cn = v['class'];
+	for (var i=1; i<4; i++) {
+	    var custom = v['custom' + i];
+	    if (parseCustom[cn] && parseCustom[cn][i-1] 
+		&& custom && custom != '')
+		v[parseCustom[cn][i-1]] = custom;
+	}
+	if (!srv[cn])
+	    srv[cn] = [];
+	srv[cn].push(v);
+    });
+
+    /// helpers
+    function SISuffixify(x) {
+	suffix_char = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+	suffix = 0;
+	for (; x > 1000; x /= 1000, suffix++);
+	return x.toPrecision(3) + '&nbsp;' + suffix_char[suffix];
+    }
+
+    function sum(container, key) {
+	var sum = 0;
+	$.each(container, function(idx, obj) {
+	    if (obj[key])
+		sum += +obj[key];
+	});
+	return sum > 0 ? sum : undefined;
+    }
+
+    /// return: data + drawing functions
+    return {
+	data: srv,
+	drawContainer: function(elem) {
+	    $.each(srv, function(cn, services) {
+		var tbody = '';
+		$.each(services, function(i,v) {
+		    tbody = tbody + '<tr>' + row[cn](v) + '</tr>';
+		});
+		elem.append(
+		    '<div class="span6">' 
+			+ '<h3>' + class_name[cn] + '</h3>' 
+			+ '<table class="table table-striped">'
+			+ '<thead><tr>'
+			+ table[cn]
+			+ '</tr></thead>'
+			+ '<tbody>' + tbody + '</tbody>'
+			+ '</table>'
+			+ '</div>'
+		);
+	    })},
+	drawLine: function(elem) {
+	    $.each(srv, function(cn, services) {
+		elem.append('<li>' + miniRow[cn](services) + '</li>');
+	    });
+	}	    
+    };
+}
diff --git a/files/common/www/service/services.html b/files/common/www/service/services.html
index e3e17d0..4f6a00f 100644
--- a/files/common/www/service/services.html
+++ b/files/common/www/service/services.html
@@ -17,7 +17,32 @@
 </ul></div>
 </div></div></div>
 
-hier gibt es irgendwann einmal eine automatisch generierte liste aller in der wolke verfuegbaren dienste
+<div class="container-fluid"><div class="row" id="service-container">
+  <div class="span3">
+    <h2>Lokale Dienste</h2>
+
+    <p>Im Freifunk Jena Netzwerk kann jeder Mensch Daten und Dienste
+    seiner Computer zur Verf&uuml;gung stellen und die Dienste anderer
+    Teilnehmer nutzen. Auf dieser Seite siehst du, welche Dienste
+    angeboten werden. Um Dienste auf deinem Computer oder in deinem
+    Netzwerk freizugeben, besuche <a href="/settings.html"
+    style="white-space:
+    nowrap"><i class="icon-cog"></i>&nbsp;Einstellungen</a>.</p>
+
+    <p class="loading"></p>
+  </div>
+</div></div>
+
+<script src="/js/jquery.min.js"></script>
+<script>
+$.when(
+    $.getJSON('/cgi-bin/services.json'),
+    $.ajax({url: '/js/parse_services.js', dataType: 'script', cache: true})
+).done(function(res) {
+    services(res[0]).drawContainer($('#service-container'));
+    $('p.loading').remove();
+});
+</script>
 
 </body>
 </html>