All files / sportident-example-app/src index.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import ReactDOM from 'react-dom';
import {getWebUsbSiDeviceDriver} from 'sportident-webusb/lib';
import * as nav from 'sportident-webusb/lib/INavigatorWebUsb';
import {SiMainStation} from 'sportident/lib/SiStation';
 
import './styles.css';
 
 
const ExampleApp = () => {
    const webUsbSiDeviceDriver = React.useMemo(
        () => getWebUsbSiDeviceDriver(window.navigator.usb as unknown as nav.WebUsb),
        [],
    );
    const [cardContent, setCardContent] = React.useState(['No card']);
    type CleanUpObject = {cleanUp: () => Promise<void>}|undefined;
    const [cleanUp, setCleanUp] = React.useState<CleanUpObject>(undefined);
    const readCards = React.useCallback(() => {
        webUsbSiDeviceDriver.detect().then((d) => {
            const station = SiMainStation.fromSiDevice(d);
            station.readCards((card) => {
                setCardContent(['Reading...']);
                card.read().then(() => {
                    const lines = card.toString().split('\n');
                    setCardContent(lines);
                    card.confirm();
                });
            })
                .then((cleanUpFunction) => {
                    setCleanUp({
                        cleanUp: () => cleanUpFunction().then(() => {
                            setCleanUp(undefined);
                        }),
                    });
                });
            station.addEventListener('siCardRemoved', () => {
                setCardContent(['No card']);
            });
        });
    }, []);
    return (
        <div>
            <button onClick={cleanUp ? cleanUp.cleanUp : readCards}>{cleanUp ? 'Stop Reading Cards' : 'Read Cards'}</button>
            <div>{cardContent.map((line, index) => <div key={index}>{line}</div>)}</div>
        </div>
    );
};
 
Iif (window.addEventListener) {
    window.addEventListener('load', () => {
        ReactDOM.render(
            (
                <ExampleApp />
            ),
            window.document.getElementById('root'),
        );
    });
}