If you want to create the configuration page with react:
- Create github repo for adapter.
- execute
npx create-react-app src. It will take a while. cd src- Modify package.json file in src directory:
- Change
namefromsrctoADAPTERNAME-admin(Of course replaceADAPTERNAMEwith yours) - Add to dependencies:
Versions can be higher. So your src/package.json should look like:
"@material-ui/core": "^4.2.0", "react-icons": "^3.7.0", "@iobroker/adapter-react": "^0.1.0", "gulp": "^4.0.2", "del": "^5.0.0"
- Change
{
"name": "ADAPTERNAME-admin",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.0.1",
"@material-ui/core": "^4.2.0",
"react-icons": "^3.7.0",
"@iobroker/adapter-react": "^actual-version",
"gulp": "^4.0.2",
"del": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
- Call in
src:npm install - Copy gulpfile.js into
src:cp node_modules/@iobroker/adapter-react/gulpfile.js gulpfile.js - Start your dummy application
npm run startfor developing or build withnpm run buildand copy files inbuilddirectory towwwor toadmin. In admin you must renameindex.htmltoindex_m.html. - You can do that with
gulptasks:gulp build,gulp copy,gulp renameIndexorgulp renameTab
- Copy
vendorfolder: fromnode_modules/@iobroker/adapter-react/intosrc/public - Add socket.io to public/index.html After
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
insert
<script type="text/javascript" src="%PUBLIC_URL%/vendor/socket.io.js"></script>
- Add to App.js constructor initialization for I18n:
class App extends GenericApp {
constructor(props) {
const extendedProps = {...props};
extendedProps.encryptedFields = ['pass']; // this parameter will be encrypted and decrypted automatically
extendedProps.translations = {
'en': require('./i18n/en'),
'de': require('./i18n/de'),
'ru': require('./i18n/ru'),
'pt': require('./i18n/pt'),
'nl': require('./i18n/nl'),
'fr': require('./i18n/fr'),
'it': require('./i18n/it'),
'es': require('./i18n/es'),
'pl': require('./i18n/pl'),
'zh-cn': require('./i18n/zh-cn'),
};
// get actual admin port
extendedProps.socket = {port: parseInt(window.location.port, 10)};
// only for debug purposes
if (extendedProps.socket.port === 3000) {
extendedProps.socket.port = 8081;
}
super(extendedProps);
}
...
}
- Add to App.js encoding and decoding of values:
class App extend GenericApp {
...
onPrepareLoad(settings) {
settings.pass = this.decode(settings.pass);
}
onPrepareSave(settings) {
settings.pass = this.encode(settings.pass);
}
}
getObjectNameFromObj(obj, settings, options, isDesc)
Get object name from single object.
Usage: Utils.getObjectNameFromObj(this.objects[id], null, {language: I18n.getLanguage()})
getObjectIcon(id, obj)
Get icon from object.
Usage:
const icon = Utils.getObjectIcon(id, this.objects[id]);
return (<img src={icon}/>);
isUseBright(color, defaultValue)
Usage: `
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent