device-decoder/debugger/test.ts at master · joshbrew/device-decoder · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { Devices } from "./src/devices";
import { initDevice } from "./src/device.frontend";
import { DOMService } from 'graphscript';
import { ElementProps } from "graphscript/dist/services/dom/types/index";

// let selectBLE = document.createElement('select');
// let selectUSB = document.createElement('select');

// for(const key in Devices.BLE) {
//     selectBLE.innerHTML += `<option value='${key}'>${key}</option>`
// }

// for(const key in Devices.Serial) {
//     selectUSB.innerHTML += `<option value='${key}'>${key}</option>`
// }


let DOM = new DOMService({
    routes:{
        'app':{
            tagName:'div',
            children:{
                'devices':{
                    tagName:'div',
                    children:{
                        'devicediv':{
                            tagName:'div',
                            children:{
                                'connectmode':{
                                    tagName:'select',
                                    attributes:{
                                        innerHTML:`
                                            <option value='BLE' selected>BLE</option>
                                            <option value='USB'>USB</option>
                                        `,
                                        onchange:(ev)=>{
                                            if(ev.target.value === 'BLE') {
                                                ev.target.parentNode.querySelector('#selectUSB').style.display = 'none';
                                                ev.target.parentNode.querySelector('#selectBLE').style.display = '';
                                            }
                                            else if(ev.target.value === 'USB') {
                                                ev.target.parentNode.querySelector('#selectUSB').style.display = '';
                                                ev.target.parentNode.querySelector('#selectBLE').style.display = 'none';
                                            }
                                        }
                                    }
                                } as ElementProps,
                                'selectUSB':{
                                    tagName:'select',
                                    style:{display:'none'},
                                    onrender:(self)=>{
                                        for(const key in Devices.USB) {
                                            self.innerHTML += `<option value='${key}'>${key}</option>`
                                        }
                                    }
                                } as ElementProps,
                                'selectBLE':{
                                    tagName:'select',
                                    onrender:(self)=>{
                                        for(const key in Devices.BLE) {
                                            self.innerHTML += `<option value='${key}'>${key}</option>`
                                        }
                                    }
                                } as ElementProps,
                                'connectDevice':{
                                    tagName:'button',
                                    attributes:{
                                        innerHTML:'Connect Device',
                                        onclick:(ev)=>{

                                            let outputelm = document.getElementById('output') as HTMLDivElement;

                                            let mode = (document.getElementById('connectmode') as HTMLSelectElement).value;
                                            let selected;
                                            if(mode === 'BLE')
                                                selected = (document.getElementById('selectBLE') as HTMLSelectElement).value;
                                            else if (mode === 'USB')
                                                selected = (document.getElementById('selectUSB') as HTMLSelectElement).value;

                                            let info = initDevice(
                                                mode as 'BLE'|'USB',
                                                selected,
                                                {
                                                    ondecoded:(data)=>{
                                                        outputelm.innerText = JSON.stringify(data);
                                                        console.log(data)
                                                    }
                                                }
                                            );

                                            if(info) {
                                                info.then((result) => {
                                                    console.log(result);
                                                    let disc = document.createElement('button');
                                                    disc.innerHTML = `Disconnect ${selected} (${mode})`;
                                                    disc.onclick = () => {
                                                        result.disconnect();
                                                        disc.remove();
                                                    }
                                                    ev.target.parentNode.appendChild(disc);
                                                })
                                            }
                                        }
                                    }
                                } as ElementProps
                            }
                        }
                    }
                },
                'output':{
                    tagName:'div',
                    innerHTML:'Connect to a supported BLE or USB Device to see output',
                } as ElementProps
            }
        } as ElementProps
    }
})