120 lines
4.7 KiB
Plaintext
120 lines
4.7 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="stream-#{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(window.location.hostname);
|
|
|
|
socket.on('gotstream', function(data) {
|
|
console.log("gotstream " + data.id);
|
|
$("#stream-" + data.id + " h3").text(data.title);
|
|
$("#stream-" + data.id + " td.location").text(data.location);
|
|
$("#stream-" + data.id + " td.latitude").text(data.lat);
|
|
$("#stream-" + data.id + " td.longitude").text(data.lon);
|
|
$("#stream-" + data.id + " td.update").text(new Date().toLocaleString());
|
|
if (data.id != 43573) {
|
|
loadMap($('#map-' + data.id)[0], data.lat, data.lon);
|
|
} else {
|
|
loadMap($('#map-' + data.id)[0], 34.737596, 135.341564);
|
|
}
|
|
});
|
|
|
|
function add_data(data) {
|
|
console.log("update_data");
|
|
console.dir(data);
|
|
console.log('searching for "#feed-' + data.feed + '"')
|
|
var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
|
|
if (row === undefined) {
|
|
$("#stream-" + data.stream + " td.update").text(new Date().toLocaleString());
|
|
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);
|
|
$("#stream-" + data.stream + " table > tbody").append(tmp);
|
|
}
|
|
};
|
|
|
|
function update_data(data) {
|
|
console.log("update_data");
|
|
console.dir(data);
|
|
console.log('searching for "#feed-' + data.feed + '"')
|
|
var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
|
|
$("#stream-" + data.stream + " td.update").text(new Date().toLocaleString());
|
|
if (row === undefined) {
|
|
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);
|
|
$("#stream-" + data.stream + " table > tbody").append(tmp);
|
|
}
|
|
else {
|
|
$("body").effect("highlight", {times:2}, 2000);
|
|
var t = '#stream-' + data.stream + '-feed-' + data.feed;
|
|
var tmp = "<td>" + data.displayname + '</td><td class="value">' + data.value + "</td>";
|
|
console.log("update: " + tmp);
|
|
$(t).html(tmp);
|
|
var f = $('#stream-' + data.stream + '-feed-' + data.feed + ' .value');
|
|
f.effect("pulsate", { times:3 }, 2000);
|
|
}
|
|
};
|
|
|
|
socket.on('changedvalue', update_data);
|
|
socket.on('updatevalue', add_data);
|