mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Template and Card fixes

pull/2/head
Sacha Weatherstone 5 years ago
parent
d929739f52
commit
f643e6d681
10 changed files with 293 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      package.json
  2. 170
      pnpm-lock.yaml
  3. 45
      src/components/generic/Card.tsx
  4. 207
      src/components/generic/Chart.tsx
  5. 2
      src/components/generic/Input.tsx
  6. 5
      src/components/generic/Select.tsx
  7. 11
      src/components/generic/Toggle.tsx
  8. 4
      src/components/templates/PrimaryTemplate.tsx
  9. 4
      src/pages/Nodes/Index.tsx
  10. 25
      src/pages/Nodes/Node.tsx

38
package.json
View File

@ -12,50 +12,50 @@
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^1.4.0", "@headlessui/react": "^1.4.0",
"@heroicons/react": "^1.0.1", "@heroicons/react": "^1.0.4",
"@meshtastic/meshtasticjs": "^0.6.17", "@meshtastic/meshtasticjs": "^0.6.17",
"@reduxjs/toolkit": "^1.6.0", "@reduxjs/toolkit": "^1.6.1",
"apexcharts": "^3.27.3", "apexcharts": "^3.28.1",
"boring-avatars": "^1.5.8", "boring-avatars": "^1.5.8",
"i18next": "^20.3.5", "i18next": "^20.4.0",
"i18next-browser-languagedetector": "^6.1.2", "i18next-browser-languagedetector": "^6.1.2",
"moment": "^2.29.1", "moment": "^2.29.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-flags-select": "^2.1.2", "react-flags-select": "^2.1.2",
"react-hook-form": "^7.13.0-next.5", "react-hook-form": "^7.13.0",
"react-i18next": "^11.11.4", "react-i18next": "^11.11.4",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"type-route": "^0.6.0", "type-route": "^0.6.0",
"use-breakpoint": "^2.0.1" "use-breakpoint": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"@snowpack/plugin-dotenv": "^2.0.5", "@snowpack/plugin-dotenv": "^2.2.0",
"@snowpack/plugin-postcss": "^1.4.3", "@snowpack/plugin-postcss": "^1.4.3",
"@snowpack/plugin-react-refresh": "^2.5.0", "@snowpack/plugin-react-refresh": "^2.5.0",
"@snowpack/plugin-typescript": "^1.2.0", "@snowpack/plugin-typescript": "^1.2.1",
"@types/react": "^17.0.13", "@types/react": "^17.0.19",
"@types/react-dom": "^17.0.8", "@types/react-dom": "^17.0.9",
"@types/react-redux": "^7.1.16", "@types/react-redux": "^7.1.18",
"@types/snowpack-env": "^2.3.3", "@types/snowpack-env": "^2.3.4",
"@typescript-eslint/eslint-plugin": "^4.29.1", "@typescript-eslint/eslint-plugin": "^4.29.3",
"@typescript-eslint/parser": "^4.29.1", "@typescript-eslint/parser": "^4.29.3",
"@verypossible/eslint-config": "^1.6.0", "@verypossible/eslint-config": "^1.6.1",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.3.2",
"babel-plugin-module-resolver": "^4.1.0", "babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-babel-module": "^5.3.1", "eslint-import-resolver-babel-module": "^5.3.1",
"eslint-import-resolver-typescript": "^2.4.0", "eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-import": "^2.24.1", "eslint-plugin-import": "^2.24.2",
"eslint-plugin-react": "^7.24.0", "eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"gzipper": "^5.0.0", "gzipper": "^5.0.0",
"postcss": "^8.3.5", "postcss": "^8.3.6",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"snowpack": "^3.7.1", "snowpack": "^3.8.7",
"tailwindcss": "^2.2.4", "tailwindcss": "^2.2.7",
"typescript": "^4.3.5" "typescript": "^4.3.5"
} }
} }

170
pnpm-lock.yaml
View File

@ -2,46 +2,46 @@ lockfileVersion: 5.3
specifiers: specifiers:
'@headlessui/react': ^1.4.0 '@headlessui/react': ^1.4.0
'@heroicons/react': ^1.0.1 '@heroicons/react': ^1.0.4
'@meshtastic/meshtasticjs': ^0.6.17 '@meshtastic/meshtasticjs': ^0.6.17
'@reduxjs/toolkit': ^1.6.0 '@reduxjs/toolkit': ^1.6.1
'@snowpack/plugin-dotenv': ^2.0.5 '@snowpack/plugin-dotenv': ^2.2.0
'@snowpack/plugin-postcss': ^1.4.3 '@snowpack/plugin-postcss': ^1.4.3
'@snowpack/plugin-react-refresh': ^2.5.0 '@snowpack/plugin-react-refresh': ^2.5.0
'@snowpack/plugin-typescript': ^1.2.0 '@snowpack/plugin-typescript': ^1.2.1
'@types/react': ^17.0.13 '@types/react': ^17.0.19
'@types/react-dom': ^17.0.8 '@types/react-dom': ^17.0.9
'@types/react-redux': ^7.1.16 '@types/react-redux': ^7.1.18
'@types/snowpack-env': ^2.3.3 '@types/snowpack-env': ^2.3.4
'@typescript-eslint/eslint-plugin': ^4.29.1 '@typescript-eslint/eslint-plugin': ^4.29.3
'@typescript-eslint/parser': ^4.29.1 '@typescript-eslint/parser': ^4.29.3
'@verypossible/eslint-config': ^1.6.0 '@verypossible/eslint-config': ^1.6.1
apexcharts: ^3.27.3 apexcharts: ^3.28.1
autoprefixer: ^10.2.6 autoprefixer: ^10.3.2
babel-plugin-module-resolver: ^4.1.0 babel-plugin-module-resolver: ^4.1.0
boring-avatars: ^1.5.8 boring-avatars: ^1.5.8
eslint: ^7.32.0 eslint: ^7.32.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-import-resolver-babel-module: ^5.3.1 eslint-import-resolver-babel-module: ^5.3.1
eslint-import-resolver-typescript: ^2.4.0 eslint-import-resolver-typescript: ^2.4.0
eslint-plugin-import: ^2.24.1 eslint-plugin-import: ^2.24.2
eslint-plugin-react: ^7.24.0 eslint-plugin-react: ^7.24.0
eslint-plugin-react-hooks: ^4.2.0 eslint-plugin-react-hooks: ^4.2.0
gzipper: ^5.0.0 gzipper: ^5.0.0
i18next: ^20.3.5 i18next: ^20.4.0
i18next-browser-languagedetector: ^6.1.2 i18next-browser-languagedetector: ^6.1.2
moment: ^2.29.1 moment: ^2.29.1
postcss: ^8.3.5 postcss: ^8.3.6
prettier: ^2.3.2 prettier: ^2.3.2
react: ^17.0.2 react: ^17.0.2
react-apexcharts: ^1.3.9 react-apexcharts: ^1.3.9
react-dom: ^17.0.2 react-dom: ^17.0.2
react-flags-select: ^2.1.2 react-flags-select: ^2.1.2
react-hook-form: ^7.13.0-next.5 react-hook-form: ^7.13.0
react-i18next: ^11.11.4 react-i18next: ^11.11.4
react-redux: ^7.2.4 react-redux: ^7.2.4
snowpack: ^3.7.1 snowpack: ^3.8.7
tailwindcss: ^2.2.4 tailwindcss: ^2.2.7
type-route: ^0.6.0 type-route: ^0.6.0
typescript: ^4.3.5 typescript: ^4.3.5
use-breakpoint: ^2.0.1 use-breakpoint: ^2.0.1
@ -51,13 +51,13 @@ dependencies:
'@heroicons/react': 1.0[email protected] '@heroicons/react': 1.0[email protected]
'@meshtastic/meshtasticjs': 0.6.17 '@meshtastic/meshtasticjs': 0.6.17
'@reduxjs/toolkit': 1.6[email protected][email protected] '@reduxjs/toolkit': 1.6[email protected][email protected]
apexcharts: 3.27.3 apexcharts: 3.28.1
boring-avatars: 1.5.8 boring-avatars: 1.5.8
i18next: 20.4.0 i18next: 20.4.0
i18next-browser-languagedetector: 6.1.2 i18next-browser-languagedetector: 6.1.2
moment: 2.29.1 moment: 2.29.1
react: 17.0.2 react: 17.0.2
react-apexcharts: 1.3[email protected]7.3[email protected] react-apexcharts: 1.3[email protected]8.1[email protected]
react-dom: 17.0[email protected] react-dom: 17.0[email protected]
react-flags-select: 2.1[email protected][email protected] react-flags-select: 2.1[email protected][email protected]
react-hook-form: 7.13[email protected] react-hook-form: 7.13[email protected]
@ -67,7 +67,7 @@ dependencies:
use-breakpoint: 2.0[email protected][email protected] use-breakpoint: 2.0[email protected][email protected]
devDependencies: devDependencies:
'@snowpack/plugin-dotenv': 2.1.0 '@snowpack/plugin-dotenv': 2.2.0
'@snowpack/plugin-postcss': 1.4[email protected] '@snowpack/plugin-postcss': 1.4[email protected]
'@snowpack/plugin-react-refresh': 2.5[email protected][email protected] '@snowpack/plugin-react-refresh': 2.5[email protected][email protected]
'@snowpack/plugin-typescript': 1.2[email protected] '@snowpack/plugin-typescript': 1.2[email protected]
@ -75,22 +75,22 @@ devDependencies:
'@types/react-dom': 17.0.9 '@types/react-dom': 17.0.9
'@types/react-redux': 7.1.18 '@types/react-redux': 7.1.18
'@types/snowpack-env': 2.3.4 '@types/snowpack-env': 2.3.4
'@typescript-eslint/eslint-plugin': 4.29.2_b01b7137116ac50f0745961d9cf72d34 '@typescript-eslint/eslint-plugin': 4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d
'@typescript-eslint/parser': 4.29.2[email protected][email protected] '@typescript-eslint/parser': 4.29.3[email protected][email protected]
'@verypossible/eslint-config': 1.6[email protected] '@verypossible/eslint-config': 1.6[email protected]
autoprefixer: 10.3[email protected] autoprefixer: 10.3[email protected]
babel-plugin-module-resolver: 4.1.0 babel-plugin-module-resolver: 4.1.0
eslint: 7.32.0 eslint: 7.32.0
eslint-config-prettier: 8.3[email protected] eslint-config-prettier: 8.3[email protected]
eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344 eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
eslint-import-resolver-typescript: 2.4.0_dd24990a2f914d6f3397930dfc8171b2 eslint-import-resolver-typescript: 2.4.0_b7a4de75e7d0094cbe979e30a9a325ab
eslint-plugin-import: 2.24.1[email protected] eslint-plugin-import: 2.24.2[email protected]
eslint-plugin-react: 7.24[email protected] eslint-plugin-react: 7.24[email protected]
eslint-plugin-react-hooks: 4.2[email protected] eslint-plugin-react-hooks: 4.2[email protected]
gzipper: 5.0.0 gzipper: 5.0.0
postcss: 8.3.6 postcss: 8.3.6
prettier: 2.3.2 prettier: 2.3.2
snowpack: 3.8.6 snowpack: 3.8.7
tailwindcss: 2.2.7_8b238584a104f535cc123d61e89214a6 tailwindcss: 2.2.7_8b238584a104f535cc123d61e89214a6
typescript: 4.3.5 typescript: 4.3.5
@ -634,8 +634,8 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/@snowpack/plugin-dotenv/2.1.0: /@snowpack/plugin-dotenv/2.2.0:
resolution: {integrity: sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==} resolution: {integrity: sha512-/gj91mHz9iPi7e393sibVfpm4jrG7hqZytgkfiscOIWJ8Y838D0jX1JFXu9IAThZz0IEKTLpb74d5A7pM00HVg==}
dependencies: dependencies:
dotenv: 8.6.0 dotenv: 8.6.0
dotenv-expand: 5.1.0 dotenv-expand: 5.1.0
@ -723,6 +723,10 @@ packages:
resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==} resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
dev: true dev: true
/@types/json5/0.0.29:
resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
dev: true
/@types/keyv/3.1.2: /@types/keyv/3.1.2:
resolution: {integrity: sha512-/FvAK2p4jQOaJ6CGDHJTqZcUtbZe820qIeTg7o0Shg7drB4JHeL+V/dhSaly7NXx6u8eSee+r7coT+yuJEvDLg==} resolution: {integrity: sha512-/FvAK2p4jQOaJ6CGDHJTqZcUtbZe820qIeTg7o0Shg7drB4JHeL+V/dhSaly7NXx6u8eSee+r7coT+yuJEvDLg==}
dependencies: dependencies:
@ -780,8 +784,8 @@ packages:
resolution: {integrity: sha512-zYzMb2aMyzXW5VgOQHy+FgI8N5tLFb+tIsUqk35CIgSr9pT4pji2GR8BCOTMdniusVuRHIp/DaYQNQGYGLVZHQ==} resolution: {integrity: sha512-zYzMb2aMyzXW5VgOQHy+FgI8N5tLFb+tIsUqk35CIgSr9pT4pji2GR8BCOTMdniusVuRHIp/DaYQNQGYGLVZHQ==}
dev: true dev: true
/@typescript-eslint/eslint-plugin/4.29.2_b01b7137116ac50f0745961d9cf72d34: /@typescript-eslint/eslint-plugin/4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d:
resolution: {integrity: sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==} resolution: {integrity: sha512-tBgfA3K/3TsZY46ROGvoRxQr1wBkclbVqRQep97MjVHJzcRBURRY3sNFqLk0/Xr//BY5hM9H2p/kp+6qim85SA==}
engines: {node: ^10.12.0 || >=12.0.0} engines: {node: ^10.12.0 || >=12.0.0}
peerDependencies: peerDependencies:
'@typescript-eslint/parser': ^4.0.0 '@typescript-eslint/parser': ^4.0.0
@ -791,9 +795,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/experimental-utils': 4.29.2[email protected][email protected] '@typescript-eslint/experimental-utils': 4.29.3[email protected][email protected]
'@typescript-eslint/parser': 4.29.2[email protected][email protected] '@typescript-eslint/parser': 4.29.3[email protected][email protected]
'@typescript-eslint/scope-manager': 4.29.2 '@typescript-eslint/scope-manager': 4.29.3
debug: 4.3.2 debug: 4.3.2
eslint: 7.32.0 eslint: 7.32.0
functional-red-black-tree: 1.0.1 functional-red-black-tree: 1.0.1
@ -805,16 +809,16 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/experimental-utils/4.29.2[email protected][email protected]: /@typescript-eslint/experimental-utils/4.29.3[email protected][email protected]:
resolution: {integrity: sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==} resolution: {integrity: sha512-ffIvbytTVWz+3keg+Sy94FG1QeOvmV9dP2YSdLFHw/ieLXWCa3U1TYu8IRCOpMv2/SPS8XqhM1+ou1YHsdzKrg==}
engines: {node: ^10.12.0 || >=12.0.0} engines: {node: ^10.12.0 || >=12.0.0}
peerDependencies: peerDependencies:
eslint: '*' eslint: '*'
dependencies: dependencies:
'@types/json-schema': 7.0.9 '@types/json-schema': 7.0.9
'@typescript-eslint/scope-manager': 4.29.2 '@typescript-eslint/scope-manager': 4.29.3
'@typescript-eslint/types': 4.29.2 '@typescript-eslint/types': 4.29.3
'@typescript-eslint/typescript-estree': 4.29.2[email protected] '@typescript-eslint/typescript-estree': 4.29.3[email protected]
eslint: 7.32.0 eslint: 7.32.0
eslint-scope: 5.1.1 eslint-scope: 5.1.1
eslint-utils: 3.0[email protected] eslint-utils: 3.0[email protected]
@ -823,8 +827,8 @@ packages:
- typescript - typescript
dev: true dev: true
/@typescript-eslint/parser/4.29.2[email protected][email protected]: /@typescript-eslint/parser/4.29.3[email protected][email protected]:
resolution: {integrity: sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==} resolution: {integrity: sha512-jrHOV5g2u8ROghmspKoW7pN8T/qUzk0+DITun0MELptvngtMrwUJ1tv5zMI04CYVEUsSrN4jV7AKSv+I0y0EfQ==}
engines: {node: ^10.12.0 || >=12.0.0} engines: {node: ^10.12.0 || >=12.0.0}
peerDependencies: peerDependencies:
eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
@ -833,9 +837,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/scope-manager': 4.29.2 '@typescript-eslint/scope-manager': 4.29.3
'@typescript-eslint/types': 4.29.2 '@typescript-eslint/types': 4.29.3
'@typescript-eslint/typescript-estree': 4.29.2[email protected] '@typescript-eslint/typescript-estree': 4.29.3[email protected]
debug: 4.3.2 debug: 4.3.2
eslint: 7.32.0 eslint: 7.32.0
typescript: 4.3.5 typescript: 4.3.5
@ -843,21 +847,21 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/scope-manager/4.29.2: /@typescript-eslint/scope-manager/4.29.3:
resolution: {integrity: sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==} resolution: {integrity: sha512-x+w8BLXO7iWPkG5mEy9bA1iFRnk36p/goVlYobVWHyDw69YmaH9q6eA+Fgl7kYHmFvWlebUTUfhtIg4zbbl8PA==}
engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1} engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
dependencies: dependencies:
'@typescript-eslint/types': 4.29.2 '@typescript-eslint/types': 4.29.3
'@typescript-eslint/visitor-keys': 4.29.2 '@typescript-eslint/visitor-keys': 4.29.3
dev: true dev: true
/@typescript-eslint/types/4.29.2: /@typescript-eslint/types/4.29.3:
resolution: {integrity: sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==} resolution: {integrity: sha512-s1eV1lKNgoIYLAl1JUba8NhULmf+jOmmeFO1G5MN/RBCyyzg4TIOfIOICVNC06lor+Xmy4FypIIhFiJXOknhIg==}
engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1} engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
dev: true dev: true
/@typescript-eslint/typescript-estree/4.29.2[email protected]: /@typescript-eslint/typescript-estree/4.29.3[email protected]:
resolution: {integrity: sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==} resolution: {integrity: sha512-45oQJA0bxna4O5TMwz55/TpgjX1YrAPOI/rb6kPgmdnemRZx/dB0rsx+Ku8jpDvqTxcE1C/qEbVHbS3h0hflag==}
engines: {node: ^10.12.0 || >=12.0.0} engines: {node: ^10.12.0 || >=12.0.0}
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
@ -865,8 +869,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/types': 4.29.2 '@typescript-eslint/types': 4.29.3
'@typescript-eslint/visitor-keys': 4.29.2 '@typescript-eslint/visitor-keys': 4.29.3
debug: 4.3.2 debug: 4.3.2
globby: 11.0.4 globby: 11.0.4
is-glob: 4.0.1 is-glob: 4.0.1
@ -877,25 +881,25 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/visitor-keys/4.29.2: /@typescript-eslint/visitor-keys/4.29.3:
resolution: {integrity: sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==} resolution: {integrity: sha512-MGGfJvXT4asUTeVs0Q2m+sY63UsfnA+C/FDgBKV3itLBmM9H0u+URcneePtkd0at1YELmZK6HSolCqM4Fzs6yA==}
engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1} engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
dependencies: dependencies:
'@typescript-eslint/types': 4.29.2 '@typescript-eslint/types': 4.29.3
eslint-visitor-keys: 2.1.0 eslint-visitor-keys: 2.1.0
dev: true dev: true
/@verypossible/eslint-config/[email protected]: /@verypossible/eslint-config/[email protected]:
resolution: {integrity: sha512-3qf2FSag49zqI6rZlwKcF8RryLX0RJ3W+koJuhDhdQNyelSEeTxiijQ+Y/Xss4ILFzyqpBnzqiphmABGcOgj1Q==} resolution: {integrity: sha512-3qf2FSag49zqI6rZlwKcF8RryLX0RJ3W+koJuhDhdQNyelSEeTxiijQ+Y/Xss4ILFzyqpBnzqiphmABGcOgj1Q==}
dependencies: dependencies:
'@typescript-eslint/eslint-plugin': 4.29.2_b01b7137116ac50f0745961d9cf72d34 '@typescript-eslint/eslint-plugin': 4.29.3_fd14c0002fbbfb85b8a0070d0dffb93d
'@typescript-eslint/parser': 4.29.2[email protected][email protected] '@typescript-eslint/parser': 4.29.3[email protected][email protected]
babel-plugin-module-resolver: 4.1.0 babel-plugin-module-resolver: 4.1.0
eslint: 7.32.0 eslint: 7.32.0
eslint-config-prettier: 8.3[email protected] eslint-config-prettier: 8.3[email protected]
eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344 eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
eslint-import-resolver-typescript: 2.4.0_dd24990a2f914d6f3397930dfc8171b2 eslint-import-resolver-typescript: 2.4.0_b7a4de75e7d0094cbe979e30a9a325ab
eslint-plugin-import: 2.24.1[email protected] eslint-plugin-import: 2.24.2[email protected]
eslint-plugin-react: 7.24[email protected] eslint-plugin-react: 7.24[email protected]
eslint-plugin-react-hooks: 4.2[email protected] eslint-plugin-react-hooks: 4.2[email protected]
prettier: 2.3.2 prettier: 2.3.2
@ -1024,8 +1028,8 @@ packages:
picomatch: 2.3.0 picomatch: 2.3.0
dev: true dev: true
/apexcharts/3.27.3: /apexcharts/3.28.1:
resolution: {integrity: sha512-1ZrqiQT0VahkqW0kVjf5QVURYGaHMlGN08BoIZG2c2U/gY2AtnEoFN4r9q4d/pYYYKvI9AyLBHq0otzcVGrHAw==} resolution: {integrity: sha512-5M1KitI/XmY2Sx6ih9vQOXyQUTmotDG/cML2N6bkBlVseF10RPSzM7dkrf7Y68apSZF6e7J581gXXu1+qkLhCA==}
dependencies: dependencies:
svg.draggable.js: 2.2.2 svg.draggable.js: 2.2.2
svg.easing.js: 2.0.0 svg.easing.js: 2.0.0
@ -1233,7 +1237,7 @@ packages:
dependencies: dependencies:
caniuse-lite: 1.0.30001251 caniuse-lite: 1.0.30001251
colorette: 1.3.0 colorette: 1.3.0
electron-to-chromium: 1.3.814 electron-to-chromium: 1.3.817
escalade: 3.1.1 escalade: 3.1.1
node-releases: 1.1.75 node-releases: 1.1.75
dev: true dev: true
@ -1776,8 +1780,8 @@ packages:
safer-buffer: 2.1.2 safer-buffer: 2.1.2
dev: true dev: true
/electron-to-chromium/1.3.814: /electron-to-chromium/1.3.817:
resolution: {integrity: sha512-0mH03cyjh6OzMlmjauGg0TLd87ErIJqWiYxMcOLKf5w6p0YEOl7DJAj7BDlXEFmCguY5CQaKVOiMjAMODO2XDw==} resolution: {integrity: sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==}
dev: true dev: true
/emoji-regex/8.0.0: /emoji-regex/8.0.0:
@ -1955,7 +1959,7 @@ packages:
resolve: 1.20.0 resolve: 1.20.0
dev: true dev: true
/eslint-import-resolver-typescript/2.4.0_dd24990a2f914d6f3397930dfc8171b2: /eslint-import-resolver-typescript/2.4.0_b7a4de75e7d0094cbe979e30a9a325ab:
resolution: {integrity: sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==} resolution: {integrity: sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==}
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
@ -1964,11 +1968,11 @@ packages:
dependencies: dependencies:
debug: 4.3.2 debug: 4.3.2
eslint: 7.32.0 eslint: 7.32.0
eslint-plugin-import: 2.24.1[email protected] eslint-plugin-import: 2.24.2[email protected]
glob: 7.1.7 glob: 7.1.7
is-glob: 4.0.1 is-glob: 4.0.1
resolve: 1.20.0 resolve: 1.20.0
tsconfig-paths: 3.10.1 tsconfig-paths: 3.11.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@ -1981,8 +1985,8 @@ packages:
pkg-dir: 2.0.0 pkg-dir: 2.0.0
dev: true dev: true
/eslint-plugin-import/2.24.1[email protected]: /eslint-plugin-import/2.24.2[email protected]:
resolution: {integrity: sha512-KSFWhNxPH8OGJwpRJJs+Z7I0a13E2iFQZJIvSnCu6KUs4qmgAm3xN9GYBCSoiGWmwA7gERZPXqYQjcoCROnYhQ==} resolution: {integrity: sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==}
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0
@ -2002,7 +2006,7 @@ packages:
pkg-up: 2.0.0 pkg-up: 2.0.0
read-pkg-up: 3.0.0 read-pkg-up: 3.0.0
resolve: 1.20.0 resolve: 1.20.0
tsconfig-paths: 3.10.1 tsconfig-paths: 3.11.0
dev: true dev: true
/eslint-plugin-react-hooks/[email protected]: /eslint-plugin-react-hooks/[email protected]:
@ -3237,8 +3241,8 @@ packages:
semver: 6.3.0 semver: 6.3.0
dev: true dev: true
/make-fetch-happen/9.0.5: /make-fetch-happen/9.1.0:
resolution: {integrity: sha512-XN0i/VqHsql30Oq7179spk6vu3IuaPL1jaivNYhBrJtK7tkOuJwMK2IlROiOnJ40b9SvmOo2G86FZyI6LD2EsQ==} resolution: {integrity: sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
dependencies: dependencies:
agentkeepalive: 4.1.4 agentkeepalive: 4.1.4
@ -3546,7 +3550,7 @@ packages:
resolution: {integrity: sha512-jmlgSxoDNuhAtxUIG6pVwwtz840i994dL14FoNVZisrmZW5kWd63IUTNv1m/hyRSGSqWjCUp/YZlS1BJyNp9XA==} resolution: {integrity: sha512-jmlgSxoDNuhAtxUIG6pVwwtz840i994dL14FoNVZisrmZW5kWd63IUTNv1m/hyRSGSqWjCUp/YZlS1BJyNp9XA==}
engines: {node: '>=10'} engines: {node: '>=10'}
dependencies: dependencies:
make-fetch-happen: 9.0.5 make-fetch-happen: 9.1.0
minipass: 3.1.3 minipass: 3.1.3
minipass-fetch: 1.3.4 minipass-fetch: 1.3.4
minipass-json-stream: 1.0.1 minipass-json-stream: 1.0.1
@ -4152,13 +4156,13 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/react-apexcharts/[email protected]7.3[email protected]: /react-apexcharts/[email protected]8.1[email protected]:
resolution: {integrity: sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==} resolution: {integrity: sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==}
peerDependencies: peerDependencies:
apexcharts: ^3.18.0 apexcharts: ^3.18.0
react: '>=0.13' react: '>=0.13'
dependencies: dependencies:
apexcharts: 3.27.3 apexcharts: 3.28.1
prop-types: 15.7.2 prop-types: 15.7.2
react: 17.0.2 react: 17.0.2
dev: false dev: false
@ -4548,8 +4552,8 @@ packages:
engines: {node: '>= 6.0.0', npm: '>= 3.0.0'} engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
dev: true dev: true
/snowpack/3.8.6: /snowpack/3.8.7:
resolution: {integrity: sha512-EZ3Y7RtTiPvxnVFTKPfkvi2PKBrprXCvOHKWQQLBkHonf+xdtG51RiNjtrRLJeCjislAlD6OoeGHUxz76ToGHw==} resolution: {integrity: sha512-lvz1jxAxi/uPU6aOW8LSLp1sJlSNnwOGDt5nkF4pLeECmxn9iymLLiyptXEJJrXhFf48D0RrCww57J5kwi4dwA==}
engines: {node: '>=10.19.0'} engines: {node: '>=10.19.0'}
hasBin: true hasBin: true
dependencies: dependencies:
@ -4580,6 +4584,7 @@ packages:
isbinaryfile: 4.0.8 isbinaryfile: 4.0.8
jsonschema: 1.2.11 jsonschema: 1.2.11
kleur: 4.1.4 kleur: 4.1.4
magic-string: 0.25.7
meriyah: 3.1.6 meriyah: 3.1.6
mime-types: 2.1.32 mime-types: 2.1.32
mkdirp: 1.0.4 mkdirp: 1.0.4
@ -4962,10 +4967,11 @@ packages:
resolution: {integrity: sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==} resolution: {integrity: sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==}
dev: true dev: true
/tsconfig-paths/3.10.1: /tsconfig-paths/3.11.0:
resolution: {integrity: sha512-rETidPDgCpltxF7MjBZlAFPUHv5aHH2MymyPvh+vEyWAED4Eb/WeMbsnD/JDr4OKPOA1TssDHgIcpTN5Kh0p6Q==} resolution: {integrity: sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==}
dependencies: dependencies:
json5: 2.2.0 '@types/json5': 0.0.29
json5: 1.0.1
minimist: 1.2.5 minimist: 1.2.5
strip-bom: 3.0.0 strip-bom: 3.0.0
dev: true dev: true

45
src/components/generic/Card.tsx
View File

@ -0,0 +1,45 @@
import React from 'react';
type DefaultDivProps = JSX.IntrinsicElements['div'];
interface CardProps extends DefaultDivProps {
title: string;
description: string;
buttons?: JSX.Element;
lgPlaceholder?: JSX.Element;
}
export const Card = ({
title,
description,
buttons,
children,
className,
lgPlaceholder,
...props
}: CardProps): JSX.Element => {
return (
<div
className={`flex flex-col flex-auto text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
{...props}
>
<div className="flex items-center justify-between mx-10 mt-10">
<div className="flex flex-col">
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
{title}
</div>
<div className="font-medium text-gray-400">{description}</div>
</div>
{buttons}
</div>
<div className="flex">
<div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
{children}
</div>
{lgPlaceholder && (
<div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
)}
</div>
</div>
);
};

207
src/components/generic/Chart.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import ApexChart from 'react-apexcharts'; import ApexChart from 'react-apexcharts';
import { Button } from './Button'; import { Button } from './Button';
import { Card } from './Card';
type DefaultDivProps = JSX.IntrinsicElements['div']; type DefaultDivProps = JSX.IntrinsicElements['div'];
@ -30,129 +31,125 @@ export const Chart = ({
}: ChartProps): JSX.Element => { }: ChartProps): JSX.Element => {
const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]); const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]);
return ( return (
<div <div className="dark" {...props}>
className="flex flex-col flex-auto text-white shadow-md dark bg-primaryDark rounded-3xl" <Card
{...props} title={title}
> description={description}
<div className="flex items-center justify-between mx-10 mt-10"> buttons={
<div className="flex flex-col"> hasMultipleSeries ? (
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight md:text-3xl"> <div className="flex space-x-2">
{title} {series.map((data, index) => (
</div> <Button
<div className="font-medium text-gray-400">{description}</div> active={data.name === activeSeries.name}
</div> key={index}
{hasMultipleSeries && ( className="font-medium"
<div className="flex space-x-2"> onClick={(): void => {
{series.map((data, index) => ( setActiveSeries(series[index]);
<Button }}
active={data.name === activeSeries.name} >
key={index} {data.name}
className="font-medium" </Button>
onClick={(): void => { ))}
setActiveSeries(series[index]); </div>
}} ) : undefined
> }
{data.name} >
</Button> <div className="h-80">
))} <ApexChart
</div> height="96%"
)} type="area"
</div> options={{
<div className="h-80"> chart: {
<ApexChart animations: {
height="96%" speed: 400,
type="area" animateGradually: {
options={{ enabled: false,
chart: { },
animations: { },
speed: 400, toolbar: {
animateGradually: { show: false,
},
zoom: {
enabled: false, enabled: false,
}, },
}, },
toolbar: { colors: ['#818CF8'],
show: false, dataLabels: {
},
zoom: {
enabled: false, enabled: false,
}, },
}, fill: {
colors: ['#818CF8'], colors: ['#312E81'],
dataLabels: {
enabled: false,
},
fill: {
colors: ['#312E81'],
},
grid: {
padding: {
top: 10,
left: 0,
right: 0,
}, },
grid: {
padding: {
top: 10,
left: 0,
right: 0,
},
xaxis: { xaxis: {
lines: { lines: {
show: false, show: false,
},
}, },
}, yaxis: {
yaxis: { lines: {
lines: { show: false,
show: false, },
}, },
}, },
},
stroke: { stroke: {
width: 2, width: 2,
},
tooltip: {
followCursor: true,
theme: 'dark',
x: {
format: 'MMM dd, yyyy',
},
y: {
formatter: (value: number): string => `${value}`,
},
},
xaxis: {
axisBorder: {
show: false,
}, },
axisTicks: { tooltip: {
show: false, followCursor: true,
}, theme: 'dark',
crosshairs: { x: {
stroke: { format: 'MMM dd, yyyy',
color: '#475569',
dashArray: 0,
width: 2,
}, },
}, y: {
labels: { formatter: (value: number): string => `${value}`,
style: {
colors: '#CBD5E1',
}, },
}, },
tooltip: { xaxis: {
enabled: false, axisBorder: {
}, show: false,
type: 'datetime', },
}, axisTicks: {
yaxis: { show: false,
axisTicks: { },
show: false, crosshairs: {
stroke: {
color: '#475569',
dashArray: 0,
width: 2,
},
},
labels: {
style: {
colors: '#CBD5E1',
},
},
tooltip: {
enabled: false,
},
type: 'datetime',
}, },
axisBorder: { yaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
show: false, show: false,
}, },
show: false, }}
}, series={[activeSeries]}
}} />
series={[activeSeries]} </div>
/> </Card>
</div>
</div> </div>
); );
}; };

2
src/components/generic/Input.tsx
View File

@ -26,7 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
<div className="w-full"> <div className="w-full">
<label <label
htmlFor={id} htmlFor={id}
className="block text-sm font-medium dark:text-white" className="block text-sm font-medium text-black dark:text-white"
> >
{label} {label}
</label> </label>

5
src/components/generic/Select.tsx
View File

@ -28,7 +28,10 @@ export const Select = ({
}: SelectProps): JSX.Element => { }: SelectProps): JSX.Element => {
return ( return (
<div className="w-full"> <div className="w-full">
<label htmlFor={id} className="block text-sm font-medium dark:text-white"> <label
htmlFor={id}
className="block text-sm font-medium text-black dark:text-white"
>
{label} {label}
</label> </label>

11
src/components/generic/Toggle.tsx
View File

@ -20,18 +20,21 @@ export const Toggle = ({
const [enabled, setEnabled] = React.useState(false); const [enabled, setEnabled] = React.useState(false);
return ( return (
<div className="w-full"> <div className="flex flex-col w-full">
<label htmlFor={id} className="block text-sm font-medium dark:text-white"> <label
htmlFor={id}
className="block text-sm font-medium text-black dark:text-white"
>
{label} {label}
</label> </label>
<div className="float-right"> <div className="ml-auto">
<Switch <Switch
id={id} id={id}
{...props} {...props}
checked={enabled} checked={enabled}
onChange={setEnabled} onChange={setEnabled}
className={`${ className={`${
enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-primaryDark' enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
} }
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`} relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
> >

4
src/components/templates/PrimaryTemplate.tsx
View File

@ -16,7 +16,7 @@ export const PrimaryTemplate = ({
footer, footer,
}: PrimaryTemplateProps): JSX.Element => { }: PrimaryTemplateProps): JSX.Element => {
return ( return (
<div className="flex flex-col flex-auto min-w-0"> <div className="flex flex-col flex-auto h-full min-w-0">
<div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark"> <div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{button && <div className="pr-2 m-auto md:hidden">{button}</div>} {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
@ -32,7 +32,7 @@ export const PrimaryTemplate = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark overflow-y-auto"> <div className="flex-auto flex-grow p-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
{children} {children}
</div> </div>
{footer && ( {footer && (

4
src/pages/Nodes/Index.tsx
View File

@ -89,9 +89,9 @@ export const Nodes = (): JSX.Element => {
</Tab.List> </Tab.List>
</Drawer> </Drawer>
<div className="w-full"> <div className="w-full">
<Tab.Panels> <Tab.Panels className="h-full">
{nodes.map((node) => ( {nodes.map((node) => (
<Tab.Panel key={node.num}> <Tab.Panel className="h-full" key={node.num}>
<Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} /> <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
</Tab.Panel> </Tab.Panel>
))} ))}

25
src/pages/Nodes/Node.tsx
View File

@ -2,10 +2,13 @@ import React from 'react';
import moment from 'moment'; import moment from 'moment';
import { Card } from '@app/components/generic/Card';
import { Chart } from '@app/components/generic/Chart'; import { Chart } from '@app/components/generic/Chart';
import { Input } from '@app/components/generic/Input';
import { Toggle } from '@app/components/generic/Toggle';
import { Button } from '@components/generic/Button'; import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon } from '@heroicons/react/outline'; import { MenuIcon, PuzzleIcon } from '@heroicons/react/outline';
import type { Protobuf } from '@meshtastic/meshtasticjs'; import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface NodeProps { export interface NodeProps {
@ -29,7 +32,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
/> />
} }
> >
<div className="w-full space-y-2"> <div className="w-full space-y-4">
<Chart <Chart
title="Visitors Overview" title="Visitors Overview"
description="Number of unique visitors" description="Number of unique visitors"
@ -143,6 +146,24 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
}, },
]} ]}
/> />
<Card
title="Settings"
description="Remote node settings"
lgPlaceholder={
<div className="w-full h-full text-black dark:text-white">
<PuzzleIcon className="w-24 h-24 m-auto" />
<div className="text-center">Placeholder</div>
</div>
}
>
<div className="p-10">
<form className="space-y-4">
<Input label={'Device Name'} />
<Input label={'Short Name'} maxLength={3} />
<Toggle label="Licenced Operator?" />
</form>
</div>
</Card>
</div> </div>
</PrimaryTemplate> </PrimaryTemplate>
); );

Write Preview
Loading…
Cancel
Save