From 3dce57a65719c812e6d687688604ea5fce25cd03 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Sat, 8 Oct 2022 21:54:04 +1030 Subject: [PATCH] Fix MGRS font size, make info page tabbed --- package.json | 1 + pnpm-lock.yaml | 86 +++++++++++++++++++++-- src/components/Widgets/PositionWidget.tsx | 2 +- src/pages/Info.tsx | 50 ++++++++++--- 4 files changed, 123 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index c8857fd0..7bc4869e 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "react-hot-toast": "^2.4.0", "react-icons": "^4.4.0", "react-json-pretty": "^2.2.0", + "react-json-tree": "^0.17.0", "react-map-gl": "^7.0.19", "react-qrcode-logo": "^2.8.0", "rfc4648": "^1.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4625e7ec..47824e5f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,7 @@ specifiers: react-hot-toast: ^2.4.0 react-icons: ^4.4.0 react-json-pretty: ^2.2.0 + react-json-tree: ^0.17.0 react-map-gl: ^7.0.19 react-qrcode-logo: ^2.8.0 rfc4648: ^1.5.2 @@ -73,6 +74,7 @@ dependencies: react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y react-icons: 4.4.0_react@18.2.0 react-json-pretty: 2.2.0_biqbaboplfbrettd7655fr4n2y + react-json-tree: 0.17.0_iapumuv4e6jcjznwuxpf4tt22e react-map-gl: 7.0.19_6eczaga5xxiwzxtfiyk6fioasq react-qrcode-logo: 2.8.0_biqbaboplfbrettd7655fr4n2y rfc4648: 1.5.2 @@ -341,6 +343,13 @@ packages: '@babel/types': 7.19.3 dev: true + /@babel/runtime/7.19.0: + resolution: {integrity: sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.13.9 + dev: false + /@babel/template/7.18.10: resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==} engines: {node: '>=6.9.0'} @@ -803,6 +812,10 @@ packages: tailwindcss: 3.1.8_postcss@8.4.17 dev: false + /@types/base16/1.0.2: + resolution: {integrity: sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg==} + dev: false + /@types/chrome/0.0.197: resolution: {integrity: sha512-m1NfS5bOjaypyqQfaX6CxmJodZVcvj5+Mt/K94EBHkflYjPNmXHAzbxfifdLMa0YM3PDyOxohoTS5ug/e6p5jA==} dependencies: @@ -840,6 +853,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: false + /@types/lodash/4.14.186: + resolution: {integrity: sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==} + dev: false + /@types/mapbox-gl/2.7.6: resolution: {integrity: sha512-EPIfNO7WApXaFM7DuJBj+kpXmqffqJHMJ3Q9gbV/nNL23XHR0PC5CCDYbAFa4tKErm0xJd9C5kPLF6KvA/cRcA==} dependencies: @@ -872,7 +889,6 @@ packages: /@types/prop-types/15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - dev: true /@types/react-dom/18.0.6: resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==} @@ -886,11 +902,9 @@ packages: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 csstype: 3.1.1 - dev: true /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: true /@types/w3c-web-serial/1.0.3: resolution: {integrity: sha512-R4J/OjqKAUFQoXVIkaUTfzb/sl6hLh/ZhDTfowJTRMa7LhgEmI/jXV4zsL1u8HpNa853BxwNmDIr0pauizzwSQ==} @@ -1221,6 +1235,10 @@ packages: /balanced-match/1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + /base16/1.0.0: + resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==} + dev: false + /base64-js/1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -1372,7 +1390,6 @@ packages: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: color-name: 1.1.3 - dev: true /color-convert/2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} @@ -1382,11 +1399,24 @@ packages: /color-name/1.1.3: resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} - dev: true /color-name/1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + /color-string/1.9.1: + resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} + dependencies: + color-name: 1.1.4 + simple-swizzle: 0.2.2 + dev: false + + /color/3.2.1: + resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==} + dependencies: + color-convert: 1.9.3 + color-string: 1.9.1 + dev: false + /commander/7.2.0: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} @@ -1424,7 +1454,6 @@ packages: /csstype/3.1.1: resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} - dev: true /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} @@ -2530,6 +2559,10 @@ packages: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} dev: true + /is-arrayish/0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + dev: false + /is-bigint/1.0.4: resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==} dependencies: @@ -2802,6 +2835,10 @@ packages: resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} dev: false + /lodash.curry/4.1.1: + resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==} + dev: false + /lodash.isequal/4.5.0: resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} dev: false @@ -3353,6 +3390,18 @@ packages: resolution: {integrity: sha512-1XGObUh7RN5b58vKuAsrlfqT+Rc4vmw8N4pP9gFCq1GFlTdV0Ex/D2Ro1Drvrqj++HPi3ig0Np17XPslELeMRA==} dev: true + /react-base16-styling/0.9.1: + resolution: {integrity: sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==} + dependencies: + '@babel/runtime': 7.19.0 + '@types/base16': 1.0.2 + '@types/lodash': 4.14.186 + base16: 1.0.0 + color: 3.2.1 + csstype: 3.1.1 + lodash.curry: 4.1.1 + dev: false + /react-dom/18.2.0_react@18.2.0: resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -3409,6 +3458,21 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /react-json-tree/0.17.0_iapumuv4e6jcjznwuxpf4tt22e: + resolution: {integrity: sha512-hcWjibI/fAvsKnfYk+lka5OrE1Lvb1jH5pSnFhIU5T8cCCxB85r6h/NOzDPggSSgErjmx4rl3+2EkeclIKBOhg==} + peerDependencies: + '@types/react': ^16.3.0 || ^17.0.0 || ^18.0.0 + react: ^16.3.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.19.0 + '@types/lodash': 4.14.186 + '@types/prop-types': 15.7.5 + '@types/react': 18.0.21 + prop-types: 15.8.1 + react: 18.2.0 + react-base16-styling: 0.9.1 + dev: false + /react-map-gl/7.0.19_6eczaga5xxiwzxtfiyk6fioasq: resolution: {integrity: sha512-s3E8aU6BursSDVwzQZbzdDzDRUX4kdfRqZODYvkdDbInr3RzaNdlbhJ5tojXKWOonsxV6wt+Acv9JCaOMKaf0A==} peerDependencies: @@ -3504,6 +3568,10 @@ packages: dependencies: picomatch: 2.3.1 + /regenerator-runtime/0.13.9: + resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} + dev: false + /regexp.prototype.flags/1.4.3: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} engines: {node: '>= 0.4'} @@ -3693,6 +3761,12 @@ packages: - supports-color dev: true + /simple-swizzle/0.2.2: + resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + dependencies: + is-arrayish: 0.3.2 + dev: false + /simple-zstd/1.4.0: resolution: {integrity: sha512-9zBNnu7MkwRiZm7voFUX7ehCcLO2d1FmJ2RWEVsN8Exw2tVYK9k/0/8WjPUmSmtoHOyoFTkHHaOLuPSwkgFmrA==} dependencies: diff --git a/src/components/Widgets/PositionWidget.tsx b/src/components/Widgets/PositionWidget.tsx index 7d15f224..709244b7 100644 --- a/src/components/Widgets/PositionWidget.tsx +++ b/src/components/Widgets/PositionWidget.tsx @@ -18,7 +18,7 @@ export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {

-

{grid}

+

{grid}

); diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx index e8ec8854..9fc2d897 100644 --- a/src/pages/Info.tsx +++ b/src/pages/Info.tsx @@ -1,18 +1,50 @@ import type React from "react"; -import JSONPretty from "react-json-pretty"; +import { JSONTree } from "react-json-tree"; +import { + TabbedContent, + TabType, +} from "@app/components/layout/page/TabbedContent.js"; import { useDevice } from "@core/providers/useDevice.js"; +import { EyeIcon } from "@heroicons/react/24/outline"; export const InfoPage = (): JSX.Element => { - const { hardware, nodes } = useDevice(); + const { channels, config, moduleConfig, hardware, nodes, waypoints } = + useDevice(); - const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); + const tabs: TabType[] = [ + { + name: "Channels", + icon: , + element: () => , + }, + { + name: "Config", + icon: , + element: () => , + }, + { + name: "Module Config", + icon: , + element: () => , + }, + { + name: "Hardware", + icon: , + element: () => , + }, + { + name: "Nodes", + icon: , + element: () => , + }, + { + name: "Waypoints", + icon: , + element: () => , + }, + ]; - return ( -
- - -
- ); + return ; };