chaosc-cosmdisplay/views/index.jade

116 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 --
table
tr
td Location:
td(class="location") --
tr
td Latitude:
td(class="latitude") --
tr
td Longitude:
td(class="longitude") --
tr
td Update:
td(class="update") --
tr
td
td
tr
td(class="break")
td(class="break")
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 + " td.location").text(data.location);
$("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 + '"class="value"><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 + '" class="value"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
console.log("new tmp: " + tmp);
$("div#" + data.stream + " table > tbody").append(tmp);
}
else {
$("body").effect("highlight", {times:2}, 2000);
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);