Allow changing time span in home page

This commit is contained in:
cuigh 2018-04-16 19:48:39 +08:00
parent 8fecfb5ba2
commit 8c380fa23a
5 changed files with 34 additions and 1 deletions

View File

@ -1553,6 +1553,9 @@ var Swirl;
return this.opts;
}
loadData() {
if (this.charts.length == 0) {
return;
}
let args = {
charts: this.charts.map(c => c.getOptions().name).join(","),
period: this.opts.period,
@ -1636,6 +1639,9 @@ var Swirl;
class IndexPage {
constructor() {
this.dashboard = new ChartDashboard("#div-charts", window.charts, { name: "home" });
$("#cb-time").change(e => {
this.dashboard.setPeriod($(e.target).val());
});
dragula([$('#div-charts').get(0)], {
moves: function (el, container, handle) {
return $(handle).closest('a.drag').length > 0;

File diff suppressed because one or more lines are too long

View File

@ -498,6 +498,10 @@ namespace Swirl.Core {
}
private loadData() {
if (this.charts.length == 0) {
return
}
let args: any = {
charts: this.charts.map(c => c.getOptions().name).join(","),
period: this.opts.period,

View File

@ -8,6 +8,9 @@ namespace Swirl {
constructor() {
this.dashboard = new ChartDashboard("#div-charts", window.charts, {name: "home"});
$("#cb-time").change(e => {
this.dashboard.setPeriod($(e.target).val());
});
dragula([$('#div-charts').get(0)], {
moves: function (el, container, handle): boolean {
return $(handle).closest('a.drag').length > 0;

View File

@ -1,4 +1,5 @@
{{ extends "_layouts/default" }}
{{ import "_modules/form" }}
{{ block style() }}
<link rel="stylesheet" href="/assets/dragula/dragula.min.css?v=2.7.2">
@ -80,6 +81,25 @@
<strong>{{ i18n("home.monitor") }}</strong>
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control">
<a class="button is-static">Time</a>
</p>
<p class="control">
<div class="select">
<select id="cb-time">
<option value="30" selected>Last 30 minutes</option>
<option value="60">Last 1 hour</option>
<option value="180">Last 3 hours</option>
<option value="360">Last 6 hours</option>
<option value="720">Last 12 hours</option>
<option value="1440">Last 24 hours</option>
</select>
</div>
</p>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">