Add iot2050 configration web application

Currently the only supported feature is to config the PLC1200 modules.
Web application is easier to use and less error-prone compared to the
YAML configuration, but less efficient for mass deployment.

This also provides a base when new requirement of web application comes.

For the sake of familiarity, react + material UI is used, however in the
future, siemens/ix should be used to get a more pretty and unified UI
style.

This web app should also be possible to pack for the Host PC or server
to be a standalone version, the use case is to manipulate the
configuration but not deploy/retrieve.

Signed-off-by: Baocheng Su <[email protected]>

recipes-app/iot2050-conf-webui/files/.eslintrc.yml

@@ -0,0 +1,15 @@
+env:
+  browser: true
+  es2021: true
+  node: true
+extends:
+  - standard
+  - plugin:react/recommended
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+plugins:
+  - react
+rules: {
+  semi: [2, "always"]
+}

recipes-app/iot2050-conf-webui/files/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

recipes-app/iot2050-conf-webui/files/README.md

@@ -0,0 +1,25 @@
+# IOT2050 Conf WEBUI
+
+This is the IOT2050 configuration webUI, it is used to setup the device and it's
+extension modules.
+
+## Development 
+
+This application is using Next.JS + Material UI.
+
+Install dependencies and run via `npm`:
+
+```shell
+# install dependencies
+npm install
+
+# run for development
+npm run dev -- -p 2050
+
+# run for production
+npm run build
+npm run start -- -p 2050
+```
+
+Open [http://localhost:2050](http://localhost:2050) with your browser to see the
+result.

recipes-app/iot2050-conf-webui/files/iot2050-conf-webui.service

@@ -0,0 +1,12 @@
+[Unit]
+Description=IOT2050 Configuration Web UI
+After=syslog.target network.target
+
+[Service]
+Type=idle
+User=root
+WorkingDirectory=/srv/iot2050-conf-webui
+ExecStart=/usr/bin/npm run start --prefix=/srv/iot2050-conf-webui -- -p 2050
+
+[Install]
+WantedBy=multi-user.target

recipes-app/iot2050-conf-webui/files/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

recipes-app/iot2050-conf-webui/files/next.config.js

@@ -0,0 +1,35 @@
+/** @type {import('next').NextConfig} */
+
+const CopyPlugin = require('copy-webpack-plugin');
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
+  webpack: (config, { isServer }) => {
+    // Only run in server mode
+    if (isServer) {
+      config.plugins.push(
+        new CopyPlugin({
+          patterns: [
+            {
+              from: 'src/lib/gRPC',
+              to: 'gRPC'
+            },
+            {
+              from: 'src/lib/gRPC',
+              to: 'app/gRPC'
+            }
+          ],
+        })
+      );
+    }
+    return config;
+  },
+};
+
+module.exports = nextConfig;