diverse fortschritte, page für crashtest

2012-05-10 17:03:33 +02:00 · 2012-05-10 17:03:33 +02:00 · 8248804ac7
parent 1921417667
commit 8248804ac7
8 changed files with 312 additions and 45 deletions
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@ -12,6 +12,7 @@
    <link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
+    <script type="text/javascript" src="<c:url value="/resources/js/events.class.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/underscore.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
@ -26,45 +27,8 @@
 </head>
 <body>
    <h1>CTDO Raumsteuerung</h1>
-
-    <div id="room-tabs">
-        <ul>
-            <li><a href="#tabs-1">Global</a></li>
-            <li><a href="#tabs-2">Raum 1</a></li>
-        </ul>
-        <div id="tabs-1">
-        </div>
-        <div id="tabs-2">
-            <div id="v-tabs" class="inner-tabs-container">
-                <ul>
-                    <li><a href="#v-tabs-1">Licht</a></li>
-                    <li><a href="#v-tabs-2">Musik</a></li>
-                    <li><a href="#v-tabs-3">Lampel</a></li>
-                </ul>
-                <div id="v-tabs-1">
-                    <div id="colorpicker-raum1"></div>
-                    <select multiple="multiple" id="par56select">
-
-                    </select>
-                </div>
-                <div id="v-tabs-2">
-                    <label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
-                </div>
-                <div id="v-tabs-3">
-                    <div class="lampel">
-                        <span class="circle red" title="click to toggle"></span>
-                        <span class="circle yellow" title="click to toggle"></span>
-                        <span class="circle green" title="click to toggle"></span>
-
-                    </div>
-
-                </div>
-            </div>
-
-            <div class="switch">
-                Raumlicht:<br />
-                <input type="radio" name="raum-1-licht">An <input type="radio" name="raum-1-licht" checked="checked">Aus
-            </div>
+    <div id="container">
+        <div id="room-tabs">

        </div>
    </div>
@ -80,6 +44,20 @@
        </div>
        {{/each}}
    </script>
+    <script type="text/x-handlebars-template" id="room-vertical-tabs-template">
+        <div id="room{{roomId}}-vertical-tabs" class="ui-tabs-vertical">
+            <ul>
+                {{#each types}}
+                <li><a href="#room{{roomId}}-vertical-tabs-{{id}}">{{typeName}}</a></li>
+                {{/each}}
+            </ul>
+            {{#each types}}
+            <div id="room{{roomId}}-vertical-tabs-{{id}}">
+
+            </div>
+            {{/each}}
+        </div>
+    </script>
    <script type="text/x-handlebars-template" id="par56-options-template">
        {{#each devices}}
        <option name="{{deviceId}}">{{deviceName}}</option>
@ -91,6 +69,15 @@
            <button>Buzzern</button>
        </div>
    </script>
+    <script type="text/x-handlebars-template" id="lampel-template">
+
+        <div class="lampel">
+            <span class="circle red" title="click to toggle"></span>
+            <span class="circle yellow" title="click to toggle"></span>
+            <span class="circle green" title="click to toggle"></span>
+
+        </div>
+    </script>
    <script type="text/x-handlebars-template">

    </script>
--- a/src/main/webapp/WEB-INF/jsp/index2.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index2.jsp
@ -0,0 +1,77 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<!DOCTYPE html>
+<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
+<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>WebSockets</title>
+
+    <link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet"/>
+    <link type="text/css" href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet"/>
+    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
+    <script type="text/javascript" src="<c:url value="/resources/js/main.js" />"></script>
+    <script type="text/javascript">
+
+        function sendData(data) {
+            var time = Math.round(new Date().getTime() / 1000);
+            data = {"timeStamp":time, "updates":data};
+            $.ajax({
+                type:'POST',
+                url:"/control/devices",
+                contentType:"application/json",
+                dataType:"json",
+                data:JSON.stringify(data)
+            });
+            console.log(data);
+            console.log(JSON.stringify(data));
+        }
+        $('#par56 .pink').click(function () {
+            data = [
+                {"deviceId":0, "options":{"red":255, "green":0, "blue":40}},
+                {"deviceId":1, "options":{"red":255, "green":0, "blue":40}},
+                {"deviceId":2, "options":{"red":255, "green":0, "blue":40}},
+                {"deviceId":3, "options":{"red":255, "green":0, "blue":40}}
+            ];
+            sendData(data);
+        });
+        $('#par56 .gruen').click(function () {
+            data = [
+                {"deviceId":0, "options":{"red":0, "green":255, "blue":0}},
+                {"deviceId":1, "options":{"red":0, "green":255, "blue":0}},
+                {"deviceId":2, "options":{"red":0, "green":255, "blue":0}},
+                {"deviceId":3, "options":{"red":0, "green":255, "blue":0}}
+            ];
+            sendData(data);
+        });
+        $('#par56 .rot').click(function () {
+            data = [
+                {"deviceId":0, "options":{"red":255, "green":0, "blue":0}},
+                {"deviceId":1, "options":{"red":255, "green":0, "blue":0}},
+                {"deviceId":2, "options":{"red":255, "green":0, "blue":0}},
+                {"deviceId":3, "options":{"red":255, "green":0, "blue":0}}
+            ];
+            sendData(data);
+        });
+    </script>
+
+</head>
+<body>
+<h1>CTDO Raumsteuerung</h1>
+
+<p id="par56">Par56: <br>
+    <button class="pink">Pink</button>
+    <button class="gruen">Grün</button>
+    <button class="rot">Rot</button>
+</p>
+<p id="lampel">Lampel:<br>
+    <button class="rota">Rot (an)</button>
+    <button class="gelba">Gelb (an)</button>
+    <button class="gruena">Grün (an)</button>
+    <button class="roto">Rot (aus)</button>
+    <button class="gelbo">Gelb (aus)</button>
+    <button class="grueno">Grün (aus)</button>
+</p>
+</body>
+</html>
+
--- a/src/main/webapp/resources/js/events.class.js
+++ b/src/main/webapp/resources/js/events.class.js
@ -0,0 +1,51 @@
+//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved.
+//MIT License
+
+function EventTarget(){
+    this._listeners = {};
+}
+
+EventTarget.prototype = {
+
+    constructor: EventTarget,
+
+    addListener: function(type, listener){
+        if (typeof this._listeners[type] == "undefined"){
+            this._listeners[type] = [];
+        }
+
+        this._listeners[type].push(listener);
+    },
+
+    fire: function(event){
+        if (typeof event == "string"){
+            event = { type: event };
+        }
+        if (!event.target){
+            event.target = this;
+        }
+
+        if (!event.type){  //falsy
+            throw new Error("Event object missing 'type' property.");
+        }
+
+        if (this._listeners[event.type] instanceof Array){
+            var listeners = this._listeners[event.type];
+            for (var i=0, len=listeners.length; i < len; i++){
+                listeners[i].call(this, event);
+            }
+        }
+    },
+
+    removeListener: function(type, listener){
+        if (this._listeners[type] instanceof Array){
+            var listeners = this._listeners[type];
+            for (var i=0, len=listeners.length; i < len; i++){
+                if (listeners[i] === listener){
+                    listeners.splice(i, 1);
+                    break;
+                }
+            }
+        }
+    }
+};
--- a/src/main/webapp/resources/js/main.js
+++ b/src/main/webapp/resources/js/main.js
@ -5,7 +5,9 @@
 * Time: 00:51
 * Main Javascript file
 */
-
+var events = new EventTarget();
+var roomDevices = [];
+var roomDeviceViews = [];
 Workspace = Backbone.Router.extend({
    routes:{
        "":"home",
@ -13,11 +15,27 @@ Workspace = Backbone.Router.extend({

    },
    home: function() {
+        function roomsLoadedHandler() {
+            rooms.each(function(room) {
+                var id = room.get('roomId');
+                roomDevices[id] = new RoomDevices();
+                roomDevices[id].url = '/resources/json/room' + id + '.json';
+                roomDevices[id].fetch();
+            });
+            events.removeListener("roomsLoaded", roomsLoadedHandler);
+        }
+        events.addListener("roomsLoaded", roomsLoadedHandler);
        rooms.fetch();
+
    },
    show_room: function(id) {
        this.home();
-        window.roomTabsId = id;
+        function roomsLoadedHandlerTabSelect() {
+            $('#room-tabs').tabs('select', id);
+            events.removeListener("roomsLoaded", roomsLoadedHandlerTabSelect)
+        }
+        events.addListener("roomsLoaded", roomsLoadedHandlerTabSelect);
+
    }
 });
 $(document).ready(function() {
--- a/src/main/webapp/resources/js/models.js
+++ b/src/main/webapp/resources/js/models.js
@ -4,4 +4,8 @@
        model: Room,
        url: '/resources/json/rooms.json'
    });
+    window.Device = Backbone.Model.extend({});
+    window.RoomDevices = Backbone.Collection.extend({
+        model: Device
+    });
 })(jQuery);
--- a/src/main/webapp/resources/js/views.js
+++ b/src/main/webapp/resources/js/views.js
@ -3,12 +3,46 @@ window.RoomsView = Backbone.View.extend({
        this.collection.bind('reset', this.render, this);
    },
    render: function() {
+        $('#room-tabs').tabs('destroy');
        this.template = Handlebars.compile($("#room-tabs-template").html());
        var rooms = {'rooms': this.collection.toJSON()};
-        $('#room-tabs').html(this.template(rooms)).tabs();
-        if(typeof(window.roomTabsId) != "undefined") {
-            $('#room-tabs').tabs('select', window.roomTabsId);
-        }
+        $('#room-tabs').html(this.template(rooms)).tabs({
+            select: function(event, ui) {
+                //set hashtag?
+            }
+        });
+        events.fire("roomsLoaded");
+
+        return this;
+    }
+});
+window.LampelView = Backbone.View.extend({
+    initialize: function() {
+        this.collection.bind('reset', this.render, this);
+    },
+    render: function() {
+        events.fire("lampelLoaded");
+
+        return this;
+    }
+});
+window.BuzzerView = Backbone.View.extend({
+    initialize: function() {
+        this.collection.bind('reset', this.render, this);
+    },
+    render: function() {
+        events.fire("buzzerLoaded");
+
+        return this;
+    }
+});
+window.Par56View = Backbone.View.extend({
+    initialize: function() {
+        this.collection.bind('reset', this.render, this);
+    },
+    render: function() {
+        events.fire("par56Loaded");
+
        return this;
    }
 });
--- a/src/main/webapp/resources/json/room0.json
+++ b/src/main/webapp/resources/json/room0.json
@ -0,0 +1,11 @@
+[
+    {
+        "type":"Buzzer",
+        "deviceId":0,
+        "deviceName":"Buzzer",
+        "picture":null,
+        "options": {
+            "state":0
+        }
+    }
+]
--- a/src/main/webapp/resources/json/room1.json
+++ b/src/main/webapp/resources/json/room1.json
@ -0,0 +1,85 @@
+[
+    {
+        "startAddress":1,
+        "type":"Par56Spot",
+        "deviceId":0,
+        "deviceName":"Par56 Lampe 1",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+    {
+        "startAddress":6,
+        "type":"Par56Spot",
+        "deviceId":1,
+        "deviceName":"Par56 Lampe 2",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+    {
+        "startAddress":11,
+        "type":"Par56Spot",
+        "deviceId":2,
+        "deviceName":"Par56 Lampe 3",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+    {
+        "startAddress":16,
+        "type":"Par56Spot",
+        "deviceId":3,
+        "deviceName":"Par56 Lampe 5",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+    {
+        "startAddress":21,
+        "type":"Strobe1500",
+        "deviceId":4,
+        "deviceName":"Stroboskop 1",
+        "picture":null,
+        "options": {
+            "mode":0,
+            "speed":0,
+            "intensity":0
+        }
+    },
+    {
+        "startAddress":508,
+        "type":"Par56Spot",
+        "deviceId":5,
+        "deviceName":"Par56 Lampe 5",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+    {
+        "type":"Lampel",
+        "deviceId":6,
+        "deviceName":"Lampel",
+        "picture":null,
+        "options": {
+            "red":0,
+            "green":0,
+            "blue":0
+        }
+    },
+]