summaryrefslogtreecommitdiff
path: root/public-src/jarmon.vue
diff options
context:
space:
mode:
Diffstat (limited to 'public-src/jarmon.vue')
-rw-r--r--public-src/jarmon.vue47
1 files changed, 47 insertions, 0 deletions
diff --git a/public-src/jarmon.vue b/public-src/jarmon.vue
new file mode 100644
index 0000000..11ac223
--- /dev/null
+++ b/public-src/jarmon.vue
@@ -0,0 +1,47 @@
+<template>
+ <div v-bind:class="['jarmon', name]">
+ <div class="chart-container" ref="chartContainer">
+ <h2 class="title"></h2>
+ <form>
+ <input name="chart_edit" value="Edit" type="button" />
+ <input name="chart_delete" value="Delete" type="button" />
+ </form>
+ <div class="error"></div>
+ <div class="chart"></div>
+ <div class="graph-legend"></div>
+ </div>
+ <div class="chartRangeControl" ref="chartRangeControl">
+ <form>
+ <div class="range-inputs">
+ <input name="from" type="datetime-local" step="1" />
+ <input name="to" type="datetime-local" step="1" />
+ <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select>
+ <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select>
+ <input name="action" value="Update" type="button"
+ title="Graph update - click to update all graphs" />
+ </div>
+ <div class="range-preview"
+ title="Time range preview - click and drag to select a custom timerange" ></div>
+ </form>
+ </div>
+ <div class="tabbed-chart-interface" ref="tabbedChartInterface"></div>
+ </div>
+</template>
+<script>
+import $ from 'jquery';
+import jarmon from 'jarmon';
+
+export default {
+ mounted: function() {
+ jarmon.buildTabbedChartUi(
+ $(this.refs.chartcontainer).remove(),
+ chartRecipes,
+ $(this.refs.tabbedChartInterface),
+ tabRecipes,
+ $(this.refs.chartRangeControl));
+ }
+ props: [
+ 'name',
+ ],
+};
+</script>