Skip to content

Commit

Permalink
make the transition to a backbone view
Browse files Browse the repository at this point in the history
  • Loading branch information
@selaux
selaux committed Mar 9, 2014
1 parent 242b872 commit e85b8a1
Show file tree
Hide file tree
Showing 11 changed files with 274 additions and 200 deletions.
2 changes: 1 addition & 1 deletion frontend/routes/index.js
View file
Expand Up @@ -8,7 +8,7 @@ module.exports = function (webinterface) {

res.render('index', {
title: app.title,
allViews: _.map(app.views, function (view) { return view.render(); }).join('')
allViews: _.map(app.views, function (view) { return view.getFullHtml(); }).join('')
});
});
};
Expand Down
113 changes: 78 additions & 35 deletions lib/View.js
View file
@@ -1,45 +1,88 @@
'use strict';

var _ = require('lodash'),
extendMixin = require('./extend'),
$ = require(typeof window !== 'undefined' ? 'jquery' : 'cheerio'),
Backbone = require('backbone'),

Handlebars = require('./handlebars/handlebars'),
View;

View = function (module) {
this.module = module;
if (this.template) {
this.template = this.getCompiledTemplate(this.template);
this.noDataTemplate = this.getCompiledTemplate('noData');
Backbone.$ = $;

View = Backbone.View.extend({
tagName: 'section',

constructor: function (module, options) {
this.module = module;
if (this.template) {
this.compiledTemplate = this.getCompiledTemplate(this.template);
this.noDataTemplate = this.getCompiledTemplate('noData');
}

Backbone.View.prototype.constructor.call(this, options);
},

className: function () {
var classNames = [ 'panel' ];

if (_.isEmpty(this.module.attributes)) {
classNames.push('panel-warning');
classNames.push('noData');
} else {
if (this.module.has('connected')) {
classNames.push(this.module.get('connected') ? 'panel-success' : 'panel-danger');
} else {
classNames.push('panel-success');
}
classNames.push(this.module.viewId);
}

return classNames.join(' ');
},

attributes: function () {
return {
id: this.module.id
};
},

getCompiledTemplate: function (templateName) {
return require('../build/compiledTemplates')(Handlebars)[templateName];
},

render: function () {
this.updateHtml();
},

updateHtml: function () {
var attrs = _.extend({}, _.result(this, 'attributes'), { 'class': _.result(this, 'className') }),
html = !_.isEmpty(this.module.attributes) ? this.renderViewWithData() : this.renderViewWithoutData();
this.$el.attr(attrs).html(html);
},

getFullHtml: function () {
this.updateHtml();
return $('<div />').append(this.$el).html();
},

getViewData: function () {
return { json: JSON.stringify(this.module.attributes) };
},

renderViewWithData: function () {
return this.compiledTemplate(_.extend({
id: this.module.id,
title: this.module.title,
lastUpdated: new Date()
}, this.module.attributes, this.getViewData()));
},

renderViewWithoutData: function () {
return this.noDataTemplate({
id: this.module.id,
title: this.module.title
});
}
};
extendMixin(View);

View.prototype.getCompiledTemplate = function (templateName) {
return require('../build/compiledTemplates')(Handlebars)[templateName];
};

View.prototype.render = function () {
return !_.isEmpty(this.module.attributes) ? this.renderViewWithData() : this.renderViewWithoutData();
};

View.prototype.getViewData = function () {
return { json: JSON.stringify(this.module.attributes) };
};

View.prototype.renderViewWithData = function () {
return this.template(_.extend({
id: this.module.id,
title: this.module.title,
lastUpdated: new Date()
}, this.module.attributes, this.getViewData()));
};

View.prototype.renderViewWithoutData = function () {
return this.noDataTemplate({
id: this.module.id,
title: this.module.title
});
};
});

module.exports = View;
4 changes: 3 additions & 1 deletion package.json
View file
Expand Up @@ -25,7 +25,9 @@
},
"dependencies": {
"async": "0.2.9",
"backbone": "1.1.0",
"backbone": "1.1.2",
"jquery": "2.1.0",
"cheerio": "0.13.1",
"express": "3.4.0",
"express3-handlebars": "0.5.0",
"eventemitter2": "0.4.13",
Expand Down
16 changes: 7 additions & 9 deletions templates/json.hbs
View file
@@ -1,9 +1,7 @@
<section class="json panel panel-success" id="{{ id }}">
<header class="panel-heading">
<h2 class="panel-title">{{ title }}</h2>
</header>
<div class="panel-body">
{{ json }}
</div>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
</section>
<header class="panel-heading">
<h2 class="panel-title">{{ title }}</h2>
</header>
<div class="panel-body">
{{ json }}
</div>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
26 changes: 12 additions & 14 deletions templates/market.hbs
View file
@@ -1,14 +1,12 @@
<section class="market panel panel-success" id="{{ id }}">
<header class="panel-heading">
<h2 class="panel-title">{{ title }}</h2>
</header>
<dl class="panel-body dl-horizontal">
<dt class="big-label">Latest Trade:</dt>
<dd class="big">{{number close}} {{currency}}</dd>
<dt>Best Bid:</dt>
<dd>{{number bid}} {{currency}}</dd>
<dt>Best Ask:</dt>
<dd>{{number ask}} {{currency}}</dd>
</dl>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
</section>
<header class="panel-heading">
<h2 class="panel-title">{{ title }}</h2>
</header>
<dl class="panel-body dl-horizontal">
<dt class="big-label">Latest Trade:</dt>
<dd class="big">{{number close}} {{currency}}</dd>
<dt>Best Bid:</dt>
<dd>{{number bid}} {{currency}}</dd>
<dt>Best Ask:</dt>
<dd>{{number ask}} {{currency}}</dd>
</dl>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
172 changes: 85 additions & 87 deletions templates/miner.hbs
View file
@@ -1,90 +1,88 @@
<section class="miner panel {{#if connected}}panel-success{{else}}panel-danger{{/if}}" id="{{ id }}">
<header class="panel-heading">
<header class="panel-heading">
<div class="row">
<h2 class="panel-title col-xs-6">{{ title }}</h2>
<div class="col-xs-6"><span class="pull-right">{{#if connected}}Connected{{else}}Disconnected{{/if}}</span></div>
</div>
</header>
{{#if connected}}
<div class="panel-body">
<h4>Overview</h4>
<div class="row">
<h2 class="panel-title col-xs-6">{{ title }}</h2>
<div class="col-xs-6"><span class="pull-right">{{#if connected}}Connected{{else}}Disconnected{{/if}}</span></div>
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt class="big-label">Hashrate:</dt>
<dd class="big">{{hashrate avgHashrate}}</dd>
<dt></dt>
<dd></dd>
<dt>Hardware Errors:</dt>
<dd>{{number hardwareErrors}}</dd>
<dt>Hardware Error Rate:</dt>
<dd>{{number hardwareErrorRate precision="2"}}%</dd>
<dt>Uptime:</dt>
<dd>{{timespan elapsed}}</dd>
<dt>Software:</dt>
<dd>{{description}}</dd>
</dl>
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt>Accepted Shares:</dt>
<dd>{{number shares.accepted}}</dd>
<dt>Rejected Shares:</dt>
<dd>{{number shares.rejected}}</dd>
<dt>Stale Shares:</dt>
<dd>{{number shares.stale}}</dd>
<dt>Discarded Shares:</dt>
<dd>{{number shares.discarded}}</dd>
</dl>
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt>Difficulty Accepted:</dt>
<dd>{{number difficulty.accepted precision="2"}}</dd>
<dt>Difficulty Rejected:</dt>
<dd>{{number difficulty.rejected precision="2"}}</dd>
<dt>Difficulty Stale:</dt>
<dd>{{number difficulty.stale precision="2"}}</dd>
</dl>
</div>
</header>
{{#if connected}}
<div class="panel-body">
<h4>Overview</h4>
<div class="row">
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt class="big-label">Hashrate:</dt>
<dd class="big">{{hashrate avgHashrate}}</dd>
<dt></dt>
<dd></dd>
<dt>Hardware Errors:</dt>
<dd>{{number hardwareErrors}}</dd>
<dt>Hardware Error Rate:</dt>
<dd>{{number hardwareErrorRate precision="2"}}%</dd>
<dt>Uptime:</dt>
<dd>{{timespan elapsed}}</dd>
<dt>Software:</dt>
<dd>{{description}}</dd>
</dl>
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt>Accepted Shares:</dt>
<dd>{{number shares.accepted}}</dd>
<dt>Rejected Shares:</dt>
<dd>{{number shares.rejected}}</dd>
<dt>Stale Shares:</dt>
<dd>{{number shares.stale}}</dd>
<dt>Discarded Shares:</dt>
<dd>{{number shares.discarded}}</dd>
</dl>
<dl class="dl-horizontal col-xs-12 col-md-4">
<dt>Difficulty Accepted:</dt>
<dd>{{number difficulty.accepted precision="2"}}</dd>
<dt>Difficulty Rejected:</dt>
<dd>{{number difficulty.rejected precision="2"}}</dd>
<dt>Difficulty Stale:</dt>
<dd>{{number difficulty.stale precision="2"}}</dd>
</dl>
{{#if pools}}
<h4>Pools</h4>
<div class="pools table-responsive">
<table class="table table-bordered">
<tr>
<th></th>
<th>Priority</th>
<th>Url</th>
<th>Alive</th>
<th>Active</th>
<th>Last Share Submitted</th>
</tr>
{{#each pools}}
<tr>
<td class="{{#if alive}}success{{else}}danger{{/if}}">Pool {{id}}</td>
<td>{{priority}}</td>
<td>{{url}}</td>
<td>{{#if alive}}Yes{{else}}No{{/if}}</td>
<td>{{#if active}}Yes{{else}}No{{/if}}</td>
<td>{{#if lastShareTime}}{{time lastShareTime}}{{else}}Never{{/if}}</td>
</tr>
{{/each}}
</table>
</div>
{{#if pools}}
<h4>Pools</h4>
<div class="pools table-responsive">
<table class="table table-bordered">
<tr>
<th></th>
<th>Priority</th>
<th>Url</th>
<th>Alive</th>
<th>Active</th>
<th>Last Share Submitted</th>
</tr>
{{#each pools}}
<tr>
<td class="{{#if alive}}success{{else}}danger{{/if}}">Pool {{id}}</td>
<td>{{priority}}</td>
<td>{{url}}</td>
<td>{{#if alive}}Yes{{else}}No{{/if}}</td>
<td>{{#if active}}Yes{{else}}No{{/if}}</td>
<td>{{#if lastShareTime}}{{time lastShareTime}}{{else}}Never{{/if}}</td>
</tr>
{{/each}}
</table>
</div>
{{/if}}
{{#if devices}}
<h4>Devices</h4>
<div class="row devices">
{{#each devices}}
<div class="col-xs-12 col-md-4">
<table class="table table-bordered">
<tr>
<td class="{{#if connected}}success{{else}}danger{{/if}}">Device {{id}}</td>
<td>{{description}}</td>
<td>{{hashrate avgHashrate}}</td>
<td>{{number hardwareErrorRate precision="2"}}% Hardware Error Rate</td>
</tr>
</table>
</div>
{{/each}}
</div>
{{/if}}
</div>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
{{/if}}
</section>
{{/if}}
{{#if devices}}
<h4>Devices</h4>
<div class="row devices">
{{#each devices}}
<div class="col-xs-12 col-md-4">
<table class="table table-bordered">
<tr>
<td class="{{#if connected}}success{{else}}danger{{/if}}">Device {{id}}</td>
<td>{{description}}</td>
<td>{{hashrate avgHashrate}}</td>
<td>{{number hardwareErrorRate precision="2"}}% Hardware Error Rate</td>
</tr>
</table>
</div>
{{/each}}
</div>
{{/if}}
</div>
<footer class="text-muted">Updated: {{time lastUpdated}}</footer>
{{/if}}
14 changes: 6 additions & 8 deletions templates/noData.hbs
View file
@@ -1,8 +1,6 @@
<section class="no-data panel panel-warning" id="{{ id }}">
<header class="panel-heading">
<div class="row">
<h2 class="panel-title col-xs-6">{{ title }}</h2>
<div class="col-xs-6"><span class="pull-right">No Data Yet.</span></div>
</div>
</header>
</section>
<header class="panel-heading">
<div class="row">
<h2 class="panel-title col-xs-6">{{ title }}</h2>
<div class="col-xs-6"><span class="pull-right">No Data Yet.</span></div>
</div>
</header>

0 comments on commit e85b8a1

Please sign in to comment.