-
Notifications
You must be signed in to change notification settings - Fork 0
/
device.html
56 lines (55 loc) · 2.45 KB
/
device.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IoT UX MQTT - device detail</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="app" v-cloak>
<device-header :device="device" :modelpath="modelpath" :host="host"></device-header>
<div>
<h3>Commands</h3>
<ul>
<li class="raw" v-for="c in commands">
<command :command="c" :device-id="gv(device,'deviceId')" @command-invoked="onCommand" @clear-resp="c.responseMsg=''" :response-msg="c.responseMsg"></command>
</li>
</ul>
</div>
<div>
<h3>Properties</h3>
<ul>
<li class="raw" v-for="p in properties">
<reported-property v-if="p.writable!=true" :property="p" :device-props="device.properties"></reported-property>
<writable-property v-if="p.writable===true" :property="p" :device-props="device.properties" :schema="p.schema" @prop-updated="handlePropUpdate"></writable-property>
</li>
</ul>
</div>
<div v-if="telemetries.length > 0" class="telemetryDiv">
<h3>Telemetry</h3>
<iframe :src="'telemetryJson.html?id='+ device.deviceId +'&modelId=' + device.modelId" width="500px" height="550px"></iframe>
</div>
</div>
<script type="module">
import device from './device.js'
import DeviceHeader from './comps/DeviceHeader.js'
import Command from './comps/Command.js'
import Telemetry from './comps/Telemetry.js'
import ReportedProperty from './comps/ReportedProperty.js'
import WritableProperty from './comps/WritableProperty.js'
const { createApp } = Vue
const app = createApp(device)
app.component('Command', Command)
app.component('Telemetry', Telemetry)
app.component('ReportedProperty', ReportedProperty)
app.component('WritableProperty', WritableProperty)
app.component('DeviceHeader', DeviceHeader)
app.mount('#app')
</script>
</body>
</html>