ctdo
/
bunti-node
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

less.js implemented, abstraction for device interfaces missing

This commit is contained in:
bastianwegge 2012-07-19 16:25:01 +02:00
parent 613f382363
commit 9a9f659e11
26 changed files with 371 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
css/core.less Executable file
View File

@ -0,0 +1,90 @@
/* global classes */
.center {
text-align:center;
}
.cb {
clear:both;
}
/* basic layout */
header {
width: 600px;
margin: 20px auto 0;
padding:10px 0 0 0;
background-color:#aaa;
border-radius: 5px;
border: 2px solid #000;
position:relative;
z-index:1;
}
#content {
width:550px;
margin: -10px auto;
padding: 20px 5px 5px 5px;
background-color: #ddd;
border-radius: 5px;
border: 2px solid #000;
}
h1 {
font-size: 1.4em;
a { text-decoration:none; color:#000; }
}
nav {
}
nav ul li {
float:left;
width:100px;
height:80px;
border: 1px solid #fff;
margin: 9px;
text-align:center;
/*temp*/
background-color: #444;
}
nav ul li a {
display:block;
height: 80px;
text-decoration:none;
color: #fff;
line-height:80px;
}
nav ul li a:hover { background-color:#777; }
.room
{
position:relative;
height: 300px;
}
.room#room1 { background:url(../img/room1.png) no-repeat center; }
.room#room2 { background:url(../img/room2.png) no-repeat center; }
.room#room3 { background:url(../img/room3.png) no-repeat center; }
.room#room4 { background:url(../img/room4.png) no-repeat center; }
.room#room5 { background:url(../img/room5.png) no-repeat center; }
.device
{
position:absolute;
cursor:pointer;
}
.on
{
background-color:Green;
}
.off
{
background-color:Red;
}

2
css/reset.css Executable file
View File

@ -0,0 +1,2 @@
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

BIN
img/Thumbs.db Executable file
View File

Binary file not shown.

BIN
img/bg.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/psd/room1.psd Executable file
View File

Binary file not shown.

BIN
img/psd/room2.psd Executable file
View File

Binary file not shown.

BIN
img/psd/room3.psd Executable file
View File

Binary file not shown.

BIN
img/room1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
img/room2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
img/room3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

48
index.html
View File

@ -3,22 +3,44 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bunti backbone prototype</title> <title>Bunti backbone prototype</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet/less" type="text/css" href="css/core.less">
</head> </head>
<body> <body>
<div id="content"> <div id="sitewrap">
<header>
</div> <h1 class="center"><a href="">bunti v2</a></h1>
<script src="js/libs/jquery.js"></script> <nav>
<script src="js/libs/underscore.js"></script> <ul>
<script src="js/libs/backbone.js"></script> <li><a href="#/room/1">Room 1</a></li>
<script src="js/libs/handlebars.js"></script> <li><a href="#/room/2">Room 2</a></li>
<li><a href="#/room/3">Room 3</a></li>
<li><a href="#/room/4">Room 4</a></li>
<li><a href="#/room/5">Room 5</a></li>
</ul>
<div class="cb"></div>
</nav>
</header>
<div id="content">
</div>
</div>
<script src="js/libs/jquery.js"></script> <!-- 1.7.2 -->
<script src="js/libs/underscore.js"></script> <!-- 1.3.3 -->
<script src="js/libs/backbone.js"></script> <!-- 1.9.2 -->
<script src="js/libs/handlebars.js"></script> <!-- 1.0.beta.6 -->
<script src="js/libs/less.js"></script> <!-- 1.3.0 -->
<!-- Application core (Order matters) --> <!-- Application core (Order matters) -->
<script src="js/app.js"></script> <script src="js/app.js"></script>
<!-- Modules (Order does not matter) --> <!-- Modules (Order does not matter) -->
<script src="js/modules/util.js"></script> <script src="js/modules/router.js"></script>
<script src="js/modules/room.js"></script> <script src="js/modules/dashboard.js"></script>
<script src="js/modules/util.js"></script>
<script src="js/modules/room.js"></script>
<script src="js/modules/devices/device.js"></script>
<script src="js/modules/devices/position.js"></script>
<script src="js/modules/devices/option.js"></script>
<script src="js/modules/devices/switch.js"></script>
</body> </body>
</html> </html>

62
js/app.js
View File

@ -12,39 +12,35 @@
} () } ()
}; };
var dataModel = {
rooms: [
{
roomId: 1,
title: "Raum 1",
devices: [
{ deviceId: 1, type: "switch", options: [{ status: "off"}], pos:{x:280} },
{ deviceId: 2, type: "switch", options: [{ status: "on"}], pos:{x:500,y:280} },
]
},
{ roomId: 2, title: "Raum 2" },
{ roomId: 3, title: "Raum 3" },
{ roomId: 4, title: "Raum 4" },
{ roomId: 5, title: "Raum 5" }
]
};
jQuery(function ($) { jQuery(function ($) {
// load the modules // load the modules
app.room = app.module('room'); app.util = app.module('util');
app.control = app.module('control'); app.util.preloadTemplates(['room','switch'], function () {
app.option = app.module('option'); app.router = app.module('router');
app.util = app.module('util'); app.Router = new app.router.Router();
Backbone.history.start();
});
});
//app.room = app.module('room');
//app.option = app.module('option');
// load the data -- dummy -- struts/node backend //// create the model
var model = { //dashboard = new app.room.View({ model: dataModel });
rooms: [
{
roomId: 1,
title: "Raum 1",
controls: [
{ controlId: 1, type: "switch", options: [{ status: "off"}] },
{ controlId: 2, type: "switch", options: [{ status: "on"}] },
]
},
{ roomId: 2, title: "Raum 2" },
{ roomId: 3, title: "Raum 3" },
{ roomId: 4, title: "Raum 4" },
{ roomId: 5, title: "Raum 5" }
]
};
var myTestTemplate = app.util.loadTemplate('js/templates/test.handlebars', function(data) {
source = data;
template = Handlebars.compile(source);
//$('#target').html(template(jsondata));
$('#content').append(template(model));
});
// create the model
dashboard = new app.room.List(model.rooms);
});

0
js/libs/handlebars.js Normal file → Executable file
View File

9
js/libs/less.js Executable file
View File

File diff suppressed because one or more lines are too long

48
js/modules/dashboard.js Executable file
View File

@ -0,0 +1,48 @@
// js/modules/dashboard.js
// Module reference argument, assigned at the bottom
(function (Dashboard) {
// Dependencies
var Util = app.module("util");
var Room = app.module("room");
Dashboard.Model = Backbone.Model.extend({
defaults: {
rooms: Room.List
}
});
Dashboard.View = Backbone.View.extend({
el: $('#content'),
initialize: function () {
// load the data -- dummy -- struts/node backend
this.rooms = new Room.List(dataModel.rooms);
},
render: function () {
this.$el.html('');
_.each(this.rooms.models, function (room) {
this.renderRoom(room);
}, this);
return this;
},
renderRoom: function (room) {
var roomView = new Room.View({
model: room
});
this.$el.append(roomView.render().el);
},
renderRoomWithId: function (roomId) {
this.$el.html('');
_.each(this.rooms.models, function (room) {
if (room.get('roomId') == roomId) {
this.renderRoom(room);
}
}, this);
}
});
})(app.module("dashboard"));

43
js/modules/devices/device.js
View File

@ -2,24 +2,51 @@
// Module reference argument, assigned at the bottom // Module reference argument, assigned at the bottom
// every device gets its model from the base and is rendered into seperate viewbases // every device gets its model from the base and is rendered into seperate viewbases
(function (Control) { (function (Device) {
// Dependencies // Dependencies
var Position = app.module("position");
var Option = app.module("option"); var Option = app.module("option");
var Util = app.module("util");
Device.Model = Backbone.Model.extend({ Device.Model = Backbone.Model.extend({
defaults: { defaults: {
options: Option.List deviceId: 0,
}, options: Option.List,
initialize: function () { pos: Position.Model,
type: ''
} }
}); });
Device.List = Backbone.Collections.extend({ Device.List = Backbone.Collection.extend({
model: Control.Model model: Device.Model
}); });
})(app.module("control")); Device.View = Backbone.View.extend({
initialize: function () {
this.$el.addClass('device');
this.options = new Option.List(this.model.get('options'));
this.pos = new Position.Model(this.model.get('pos'));
this.type = this.model.get('type');
this.template = Handlebars.compile(Util.getTemplate(this.type));
},
render: function () {
this.$el.attr('style', 'left:' + this.pos.get('x') + 'px;top:' + this.pos.get('y') + 'px');
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
"click .switch": "toggleSwitch"
},
toggleSwitch: function () {
var status = this.model.get('options')[0].status;
status = (status == "off" ? "on" : "off");
this.model.get('options')[0].status = status;
this.model.trigger("change:options");
this.render();
}
});
})(app.module("device"));

7
js/modules/devices/option.js
View File

@ -3,12 +3,17 @@
(function (Option) { (function (Option) {
Option.Model = Backbone.Model.extend({ Option.Model = Backbone.Model.extend({
status: ''
}); });
Option.List = Backbone.Collections.extend({ Option.List = Backbone.Collection.extend({
model: Option.Model model: Option.Model
}); });
Option.View = Backbone.View.extend({
});
})(app.module("option")); })(app.module("option"));

10
js/modules/devices/position.js Executable file
View File

@ -0,0 +1,10 @@
(function (Position) {
Position.Model = Backbone.Model.extend({
defaults: {
x: 0,
y: 0
}
});
})(app.module("position"));

16
js/modules/devices/switch.js
View File

@ -2,7 +2,23 @@
// Module reference argument, assigned at the bottom // Module reference argument, assigned at the bottom
(function (Switch) { (function (Switch) {
Switch.Model = Backbone.Model.extend({
defaults: {
status: 'off'
}
});
Switch.List = Backbone.Collection.extend({
model: Switch.Model
});
Switch.View = Backbone.View.extend({
render: function () {
this.template = Handlebars.compile(Util.getTemplate('switch'));
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
})(app.module("switch")); })(app.module("switch"));

25
js/modules/room.js
View File

@ -4,22 +4,41 @@
(function (Room) { (function (Room) {
// Dependencies // Dependencies
var Control = app.module("control"); var Util = app.module("util");
var Device = app.module("device");
// The basic person model // The basic person model
Room.Model = Backbone.Model.extend({ Room.Model = Backbone.Model.extend({
defaults: { defaults: {
roomId: null, roomId: null,
title: 'undefined', title: 'undefined',
controls: Control.List devices: Device.List
} }
}); });
Room.List = Backbone.Collection.extend({ Room.List = Backbone.Collection.extend({
model: Room.Model model: Room.Model
}); });
Room.View = Backbone.View.extend({
initialize: function () {
this.$el.attr('id', 'room' + this.model.get('roomId')).addClass('room');
this.template = Handlebars.compile(Util.getTemplate('room'));
this.devices = new Device.List(this.model.get('devices'));
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
_.each(this.devices.models, function (device) {
this.renderDevice(device);
}, this);
return this;
},
renderDevice: function (device) {
var deviceView = new Device.View({ model: device });
this.$el.append(deviceView.render().el);
}
});
})(app.module("room")); })(app.module("room"));

30
js/modules/router.js Executable file
View File

@ -0,0 +1,30 @@
// js/router.js
// Module reference argument, assigned at the bottom
// every device gets its model from the base and is rendered into seperate viewbases
(function (Router) {
var Dashboard = app.module("dashboard");
Router.Router = Backbone.Router.extend({
routes: {
"room/:id": "roomDetails",
"": "home"
},
initialize: function () {
if (!this.dashboard) {
this.dashboard = new Dashboard.View();
}
},
home: function () {
$('#content').html('');
//this.dashboard.render();
},
roomDetails: function (roomId) {
this.dashboard.renderRoomWithId(roomId);
}
});
})(app.module("router"));

36
js/modules/util.js Normal file → Executable file
View File

@ -1,16 +1,32 @@
// js/modules/util.js // js/modules/util.js
// utility functions for template loading / .. // utility functions for template loading / ..
(function (Util) { (function (Util) {
Util.loadTemplateAjax = function(path, callback) { // cache
$.ajax({ Util.templates = {};
url: path, //ex. js/templates/mytemplate.handlebars
cache: true, Util.preloadTemplates = function (names, callback) {
success: callback var loadTemplate = function (index) {
}); var name = names[index];
} $.get('js/templates/' + name + '.handlebars', function (data) {
Util.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
});
}
loadTemplate(0);
}
Util.getTemplate = function (name) {
return Util.templates[name];
}
})(app.module("util")); })(app.module("util"));

1
js/templates/room.handlebars Executable file
View File

@ -0,0 +1 @@
{{roomId}}

3
js/templates/switch.handlebars Executable file
View File

@ -0,0 +1,3 @@
<div class="switch {{#options}}{{status}}{{/options}}" style="width:20px;height:20px">
{{#options}}{{status}}{{/options}}
</div>

0
node-sources.txt Normal file → Executable file
View File

9
web.config Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".handlebars" mimeType="text/x-handlebars-template" />
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>
</configuration>