added possibility to scan qr code without discovery (#92)

* added possibility to scan qr code without discovery - on starting pairing process we stop discovery - during communication show loading spinner - closes #82 * make build pass * use pack lock on ci to avoid unexpected fails * prevent updating to breaking deps
ioBroker · Sep 4, 2024 · fc15899 · fc15899
1 parent f85d38b
commit fc15899
Show file tree

Hide file tree

Showing 17 changed files with 21,392 additions and 36 deletions.
diff --git a/.github/workflows/test-and-release.yml b/.github/workflows/test-and-release.yml
@@ -35,7 +35,7 @@ jobs:
           node-version: 18.x
 
       - name: Install Dependencies
-        run: npm run npm
+        run: npm ci && cd src-admin && npm ci
 
       - name: Lint TypeScript backend code
         run: npm run lint
@@ -66,7 +66,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install Dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build typescript
         run: npm run build

diff --git a/.gitignore b/.gitignore
@@ -13,8 +13,6 @@ admin/static/css/*
 admin/manifest.json
 admin/asset-manifest.json
 nbproject
-/src-admin/package-lock.json
-package-lock.json
 build
 *.map
 main.js

diff --git a/package.json b/package.json
@@ -79,7 +79,6 @@
     "build:ts": "tsc -p tsconfig.build.json",
     "release": "release-script -y --noPush",
     "update-packages": "ncu --upgrade && cd src-admin && ncu --upgrade",
-    "npm": "npm i && cd src-admin && npm i",
     "dev-server": "dev-server",
     "format": "prettier --write 'src/**/*.ts' 'src-admin/**/*.tsx'"
   },

diff --git a/src-admin/package-lock.json b/src-admin/package-lock.json
diff --git a/src-admin/package.json b/src-admin/package.json
@@ -7,8 +7,8 @@
         "@babel/plugin-proposal-decorators": "^7.24.7",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@foxriver76/iob-component-lib": "^0.1.5",
-        "@iobroker/adapter-react-v5": "^6.0.8",
-        "@iobroker/dm-gui-components": "^7.0.18",
+        "@iobroker/adapter-react-v5": "^6.1.10",
+        "@iobroker/dm-gui-components": "~7.0.25",
         "@iobroker/type-detector": "^4.0.1",
         "@mui/icons-material": "^5.15.20",
         "@mui/material": "^5.15.20",

diff --git a/src-admin/src/Tabs/Controller.tsx b/src-admin/src/Tabs/Controller.tsx
@@ -124,7 +124,8 @@ interface ComponentState {
     hideVideo: boolean;
     nodes: Record<string, ioBroker.Object>;
     states: Record<string, ioBroker.State>;
-    showQrCodeDialog: CommissionableDevice | null;
+    /** If qr code dialog should be shown (optional a device can be provided) */
+    showQrCodeDialog: { device?: CommissionableDevice; open: boolean };
 }
 
 class Controller extends Component<ComponentProps, ComponentState> {
@@ -150,7 +151,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
             hideVideo: false,
             nodes: {},
             states: {},
-            showQrCodeDialog: null,
+            showQrCodeDialog: { open: false },
             backendProcessingActive: false,
             bleDialogOpen: false,
         };
@@ -556,11 +557,15 @@ class Controller extends Component<ComponentProps, ComponentState> {
     }
 
     renderQrCodeDialog() {
-        if (!this.state.showQrCodeDialog) {
+        if (!this.state.showQrCodeDialog.open) {
             return null;
         }
+
         return (
-            <Dialog open={!0} onClose={() => this.setState({ showQrCodeDialog: null }, () => this.destroyQrCode())}>
+            <Dialog
+                open={!0}
+                onClose={() => this.setState({ showQrCodeDialog: { open: false } }, () => this.destroyQrCode())}
+            >
                 <DialogTitle>{I18n.t('QR Code')}</DialogTitle>
                 <DialogContent>
                     <TextField
@@ -615,8 +620,10 @@ class Controller extends Component<ComponentProps, ComponentState> {
                         disabled={!this.state.qrCode && !this.state.manualCode}
                         color="primary"
                         onClick={async () => {
-                            const device = this.state.showQrCodeDialog;
-                            this.setState({ showQrCodeDialog: null }, () => this.destroyQrCode());
+                            const device = this.state.showQrCodeDialog.device;
+                            this.setState({ showQrCodeDialog: { open: false }, backendProcessingActive: true }, () =>
+                                this.destroyQrCode(),
+                            );
 
                             const result = await this.props.socket.sendTo(
                                 `matter.${this.props.instance}`,
@@ -628,6 +635,8 @@ class Controller extends Component<ComponentProps, ComponentState> {
                                 },
                             );
 
+                            this.setState({ backendProcessingActive: false });
+
                             if (result.error || !result.result) {
                                 window.alert(`Cannot connect: ${result.error || 'Unknown error'}`);
                             } else {
@@ -649,7 +658,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
                     <Button
                         variant="contained"
                         color="grey"
-                        onClick={() => this.setState({ showQrCodeDialog: null }, () => this.destroyQrCode())}
+                        onClick={() => this.setState({ showQrCodeDialog: { open: false } }, () => this.destroyQrCode())}
                         startIcon={<Close />}
                     >
                         {I18n.t('Close')}
@@ -692,9 +701,10 @@ class Controller extends Component<ComponentProps, ComponentState> {
                                         <IconButton
                                             icon="leakAdd"
                                             tooltipText={I18n.t('Connect')}
-                                            onClick={() => {
+                                            onClick={async () => {
+                                                await this.stopDiscovery();
                                                 this.setState({
-                                                    showQrCodeDialog: device,
+                                                    showQrCodeDialog: { device, open: true },
                                                     manualCode: '',
                                                     qrCode: '',
                                                 });
@@ -718,13 +728,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
                         disabled={!this.state.discoveryRunning}
                         variant="contained"
                         onClick={async () => {
-                            console.log('Stop discovery');
-                            await this.props.socket.sendTo(
-                                `matter.${this.props.instance}`,
-                                'controllerDiscoveryStop',
-                                {},
-                            );
-                            this.setState({ discoveryDone: false });
+                            await this.stopDiscovery();
                         }}
                         startIcon={<SearchOff />}
                     >
@@ -744,6 +748,15 @@ class Controller extends Component<ComponentProps, ComponentState> {
         );
     }
 
+    /**
+     * Stop discovering devices
+     */
+    async stopDiscovery(): Promise<void> {
+        console.log('Stop discovery');
+        await this.props.socket.sendTo(`matter.${this.props.instance}`, 'controllerDiscoveryStop', {});
+        this.setState({ discoveryDone: false });
+    }
+
     /**
      * If BLE can be activated
      */
@@ -771,6 +784,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
                     style={{ justifyContent: 'start' }}
                     themeName={this.props.themeName}
                     themeType={this.props.themeType}
+                    // @ts-expect-error should be fixed in DM
                     theme={this.props.theme}
                     isFloatComma={this.props.isFloatComma}
                     dateFormat={this.props.dateFormat}
@@ -816,7 +830,6 @@ class Controller extends Component<ComponentProps, ComponentState> {
                     {this.props.matter.controller.enabled && this.props.alive ? (
                         <Button
                             variant="contained"
-                            sx={{ marginRight: 1 }}
                             disabled={this.state.discoveryRunning}
                             startIcon={this.state.discoveryRunning ? <CircularProgress size={20} /> : <Search />}
                             onClick={() => {
@@ -844,6 +857,17 @@ class Controller extends Component<ComponentProps, ComponentState> {
                             {I18n.t('Discovery devices')}
                         </Button>
                     ) : null}
+                    {this.props.matter.controller.enabled && this.props.alive ? (
+                        <Button
+                            sx={{ marginX: 1 }}
+                            variant="contained"
+                            color="primary"
+                            onClick={() => this.setState({ showQrCodeDialog: { open: true } })}
+                            startIcon={<Add />}
+                        >
+                            {I18n.t('Add device by pairing code or QR Code')}
+                        </Button>
+                    ) : null}
                     {this.props.matter.controller.enabled && this.props.alive ? (
                         <Button
                             variant="contained"
@@ -856,18 +880,6 @@ class Controller extends Component<ComponentProps, ComponentState> {
                     ) : null}
                 </div>
                 {this.props.matter.controller.enabled ? this.renderDeviceManager() : null}
-                {/* this.props.matter.controller.enabled ? <Table style={{ maxWidth: 600 }} size="small">
-            <TableHead>
-                <TableRow>
-                    <TableCell style={{ width: 0, padding: 0 }} />
-                    <TableCell>{I18n.t('Name')}</TableCell>
-                    <TableCell>{I18n.t('Value')}</TableCell>
-                </TableRow>
-            </TableHead>
-            <TableBody>
-                {this.renderDevicesAndBridges()}
-            </TableBody>
-        </Table> : null */}
             </div>
         );
     }

diff --git a/src-admin/src/i18n/de.json b/src-admin/src/i18n/de.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "%s Gerät(e) hinzufügen",
   "Add bridge": "Bridge hinzufügen",
   "Add device": "Gerät hinzufügen",
+  "Add device by pairing code or QR Code": "Gerät per Pairing-Code oder QR-Code hinzufügen",
   "Add device from channel or device": "Gerät aus Kanal oder Gerät hinzufügen",
   "Add device from one state": "Gerät aus einem State hinzufügen",
   "Add device with auto-detection": "Gerät mit automatischer Erkennung hinzufügen",

diff --git a/src-admin/src/i18n/en.json b/src-admin/src/i18n/en.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Add %s device(s)",
   "Add bridge": "Add bridge",
   "Add device": "Add device",
+  "Add device by pairing code or QR Code": "Add device by pairing code or QR Code",
   "Add device from channel or device": "Add device from channel or device",
   "Add device from one state": "Add device from one state",
   "Add device with auto-detection": "Add device with auto-detection",

diff --git a/src-admin/src/i18n/es.json b/src-admin/src/i18n/es.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Agregar %s dispositivo(s)",
   "Add bridge": "Agregar puente",
   "Add device": "Añadir dispositivo",
+  "Add device by pairing code or QR Code": "Añadir dispositivo mediante código de emparejamiento o código QR",
   "Add device from channel or device": "Agregar dispositivo desde canal o dispositivo",
   "Add device from one state": "Agregar dispositivo desde un estado",
   "Add device with auto-detection": "Agregar dispositivo con detección automática",

diff --git a/src-admin/src/i18n/fr.json b/src-admin/src/i18n/fr.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Ajouter %s périphérique(s)",
   "Add bridge": "Ajouter un pont",
   "Add device": "Ajouter un appareil",
+  "Add device by pairing code or QR Code": "Ajouter un appareil par code d'association ou code QR",
   "Add device from channel or device": "Ajouter un appareil à partir d'un canal ou d'un appareil",
   "Add device from one state": "Ajouter un appareil à partir d'un état",
   "Add device with auto-detection": "Ajouter un appareil avec détection automatique",

diff --git a/src-admin/src/i18n/it.json b/src-admin/src/i18n/it.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Aggiungi %s dispositivo/i",
   "Add bridge": "Aggiungi ponte",
   "Add device": "Aggiungi dispositivo",
+  "Add device by pairing code or QR Code": "Aggiungi dispositivo tramite codice di associazione o codice QR",
   "Add device from channel or device": "Aggiungi dispositivo dal canale o dal dispositivo",
   "Add device from one state": "Aggiungi dispositivo da uno stato",
   "Add device with auto-detection": "Aggiungi dispositivo con rilevamento automatico",

diff --git a/src-admin/src/i18n/nl.json b/src-admin/src/i18n/nl.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "%s apparaat(en) toevoegen",
   "Add bridge": "Brug toevoegen",
   "Add device": "Voeg toestel toe",
+  "Add device by pairing code or QR Code": "Apparaat toevoegen via koppelingscode of QR-code",
   "Add device from channel or device": "Apparaat toevoegen vanaf kanaal of apparaat",
   "Add device from one state": "Voeg apparaat toe vanuit één staat",
   "Add device with auto-detection": "Apparaat toevoegen met automatische detectie",

diff --git a/src-admin/src/i18n/pl.json b/src-admin/src/i18n/pl.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Dodaj %s urządzeń",
   "Add bridge": "Dodaj most",
   "Add device": "Dodaj urządzenie",
+  "Add device by pairing code or QR Code": "Dodaj urządzenie za pomocą kodu parowania lub kodu QR",
   "Add device from channel or device": "Dodaj urządzenie z kanału lub urządzenia",
   "Add device from one state": "Dodaj urządzenie z jednego stanu",
   "Add device with auto-detection": "Dodaj urządzenie z funkcją automatycznego wykrywania",

diff --git a/src-admin/src/i18n/pt.json b/src-admin/src/i18n/pt.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Adicionar %s dispositivos",
   "Add bridge": "Adicionar ponte",
   "Add device": "Adicionar Dispositivo",
+  "Add device by pairing code or QR Code": "Adicionar dispositivo por código de pareamento ou QR Code",
   "Add device from channel or device": "Adicionar dispositivo do canal ou dispositivo",
   "Add device from one state": "Adicionar dispositivo de um estado",
   "Add device with auto-detection": "Adicionar dispositivo com detecção automática",

diff --git a/src-admin/src/i18n/ru.json b/src-admin/src/i18n/ru.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Добавить устройство(а) %s",
   "Add bridge": "Добавить мост",
   "Add device": "Добавить устройство",
+  "Add device by pairing code or QR Code": "Добавьте устройство с помощью кода сопряжения или QR-кода",
   "Add device from channel or device": "Добавить устройство из канала или устройства",
   "Add device from one state": "Добавить устройство из одного штата",
   "Add device with auto-detection": "Добавить устройство с автоопределением",

diff --git a/src-admin/src/i18n/uk.json b/src-admin/src/i18n/uk.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Додати %s пристроїв",
   "Add bridge": "Додайте міст",
   "Add device": "Додайте пристрій",
+  "Add device by pairing code or QR Code": "Додайте пристрій за допомогою коду сполучення або QR-коду",
   "Add device from channel or device": "Додати пристрій із каналу або пристрою",
   "Add device from one state": "Додати пристрій з одного стану",
   "Add device with auto-detection": "Додати пристрій з автовизначенням",

diff --git a/src-admin/src/i18n/zh-cn.json b/src-admin/src/i18n/zh-cn.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "添加 %s 台设备",
   "Add bridge": "添加桥接",
   "Add device": "添加设备",
+  "Add device by pairing code or QR Code": "通过配对码或二维码添加设备",
   "Add device from channel or device": "从频道或设备添加设备",
   "Add device from one state": "从一种状态添加设备",
   "Add device with auto-detection": "添加自动检测设备",