Skip to content

Commit

Permalink
Ported GUI to typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanBluefox
GermanBluefox committed Jun 26, 2024
1 parent 9bc7917 commit 4740163
Show file tree
Hide file tree
Showing 28 changed files with 542 additions and 397 deletions.
32 changes: 16 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,38 @@
"url": "https://github.com/ioBroker/ioBroker.matter"
},
"optionalDependencies": {
"@project-chip/matter-node-ble.js": "0.9.0"
"@project-chip/matter-node-ble.js": "0.9.2"
},
"dependencies": {
"@iobroker/adapter-core": "^3.1.4",
"@project-chip/matter-node.js": "0.9.0",
"@project-chip/matter.js": "0.9.0",
"@iobroker/adapter-core": "^3.1.6",
"@project-chip/matter-node.js": "0.9.2",
"@project-chip/matter.js": "0.9.2",
"@iobroker/type-detector": "^3.0.5",
"@iobroker/dm-utils": "^0.1.9",
"axios": "^1.7.0",
"@iobroker/dm-utils": "^0.2.1",
"axios": "^1.7.2",
"jsonwebtoken": "^9.0.2"
},
"devDependencies": {
"@alcalzone/release-script": "^3.7.0",
"@alcalzone/release-script-plugin-iobroker": "^3.7.0",
"@alcalzone/release-script-plugin-iobroker": "^3.7.2",
"@alcalzone/release-script-plugin-license": "^3.7.0",
"@iobroker/types": "^6.0.5",
"@iobroker/dev-server": "^0.7.3",
"@iobroker/legacy-testing": "^1.0.12",
"@types/iobroker": "^5.0.6",
"@types/jsonwebtoken": "^9.0.6",
"@types/node": "^20.12.12",
"@types/node": "^20.14.9",
"colorette": "^2.0.20",
"puppeteer": "^22.9.0",
"@typescript-eslint/eslint-plugin": "^7.9.0",
"puppeteer": "^22.12.0",
"@typescript-eslint/eslint-plugin": "^7.14.1",
"chai": "^4.4.1",
"eslint": "^8.57.0",
"eslint-config-standard-with-typescript": "^43.0.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^17.7.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-n": "^17.9.0",
"eslint-plugin-promise": "^6.2.0",
"gulp": "^4.0.2",
"mocha": "^10.4.0",
"typescript": "~5.4.5"
"mocha": "^10.5.1",
"typescript": "~5.5.2"
},
"bugs": {
"url": "https://github.com/ioBroker/ioBroker.matter/issues"
Expand All @@ -65,7 +65,7 @@
],
"scripts": {
"test": "mocha --exit",
"prepublishOnly": "gulp",
"prepublishOnly": "npm run build",
"lint": "eslint --ext .ts src/",
"build": "npm run build:ts && npm run build:gui",
"build:gui": "gulp",
Expand Down
29 changes: 14 additions & 15 deletions src-admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,40 @@
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/plugin-proposal-decorators": "^7.24.1",
"@babel/plugin-proposal-decorators": "^7.24.7",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@iobroker/adapter-react-v5": "^4.13.22",
"@iobroker/dm-gui-components": "^6.17.13",
"@iobroker/adapter-react-v5": "^6.0.8",
"@iobroker/dm-gui-components": "^7.0.2",
"@iobroker/type-detector": "^3.0.5",
"@mui/icons-material": "^5.15.18",
"@mui/material": "5.14.14",
"@mui/styles": "5.14.14",
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"@types/react-dom": "^18.3.0",
"@types/uuid": "^9.0.8",
"@sentry/browser": "^8.2.1",
"@types/uuid": "^10.0.0",
"@sentry/browser": "^8.12.0",
"babel-eslint": "^10.1.0",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-eqeqeq-fix": "^1.0.3",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-jsx-a11y": "^6.9.0",
"eslint-plugin-only-warn": "^1.1.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react": "^7.34.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-prettier": "^5.1.3",
"qr-scanner": "^1.4.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-native-svg": "^15.3.0",
"react-qr-code": "^2.0.13",
"react-qr-code": "^2.0.15",
"react-scripts": "^5.0.1",
"uuid": "^9.0.1"
"uuid": "^10.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "eslint --fix --ext .js,.jsx,.tsx src",
"check-ts": "tsc --noEmit --checkJS false",
"tsc": "tsc --project tsconfig.build.json"
"tsc": "tsc --project tsconfig.json"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -64,4 +63,4 @@
}
]
]
}
}
61 changes: 29 additions & 32 deletions src-admin/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { withStyles } from '@mui/styles';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';

import {
Expand All @@ -16,9 +15,9 @@ import {

import {
I18n, Loader,
AdminConnection, GenericApp,
AdminConnection, GenericApp, IobTheme,
type GenericAppProps, type GenericAppState
} from '@iobroker/adapter-react-v5';
import type { GenericAppProps, GenericAppState, Theme } from '@iobroker/adapter-react-v5/types';

import ConfigHandler from './components/ConfigHandler';
import OptionsTab from './Tabs/Options';
Expand All @@ -44,7 +43,7 @@ for (let i = 0x8000; i <= 0x801F; i++) {
productIDs.push(`0x${i.toString(16)}`);
}

const styles: Record<string, any> = (theme: Theme) => ({
const styles: Record<string, any> = {
tabContent: {
padding: 10,
height: 'calc(100% - 64px - 48px - 20px)',
Expand All @@ -55,17 +54,13 @@ const styles: Record<string, any> = (theme: Theme) => ({
height: 'calc(100% - 64px - 48px - 20px - 38px)',
overflow: 'auto',
},
selected: {
selected: (theme: IobTheme) => ({
color: theme.palette.mode === 'dark' ? undefined : '#FFF !important',
},
indicator: {
}),
indicator: (theme: IobTheme) => ({
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.secondary.main : '#FFF',
},
});

interface AppProps extends GenericAppProps {
classes: Record<string, string>;
}
}),
};

interface AppState extends GenericAppState {
alive: boolean;
Expand All @@ -77,7 +72,7 @@ interface AppState extends GenericAppState {
ready: boolean;
}

class App extends GenericApp<AppProps, AppState> {
class App extends GenericApp<GenericAppProps, AppState> {
private isIFrame: boolean = false;

private configHandler: ConfigHandler | null = null;
Expand All @@ -90,8 +85,8 @@ class App extends GenericApp<AppProps, AppState> {

private controllerMessageHandler: ((message: GUIMessage | null) => void) | null = null;

constructor(props: AppProps) {
const extendedProps: AppProps = { ...props };
constructor(props: GenericAppProps) {
const extendedProps: GenericAppProps = { ...props };
// @ts-expect-error no idea how to fix it
extendedProps.Connection = AdminConnection;
extendedProps.translations = {
Expand Down Expand Up @@ -277,13 +272,13 @@ class App extends GenericApp<AppProps, AppState> {
renderOptions() {
return <OptionsTab
alive={this.state.alive}
onChange={(id, value) => this.updateNativeValue(id, value)}
onLoad={native => this.onLoadConfig(native)}
onChange={(id: string, value: any) => this.updateNativeValue(id, value)}
onLoad={(native: Record<string, any>) => this.onLoadConfig(native)}
socket={this.socket}
common={this.common}
native={this.state.native as MatterAdapterConfig}
instance={this.instance}
showToast={text => this.showToast(text)}
showToast={(text: string) => this.showToast(text)}
/>;
}

Expand All @@ -300,13 +295,14 @@ class App extends GenericApp<AppProps, AppState> {
}}
nodeStates={this.state.nodeStates}
themeType={this.state.themeType}
theme={this.state.theme}
detectedDevices={this.state.detectedDevices || []}
setDetectedDevices={detectedDevices => this.setState({ detectedDevices })}
setDetectedDevices={(detectedDevices: DetectedRoom[]) => this.setState({ detectedDevices })}
productIDs={productIDs}
matter={this.state.matter}
updateConfig={this.onChanged}
showToast={text => this.showToast(text)}
checkLicenseOnAdd={(type, matter) => this.checkLicenseOnAdd(type, matter)}
showToast={(text: string) => this.showToast(text)}
checkLicenseOnAdd={(type: 'addBridge' | 'addDevice' | 'addDeviceToBridge', matter: MatterConfig) => this.checkLicenseOnAdd(type, matter)}
/>;
}

Expand All @@ -322,14 +318,15 @@ class App extends GenericApp<AppProps, AppState> {
commissioning={this.state.commissioning?.devices || {}}
socket={this.socket}
themeType={this.state.themeType}
theme={this.state.theme}
detectedDevices={this.state.detectedDevices || []}
setDetectedDevices={detectedDevices => this.setState({ detectedDevices })}
setDetectedDevices={(detectedDevices: DetectedRoom[]) => this.setState({ detectedDevices })}
productIDs={productIDs}
instance={this.instance}
matter={this.state.matter}
updateConfig={this.onChanged}
showToast={text => this.showToast(text)}
checkLicenseOnAdd={matter => this.checkLicenseOnAdd('addDevice', matter)}
showToast={(text: string) => this.showToast(text)}
checkLicenseOnAdd={(matter: MatterConfig) => this.checkLicenseOnAdd('addDevice', matter)}
/>;
}

Expand Down Expand Up @@ -408,12 +405,12 @@ class App extends GenericApp<AppProps, AppState> {
window.localStorage.setItem(`${this.adapterName}.${this.instance}.selectedTab`, value);
}}
scrollButtons="auto"
classes={{ indicator: this.props.classes.indicator }}
sx={{ '& .MuiTabs-indicator': styles.indicator }}
>
<Tab classes={{ selected: this.props.classes.selected }} label={I18n.t('Options')} value="options" />
<Tab classes={{ selected: this.props.classes.selected }} label={I18n.t('Controller')} value="controller" />
<Tab classes={{ selected: this.props.classes.selected }} label={I18n.t('Bridges')} value="bridges" />
<Tab classes={{ selected: this.props.classes.selected }} label={I18n.t('Devices')} value="devices" />
<Tab sx={{ '&.Mui-selected': styles.selected }} label={I18n.t('Options')} value="options" />
<Tab sx={{ '&.Mui-selected': styles.selected }} label={I18n.t('Controller')} value="controller" />
<Tab sx={{ '&.Mui-selected': styles.selected }} label={I18n.t('Bridges')} value="bridges" />
<Tab sx={{ '&.Mui-selected': styles.selected }} label={I18n.t('Devices')} value="devices" />
<div style={{ flexGrow: 1 }} />
{this.state.alive ? null : <IconNotAlive
style={{ color: 'orange', padding: 12 }}
Expand All @@ -431,7 +428,7 @@ class App extends GenericApp<AppProps, AppState> {

</AppBar>

<div className={this.isIFrame ? this.props.classes.tabContentIFrame : this.props.classes.tabContent}>
<div className={this.isIFrame ? styles.tabContentIFrame : styles.tabContent}>
{this.state.selectedTab === 'options' && this.renderOptions()}
{this.state.selectedTab === 'controller' && this.renderController()}
{this.state.selectedTab === 'bridges' && this.renderBridges()}
Expand All @@ -445,4 +442,4 @@ class App extends GenericApp<AppProps, AppState> {
}
}

export default withStyles(styles)(App);
export default App;
Loading

0 comments on commit 4740163

Please sign in to comment.