mirror of
https://gitlab.silvrtree.co.uk/martind2000/censis-archive.git
synced 2025-02-10 19:49:16 +00:00
”2016-07-29”
This commit is contained in:
parent
1dc6d36fca
commit
3f25058766
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user