Commit eeefb155 authored by Guilhem Saurel's avatar Guilhem Saurel
Browse files

clean

parent c9569163
......@@ -2,47 +2,18 @@ var mqtt = require('mqtt')
var Vue = require('vue')
var Slider = require('./Slider.vue')
const SLOTS = ['voltage', 'current', 'energy', 'status', 'temperature', 'throttled', 'joystick']
const app = Vue.createApp({
data() {
return {
client: '-',
voltage: '-',
current: '-',
energy: '-',
status: '-',
temperature: '-',
throttled: '-',
joystick: '-'
}
var ret = {'client': '-', 'SLOTS': SLOTS};
SLOTS.forEach(slot => ret[slot] = '-');
return ret;
},
methods: {
onCommand(message) {
this.client.publish('/odri/commands', message);
},
onConnect() {
this.client.subscribe(['/odri/voltage', '/odri/current',
'/odri/energy', '/odri/joystick', '/odri/status',
'/odri/temperature', '/odri/throttled']);
},
onMessage(topic, message) {
if (topic == '/odri/voltage') {
this.voltage = message.toString();
} else if (topic == '/odri/current') {
this.current = message.toString();
} else if (topic == '/odri/energy') {
this.energy = message.toString();
} else if (topic == '/odri/status') {
this.status = message.toString();
} else if (topic == '/odri/temperature') {
this.temperature = message.toString();
} else if (topic == '/odri/throttled') {
this.throttled = message.toString();
} else if (topic == '/odri/joystick') {
this.joystick = message.toString();
} else {
console.log("unknow topic", topic);
}
}
onCommand(message) { this.client.publish('/odri/commands', message); },
onConnect() { SLOTS.forEach(slot => this.client.subscribe('/odri/' + slot)); },
onMessage(topic, message) { this[topic.split('/')[2]] = message.toString(); }
},
created() {
this.client = mqtt.connect('ws://' + window.location.hostname + ':9001')
......
......@@ -7,22 +7,17 @@
</head>
<body>
<div class="container mt-4" role="main">
<h1>Hello, Solo!</h1>
<main>
<div id="app">
<dl class="row">
<dt class="col-sm-3">Status</dt><dd class="col-sm-9">{{ status }}</dd>
<dt class="col-sm-3">Voltage</dt><dd class="col-sm-9">{{ voltage }}</dd>
<dt class="col-sm-3">Current</dt><dd class="col-sm-9">{{ current }}</dd>
<dt class="col-sm-3">Energy</dt><dd class="col-sm-9">{{ energy }}</dd>
<dt class="col-sm-3">Temperature</dt><dd class="col-sm-9">{{ temperature }}</dd>
<dt class="col-sm-3">Throttled</dt><dd class="col-sm-9">{{ throttled }}</dd>
<dt class="col-sm-3">Joystick</dt><dd class="col-sm-9">{{ joystick }}</dd>
</dl>
<button type="button" class="btn btn-warning" v-on:click="onCommand('calibrate')">Calibrate</button>
<button type="button" class="btn btn-danger" v-on:click="onCommand('stop')">Stop</button>
</div>
</main>
<div id="app" class="text-center">
<h1>Hello, Solo!</h1>
<table class="table table-borderless">
<tr v-for="slot in SLOTS">
<th class="col-sm-6 text-end" scope="row">{{ slot }}</th>
<td class="col-sm-6 text-start">{{ this[slot] }}</td>
</tr>
</table>
<button type="button" class="mx-1 btn btn-warning" v-on:click="onCommand('calibrate')">Calibrate</button>
<button type="button" class="mx-1 btn btn-danger" v-on:click="onCommand('stop')">Stop</button>
</div>
</div>
<script type="module" src="app.js"></script>
<script type="module" src="bootstrap.js"></script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment