115 lines
4.1 KiB
Plaintext
115 lines
4.1 KiB
Plaintext
extends layout
|
|
|
|
block head
|
|
script(src="/socket.io/socket.io.js")
|
|
|
|
block content
|
|
|
|
div.container
|
|
div.row
|
|
for nr in streams
|
|
div.cell
|
|
div(id=nr, class="kasten")
|
|
h3 --
|
|
h4 --
|
|
table
|
|
tr
|
|
td Location:
|
|
td(class="location") --
|
|
tr
|
|
td Elevation:
|
|
td(class="elevation") --
|
|
tr
|
|
td Latitude:
|
|
td(class="latitude") --
|
|
tr
|
|
td Longitude:
|
|
td(class="longitude") --
|
|
tr
|
|
td Update:
|
|
td(class="update") --
|
|
|
|
div.mapbox(id="map#{nr}") --
|
|
|
|
script(type="text/javascript")
|
|
//var streams;
|
|
//var stream;
|
|
|
|
var print = function(o){
|
|
var str='';
|
|
|
|
for(var p in o){
|
|
if(typeof o[p] == 'string'){
|
|
str+= p + ': ' + o[p]+'; ';
|
|
}else{
|
|
str+= p + ': {' + print(o[p]) + '}';
|
|
}
|
|
}
|
|
|
|
return str;
|
|
}
|
|
|
|
function loadMap(container, lat, long) {
|
|
var latlong = new google.maps.LatLng(lat, long);
|
|
var map = new google.maps.Map(container, { center: latlong,
|
|
zoom: 8,
|
|
disableDefaultUI: true,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP });
|
|
var marker = new google.maps.Marker({ position: latlong, map: map});
|
|
}
|
|
|
|
$(function() {
|
|
|
|
});
|
|
|
|
var socket = io.connect('http://localhost');
|
|
|
|
socket.on('gotstream', function(data) {
|
|
console.log("gotstream " + data.id);
|
|
$("div#" + data.id + " h3").text(data.title);
|
|
$("div#" + data.id + " h4").text(data.description);
|
|
$("div#" + data.id + " td.location").text(data.location);
|
|
$("div#" + data.id + " td.elevation").text(data.elevation);
|
|
$("div#" + data.id + " td.latitude").text(data.lat);
|
|
$("div#" + data.id + " td.longitude").text(data.lon);
|
|
var now = new Date();
|
|
$("div#" + data.id + " td.update").text(now);
|
|
loadMap($('div#map' + data.id)[0], data.lat, data.lon);
|
|
});
|
|
|
|
function add_data(data) {
|
|
console.log("add_data");
|
|
console.dir(data);
|
|
var row = $('tr#' + data.feed).html();
|
|
if (row === undefined) {
|
|
var tmp = '<tr id="' + data.feed + '"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
|
|
console.log("new tmp: " + tmp);
|
|
$("div#" + data.stream + " table > tbody").append(tmp);
|
|
}
|
|
};
|
|
|
|
function update_data(data) {
|
|
console.log("update_data");
|
|
console.dir(data);
|
|
var row = $('tr#' + data.feed).html();
|
|
if (row === undefined) {
|
|
var tmp = '<tr id="' + data.feed + '"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
|
|
console.log("new tmp: " + tmp);
|
|
$("div#" + data.stream + " table > tbody").append(tmp);
|
|
}
|
|
else {
|
|
var t = 'div#' + data.stream + ' table > tbody tr#' + data.feed;
|
|
var tmp = "<td>" + data.displayname + '</td><td class="value">' + data.value + "</td>";
|
|
console.log("existing tmp: " + tmp);
|
|
$(t).html(tmp);
|
|
var f = $("tr#" + data.feed + " .value");
|
|
console.dir(f);
|
|
f.effect("pulsate", { times:3 }, 2000);
|
|
}
|
|
};
|
|
|
|
socket.on('changedvalue', update_data);
|
|
|
|
socket.on('updatevalue', add_data);
|
|
|