Refactor tempmon probe graph view per Vue.js

tailbone/templates/tempmon/probes/graph.mako

@@ -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()}

tailbone/views/tempmon/probes.py

@@ -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)