chaosc-cosmdisplay/views/index.jade

119 lines
4.6 KiB
Plaintext
Raw Normal View History

2013-01-30 14:30:49 +00:00
extends layout
block head
script(src="/socket.io/socket.io.js")
2013-01-30 14:30:49 +00:00
block content
div.container
div.row
2013-02-12 23:12:44 +00:00
for nr in streams
2013-01-30 14:30:49 +00:00
div.cell
2013-02-20 14:14:09 +00:00
div(id="stream-#{nr}", class="kasten")
2013-02-18 05:46:15 +00:00
h3 --
2013-01-30 14:30:49 +00:00
table
tr
td Location:
2013-02-18 05:46:15 +00:00
td(class="location") --
2013-01-30 14:30:49 +00:00
tr
td Latitude:
2013-02-18 05:46:15 +00:00
td(class="latitude") --
2013-01-30 14:30:49 +00:00
tr
td Longitude:
2013-02-18 05:46:15 +00:00
td(class="longitude") --
2013-01-30 14:30:49 +00:00
tr
td Update:
2013-02-18 05:46:15 +00:00
td(class="update") --
2013-02-20 12:41:47 +00:00
tr
td
td
tr
td(class="break")
td(class="break")
2013-01-30 14:30:49 +00:00
2013-02-20 14:14:09 +00:00
div.mapbox(id="map-#{nr}") --
2013-01-30 14:38:55 +00:00
2013-01-30 14:30:49 +00:00
script(type="text/javascript")
2013-02-18 05:46:15 +00:00
//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;
}
2013-01-30 14:30:49 +00:00
function loadMap(container, lat, long) {
2013-02-18 05:46:15 +00:00
var latlong = new google.maps.LatLng(lat, long);
2013-01-30 14:30:49 +00:00
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() {
2013-02-12 23:12:44 +00:00
});
var socket = io.connect(window.location.hostname);
2013-02-12 23:12:44 +00:00
socket.on('gotstream', function(data) {
2013-02-18 05:46:15 +00:00
console.log("gotstream " + data.id);
2013-02-20 14:14:09 +00:00
$("div#stream-" + data.id + " h3").text(data.title);
$("div#stream-" + data.id + " td.location").text(data.location);
$("div#stream-" + data.id + " td.latitude").text(data.lat);
$("div#stream-" + data.id + " td.longitude").text(data.lon);
2013-02-18 05:46:15 +00:00
var now = new Date();
2013-02-20 14:14:09 +00:00
$("div#stream-" + data.id + " td.update").text(now);
if (data.id != 43573) {
loadMap($('div#map-' + data.id)[0], data.lat, data.lon);
} else {
loadMap($('div#map-' + data.id)[0], 34.737596,135.341564);
}
2013-02-12 23:12:44 +00:00
});
2013-02-18 05:46:15 +00:00
function add_data(data) {
2013-02-20 14:14:09 +00:00
console.log("update_data");
console.dir(data);
2013-02-20 14:14:09 +00:00
console.log('searching for "#feed-' + data.feed + '"')
var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
if (row === undefined) {
2013-02-20 14:14:09 +00:00
var tmp = '<tr id="stream-' + data.stream + '-feed-' + data.feed + '" class="value"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
console.log("new tmp: " + tmp);
2013-02-20 14:14:09 +00:00
$("#stream-" + data.stream + " table > tbody").append(tmp);
}
};
function update_data(data) {
console.log("update_data");
2013-02-18 05:46:15 +00:00
console.dir(data);
2013-02-20 14:14:09 +00:00
console.log('searching for "#feed-' + data.feed + '"')
var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
2013-02-18 05:46:15 +00:00
if (row === undefined) {
2013-02-20 14:14:09 +00:00
var tmp = '<tr id="stream-' + data.stream + '-feed-' + data.feed + '" class="value"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
2013-02-18 05:46:15 +00:00
console.log("new tmp: " + tmp);
2013-02-20 14:14:09 +00:00
$("#stream-" + data.stream + " table > tbody").append(tmp);
2013-02-18 05:46:15 +00:00
}
else {
2013-02-20 12:41:47 +00:00
$("body").effect("highlight", {times:2}, 2000);
2013-02-20 14:14:09 +00:00
var t = '#stream-' + data.stream + '-feed-' + data.feed;
var tmp = "<td>" + data.displayname + '</td><td class="value">' + data.value + "</td>";
2013-02-20 14:14:09 +00:00
console.log("update: " + tmp);
2013-02-18 05:46:15 +00:00
$(t).html(tmp);
2013-02-20 14:14:09 +00:00
var f = $('#stream-' + data.stream + '-feed-' + data.feed + ' .value');
f.effect("pulsate", { times:3 }, 2000);
2013-02-18 05:46:15 +00:00
}
};
socket.on('changedvalue', update_data);
2013-02-18 05:46:15 +00:00
socket.on('updatevalue', add_data);