chaosc-cosmdisplay/views/index.jade

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",src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDZ5gUZumNEZOHyRLs4HWJEJ-mDeEkWInU")

    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("changedvalue");
            console.dir(data);
            var row = $('tr#' + data.feed).html();
            if (row === undefined) {
                var tmp = '<tr id="' + data.feed + '"><td>' + data.displayname + "</td><td>" + 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>" + data.value + "</td>";
                console.log("existing tmp: " + tmp);
                $(t).html(tmp);
            }
        };

        socket.on('changedvalue', add_data);

        socket.on('updatevalue', add_data);