Shell for UI pages, some placeholder dashboard stats

This commit is contained in:
Jamie Curnow
2018-06-26 11:56:10 +10:00
parent 493bb77169
commit c69b174771
23 changed files with 328 additions and 24 deletions

View File

@@ -1 +1,57 @@
Hi
<div class="page-header">
<h1 class="page-title">Hi <%- getUserName() %></h1>
</div>
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-green mr-3">
<i class="fe fe-zap"></i>
</span>
<div>
<h4 class="m-0"><a href="/nginx/proxy"><%- getHostStat('proxy') %> <small>Proxy Hosts</small></a></h4>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-yellow mr-3">
<i class="fe fe-shuffle"></i>
</span>
<div>
<h4 class="m-0"><a href="/nginx/redirection"><%- getHostStat('redirection') %> <small>Redirection Hosts</small></a></h4>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-blue mr-3">
<i class="fe fe-radio"></i>
</span>
<div>
<h4 class="m-0"><a href="/nginx/stream"><%- getHostStat('stream') %> <small> Streams</small></a></h4>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card p-3">
<div class="d-flex align-items-center">
<span class="stamp stamp-md bg-red mr-3">
<i class="fe fe-zap-off"></i>
</span>
<div>
<h4 class="m-0"><a href="/nginx/404"><%- getHostStat('404') %> <small>404 Hosts</small></a></h4>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,10 +1,61 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./main.ejs');
const Mn = require('backbone.marionette');
const Cache = require('../cache');
const Controller = require('../controller');
const Api = require('../api');
const Helpers = require('../../lib/helpers');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
template: template,
id: 'dashboard'
});
id: 'dashboard',
stats: {},
ui: {
links: 'a'
},
events: {
'click @ui.links': function (e) {
e.preventDefault();
Controller.navigate($(e.currentTarget).attr('href'), true);
}
},
templateContext: function () {
let view = this;
return {
getUserName: function () {
return Cache.User.get('nickname') || Cache.User.get('name');
},
getHostStat: function (type) {
if (view.stats && typeof view.stats.hosts !== 'undefined' && typeof view.stats.hosts[type] !== 'undefined') {
return Helpers.niceNumber(view.stats.hosts[type]);
}
return '-';
}
}
},
onRender: function () {
let view = this;
if (typeof view.stats.hosts === 'undefined') {
Api.Reports.getHostStats()
.then(response => {
if (!view.isDestroyed()) {
view.stats.hosts = response;
view.render();
}
})
.catch(err => {
console.log(err);
});
}
}
});