rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor form/page component structure for Buefy/Vue.js

Browse source 
this also moves Execute Batch from the form buttons area, to object helper
This commit is contained in:
Lance Edgar 2019-06-17 15:07:19 -05:00
parent 4cadeb8e5d
commit cc79fe76fd
12 changed files with 270 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

138
tailbone/templates/tempmon/probes/graph.mako
View file

@ -73,102 +73,88 @@
% endif
</%def>
<%def name="render_form_complete()">
% if use_buefy:
<%def name="render_this_page()">
<div style="display: flex; justify-content: space-between;">
<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 class="form-wrapper">
<div class="form">
% if use_buefy:
<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>
% else:
<div class="field-wrapper">
<label>Appliance</label>
<div class="field">
% if probe.appliance:
<a href="${url('tempmon.appliances.view', uuid=probe.appliance.uuid)}">${probe.appliance}</a>
% endif
</div>
</div>
% endif
<div style="display: flex; align-items: flex-start;">
<div class="object-helpers">
${self.object_helpers()}
% if use_buefy:
<b-field horizontal label="Probe Location">
<div>
${probe.location or ""}
</div>
<ul id="context-menu">
${self.context_menu_items()}
</ul>
</b-field>
% else:
<div class="field-wrapper">
<label>Probe Location</label>
<div class="field">${probe.location or ""}</div>
</div>
% endif
</div>
% if use_buefy:
<b-field horizontal label="Showing">
${time_range}
</b-field>
% else:
<div class="field-wrapper">
<label>Showing</label>
<div class="field">
${time_range}
</div>
</div>
% endif
<canvas ref="tempchart" width="400" height="150"></canvas>
</div>
</script>
</div>
</div>
<div id="form-page-app">
<form-page></form-page>
<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>
% if use_buefy:
<canvas ref="tempchart" width="400" height="150"></canvas>
% else:
## legacy / not buefy
<div class="form-wrapper">
<div class="field-wrapper">
<label>Appliance</label>
<div class="field">
% if probe.appliance:
<a href="${url('tempmon.appliances.view', uuid=probe.appliance.uuid)}">${probe.appliance}</a>
% endif
</div>
</div>
<div class="field-wrapper">
<label>Probe Location</label>
<div class="field">${probe.location or ""}</div>
</div>
<div class="field-wrapper">
<label>Showing</label>
<div class="field">
${time_range}
</div>
</div>
</div>
<canvas id="tempchart" width="400" height="150"></canvas>
<canvas id="tempchart" width="400" height="150"></canvas>
% endif
</%def>
<%def name="modify_tailbone_form()">
<%def name="modify_this_page()">
<script type="text/javascript">
FormPage.data = function() { return {
ThisPage.data = function() { return {
currentTimeRange: ${json.dumps(current_time_range)|n},
chart: null,
}}
FormPage.methods.fetchReadings = function(timeRange) {
ThisPage.methods.fetchReadings = function(timeRange) {
if (timeRange === undefined) {
timeRange = this.currentTimeRange
@ -211,11 +197,11 @@
})
}
FormPage.methods.timeRangeChanged = function(value) {
ThisPage.methods.timeRangeChanged = function(value) {
this.fetchReadings(value)
}
FormPage.mounted = function() {
ThisPage.mounted = function() {
this.fetchReadings()
}