”2016-07-29”

This commit is contained in:
Martin Donnelly 2016-07-29 16:45:05 +01:00
parent 1dc6d36fca
commit 3f25058766

View File

@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/mui.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<script src="lib/jquery.js"
@ -10,17 +12,63 @@
crossorigin="anonymous"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<div id="output"></div>
<script type="text/template" id="list-template">
<ul></ul>
</script>
<script type="text/template" id="todo-template">
<li>
<%= item.device_id %>
<%= item.device_type %>
</li>
</script>
<div id="main"></div>
<div id="output"></div>
<script type="text/template" id="main-template">
<div class="mui-container">
<form>
<div class="mui-row">
<div class="mui-select mui-col-md-6">
<select id="device" name="device">
<option>
</option>
<option>
CENSIS-LoRa-1
</option>
<option>
CENSIS-LoRa-2
</option>
<option>
CENSIS-LoRa-3
</option>
<option>
CENSIS-LoRa-4
</option>
</select> <label>Device</label>
</div>
<div class="mui-col-md-3">
<div class="mui-textfield">
<input type="date" placeholder="" name="from" /> <label>From</label>
</div>
</div>
<div class="mui-col-md-3">
<div class="mui-textfield">
<input type="date" placeholder="" name="to" /> <label>To</label>
</div>
</div>
</div>
</form>
</div>
</script>
<script type="text/template" id="list-template">
<ul></ul>
</script>
<script type="text/template" id="item-template">
<div>
<%= item.device_id %> <%= item.device_type %>
</div>
</script>
<script>
@ -43,37 +91,39 @@
var mDotModel = Backbone.Model.extend({});
var mDotCollection = Backbone.Collection.extend({
model:mDotModel,
url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/HIE-smart-campus-4'
model: mDotModel,
url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/'
//url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/HIE-smart-campus-4'
});
var ItemView = Backbone.View.extend({
tagName:'li',
className:'item',
initialize: function() {
this.template = _.template($('item-template').html());
tagName: 'div', className: 'item', initialize: function() {
this.template = _.template($('#item-template').html());
console.log('ItemView:Init');
this.render();
},
render: function() {
this.$el.html(this.template({item:this.model}));
}, render: function() {
var self = this;
console.log('ItemView:Render');
console.log(this.model);
_(this.model.events).each(function(i){
// console.log(this.template({item:i}));
this.$el.append(this.template({item:i}));
}, this);
//this.$el.html(this.template({item:this.model}));
return this;
}
});
var MDOT = Backbone.View.extend({
model:mDotModel,
el: $('#output'),
model: mDotModel, el: $('#output'),
events: {
'click button#refresh': 'refresh'
}, initialize: function() {
_.bindAll(this, 'render', 'refresh', 'update');
//this.collection = new mDotCollection();
this.collection.bind('change reset add remove', this.update, this);
this.collection.bind('change reset add remove', this.render, this);
this.template = _.template($('#list-template').html());
this.render();
@ -87,47 +137,73 @@
this.collection.each(function(model) {
var events = model.get('events');
console.log(events);
//that.$el.append(new TodoView({model: model.toJSON()}));
});
var e = new ItemView({model: model.toJSON()});
// that.$el.append();
this.render();
},
render: function() {
console.log('render');
});
}, render: function() {
console.log('MDOT:render');
that = this;
this.$el.empty();
this.$el.append(this.template());
this.$el.empty();
//this.$el.append(this.template());
this.collection.each(function(model) {
var events = model.get('events');
console.log(events);
//that.$el.append(new TodoView({model: model.toJSON()}));
var events = model.get('events');
var e = new ItemView({model: model.toJSON()}).render().el;
console.log('done:',e);
that.$el.append(e);
_(events).each(function(model) {
console.log(model);
that.$el.append(new ItemView({model: model.toJSON()}));
})
});
// var events = this.collection.model.get('events');
// console.log(events);
/*events.each(function(model) {
that.$el.append(new ItemView({model: model.toJSON()}));
});*/
return this;
});
console.log('bah');
return this;
}
});
var MainView = Backbone.View.extend({
el: $('#main'),
template:_.template($('#main-template').html()),
events: {
'change select#device': 'changeDevice'
},
initialize: function() {
_.bindAll(this, 'render','changeDevice');
this.render();
},
render: function(){
$(this.el).html(this.template());
return this;
},
changeDevice: function() {
var newDevice;
console.log('MainView:ChangeDevice');
console.log(this);
this.collection.set('id','HIE-smart-campus-4');
//this.collection.fetch({beforeSend: sendAuthentication});
newDevice = this.$el.find('#device')[0].value
console.log('D:',this.$el.find('#device')[0].value);
this.collection.url = 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + newDevice;
this.collection.fetch({beforeSend: sendAuthentication});
//{data:{fetch:true, type:"post", page:1}}
}
});
var mdotCollection = new mDotCollection();
var mdot = new MDOT({collection:mdotCollection});
var mainview = new MainView({collection: mdotCollection});
mdotCollection.fetch({beforeSend: sendAuthentication});
var mdot = new MDOT({collection: mdotCollection});
// mdotCollection.fetch({beforeSend: sendAuthentication});
})(jQuery);
</script>
</body>