Skip to content

Commit

Permalink
Added extended dialog: https://github.com/ioBroker/ioBroker.matter/is… (
Browse files Browse the repository at this point in the history 
#223)

* Added extended dialog: #181
Added ioBroker vendor icon: #192
Changed some texts: #168
Make info closable
Make it possible to show always qr-code: #138

* Make contrast icons: #187

* Make dialog wider: #190

* Change info boxes

* Show warning icon if device is in erroneous mode: #198

* Made waiting time 5 minutes: #185

* Implemented progress dialog: #199

* Fixing pipeline

* Fixing pipeline

* Fixing pipeline
  • Loading branch information
@GermanBluefox
GermanBluefox authored Dec 12, 2024
1 parent 190e8e3 commit 0280ad5
Show file tree
Hide file tree
Showing 40 changed files with 1,728 additions and 584 deletions.
536 changes: 433 additions & 103 deletions package-lock.json
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,29 @@
"dependencies": {
"@iobroker/adapter-core": "^3.2.3",
"@iobroker/i18n": "^0.3.1",
"@iobroker/dm-utils": "^0.6.9",
"@iobroker/dm-utils": "^0.6.11",
"@iobroker/type-detector": "^4.1.0",
"@matter/main": "0.11.9-alpha.0-20241208-09ad57f78",
"@matter/nodejs": "0.11.9-alpha.0-20241208-09ad57f78",
"@project-chip/matter.js": "0.11.9-alpha.0-20241208-09ad57f78",
"axios": "^1.7.8",
"axios": "^1.7.9",
"jsonwebtoken": "^9.0.2"
},
"devDependencies": {
"@alcalzone/release-script": "^3.8.0",
"@alcalzone/release-script-plugin-iobroker": "^3.7.2",
"@alcalzone/release-script-plugin-license": "^3.7.0",
"@iobroker/build-tools": "^2.0.9",
"@iobroker/build-tools": "^2.0.11",
"@iobroker/dev-server": "^0.7.3",
"@iobroker/eslint-config": "^1.0.0",
"@iobroker/legacy-testing": "^2.0.1",
"@iobroker/types": "^7.0.5",
"@iobroker/types": "^7.0.6",
"@types/jsonwebtoken": "^9.0.7",
"@types/node": "^22.10.1",
"chai": "^4.5.0",
"colorette": "^2.0.20",
"mocha": "^10.8.2",
"puppeteer": "^23.9.0",
"mocha": "^11.0.1",
"puppeteer": "^23.10.2",
"typescript": "~5.7.2"
},
"bugs": {
Expand Down
724 changes: 391 additions & 333 deletions src-admin/package-lock.json
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions src-admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@
"@rollup/rollup-linux-x64-gnu": "*"
},
"dependencies": {
"@foxriver76/iob-component-lib": "^0.1.6",
"@iobroker/adapter-react-v5": "^7.4.2",
"@iobroker/dm-gui-components": "~7.4.2",
"@foxriver76/iob-component-lib": "^0.2.0",
"@iobroker/adapter-react-v5": "^7.4.4",
"@iobroker/dm-gui-components": "~7.4.4",
"@iobroker/type-detector": "^4.1.0",
"@types/react-dom": "^18.3.1",
"@types/react-dom": "^18.3.3",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.3.4",
"qr-scanner": "^1.4.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-icons": "^5.4.0",
"react-qr-code": "^2.0.15",
"uuid": "^11.0.3"
},
Expand Down Expand Up @@ -51,4 +51,4 @@
}
]
]
}
}
84 changes: 78 additions & 6 deletions src-admin/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@ import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
import React from 'react';

import { IconButton } from '@foxriver76/iob-component-lib';
import { AppBar, Tab, Tabs, Tooltip } from '@mui/material';
import {
AppBar,
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
LinearProgress,
Tab,
Tabs,
Tooltip,
} from '@mui/material';

import { SignalCellularOff as IconNotAlive } from '@mui/icons-material';

Expand All @@ -15,7 +25,7 @@ import {
type GenericAppState,
type IobTheme,
} from '@iobroker/adapter-react-v5';
import { clone } from './Utils';
import { clone, getText } from './Utils';

import ConfigHandler from './components/ConfigHandler';
import BridgesTab from './Tabs/Bridges';
Expand Down Expand Up @@ -83,6 +93,12 @@ interface AppState extends GenericAppState {
/** Undefined if no detection ran yet */
detectedDevices?: DetectedRoom[];
ready: boolean;
progress: {
title?: ioBroker.StringOrTranslated;
text?: ioBroker.StringOrTranslated;
indeterminate?: boolean;
value?: number;
} | null;
}

class App extends GenericApp<GenericAppProps, AppState> {
Expand Down Expand Up @@ -138,6 +154,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
devices: {},
},
ready: false,
progress: null,
});

this.alert = window.alert;
Expand Down Expand Up @@ -253,9 +270,11 @@ class App extends GenericApp<GenericAppProps, AppState> {
this.setState({ alive: true });
this.refreshBackendSubscription(true);
} else if (!state?.val && this.state.alive) {
this.refreshTimer && clearTimeout(this.refreshTimer);
this.refreshTimer = null;
this.setState({ alive: false });
if (this.refreshTimer) {
clearTimeout(this.refreshTimer);
this.refreshTimer = null;
}
this.setState({ alive: false, progress: null });
}
};

Expand All @@ -264,7 +283,32 @@ class App extends GenericApp<GenericAppProps, AppState> {
return;
}

if (update.command === 'bridgeStates') {
if (update.command === 'progress') {
if (update.progress) {
if (update.progress.close) {
if (this.state.progress) {
this.setState({ progress: null });
}
} else {
const progress = { ...this.state.progress };
if (update.progress.title !== undefined) {
progress.title = update.progress.title;
}
if (update.progress.value !== undefined) {
progress.value = update.progress.value;
}
if (update.progress.text !== undefined) {
progress.text = update.progress.text;
}
if (update.progress.indeterminate !== undefined) {
progress.indeterminate = update.progress.indeterminate;
}
this.setState({ progress });
}
} else if (this.state.progress) {
this.setState({ progress: null });
}
} else if (update.command === 'bridgeStates') {
// all states at once
const nodeStates: { [uuid: string]: NodeStateResponse } = {};
if (update.states) {
Expand Down Expand Up @@ -420,6 +464,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
this.setState({ nodeStates: _nodeStates });
}}
nodeStates={this.state.nodeStates}
themeName={this.state.themeName}
themeType={this.state.themeType}
theme={this.state.theme}
detectedDevices={this.state.detectedDevices}
Expand Down Expand Up @@ -454,6 +499,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
nodeStates={this.state.nodeStates}
commissioning={this.state.commissioning?.devices || {}}
socket={this.socket}
themeName={this.state.themeName}
themeType={this.state.themeType}
theme={this.state.theme}
detectedDevices={this.state.detectedDevices}
Expand Down Expand Up @@ -538,6 +584,31 @@ class App extends GenericApp<GenericAppProps, AppState> {
}
}

renderProgressDialog(): React.JSX.Element | null {
if (!this.state.progress) {
return null;
}

return (
<Dialog
open={!0}
onClose={() => {}}
maxWidth="md"
>
{this.state.progress.title ? <DialogTitle>{getText(this.state.progress.title)}</DialogTitle> : null}
<DialogContent>
<LinearProgress
variant={this.state.progress.indeterminate ? 'indeterminate' : 'determinate'}
value={this.state.progress.value}
/>
{this.state.progress.text ? (
<DialogContentText>{getText(this.state.progress.text)}</DialogContentText>
) : null}
</DialogContent>
</Dialog>
);
}

render(): React.JSX.Element {
if (!this.state.ready) {
return (
Expand All @@ -553,6 +624,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
<StyledEngineProvider injectFirst>
<ThemeProvider theme={this.state.theme}>
{this.renderToast()}
{this.renderProgressDialog()}
<div
className="App"
style={{
Expand Down
25 changes: 20 additions & 5 deletions src-admin/src/Tabs/Bridges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import {

import { I18n, SelectID, type IobTheme } from '@iobroker/adapter-react-v5';

import { InfoBox } from '@foxriver76/iob-component-lib';
import InfoBox from '../components/InfoBox';
import DeviceDialog, { DEVICE_ICONS, SUPPORTED_DEVICES } from '../components/DeviceDialog';
import type {
BridgeDescription,
Expand Down Expand Up @@ -219,6 +219,7 @@ interface BridgesState extends BridgesAndDevicesState {

export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
private bridgeIndex: number | null = null;
protected readonly isDevice = false;

constructor(props: BridgesProps) {
super(props);
Expand Down Expand Up @@ -711,7 +712,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
onChange={e => this.setState({ suppressDeleteEnabled: e.target.checked })}
/>
}
label={I18n.t('Suppress question for 2 minutes')}
label={I18n.t('Suppress question for 5 minutes')}
/>
</DialogContent>
<DialogActions>
Expand All @@ -731,7 +732,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
this.setState(
{
deleteDialog: null,
suppressDeleteTime: this.state.suppressDeleteEnabled ? Date.now() + 120_000 : 0,
suppressDeleteTime: this.state.suppressDeleteEnabled ? Date.now() + 300_000 : 0,
},
() => this.props.updateConfig(matter),
);
Expand Down Expand Up @@ -1323,7 +1324,13 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
>
<span>
<IconButton
sx={styles.bridgeButtonsAndTitleColor}
style={{
color: this.isDevice
? this.props.themeType === 'dark'
? 'white'
: '#00000080'
: 'white',
}}
disabled={bridge.enabled && !allowDisable}
onClick={e => {
e.stopPropagation();
Expand Down Expand Up @@ -1451,7 +1458,15 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
{this.renderQrCodeDialog()}
{this.renderDebugDialog()}
{this.renderResetDialog()}
<InfoBox type="info">{I18n.t('Matter Bridges Infotext')}</InfoBox>
{this.renderJsonConfigDialog()}
<InfoBox
type="info"
closeable
storeId="matter.bridge"
iconPosition="top"
>
{I18n.t('Matter Bridges Infotext')}
</InfoBox>
<Tooltip
title={I18n.t('Add bridge')}
slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
Expand Down
Loading

0 comments on commit 0280ad5

Please sign in to comment.