Refactor tempmon probe graph view per Vue.js
This commit is contained in:
Lance Edgar
parent
4b2abf791c
commit
f684c38958
|
|
@ -1,11 +1,12 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
<%inherit file="/base.mako" />
|
||||
<%inherit file="/form.mako" />
|
||||
|
||||
<%def name="title()">Temperature Graph</%def>
|
||||
|
||||
<%def name="extra_javascript()">
|
||||
${parent.extra_javascript()}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
|
||||
% if not use_buefy:
|
||||
<script type="text/javascript">
|
||||
|
||||
var ctx = null;
|
||||
|
|
@ -69,8 +70,67 @@
|
|||
});
|
||||
|
||||
</script>
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="render_form_complete()">
|
||||
% if use_buefy:
|
||||
|
||||
<script type="text/x-template" id="form-page-template">
|
||||
<div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
|
||||
<div class="form-wrapper">
|
||||
<div class="form">
|
||||
|
||||
<b-field horizontal
|
||||
label="Appliance">
|
||||
<div>
|
||||
% if probe.appliance:
|
||||
<a href="${url('tempmon.appliances.view', uuid=probe.appliance.uuid)}">${probe.appliance}</a>
|
||||
% endif
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal
|
||||
label="Probe Location">
|
||||
<div>
|
||||
${probe.location or ""}
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal
|
||||
label="Showing">
|
||||
${time_range}
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start;">
|
||||
<div class="object-helpers">
|
||||
${self.object_helpers()}
|
||||
</div>
|
||||
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<canvas ref="tempchart" width="400" height="150"></canvas>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div id="form-page-app">
|
||||
<form-page></form-page>
|
||||
</div>
|
||||
|
||||
% else:
|
||||
## legacy / not buefy
|
||||
|
||||
<div class="form-wrapper">
|
||||
|
||||
<div class="field-wrapper">
|
||||
|
|
@ -84,7 +144,7 @@
|
|||
|
||||
<div class="field-wrapper">
|
||||
<label>Probe Location</label>
|
||||
<div class="field">${probe.location}</div>
|
||||
<div class="field">${probe.location or ""}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
|
|
@ -97,3 +157,70 @@
|
|||
</div>
|
||||
|
||||
<canvas id="tempchart" width="400" height="150"></canvas>
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="modify_tailbone_form()">
|
||||
<script type="text/javascript">
|
||||
|
||||
FormPage.data = function() { return {
|
||||
currentTimeRange: ${json.dumps(current_time_range)|n},
|
||||
chart: null,
|
||||
}}
|
||||
|
||||
FormPage.methods.fetchReadings = function(timeRange) {
|
||||
|
||||
if (timeRange === undefined) {
|
||||
timeRange = this.currentTimeRange
|
||||
}
|
||||
|
||||
let timeUnit = null
|
||||
if (timeRange == 'last hour') {
|
||||
timeUnit = 'minute'
|
||||
} else if (['last 6 hours', 'last day'].includes(timeRange)) {
|
||||
timeUnit = 'hour'
|
||||
} else {
|
||||
timeUnit = 'day'
|
||||
}
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
this.$http.get('${url('{}.graph_readings'.format(route_prefix), uuid=probe.uuid)}', {params: {'time-range': timeRange}}).then(({ data }) => {
|
||||
|
||||
this.chart = new Chart(this.$refs.tempchart, {
|
||||
type: 'scatter',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: "${probe.description}",
|
||||
data: data
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {unit: timeUnit},
|
||||
position: 'bottom'
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
FormPage.methods.timeRangeChanged = function(value) {
|
||||
this.fetchReadings(value)
|
||||
}
|
||||
|
||||
FormPage.mounted = function() {
|
||||
this.fetchReadings()
|
||||
}
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
|
||||
${parent.body()}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
################################################################################
|
||||
#
|
||||
# Rattail -- Retail Software Framework
|
||||
# Copyright © 2010-2018 Lance Edgar
|
||||
# Copyright © 2010-2019 Lance Edgar
|
||||
#
|
||||
# This file is part of Rattail.
|
||||
#
|
||||
|
|
@ -35,7 +35,7 @@ from rattail_tempmon.db import model as tempmon
|
|||
|
||||
import colander
|
||||
from deform import widget as dfwidget
|
||||
from webhelpers2.html import tags
|
||||
from webhelpers2.html import tags, HTML
|
||||
|
||||
from tailbone import forms, grids
|
||||
from tailbone.views.tempmon import MasterView
|
||||
|
|
@ -255,6 +255,7 @@ class TempmonProbeView(MasterView):
|
|||
|
||||
def graph(self):
|
||||
probe = self.get_instance()
|
||||
use_buefy = self.get_use_buefy()
|
||||
|
||||
key = 'tempmon.probe.{}.graph_time_range'.format(probe.uuid)
|
||||
selected = self.request.params.get('time-range')
|
||||
|
|
@ -262,18 +263,26 @@ class TempmonProbeView(MasterView):
|
|||
selected = self.request.session.get(key, 'last hour')
|
||||
self.request.session[key] = selected
|
||||
|
||||
time_range = tags.select('time-range', selected, tags.Options([
|
||||
range_options = tags.Options([
|
||||
tags.Option("Last Hour", 'last hour'),
|
||||
tags.Option("Last 6 Hours", 'last 6 hours'),
|
||||
tags.Option("Last Day", 'last day'),
|
||||
tags.Option("Last Week", 'last week'),
|
||||
]))
|
||||
])
|
||||
|
||||
if use_buefy:
|
||||
time_range = HTML.tag('b-select', c=[range_options.render()],
|
||||
**{'v-model': 'currentTimeRange',
|
||||
'@input': 'timeRangeChanged'})
|
||||
else:
|
||||
time_range = tags.select('time-range', selected, range_options)
|
||||
|
||||
context = {
|
||||
'probe': probe,
|
||||
'parent_title': six.text_type(probe),
|
||||
'parent_url': self.get_action_url('view', probe),
|
||||
'time_range': time_range,
|
||||
'current_time_range': selected,
|
||||
}
|
||||
return self.render_to_response('graph', context)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue