From f9e03929320210f648dc06083757dea485a0688e Mon Sep 17 00:00:00 2001 From: luckmer Date: Mon, 8 Sep 2025 20:02:23 +0200 Subject: [PATCH 01/48] modals --- src/containers/Modals/SelectPortModal.tsx | 89 +++++++++++++++++++++ src/containers/Modals/SelectboardModal.tsx | 76 ++++++++++++++++++ src/containers/Modals/index.tsx | 33 ++------ src/pages/Modals/SelectBoard.tsx | 88 +++++++++++++++++++++ src/pages/Modals/SelectPort.tsx | 91 ++++++++++++++++++++++ 5 files changed, 350 insertions(+), 27 deletions(-) create mode 100644 src/containers/Modals/SelectPortModal.tsx create mode 100644 src/containers/Modals/SelectboardModal.tsx create mode 100644 src/pages/Modals/SelectBoard.tsx create mode 100644 src/pages/Modals/SelectPort.tsx diff --git a/src/containers/Modals/SelectPortModal.tsx b/src/containers/Modals/SelectPortModal.tsx new file mode 100644 index 00000000..2cfe4f3f --- /dev/null +++ b/src/containers/Modals/SelectPortModal.tsx @@ -0,0 +1,89 @@ +import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' +import { IDropdownList } from '@interfaces/interfaces' +import SelectPort from '@pages/Modals/SelectPort' +import { espApi, UsbSerialPortInfo } from '@src/esp/api' +import { DEFAULT_PORT_NAME } from '@src/static' +import { useAppAPIContext } from '@store/context/api' +import { useAppNotificationsContext } from '@store/context/notifications' +import { useAppUIContext } from '@store/context/ui' +import { appWindow } from '@tauri-apps/api/window' +import { createEffect, onCleanup } from 'solid-js' +const SelectPortModal = () => { + const { setActivePortName, activePort, ports, setPorts } = useAppAPIContext() + const { addNotification } = useAppNotificationsContext() + const { modal, setOpenModal } = useAppUIContext() + + const loadPorts = (availablePorts: UsbSerialPortInfo[]) => { + if (ports().length === availablePorts.length) return + + if (!availablePorts.length) { + setActivePortName('', false) + setPorts([]) + return + } + + const portList: IDropdownList[] = availablePorts.map((port) => ({ + label: port.portName, + description: + port?.product && port?.manufacturer + ? `(${port.manufacturer}) ${port.product}` + : `${port.vid}:${port.pid}`, + })) + + if (activePort().autoSelect) { + setActivePortName(portList[0]?.label ?? DEFAULT_PORT_NAME, true) + } + + setPorts(portList) + } + + createEffect(() => { + const interval = setInterval(() => { + espApi + .availablePorts() + .then(loadPorts) + .catch(() => { + addNotification({ + title: 'Failed to load ports', + message: 'Failed to load ports', + type: ENotificationType.ERROR, + }) + }) + }, 250) + + onCleanup(() => clearInterval(interval)) + }) + + return ( + { + switch (action) { + case TITLEBAR_ACTION.MINIMIZE: + appWindow.minimize() + break + case TITLEBAR_ACTION.MAXIMIZE: + appWindow.toggleMaximize() + break + case TITLEBAR_ACTION.CLOSE: + appWindow.close() + break + default: + return + } + }} + onClickClose={() => { + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + onClickConfirmBoard={(port) => { + setActivePortName(port, false) + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + /> + ) +} + +export default SelectPortModal diff --git a/src/containers/Modals/SelectboardModal.tsx b/src/containers/Modals/SelectboardModal.tsx new file mode 100644 index 00000000..297d6e72 --- /dev/null +++ b/src/containers/Modals/SelectboardModal.tsx @@ -0,0 +1,76 @@ +import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' +import { IDropdownList } from '@interfaces/interfaces' +import SelectBoard from '@pages/Modals/SelectBoard' +import { BoardDescription, supportedBoards } from '@src/static' +import { useAppAPIContext } from '@store/context/api' +import { useAppUIContext } from '@store/context/ui' +import { appWindow } from '@tauri-apps/api/window' +import { Accessor, createMemo } from 'solid-js' +import { trace } from 'tauri-plugin-log-api' +const SelectBoardModal = () => { + const { confirmFirmwareSelection, getFirmwareAssets, activeBoard } = useAppAPIContext() + const { modal, setOpenModal } = useAppUIContext() + + const boards: Accessor = createMemo(() => { + return getFirmwareAssets() + .map((item) => { + trace(`${item.name}`) + return { + label: item.name, + description: BoardDescription[item.name.replace('_release', '')] ?? '--', + } + }) + .sort((boardA, boardB) => { + const boardALabel = boardA.label.replace('_release', '') + const boardBLabel = boardB.label.replace('_release', '') + const isBoardARelease = boardA.label.includes('_release') + const isBoardBRelease = boardB.label.includes('_release') + + const boardAIsSupported = supportedBoards.includes(boardALabel) + const boardBIsSupported = supportedBoards.includes(boardBLabel) + + if (boardAIsSupported && boardBIsSupported) { + if (isBoardARelease && !isBoardBRelease) return 1 + if (!isBoardARelease && isBoardBRelease) return -1 + } + + if (boardAIsSupported && !boardBIsSupported) return -1 + if (!boardAIsSupported && boardBIsSupported) return 1 + + return 0 + }) + }) + + return ( + { + switch (action) { + case TITLEBAR_ACTION.MINIMIZE: + appWindow.minimize() + break + case TITLEBAR_ACTION.MAXIMIZE: + appWindow.toggleMaximize() + break + case TITLEBAR_ACTION.CLOSE: + appWindow.close() + break + default: + return + } + }} + onClickClose={() => { + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + onClickConfirmBoard={(board) => { + confirmFirmwareSelection(board) + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + /> + ) +} + +export default SelectBoardModal diff --git a/src/containers/Modals/index.tsx b/src/containers/Modals/index.tsx index 2c98b79a..68930e19 100644 --- a/src/containers/Modals/index.tsx +++ b/src/containers/Modals/index.tsx @@ -1,33 +1,12 @@ -import { MODAL_TYPE } from '@interfaces/enums' -import { useAppUIContext } from '@store/context/ui' -import { Match, Show, Switch } from 'solid-js' -import ApModeContainer from './ApModeModalContainer' -import BeforeFlashingModal from './BeforeFlashingContainer' -import BeforeSelectBoardModal from './BeforeSelectBoardContainer' -import WifiModal from './WifiModalcontainer' +import SelectBoardModal from './SelectboardModal' +import SelectPortModal from './SelectPortModal' export const ModalRoot = () => { - const { modal } = useAppUIContext() - return ( - -
- - - - - - - - - - - - - - -
- + <> + + + ) } diff --git a/src/pages/Modals/SelectBoard.tsx b/src/pages/Modals/SelectBoard.tsx new file mode 100644 index 00000000..1c0c4a4b --- /dev/null +++ b/src/pages/Modals/SelectBoard.tsx @@ -0,0 +1,88 @@ +import DefaultBoard from '@components/Board/DefaultBoard' +import Input from '@components/Inputs/Input' +import { Modal } from '@components/Modal' +import ModalHeader from '@components/ModalHeader' +import Typography from '@components/Typography' +import { TITLEBAR_ACTION } from '@interfaces/enums' +import { IDropdownList } from '@interfaces/interfaces' +import { beforeSelectBoardModalID } from '@src/static' +import { BsSearch } from 'solid-icons/bs' +import { Component, createMemo, createSignal, For, Show } from 'solid-js' + +export interface IProps { + onClickHeader: (action: TITLEBAR_ACTION) => void + onClickConfirmBoard: (board: string) => void + onClickClose: () => void + isActive: boolean + version: string + boards: IDropdownList[] + activeBoard: string +} + +const SelectBoard: Component = (props) => { + const [search, setSearch] = createSignal('') + + const filteredData = createMemo(() => { + return props.boards.filter((el) => el.label.toLowerCase().includes(search().toLowerCase())) + }) + + return ( + { + props.onClickClose() + setSearch('') + }} + onClickHeader={props.onClickHeader}> +
+ { + props.onClickClose() + setSearch('') + }} + /> +
+ + Look for a board + + setSearch(e)} + /> +
+
+ 0} + fallback={ +
+ +
+ }> + + {(data) => ( + { + const el = document.getElementById(beforeSelectBoardModalID) + if (el instanceof HTMLDialogElement) { + el.close() + } + props.onClickConfirmBoard(data.label) + }} + /> + )} + + +
+
+ + ) +} + +export default SelectBoard diff --git a/src/pages/Modals/SelectPort.tsx b/src/pages/Modals/SelectPort.tsx new file mode 100644 index 00000000..3c24dc49 --- /dev/null +++ b/src/pages/Modals/SelectPort.tsx @@ -0,0 +1,91 @@ +import DefaultBoard from '@components/Board/DefaultBoard' +import Input from '@components/Inputs/Input' +import { Modal } from '@components/Modal' +import ModalHeader from '@components/ModalHeader' +import Typography from '@components/Typography' +import { TITLEBAR_ACTION } from '@interfaces/enums' +import { IDropdownList } from '@interfaces/interfaces' +import { beforeSelectBoardModalID, SELECT_PORT_MODAL_ID } from '@src/static' +import { BsSearch } from 'solid-icons/bs' +import { Component, createMemo, createSignal, For, Show } from 'solid-js' + +export interface IProps { + onClickHeader: (action: TITLEBAR_ACTION) => void + onClickConfirmBoard: (board: string) => void + onClickClose: () => void + isActive: boolean + version: string + ports: IDropdownList[] + activeBoard: string +} + +const SelectPort: Component = (props) => { + const [search, setSearch] = createSignal('') + + const filteredData = createMemo(() => { + return props.ports.filter((el) => el.label.toLowerCase().includes(search().toLowerCase())) + }) + + return ( + { + props.onClickClose() + setSearch('') + }} + onClickHeader={props.onClickHeader}> +
+ { + props.onClickClose() + setSearch('') + }} + /> +
+ + Search for a port… + + setSearch(e)} + /> +
+
+ 0} + fallback={ +
+ + + Searching for data + +
+ }> + + {(data) => ( + { + const el = document.getElementById(SELECT_PORT_MODAL_ID) + if (el instanceof HTMLDialogElement) { + el.close() + } + props.onClickConfirmBoard(data.label) + }} + /> + )} + + +
+
+ + ) +} + +export default SelectPort From ca35fa73aa09e914c2c9b93aa06873fdfc7f6e94 Mon Sep 17 00:00:00 2001 From: luckmer Date: Mon, 8 Sep 2025 20:03:40 +0200 Subject: [PATCH 02/48] remove progressbar --- src/components/Header/index.tsx | 41 ++++---------------- src/components/ProgressBar/index.tsx | 42 -------------------- src/components/ProgressBar/styles.css | 16 -------- src/containers/Header/index.tsx | 55 +-------------------------- src/routes/index.tsx | 3 +- src/static/index.ts | 29 +------------- src/static/types/enums.ts | 14 +------ src/store/context/api.tsx | 2 +- 8 files changed, 16 insertions(+), 186 deletions(-) delete mode 100644 src/components/ProgressBar/index.tsx delete mode 100644 src/components/ProgressBar/styles.css diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b4e70a29..d87e98dd 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,5 +1,4 @@ -import HeaderButton from '@components/Buttons/HeaderButton' -import { ProgressBar } from '@components/ProgressBar' +import DefaultButton from '@components/Buttons/DefaultButton' import Typography from '@components/Typography' import { TITLEBAR_ACTION } from '@interfaces/enums' import { classNames } from '@src/utils' @@ -8,9 +7,7 @@ import { Component, Show } from 'solid-js' interface IProps { onClickHome?: () => void onClick: (action: TITLEBAR_ACTION) => void - step?: { step: string; description: string; dashoffset: string; index: string } appVersion?: string - currentStep?: string docs?: boolean } @@ -25,9 +22,7 @@ const Header: Component = (props) => { data-tauri-drag-region>
-
props.onClickHome?.()}> +
= (props) => {
- = (props) => { - - + = (props) => { - - + = (props) => { d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" /> - +
- -
- -
- - {props?.step?.step ?? '0'} - - - {props?.step?.description ?? '--'} - -
-
-
) diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx deleted file mode 100644 index a3f1f2bb..00000000 --- a/src/components/ProgressBar/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import Typography from '@components/Typography' -import { radius } from '@src/static' -import { Component } from 'solid-js' -import './styles.css' - -export interface IProps { - currentStep: string - dashoffset: string -} - -export const ProgressBar: Component = (props) => { - return ( -
-
- - {props.currentStep} - -
- - - - -
- ) -} diff --git a/src/components/ProgressBar/styles.css b/src/components/ProgressBar/styles.css deleted file mode 100644 index 2093b1cb..00000000 --- a/src/components/ProgressBar/styles.css +++ /dev/null @@ -1,16 +0,0 @@ -#svg circle { - transition: stroke-dashoffset 1s linear; - stroke: #192736; -} - -#svg #bar { - stroke: #9092FF; -} - - -.step { -position: absolute; -left: 50%; -top: 50%; -transform: translate(-50%,-50%); -} \ No newline at end of file diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index c5aab5e8..cd138adf 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -1,51 +1,11 @@ import Header from '@components/Header' -import { useLocation, useNavigate } from '@solidjs/router' -import { stepStatus, usb } from '@src/static' -import { DIRECTION, ENotificationType, TITLEBAR_ACTION } from '@src/static/types/enums' -import { useAppAPIContext } from '@store/context/api' -import { useAppNotificationsContext } from '@store/context/notifications' -import { isActiveProcess } from '@store/terminal/selectors' -import { setAbortController } from '@store/terminal/terminal' +import { TITLEBAR_ACTION } from '@src/static/types/enums' import { appWindow } from '@tauri-apps/api/window' -import { createMemo } from 'solid-js' export const HeaderRoot = () => { - const { addNotification } = useAppNotificationsContext() - const { activeBoard } = useAppAPIContext() - - const location = useLocation() - const navigate = useNavigate() - - const isUSBBoardActive = createMemo(() => { - return activeBoard().includes(usb) ? 1 : 0 - }) - - const shouldHideStepIndicator = createMemo(() => { - return typeof stepStatus[DIRECTION[location.pathname]] === 'undefined' - }) - - const computedStepIndex = createMemo(() => { - if (!shouldHideStepIndicator()) { - const index = stepStatus[DIRECTION[location.pathname]]?.index - isUSBBoardActive() - return index <= 0 ? 1 : index - } - return 1 - }) - - const formattedCurrentStep = createMemo(() => { - if (shouldHideStepIndicator()) return undefined - return `${computedStepIndex()}/${Object.values(stepStatus).length - isUSBBoardActive()}` - }) - - const stepDetails = createMemo(() => ({ - ...stepStatus[DIRECTION[location.pathname]], - step: `Step ${computedStepIndex()}`, - })) - return (
{ switch (action) { case TITLEBAR_ACTION.MINIMIZE: @@ -61,19 +21,6 @@ export const HeaderRoot = () => { return } }} - onClickHome={() => { - if (isActiveProcess()) { - addNotification({ - title: 'There is an active installation. Please wait.', - message: 'There is an active installation. Please wait.', - type: ENotificationType.INFO, - }) - return true - } - setAbortController() - navigate('/') - }} - currentStep={formattedCurrentStep()} /> ) } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 678d0622..a975301b 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -5,10 +5,11 @@ const NetworkConfigurator = lazy(() => import('@containers/ManageNetwork')) const BoardConfigurator = lazy(() => import('@containers/ManageBoard')) const FlashFirmware = lazy(() => import('@containers/FlashFirmware')) const page404 = lazy(() => import('@containers/404/[...404]')) +const FlashWizard = lazy(() => import('@containers/FlashWizard')) export const routes: RouteDefinition[] = [ { path: '/flashFirmware', component: FlashFirmware }, { path: '/network', component: NetworkConfigurator }, - { path: '/', component: BoardConfigurator }, + { path: '/', component: FlashWizard }, { path: '**', component: page404 }, ] diff --git a/src/static/index.ts b/src/static/index.ts index ad16e710..c1c8bc81 100644 --- a/src/static/index.ts +++ b/src/static/index.ts @@ -1,5 +1,5 @@ -import { BOARD_TYPE, CHANNEL_TYPE, STEP_STATUS_ENUM } from './types/enums' import { type IChannelOptions } from '@interfaces/interfaces' +import { BOARD_TYPE, CHANNEL_TYPE } from './types/enums' export const supportedBoards: string[] = [BOARD_TYPE.XIAOSENSES_3, BOARD_TYPE.XIAOSENSES_3_USB] export const debugModes: string[] = ['off', 'error', 'warn', 'info', 'debug', 'trace'] @@ -14,6 +14,7 @@ export const logsModalID = 'logs' export const wifiModalID = 'wifiMode' export const beforeFlashingModalID = 'beforeFlashingMode' export const beforeSelectBoardModalID = 'BeforeSelectBoardMode' +export const SELECT_PORT_MODAL_ID = 'SELECT_PORT_MODAL_ID' export const debugModalId = 'debugModal' export const staticMdns = 'openiristracker' export const DEVICE_LOST = 'The device has been lost.' @@ -22,32 +23,6 @@ export const SSID_MISSING = 'ssid missing' export const AP_IP_ADDRESS = 'AP IP address:' export const DEFAULT_PORT_NAME = 'auto' -const circleSize = Math.PI * (radius * 2) - -export const stepStatus: { - [key in STEP_STATUS_ENUM]: { - description: string - dashoffset: string - index: string - } -} = { - [STEP_STATUS_ENUM.SELECT_BOARD]: { - index: '1', - description: 'Select board', - dashoffset: ((105 / 100) * circleSize).toString(), - }, - [STEP_STATUS_ENUM.CONFIGURE_WIFI]: { - index: '2', - description: 'Configure wifi network', - dashoffset: (((105 - 50) / 100) * circleSize).toString(), - }, - [STEP_STATUS_ENUM.FLASH_FIRMWARE]: { - index: '3', - description: 'Flash firmware assets', - dashoffset: (((100 - 100) / 100) * circleSize).toString(), - }, -} - export const BoardDescription: { [key in BOARD_TYPE]: string } = { diff --git a/src/static/types/enums.ts b/src/static/types/enums.ts index 762332ad..dee57252 100644 --- a/src/static/types/enums.ts +++ b/src/static/types/enums.ts @@ -84,18 +84,6 @@ export enum ESPEndpoints { OTA = '/update', } -export enum STEP_STATUS_ENUM { - CONFIGURE_WIFI = 'CONFIGURE_WIFI', - SELECT_BOARD = 'SELECT_BOARD', - FLASH_FIRMWARE = 'FLASH_FIRMWARE', -} - -export enum DIRECTION { - '/' = STEP_STATUS_ENUM.SELECT_BOARD, - '/network' = STEP_STATUS_ENUM.CONFIGURE_WIFI, - '/flashFirmware' = STEP_STATUS_ENUM.FLASH_FIRMWARE, -} - export enum BOARD_TYPE { BABBLE_WROOMS_S3 = 'Babble_wrooms_s3', BABBLE_WROOMS_S3_RELEASE = 'Babble_wrooms_s3_release', @@ -143,6 +131,8 @@ export const enum FLASH_STATUS { } export enum MODAL_TYPE { + SELECT_BOARD = 'SELECT_BOARD', + SELECT_PORT = 'SELECT_PORT', BEFORE_SELECT_BOARD = 'BEFORE_SELECT_BOARD', UPDATE_NETWORK = 'UPDATE_NETWORK', BEFORE_FLASHING = 'BEFORE_FLASHING', diff --git a/src/store/context/api.tsx b/src/store/context/api.tsx index 769a7386..d7a1ebfe 100644 --- a/src/store/context/api.tsx +++ b/src/store/context/api.tsx @@ -117,7 +117,7 @@ export const AppAPIProvider: Component = (props) => { mdns: '', manifestPath: '', activePort: { - activePortName: DEFAULT_PORT_NAME, + activePortName: '', autoSelect: true, }, ports: [], From a9e3e810aa21e3953a64c83245045a9ec08babf9 Mon Sep 17 00:00:00 2001 From: luckmer Date: Mon, 8 Sep 2025 22:08:01 +0200 Subject: [PATCH 03/48] store --- src/Animation/index.tsx | 32 +++++++ .../Modals/BeforeFlashingContainer.tsx | 84 ------------------- ...reFlashingModal.tsx => BeforeFlashing.tsx} | 24 ++++-- src/static/types/enums.ts | 14 ++++ src/store/animation/animation.ts | 53 ++++++++++++ src/store/animation/selectors.ts | 4 + src/store/terminal/selectors.ts | 20 +---- src/store/utils/index.ts | 18 ++++ 8 files changed, 140 insertions(+), 109 deletions(-) create mode 100644 src/Animation/index.tsx delete mode 100644 src/containers/Modals/BeforeFlashingContainer.tsx rename src/pages/Modals/{BeforeFlashingModal.tsx => BeforeFlashing.tsx} (79%) create mode 100644 src/store/animation/animation.ts create mode 100644 src/store/animation/selectors.ts create mode 100644 src/store/utils/index.ts diff --git a/src/Animation/index.tsx b/src/Animation/index.tsx new file mode 100644 index 00000000..bbfe67a1 --- /dev/null +++ b/src/Animation/index.tsx @@ -0,0 +1,32 @@ +import { ACTION } from '@interfaces/enums' +import { setActiveStep, setShowComponent } from '@store/animation/animation' +import { action, activeStep, showComponent, step } from '@store/animation/selectors' +import { createMemo, ParentComponent } from 'solid-js' + +const SwipeAnimation: ParentComponent = (props) => { + const animationClass = createMemo(() => { + if (step() !== activeStep()) { + return action() === ACTION.NEXT ? 'animate-slide-left-exit' : 'animate-slide-right-exit' + } + return action() === ACTION.NEXT ? 'animate-slide-right-enter' : 'animate-slide-left-enter' + }) + + const handleAnimationEnd = () => { + if (step() !== activeStep()) { + setActiveStep(step()) + setShowComponent(true) + } + } + + return ( +
setShowComponent(false)} + style={!showComponent() ? { opacity: '0' } : { opacity: '1' }}> + {props.children} +
+ ) +} + +export default SwipeAnimation diff --git a/src/containers/Modals/BeforeFlashingContainer.tsx b/src/containers/Modals/BeforeFlashingContainer.tsx deleted file mode 100644 index 23f5c413..00000000 --- a/src/containers/Modals/BeforeFlashingContainer.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' -import BeforeFlashingModal from '@pages/Modals/BeforeFlashingModal' -import { usb } from '@src/static' -import { useAppAPIContext } from '@store/context/api' -import { useAppNotificationsContext } from '@store/context/notifications' -import { useAppUIContext } from '@store/context/ui' -import { installOpenIris } from '@store/terminal/actions' -import { isActiveProcess } from '@store/terminal/selectors' -import { - restartFirmwareState, - setAbortController, - setProcessStatus, -} from '@store/terminal/terminal' -import { appWindow } from '@tauri-apps/api/window' -import { createMemo } from 'solid-js' - -const BeforeFlashingContainer = () => { - const { downloadAsset, getFirmwareType, activeBoard, activePort } = useAppAPIContext() - const { modal, setOpenModal, hideModal, setHideModal } = useAppUIContext() - const { addNotification } = useAppNotificationsContext() - - const isUSBBoard = createMemo(() => { - return activeBoard().includes(usb) - }) - - const activePortName = createMemo(() => { - return activePort().activePortName - }) - - return ( - { - switch (action) { - case TITLEBAR_ACTION.MINIMIZE: - appWindow.minimize() - break - case TITLEBAR_ACTION.MAXIMIZE: - appWindow.toggleMaximize() - break - case TITLEBAR_ACTION.CLOSE: - appWindow.close() - break - default: - return - } - }} - onClickClose={() => { - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) - }} - onClickCheckbox={() => { - setHideModal() - }} - onClickInstallOpeniris={() => { - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) - if (isActiveProcess()) { - addNotification({ - title: 'There is an active installation. Please wait.', - message: 'There is an active installation. Please wait.', - type: ENotificationType.INFO, - }) - return true - } - setAbortController('openiris') - setProcessStatus(true) - restartFirmwareState() - installOpenIris( - isUSBBoard(), - activePortName(), - async () => { - await downloadAsset(getFirmwareType()) - }, - () => { - setOpenModal({ open: true, type: MODAL_TYPE.UPDATE_NETWORK }) - }, - ).catch(() => ({})) - }} - /> - ) -} - -export default BeforeFlashingContainer diff --git a/src/pages/Modals/BeforeFlashingModal.tsx b/src/pages/Modals/BeforeFlashing.tsx similarity index 79% rename from src/pages/Modals/BeforeFlashingModal.tsx rename to src/pages/Modals/BeforeFlashing.tsx index 8198b82e..24895c2d 100644 --- a/src/pages/Modals/BeforeFlashingModal.tsx +++ b/src/pages/Modals/BeforeFlashing.tsx @@ -17,7 +17,7 @@ export interface IProps { version: string } -const BeforeFlashingModal: Component = (props) => { +const BeforeFlashing: Component = (props) => { return ( = (props) => { checked={props.checked} label="Don’t show this again" /> - + ) +} + +export default PrimaryButton diff --git a/src/components/Buttons/SelectButton/index.tsx b/src/components/Buttons/SelectButton/index.tsx index 41735c3f..e870efc0 100644 --- a/src/components/Buttons/SelectButton/index.tsx +++ b/src/components/Buttons/SelectButton/index.tsx @@ -1,24 +1,26 @@ import Typography from '@components/Typography' -import { Component } from 'solid-js' +import { Component, Show } from 'solid-js' export interface IProps { type?: 'submit' | 'reset' | 'button' | undefined label: string onClick?: () => void tabIndex?: number - header: string + header?: string } export const SelectButton: Component = (props) => { return (
- - {props.header} - + + + {props.header} + +
+ + ) +} + +export default Card diff --git a/src/components/Dropdown/PortDropdown/index.tsx b/src/components/Dropdown/PortDropdown/index.tsx index cf9ed86a..de989ded 100644 --- a/src/components/Dropdown/PortDropdown/index.tsx +++ b/src/components/Dropdown/PortDropdown/index.tsx @@ -16,7 +16,7 @@ export interface IProps { const PortDropdown: Component = (props) => { return ( - + { + const { downloadAsset, getFirmwareType, activeBoard, activePort } = useAppAPIContext() + const { modal, setOpenModal, hideModal, setHideModal } = useAppUIContext() + const { addNotification } = useAppNotificationsContext() + + const isUSBBoard = createMemo(() => { + return activeBoard().includes(usb) + }) + + const activePortName = createMemo(() => { + return activePort().activePortName + }) + + return ( + { + switch (action) { + case TITLEBAR_ACTION.MINIMIZE: + appWindow.minimize() + break + case TITLEBAR_ACTION.MAXIMIZE: + appWindow.toggleMaximize() + break + case TITLEBAR_ACTION.CLOSE: + appWindow.close() + break + default: + return + } + }} + onClickClose={() => { + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + onClickCheckbox={() => { + setHideModal() + }} + onClickInstallOpeniris={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(FLASH_WIZARD_STEPS.FLASH_PROCESS) + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }) + if (isActiveProcess()) { + addNotification({ + title: 'There is an active installation. Please wait.', + message: 'There is an active installation. Please wait.', + type: ENotificationType.INFO, + }) + return true + } + setAbortController('openiris') + setProcessStatus(true) + restartFirmwareState() + installOpenIris( + isUSBBoard(), + activePortName(), + async () => { + await downloadAsset(getFirmwareType()) + }, + () => { + setOpenModal({ open: true, type: MODAL_TYPE.UPDATE_NETWORK }) + }, + ).catch(() => ({})) + }} + /> + ) +} + +export default BeforeFlashingModal diff --git a/src/containers/Modals/index.tsx b/src/containers/Modals/index.tsx index 68930e19..26084c96 100644 --- a/src/containers/Modals/index.tsx +++ b/src/containers/Modals/index.tsx @@ -1,3 +1,4 @@ +import BeforeFlashingModal from './BeforeFlashingModal' import SelectBoardModal from './SelectboardModal' import SelectPortModal from './SelectPortModal' @@ -6,6 +7,7 @@ export const ModalRoot = () => { <> + ) } diff --git a/src/pages/Modals/SelectBoard.tsx b/src/pages/Modals/SelectBoard.tsx index 1c0c4a4b..b93eef38 100644 --- a/src/pages/Modals/SelectBoard.tsx +++ b/src/pages/Modals/SelectBoard.tsx @@ -55,7 +55,7 @@ const SelectBoard: Component = (props) => { onChange={(e) => setSearch(e)} /> -
+
0} fallback={ From 25f104a4346807cfaa5a02871196322c9b16c1d0 Mon Sep 17 00:00:00 2001 From: luckmer Date: Tue, 9 Sep 2025 20:07:52 +0200 Subject: [PATCH 05/48] update modals workflow --- src/components/DevTools/index.tsx | 129 ------------------ src/components/Modal/index.tsx | 16 ++- .../Modals/ApModeModalContainer.tsx | 4 +- src/containers/Modals/BeforeFlashingModal.tsx | 28 ++-- .../Modals/BeforeSelectBoardContainer.tsx | 4 +- src/containers/Modals/DevtoolsModal.tsx | 52 +++++++ src/containers/Modals/SelectPortModal.tsx | 9 +- src/containers/Modals/SelectboardModal.tsx | 63 +++++---- src/containers/Modals/index.tsx | 2 + ...reFlashing.tsx => BeforeFlashingModal.tsx} | 4 +- ...ctBoard.tsx => BeforeSelectBoardModal.tsx} | 4 +- src/pages/Modals/DevtoolsModal.tsx | 77 +++++++++++ .../{SelectBoard.tsx => SelectBoardModal.tsx} | 4 +- .../{SelectPort.tsx => SelectPortModal.tsx} | 6 +- src/static/index.ts | 1 + src/static/types/enums.ts | 5 + 16 files changed, 211 insertions(+), 197 deletions(-) delete mode 100644 src/components/DevTools/index.tsx create mode 100644 src/containers/Modals/DevtoolsModal.tsx rename src/pages/Modals/{BeforeFlashing.tsx => BeforeFlashingModal.tsx} (97%) rename src/pages/Modals/{BeforeSelectBoard.tsx => BeforeSelectBoardModal.tsx} (95%) create mode 100644 src/pages/Modals/DevtoolsModal.tsx rename src/pages/Modals/{SelectBoard.tsx => SelectBoardModal.tsx} (97%) rename src/pages/Modals/{SelectPort.tsx => SelectPortModal.tsx} (95%) diff --git a/src/components/DevTools/index.tsx b/src/components/DevTools/index.tsx deleted file mode 100644 index b918feb5..00000000 --- a/src/components/DevTools/index.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import { SelectButton } from '@components/Buttons/SelectButton' -import Dropdown from '@components/Dropdown/Dropdown' -import DropdownList from '@components/Dropdown/DropdownList' -import Header from '@components/Header' -import ModalHeader from '@components/ModalHeader' -import { type CHANNEL_TYPE, type TITLEBAR_ACTION } from '@interfaces/enums' -import { IDropdownList } from '@interfaces/interfaces' -import { IEventType } from '@interfaces/types' -import theme from '@src/common/theme' -import { debugModalId } from '@src/static' -import { FaSolidGear } from 'solid-icons/fa' -import { type Component, onMount } from 'solid-js' - -export interface IProps { - onClickHeader: (action: TITLEBAR_ACTION) => void - onClickSetChannelMode: (data: string) => void - setDebugMode: (debugMode: string) => void - onClickOpenModal: (id: string) => void - channelOptions: IDropdownList[] - debugModes: IDropdownList[] - channelMode: CHANNEL_TYPE - debugMode: string - version: string -} - -export const Devtools: Component = (props) => { - let debugModeTab: HTMLDivElement | undefined = undefined - let versionTab: HTMLDivElement | undefined = undefined - - onMount(() => { - if (debugModeTab) debugModeTab.style.opacity = '0' - if (versionTab) versionTab.style.opacity = '0' - }) - - return ( -
- - -
-
-
-
-
- - { - const isFocusLost = - event.relatedTarget instanceof HTMLElement && - event.currentTarget.contains(event.relatedTarget) - if (isFocusLost) return - if (debugModeTab) { - debugModeTab.style.opacity = '0' - debugModeTab.style.display = 'none' - } - if (versionTab) { - versionTab.style.opacity = '0' - versionTab.style.display = 'none' - } - }}> - { - if (versionTab) { - versionTab.style.display = 'none' - versionTab.style.opacity = '0' - } - if (debugModeTab) { - debugModeTab.style.display = 'block' - setTimeout(() => { - debugModeTab!.style.opacity = '1' - }, 25) - } - }} - label={!props.debugMode ? 'Select debug mode' : props.debugMode} - /> - { - if (versionTab) { - versionTab!.style.display = 'block' - setTimeout(() => { - versionTab!.style.opacity = '1' - }, 25) - } - if (debugModeTab) { - debugModeTab.style.opacity = '0' - debugModeTab.style.display = 'none' - } - }} - label={props.channelMode} - /> - (debugModeTab = el)} - onClick={(data) => { - props.setDebugMode(data.label) - }} - /> - (versionTab = el)} - activeElement={props.channelMode} - data={props.channelOptions} - tabIndex={1} - onClick={(data) => { - props.onClickSetChannelMode(data.label) - }} - /> - -
-
-
-
-
- ) -} diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 2db8b3b6..ebd45c66 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,6 +1,7 @@ import Header from '@components/Header' import { type TITLEBAR_ACTION } from '@src/static/types/enums' -import { Component, createEffect, JSX } from 'solid-js' +import { classNames } from '@src/utils' +import { Component, createEffect, createMemo, JSX } from 'solid-js' export interface IProps { onClickHeader: (action: TITLEBAR_ACTION) => void @@ -10,6 +11,7 @@ export interface IProps { children: JSX.Element isSending?: boolean version: string + width?: string } export const Modal: Component = (props) => { @@ -22,13 +24,21 @@ export const Modal: Component = (props) => { } }) + const width = createMemo(() => { + return props.width ?? 'w-[500px]' + }) + return (
-
-
+
+
{props.children}
diff --git a/src/containers/Modals/ApModeModalContainer.tsx b/src/containers/Modals/ApModeModalContainer.tsx index 22e4d738..9200f969 100644 --- a/src/containers/Modals/ApModeModalContainer.tsx +++ b/src/containers/Modals/ApModeModalContainer.tsx @@ -8,7 +8,7 @@ import { appWindow } from '@tauri-apps/api/window' import { createEffect, createSignal, onCleanup } from 'solid-js' import { debug } from 'tauri-plugin-log-api' -const ApModeContainer = () => { +const ApModeModalContainer = () => { const { modal, setOpenModal } = useAppUIContext() const { addNotification } = useAppNotificationsContext() const { ssid, password, useRequestHook } = useAppAPIContext() @@ -108,4 +108,4 @@ const ApModeContainer = () => { ) } -export default ApModeContainer +export default ApModeModalContainer diff --git a/src/containers/Modals/BeforeFlashingModal.tsx b/src/containers/Modals/BeforeFlashingModal.tsx index eb64c053..3ef5b4f2 100644 --- a/src/containers/Modals/BeforeFlashingModal.tsx +++ b/src/containers/Modals/BeforeFlashingModal.tsx @@ -5,8 +5,7 @@ import { MODAL_TYPE, TITLEBAR_ACTION, } from '@interfaces/enums' -import BeforeFlashing from '@pages/Modals/BeforeFlashing' -import { usb } from '@src/static' +import BeforeFlashingModal from '@pages/Modals/BeforeFlashingModal' import { setAction, setStep } from '@store/animation/animation' import { useAppAPIContext } from '@store/context/api' import { useAppNotificationsContext } from '@store/context/notifications' @@ -21,21 +20,17 @@ import { import { appWindow } from '@tauri-apps/api/window' import { batch, createMemo } from 'solid-js' -const BeforeFlashingModal = () => { - const { downloadAsset, getFirmwareType, activeBoard, activePort } = useAppAPIContext() +const BeforeFlashingModalContainer = () => { + const { downloadAsset, getFirmwareType, activePort } = useAppAPIContext() const { modal, setOpenModal, hideModal, setHideModal } = useAppUIContext() const { addNotification } = useAppNotificationsContext() - const isUSBBoard = createMemo(() => { - return activeBoard().includes(usb) - }) - const activePortName = createMemo(() => { return activePort().activePortName }) return ( - { setAbortController('openiris') setProcessStatus(true) restartFirmwareState() - installOpenIris( - isUSBBoard(), - activePortName(), - async () => { - await downloadAsset(getFirmwareType()) - }, - () => { - setOpenModal({ open: true, type: MODAL_TYPE.UPDATE_NETWORK }) - }, - ).catch(() => ({})) + installOpenIris(activePortName(), async () => { + await downloadAsset(getFirmwareType()) + }).catch(() => ({})) }} /> ) } -export default BeforeFlashingModal +export default BeforeFlashingModalContainer diff --git a/src/containers/Modals/BeforeSelectBoardContainer.tsx b/src/containers/Modals/BeforeSelectBoardContainer.tsx index 7c6fbfa1..737e3cf3 100644 --- a/src/containers/Modals/BeforeSelectBoardContainer.tsx +++ b/src/containers/Modals/BeforeSelectBoardContainer.tsx @@ -1,5 +1,5 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' -import BeforeSelectBoard from '@pages/Modals/BeforeSelectBoard' +import BeforeSelectBoardModal from '@pages/Modals/BeforeSelectBoardModal' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { setIsSoftwareDownloaded } from '@store/terminal/terminal' @@ -10,7 +10,7 @@ const BeforeSelectBoardContainer = () => { const { modal, setOpenModal } = useAppUIContext() return ( - { diff --git a/src/containers/Modals/DevtoolsModal.tsx b/src/containers/Modals/DevtoolsModal.tsx new file mode 100644 index 00000000..6f41fcf1 --- /dev/null +++ b/src/containers/Modals/DevtoolsModal.tsx @@ -0,0 +1,52 @@ +import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' +import { isValidChannel } from '@interfaces/utils' +import DevtoolsModal from '@pages/Modals/DevtoolsModal' +import { ChannelOptions } from '@src/static' +import { useAppAPIContext } from '@store/context/api' +import { useAppUIContext } from '@store/context/ui' +import { appWindow } from '@tauri-apps/api/window' + +const DevtoolsModalContainer = () => { + const { modal, setOpenModal, hideModal } = useAppUIContext() + const { channelMode, setChannelMode } = useAppAPIContext() + + return ( + { + switch (action) { + case TITLEBAR_ACTION.MINIMIZE: + appWindow.minimize() + break + case TITLEBAR_ACTION.MAXIMIZE: + appWindow.toggleMaximize() + break + case TITLEBAR_ACTION.CLOSE: + appWindow.close() + break + default: + return + } + }} + onClickClose={() => { + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + }} + onClickSetChannelMode={(label) => { + if (!isValidChannel(label)) { + return + } + const elem: Element | null = document.activeElement + setChannelMode(label) + if (elem instanceof HTMLElement) { + elem?.blur() + } + }} + /> + ) +} + +export default DevtoolsModalContainer diff --git a/src/containers/Modals/SelectPortModal.tsx b/src/containers/Modals/SelectPortModal.tsx index 2cfe4f3f..c4e60c6f 100644 --- a/src/containers/Modals/SelectPortModal.tsx +++ b/src/containers/Modals/SelectPortModal.tsx @@ -1,6 +1,6 @@ import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' -import SelectPort from '@pages/Modals/SelectPort' +import SelectPortModal from '@pages/Modals/SelectPortModal' import { espApi, UsbSerialPortInfo } from '@src/esp/api' import { DEFAULT_PORT_NAME } from '@src/static' import { useAppAPIContext } from '@store/context/api' @@ -8,7 +8,8 @@ import { useAppNotificationsContext } from '@store/context/notifications' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' import { createEffect, onCleanup } from 'solid-js' -const SelectPortModal = () => { + +const SelectPortModalContainer = () => { const { setActivePortName, activePort, ports, setPorts } = useAppAPIContext() const { addNotification } = useAppNotificationsContext() const { modal, setOpenModal } = useAppUIContext() @@ -55,7 +56,7 @@ const SelectPortModal = () => { }) return ( - { ) } -export default SelectPortModal +export default SelectPortModalContainer diff --git a/src/containers/Modals/SelectboardModal.tsx b/src/containers/Modals/SelectboardModal.tsx index 297d6e72..4eb3d8dc 100644 --- a/src/containers/Modals/SelectboardModal.tsx +++ b/src/containers/Modals/SelectboardModal.tsx @@ -1,48 +1,55 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' -import SelectBoard from '@pages/Modals/SelectBoard' +import SelectBoardModal from '@pages/Modals/SelectBoardModal' +import SelectBoard from '@pages/Modals/SelectBoardModal' import { BoardDescription, supportedBoards } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' -import { Accessor, createMemo } from 'solid-js' +import { Accessor, createEffect, createMemo } from 'solid-js' import { trace } from 'tauri-plugin-log-api' -const SelectBoardModal = () => { +const SelectBoardModalContainer = () => { const { confirmFirmwareSelection, getFirmwareAssets, activeBoard } = useAppAPIContext() const { modal, setOpenModal } = useAppUIContext() const boards: Accessor = createMemo(() => { - return getFirmwareAssets() - .map((item) => { - trace(`${item.name}`) - return { - label: item.name, - description: BoardDescription[item.name.replace('_release', '')] ?? '--', - } - }) - .sort((boardA, boardB) => { - const boardALabel = boardA.label.replace('_release', '') - const boardBLabel = boardB.label.replace('_release', '') - const isBoardARelease = boardA.label.includes('_release') - const isBoardBRelease = boardB.label.includes('_release') + return [ + { + label: 'xiaosenses3_USB', + description: "SeedStudio's XIAO ESP32-S3 Sense (wired mode)", + }, + ] + // return getFirmwareAssets() + // .map((item) => { + // trace(`${item.name}`) + // return { + // label: item.name, + // description: BoardDescription[item.name.replace('_release', '')] ?? '--', + // } + // }) + // .sort((boardA, boardB) => { + // const boardALabel = boardA.label.replace('_release', '') + // const boardBLabel = boardB.label.replace('_release', '') + // const isBoardARelease = boardA.label.includes('_release') + // const isBoardBRelease = boardB.label.includes('_release') - const boardAIsSupported = supportedBoards.includes(boardALabel) - const boardBIsSupported = supportedBoards.includes(boardBLabel) + // const boardAIsSupported = supportedBoards.includes(boardALabel) + // const boardBIsSupported = supportedBoards.includes(boardBLabel) - if (boardAIsSupported && boardBIsSupported) { - if (isBoardARelease && !isBoardBRelease) return 1 - if (!isBoardARelease && isBoardBRelease) return -1 - } + // if (boardAIsSupported && boardBIsSupported) { + // if (isBoardARelease && !isBoardBRelease) return 1 + // if (!isBoardARelease && isBoardBRelease) return -1 + // } - if (boardAIsSupported && !boardBIsSupported) return -1 - if (!boardAIsSupported && boardBIsSupported) return 1 + // if (boardAIsSupported && !boardBIsSupported) return -1 + // if (!boardAIsSupported && boardBIsSupported) return 1 - return 0 - }) + // return 0 + // }) }) return ( - { ) } -export default SelectBoardModal +export default SelectBoardModalContainer diff --git a/src/containers/Modals/index.tsx b/src/containers/Modals/index.tsx index 26084c96..840b03e3 100644 --- a/src/containers/Modals/index.tsx +++ b/src/containers/Modals/index.tsx @@ -1,4 +1,5 @@ import BeforeFlashingModal from './BeforeFlashingModal' +import DevtoolsModal from './DevtoolsModal' import SelectBoardModal from './SelectboardModal' import SelectPortModal from './SelectPortModal' @@ -8,6 +9,7 @@ export const ModalRoot = () => { + ) } diff --git a/src/pages/Modals/BeforeFlashing.tsx b/src/pages/Modals/BeforeFlashingModal.tsx similarity index 97% rename from src/pages/Modals/BeforeFlashing.tsx rename to src/pages/Modals/BeforeFlashingModal.tsx index 24895c2d..649ce68d 100644 --- a/src/pages/Modals/BeforeFlashing.tsx +++ b/src/pages/Modals/BeforeFlashingModal.tsx @@ -17,7 +17,7 @@ export interface IProps { version: string } -const BeforeFlashing: Component = (props) => { +const BeforeFlashingModal: Component = (props) => { return ( = (props) => { ) } -export default BeforeFlashing +export default BeforeFlashingModal diff --git a/src/pages/Modals/BeforeSelectBoard.tsx b/src/pages/Modals/BeforeSelectBoardModal.tsx similarity index 95% rename from src/pages/Modals/BeforeSelectBoard.tsx rename to src/pages/Modals/BeforeSelectBoardModal.tsx index b388ea4a..d5b6be3a 100644 --- a/src/pages/Modals/BeforeSelectBoard.tsx +++ b/src/pages/Modals/BeforeSelectBoardModal.tsx @@ -14,7 +14,7 @@ export interface IProps { version: string } -const BeforeSelectBoard: Component = (props) => { +const BeforeSelectBoardModal: Component = (props) => { return ( = (props) => { ) } -export default BeforeSelectBoard +export default BeforeSelectBoardModal diff --git a/src/pages/Modals/DevtoolsModal.tsx b/src/pages/Modals/DevtoolsModal.tsx new file mode 100644 index 00000000..896dc93c --- /dev/null +++ b/src/pages/Modals/DevtoolsModal.tsx @@ -0,0 +1,77 @@ +import SelectButton from '@components/Buttons/SelectButton' +import Dropdown from '@components/Dropdown/Dropdown' +import DropdownList from '@components/Dropdown/DropdownList' +import { Modal } from '@components/Modal' +import ModalHeader from '@components/ModalHeader' +import { CHANNEL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' +import { IDropdownList } from '@interfaces/interfaces' +import { IEventType } from '@interfaces/types' +import { beforeFlashingModalID, DEVTOOLS_MODAL_ID } from '@src/static' +import { Component } from 'solid-js' + +export interface IProps { + onClickHeader: (action: TITLEBAR_ACTION) => void + onClickClose: () => void + onClickSetChannelMode: (option: string) => void + isActive: boolean + checked: boolean + version: string + channelMode: CHANNEL_TYPE + channelOptions?: IDropdownList[] +} + +const DevtoolsModal: Component = (props) => { + let versionTab: HTMLDivElement | undefined = undefined + + return ( + +
+ + { + const isFocusLost = + event.relatedTarget instanceof HTMLElement && + event.currentTarget.contains(event.relatedTarget) + if (isFocusLost) return + + if (versionTab) { + versionTab.style.opacity = '0' + versionTab.style.display = 'none' + } + }}> + { + if (versionTab) { + versionTab!.style.display = 'block' + setTimeout(() => { + versionTab!.style.opacity = '1' + }, 25) + } + }} + label={props.channelMode} + /> + (versionTab = el)} + activeElement={props.channelMode} + data={props.channelOptions ?? []} + tabIndex={1} + onClick={(data) => { + props.onClickSetChannelMode(data.label) + }} + /> + +
+ + ) +} + +export default DevtoolsModal diff --git a/src/pages/Modals/SelectBoard.tsx b/src/pages/Modals/SelectBoardModal.tsx similarity index 97% rename from src/pages/Modals/SelectBoard.tsx rename to src/pages/Modals/SelectBoardModal.tsx index b93eef38..6dcc3f2b 100644 --- a/src/pages/Modals/SelectBoard.tsx +++ b/src/pages/Modals/SelectBoardModal.tsx @@ -19,7 +19,7 @@ export interface IProps { activeBoard: string } -const SelectBoard: Component = (props) => { +const SelectBoardModal: Component = (props) => { const [search, setSearch] = createSignal('') const filteredData = createMemo(() => { @@ -85,4 +85,4 @@ const SelectBoard: Component = (props) => { ) } -export default SelectBoard +export default SelectBoardModal diff --git a/src/pages/Modals/SelectPort.tsx b/src/pages/Modals/SelectPortModal.tsx similarity index 95% rename from src/pages/Modals/SelectPort.tsx rename to src/pages/Modals/SelectPortModal.tsx index 3c24dc49..7aad9355 100644 --- a/src/pages/Modals/SelectPort.tsx +++ b/src/pages/Modals/SelectPortModal.tsx @@ -19,7 +19,7 @@ export interface IProps { activeBoard: string } -const SelectPort: Component = (props) => { +const SelectPortModal: Component = (props) => { const [search, setSearch] = createSignal('') const filteredData = createMemo(() => { @@ -55,7 +55,7 @@ const SelectPort: Component = (props) => { onChange={(e) => setSearch(e)} />
-
+
0} fallback={ @@ -88,4 +88,4 @@ const SelectPort: Component = (props) => { ) } -export default SelectPort +export default SelectPortModal diff --git a/src/static/index.ts b/src/static/index.ts index c1c8bc81..fee8b7bd 100644 --- a/src/static/index.ts +++ b/src/static/index.ts @@ -15,6 +15,7 @@ export const wifiModalID = 'wifiMode' export const beforeFlashingModalID = 'beforeFlashingMode' export const beforeSelectBoardModalID = 'BeforeSelectBoardMode' export const SELECT_PORT_MODAL_ID = 'SELECT_PORT_MODAL_ID' +export const DEVTOOLS_MODAL_ID = 'DEVTOOLS_MODAL_ID' export const debugModalId = 'debugModal' export const staticMdns = 'openiristracker' export const DEVICE_LOST = 'The device has been lost.' diff --git a/src/static/types/enums.ts b/src/static/types/enums.ts index 0d91a8e3..1ba7463c 100644 --- a/src/static/types/enums.ts +++ b/src/static/types/enums.ts @@ -132,6 +132,7 @@ export const enum FLASH_STATUS { export enum MODAL_TYPE { SELECT_BOARD = 'SELECT_BOARD', + DEVTOOLS = 'DEVTOOLS', SELECT_PORT = 'SELECT_PORT', BEFORE_SELECT_BOARD = 'BEFORE_SELECT_BOARD', UPDATE_NETWORK = 'UPDATE_NETWORK', @@ -151,5 +152,9 @@ export enum FLASH_WIZARD_STEPS { SELECT_PORT = 'SELECT_PORT', BEFORE_PROCEEDING = 'BEFORE_PROCEEDING', FLASH_PROCESS = 'FLASH_PROCESS', + FLASH_PROCESS_SUCCESS = 'FLASH_PROCESS_SUCCESS', + BEFORE_CONTINUE_CONFIG = 'BEFORE_CONTINUE_CONFIG', + SELECT_MODE = 'SELECT_MODE', + FLASH_PROCESS_FAILED = 'FLASH_PROCESS_FAILED', SHOW_TERMINAL = 'SHOW_TERMINAL', } From dcc94e76604310864e3f3d9b893f4ce4c9a7b3d9 Mon Sep 17 00:00:00 2001 From: luckmer Date: Thu, 11 Sep 2025 19:06:26 +0200 Subject: [PATCH 06/48] Integrate new steps --- src-tauri/src/lib/esp/src/api.rs | 6 +- src/components/Card/index.tsx | 73 ++++++-- src/components/Inputs/PasswordInput/index.tsx | 2 +- src/containers/FlashFirmware/index.tsx | 13 +- .../FlashWizard/FlashProcessWizard.tsx | 166 +++++++++++++++++ .../FlashWizard/SetupProcessWizard.tsx | 168 ++++++++++++++++++ .../FlashWizard/WiredProcessWizard.tsx | 139 +++++++++++++++ .../FlashWizard/WirelessProcessWizard.tsx | 151 ++++++++++++++++ src/containers/FlashWizard/index.tsx | 59 ++++++ src/containers/Modals/SelectPortModal.tsx | 40 +++-- src/pages/Modals/DevtoolsModal.tsx | 64 ++----- src/static/types/enums.ts | 11 ++ src/static/types/interfaces.ts | 2 + src/store/animation/animation.ts | 7 +- src/store/animation/selectors.ts | 3 +- src/store/context/api.tsx | 30 ++++ src/store/terminal/actions.ts | 59 ++++-- 17 files changed, 891 insertions(+), 102 deletions(-) create mode 100644 src/containers/FlashWizard/FlashProcessWizard.tsx create mode 100644 src/containers/FlashWizard/SetupProcessWizard.tsx create mode 100644 src/containers/FlashWizard/WiredProcessWizard.tsx create mode 100644 src/containers/FlashWizard/WirelessProcessWizard.tsx create mode 100644 src/containers/FlashWizard/index.tsx diff --git a/src-tauri/src/lib/esp/src/api.rs b/src-tauri/src/lib/esp/src/api.rs index 6ab309a3..056b59ec 100644 --- a/src-tauri/src/lib/esp/src/api.rs +++ b/src-tauri/src/lib/esp/src/api.rs @@ -196,7 +196,11 @@ pub fn flash(app: AppHandle, window: Window, port_name: String }) } - let hexed_port_name : String = port_name.as_bytes().iter().map(|byte| format!("{:02x}", byte)).collect(); + let hexed_port_name: String = port_name + .as_bytes() + .iter() + .map(|byte| format!("{:02x}", byte)) + .collect(); flasher.write_bins_to_flash( &rom_segments, diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 14815153..39aef589 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -6,51 +6,90 @@ import { IconTypes } from 'solid-icons' import { IoChevronBackSharp } from 'solid-icons/io' import { ParentComponent, Show } from 'solid-js' import { VsSettings } from 'solid-icons/vs' +import { classNames } from '@src/utils' export interface IProps { onClickSettings?: () => void onClickBack?: () => void onClickSecondary?: () => void onClickPrimary?: () => void + onClickOption?: () => void + onClickOptionLabel?: string label: string icon: IconTypes - description: string - isActive: boolean + description?: string + isLoader?: boolean + isActive?: boolean primaryButtonLabel?: string secondaryButtonLabel?: string + percentageProgress?: number + status?: 'success' | 'fail' } const Card: ParentComponent = (props) => { return (
-
+
{ props.onClickBack?.() }}> - + props.onClickSettings?.()}> - +
-
- +
+ + }> +
- - {props.label} - - - {props.description} - +
+ + {props.label} + + + + {props.percentageProgress}% + + +
+ + + {props.description} + + {props.children}
@@ -60,6 +99,12 @@ const Card: ParentComponent = (props) => { onClick={props.onClickSecondary} /> + +
+
+
+ + { return (
-
+
diff --git a/src/containers/Modals/SelectPortModal.tsx b/src/containers/Modals/SelectPortModal.tsx index 8360a696..763ea613 100644 --- a/src/containers/Modals/SelectPortModal.tsx +++ b/src/containers/Modals/SelectPortModal.tsx @@ -1,17 +1,15 @@ -import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' +import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' import SelectPortModal from '@pages/Modals/SelectPortModal' import { espApi, UsbSerialPortInfo } from '@src/esp/api' import { DEFAULT_PORT_NAME } from '@src/static' import { useAppAPIContext } from '@store/context/api' -import { useAppNotificationsContext } from '@store/context/notifications' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' import { createEffect, createMemo, on, onCleanup } from 'solid-js' const SelectPortModalContainer = () => { const { setActivePortName, activePort, ports, setPorts } = useAppAPIContext() - const { addNotification } = useAppNotificationsContext() const { modal, setOpenModal } = useAppUIContext() const loadPorts = (availablePorts: UsbSerialPortInfo[]) => { @@ -48,13 +46,7 @@ const SelectPortModalContainer = () => { espApi .availablePorts() .then(loadPorts) - .catch(() => { - addNotification({ - title: 'Failed to load ports', - message: 'Failed to load ports', - type: ENotificationType.ERROR, - }) - }) + .catch(() => {}) }, 250) if (!status) { diff --git a/src/containers/Modals/SelectboardModal.tsx b/src/containers/Modals/SelectboardModal.tsx index 4eb3d8dc..b4832bd4 100644 --- a/src/containers/Modals/SelectboardModal.tsx +++ b/src/containers/Modals/SelectboardModal.tsx @@ -1,51 +1,53 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' import SelectBoardModal from '@pages/Modals/SelectBoardModal' -import SelectBoard from '@pages/Modals/SelectBoardModal' import { BoardDescription, supportedBoards } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' -import { Accessor, createEffect, createMemo } from 'solid-js' +import { Accessor, createMemo } from 'solid-js' import { trace } from 'tauri-plugin-log-api' const SelectBoardModalContainer = () => { const { confirmFirmwareSelection, getFirmwareAssets, activeBoard } = useAppAPIContext() const { modal, setOpenModal } = useAppUIContext() const boards: Accessor = createMemo(() => { - return [ - { - label: 'xiaosenses3_USB', - description: "SeedStudio's XIAO ESP32-S3 Sense (wired mode)", - }, - ] - // return getFirmwareAssets() - // .map((item) => { - // trace(`${item.name}`) - // return { - // label: item.name, - // description: BoardDescription[item.name.replace('_release', '')] ?? '--', - // } - // }) - // .sort((boardA, boardB) => { - // const boardALabel = boardA.label.replace('_release', '') - // const boardBLabel = boardB.label.replace('_release', '') - // const isBoardARelease = boardA.label.includes('_release') - // const isBoardBRelease = boardB.label.includes('_release') + if (!getFirmwareAssets().length) { + return [ + { + label: 'xiaosenses3_USB', + description: "SeedStudio's XIAO ESP32-S3 Sense (wired mode)", + }, + ] + } - // const boardAIsSupported = supportedBoards.includes(boardALabel) - // const boardBIsSupported = supportedBoards.includes(boardBLabel) + return getFirmwareAssets() + .map((item) => { + trace(`${item.name}`) + return { + label: item.name, + description: BoardDescription[item.name.replace('_release', '')] ?? '--', + } + }) + .sort((boardA, boardB) => { + const boardALabel = boardA.label.replace('_release', '') + const boardBLabel = boardB.label.replace('_release', '') + const isBoardARelease = boardA.label.includes('_release') + const isBoardBRelease = boardB.label.includes('_release') + + const boardAIsSupported = supportedBoards.includes(boardALabel) + const boardBIsSupported = supportedBoards.includes(boardBLabel) - // if (boardAIsSupported && boardBIsSupported) { - // if (isBoardARelease && !isBoardBRelease) return 1 - // if (!isBoardARelease && isBoardBRelease) return -1 - // } + if (boardAIsSupported && boardBIsSupported) { + if (isBoardARelease && !isBoardBRelease) return 1 + if (!isBoardARelease && isBoardBRelease) return -1 + } - // if (boardAIsSupported && !boardBIsSupported) return -1 - // if (!boardAIsSupported && boardBIsSupported) return 1 + if (boardAIsSupported && !boardBIsSupported) return -1 + if (!boardAIsSupported && boardBIsSupported) return 1 - // return 0 - // }) + return 0 + }) }) return ( diff --git a/src/static/types/enums.ts b/src/static/types/enums.ts index de86c1d6..f54d546f 100644 --- a/src/static/types/enums.ts +++ b/src/static/types/enums.ts @@ -158,6 +158,7 @@ export enum FLASH_WIZARD_STEPS { SELECT_MODE = 'SELECT_MODE', FLASH_PROCESS_FAILED = 'FLASH_PROCESS_FAILED', SETUP_TRACKER_NAME = 'SETUP_TRACKER_NAME', + SELECT_NETWORK = 'SELECT_NETWORK', FLASH_WIRED_PROCESS = 'FLASH_WIRED_PROCESS', FLASH_WIRED_PROCESS_FAILED = 'FLASH_WIRED_PROCESS_FAILED', FLASH_WIRED_PROCESS_SUCCESS = 'FLASH_WIRED_PROCESS_SUCCESS', diff --git a/src/store/animation/animation.ts b/src/store/animation/animation.ts index c78af19b..e6ca4b97 100644 --- a/src/store/animation/animation.ts +++ b/src/store/animation/animation.ts @@ -11,9 +11,9 @@ export interface IAnimationState { } const defaultState: IAnimationState = { - step: FLASH_WIZARD_STEPS.INIT, - activeStep: FLASH_WIZARD_STEPS.INIT, - prevStep: FLASH_WIZARD_STEPS.INIT, + step: FLASH_WIZARD_STEPS.SELECT_NETWORK, + activeStep: FLASH_WIZARD_STEPS.SELECT_NETWORK, + prevStep: FLASH_WIZARD_STEPS.SELECT_NETWORK, action: ACTION.NEXT, showComponent: true, } From 6110b19dc461a931a307d7f22d2b31093bc69b75 Mon Sep 17 00:00:00 2001 From: luckmer Date: Wed, 17 Sep 2025 20:31:38 +0200 Subject: [PATCH 11/48] get possible networks --- src-tauri/Cargo.lock | 1 + src-tauri/Cargo.toml | 4 +-- src-tauri/src/lib/esp/Cargo.toml | 1 + src-tauri/src/lib/esp/src/api.rs | 55 ++++++++++++++++++++++++++++++-- src-tauri/src/lib/esp/src/lib.rs | 3 +- 5 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 568717eb..c0790bd3 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -5129,6 +5129,7 @@ dependencies = [ "serialport", "tauri", "thiserror 1.0.69", + "tokio", ] [[package]] diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 7709e215..a8abe8ee 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -68,9 +68,7 @@ branch = "v1" [dependencies.tokio] version = "1" -features = [ - "full", -] +features = ["full"] [workspace] members = [ diff --git a/src-tauri/src/lib/esp/Cargo.toml b/src-tauri/src/lib/esp/Cargo.toml index 0617a461..8b60949d 100644 --- a/src-tauri/src/lib/esp/Cargo.toml +++ b/src-tauri/src/lib/esp/Cargo.toml @@ -13,3 +13,4 @@ tauri = { workspace = true } log = { workspace = true } serialport = { version = "4.5.0", features = ["serde"] } espflash = { version = "3.1.1", default-features = false, features = ["serialport"] } +tokio = "1.47.1" diff --git a/src-tauri/src/lib/esp/src/api.rs b/src-tauri/src/lib/esp/src/api.rs index ef1b60a3..639e5676 100644 --- a/src-tauri/src/lib/esp/src/api.rs +++ b/src-tauri/src/lib/esp/src/api.rs @@ -289,6 +289,8 @@ pub enum Command { SwitchMode { mode: String }, GetMdnsName, GetDeviceMode, + ScanNetworks, + Pause { pause: bool }, } #[derive(Debug, Serialize)] @@ -297,9 +299,7 @@ struct CommandsOperation { } #[command] - pub fn send_commands(port_name: String, commands: Vec) -> Result { - // Otwieramy port szeregowy let serial_port = serialport::new(port_name, 115_200) .flow_control(FlowControl::None) .timeout(Duration::from_millis(100)) @@ -359,9 +359,58 @@ pub fn send_commands(port_name: String, commands: Vec) -> Result result, Err(_) => Err("Operation timed out".to_string()), } } + +#[command] +pub async fn get_possible_networks( + port_name: String, + commands: Vec, +) -> Result { + let operation = CommandsOperation { commands }; + let payload = serde_json::to_string(&operation).map_err(|e| e.to_string())? + "\n"; + + tauri::async_runtime::spawn_blocking(move || { + let mut serial_port = serialport::new(port_name, 115_200) + .flow_control(FlowControl::None) + .timeout(Duration::from_millis(100)) + .open_native() + .map_err(|e| e.to_string())?; + + serial_port + .write_all(payload.as_bytes()) + .map_err(|e| e.to_string())?; + serial_port.flush().map_err(|e| e.to_string())?; + + log::debug!("{:?}", serde_json::to_string(&operation)); + + let start_time = std::time::Instant::now(); + let mut buffer = Vec::new(); + + while start_time.elapsed() < Duration::from_secs(30) { + match serial_port.bytes_to_read() { + Ok(bytes_available) if bytes_available > 0 => { + let mut chunk = vec![0u8; bytes_available as usize]; + if serial_port.read_exact(&mut chunk).is_ok() { + buffer.extend_from_slice(&chunk); + + let response = String::from_utf8_lossy(&buffer).trim().to_string(); + if response.contains("Networks scanned") { + return Ok(response); + } + } + } + _ => { + std::thread::sleep(Duration::from_millis(250)); + } + } + } + + Err("Operation timed out".to_string()) + }) + .await + .map_err(|e| e.to_string())? +} diff --git a/src-tauri/src/lib/esp/src/lib.rs b/src-tauri/src/lib/esp/src/lib.rs index 03a1288f..83d6cc87 100644 --- a/src-tauri/src/lib/esp/src/lib.rs +++ b/src-tauri/src/lib/esp/src/lib.rs @@ -20,7 +20,8 @@ pub fn init() -> TauriPlugin { flash, stream_logs, cancel_stream_logs, - send_commands + send_commands, + get_possible_networks ]) .setup(move |app| { app.manage(Mutex::new(EspState { From 239d0c50a918afe6f19f9f458afe6286f923518f Mon Sep 17 00:00:00 2001 From: luckmer Date: Wed, 17 Sep 2025 20:35:49 +0200 Subject: [PATCH 12/48] wireless initial integration --- src/Animation/index.tsx | 8 +- src/components/{ => Cards}/Card/index.tsx | 0 src/components/Cards/NetworkCard/index.tsx | 98 +++++++++++++++++++ .../FlashWizard/FlashProcessWizard.tsx | 2 +- .../FlashWizard/SetupProcessWizard.tsx | 8 +- .../FlashWizard/WiredProcessWizard.tsx | 2 +- .../FlashWizard/WirelessProcessWizard.tsx | 95 +++--------------- src/esp/api.ts | 40 +++++++- src/static/types/interfaces.ts | 1 + src/store/animation/animation.ts | 6 +- src/store/context/api.tsx | 5 +- 11 files changed, 168 insertions(+), 97 deletions(-) rename src/components/{ => Cards}/Card/index.tsx (100%) create mode 100644 src/components/Cards/NetworkCard/index.tsx diff --git a/src/Animation/index.tsx b/src/Animation/index.tsx index bbfe67a1..85de3e51 100644 --- a/src/Animation/index.tsx +++ b/src/Animation/index.tsx @@ -6,9 +6,13 @@ import { createMemo, ParentComponent } from 'solid-js' const SwipeAnimation: ParentComponent = (props) => { const animationClass = createMemo(() => { if (step() !== activeStep()) { - return action() === ACTION.NEXT ? 'animate-slide-left-exit' : 'animate-slide-right-exit' + return action() === ACTION.NEXT + ? 'animate-slide-left-exit w-full' + : 'animate-slide-right-exit w-full' } - return action() === ACTION.NEXT ? 'animate-slide-right-enter' : 'animate-slide-left-enter' + return action() === ACTION.NEXT + ? 'animate-slide-right-enter w-full' + : 'animate-slide-left-enter w-full' }) const handleAnimationEnd = () => { diff --git a/src/components/Card/index.tsx b/src/components/Cards/Card/index.tsx similarity index 100% rename from src/components/Card/index.tsx rename to src/components/Cards/Card/index.tsx diff --git a/src/components/Cards/NetworkCard/index.tsx b/src/components/Cards/NetworkCard/index.tsx new file mode 100644 index 00000000..c9615024 --- /dev/null +++ b/src/components/Cards/NetworkCard/index.tsx @@ -0,0 +1,98 @@ +import Button from '@components/Buttons/Button' +import DefaultButton from '@components/Buttons/DefaultButton' +import Typography from '@components/Typography' +import { FaSolidWifi } from 'solid-icons/fa' +import { IoChevronBackSharp } from 'solid-icons/io' +import { Component, For, Show } from 'solid-js' + +export interface IProps { + onClickManualSetup: () => void + onClickBack: () => void + data: any[] +} + +const NetworkCard: Component = (props) => { + return ( +
+
+ { + props.onClickBack() + }}> + + +
+
+
+
+ +
+
+ + Select Network + +
+
+
+
+ + SSID + + + Channel + + + Signal + + + Security + +
+
+ 0} + fallback={ +
+ + We were unable to find any available networks. + +
+ }> + + {(el) => ( +
+ + {el.ssid} + + + {el.channel} + + + {`(${el.signal} dBm) `} + + + {el.security} + +
+ )} + + +
+
+
+
+
+
+
+
+ ) +} + +export default NetworkCard diff --git a/src/containers/FlashWizard/FlashProcessWizard.tsx b/src/containers/FlashWizard/FlashProcessWizard.tsx index 03531e77..238d5cad 100644 --- a/src/containers/FlashWizard/FlashProcessWizard.tsx +++ b/src/containers/FlashWizard/FlashProcessWizard.tsx @@ -1,4 +1,4 @@ -import Card from '@components/Card' +import Card from '@components/Cards/Card' import Typography from '@components/Typography' import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' import { IFirmwareState } from '@interfaces/interfaces' diff --git a/src/containers/FlashWizard/SetupProcessWizard.tsx b/src/containers/FlashWizard/SetupProcessWizard.tsx index 53db1cc7..f0f5476c 100644 --- a/src/containers/FlashWizard/SetupProcessWizard.tsx +++ b/src/containers/FlashWizard/SetupProcessWizard.tsx @@ -1,5 +1,5 @@ import SelectButton from '@components/Buttons/SelectButton' -import Card from '@components/Card' +import Card from '@components/Cards/Card' import { ACTION, FLASH_WIZARD_STEPS, MODAL_TYPE } from '@interfaces/enums' import { setAction, setStep } from '@store/animation/animation' import { activeStep, prevStep } from '@store/animation/selectors' @@ -13,16 +13,12 @@ import { } from '@store/terminal/terminal' import { BiRegularChip } from 'solid-icons/bi' import { BsDisplayport } from 'solid-icons/bs' -import { batch, createMemo, Match, Switch } from 'solid-js' +import { batch, Match, Switch } from 'solid-js' const SetupProcessWizard = () => { const { activeBoard, activePort, downloadAsset, getFirmwareType } = useAppAPIContext() const { setOpenModal, hideModal } = useAppUIContext() - const onClickSecondary = createMemo(() => { - return undefined - }) - return ( diff --git a/src/containers/FlashWizard/WiredProcessWizard.tsx b/src/containers/FlashWizard/WiredProcessWizard.tsx index 30a0f519..8eb2718f 100644 --- a/src/containers/FlashWizard/WiredProcessWizard.tsx +++ b/src/containers/FlashWizard/WiredProcessWizard.tsx @@ -1,4 +1,4 @@ -import Card from '@components/Card' +import Card from '@components/Cards/Card' import Input from '@components/Inputs/Input' import Typography from '@components/Typography' import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' diff --git a/src/containers/FlashWizard/WirelessProcessWizard.tsx b/src/containers/FlashWizard/WirelessProcessWizard.tsx index 7838f8f0..f13f49bc 100644 --- a/src/containers/FlashWizard/WirelessProcessWizard.tsx +++ b/src/containers/FlashWizard/WirelessProcessWizard.tsx @@ -1,6 +1,5 @@ -import Button from '@components/Buttons/Button' -import DefaultButton from '@components/Buttons/DefaultButton' -import Card from '@components/Card' +import Card from '@components/Cards/Card' +import NetworkCard from '@components/Cards/NetworkCard' import NetworkInput from '@components/Inputs/NetworkInput' import PasswordInput from '@components/Inputs/PasswordInput' import Typography from '@components/Typography' @@ -10,19 +9,12 @@ import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' import { useAppAPIContext } from '@store/context/api' import { BiRegularError, BiRegularLoaderAlt } from 'solid-icons/bi' -import { IoCheckmarkSharp, IoChevronBackSharp } from 'solid-icons/io' +import { IoCheckmarkSharp } from 'solid-icons/io' import { RiSystemLockPasswordLine } from 'solid-icons/ri' -import { batch, For, Match, Switch } from 'solid-js' +import { batch, Match, Switch } from 'solid-js' const WirelessProcessWizard = () => { - const { ssid, password, setNetwork, mdns } = useAppAPIContext() - - const exampleData = new Array(20).fill(0).map((el) => ({ - ssid: 'Example SSID', - channel: 8, - signal: -50, - security: 'WPA2 PSK', - })) + const { ssid, password, setNetwork, mdns, availableNetworks } = useAppAPIContext() return ( @@ -38,74 +30,17 @@ const WirelessProcessWizard = () => { /> -
-
- {}}> - - -
-
-
-
-
- - Select Network - -
-
-
-
- - SSID - - - Channel - - - Signal - - - Security - -
-
- - {(el) => ( -
- - {el.ssid} - - - {el.channel} - - - {`(${el.signal} dBm) `} - - - {el.security} - -
- )} - -
-
-
-
-
-
-
-
+ { + batch(() => { + setAction(ACTION.PREV) + setStep(FLASH_WIZARD_STEPS.SELECT_MODE) + }) + }} + onClickManualSetup={() => {}} + /> - => { return await invoke('plugin:esp|send_commands', { @@ -184,8 +202,8 @@ export const validateUserPortConnection = async ( currentUserActivePort: string, ): Promise => { await sleep(2000) - const CHECK_INTERVAL = 250 // ms - const TIMEOUT = 5000 // ms + const CHECK_INTERVAL = 250 + const TIMEOUT = 5000 const maxChecks = Math.ceil(TIMEOUT / CHECK_INTERVAL) let checks = 0 @@ -213,6 +231,21 @@ export const validateUserPortConnection = async ( }) } +export const getAvailableNetworks = async (port: string) => { + await sendCommands(port, [{ command: 'pause', data: { pause: true } }]) + + const response: string = await invoke('plugin:esp|get_possible_networks', { + portName: port, + commands: [{ command: 'scan_networks' }], + }) + + return response + .split('\n') + .filter((el) => el.match('networks')) + .map((el) => JSON.parse(el)?.networks ?? []) + .flat() +} + export const getDeviceName = async (port: string) => { const response = await sendCommands(port, [{ command: 'get_mdns_name' }]) const parsedResponse: { results: Array } = JSON.parse(response) @@ -325,6 +358,7 @@ export const espApi = { getDeviceMode, getDeviceName, setupWiredConnection, + getAvailableNetworks, availablePorts, testConnection, flash, diff --git a/src/static/types/interfaces.ts b/src/static/types/interfaces.ts index 8ed46f6d..6a18c50e 100644 --- a/src/static/types/interfaces.ts +++ b/src/static/types/interfaces.ts @@ -164,6 +164,7 @@ export interface AppStoreAPI { activePort: IActivePort ports: IDropdownList[] isActivePortValid: boolean + availableNetworks: any[] // add types later } export interface IOpenModal { diff --git a/src/store/animation/animation.ts b/src/store/animation/animation.ts index e6ca4b97..723facce 100644 --- a/src/store/animation/animation.ts +++ b/src/store/animation/animation.ts @@ -11,9 +11,9 @@ export interface IAnimationState { } const defaultState: IAnimationState = { - step: FLASH_WIZARD_STEPS.SELECT_NETWORK, - activeStep: FLASH_WIZARD_STEPS.SELECT_NETWORK, - prevStep: FLASH_WIZARD_STEPS.SELECT_NETWORK, + step: FLASH_WIZARD_STEPS.SELECT_MODE, + activeStep: FLASH_WIZARD_STEPS.SELECT_MODE, + prevStep: FLASH_WIZARD_STEPS.SELECT_MODE, action: ACTION.NEXT, showComponent: true, } diff --git a/src/store/context/api.tsx b/src/store/context/api.tsx index 53af1fdf..2cb4a781 100644 --- a/src/store/context/api.tsx +++ b/src/store/context/api.tsx @@ -24,7 +24,6 @@ import { IGHRelease, IGHResponse, } from '@interfaces/interfaces' -import { DEFAULT_PORT_NAME } from '@src/static' import { GHEndpoints } from '@src/static/endpoints' import { O } from '@static/types' import { makeRequest } from 'tauri-plugin-request-client' @@ -77,6 +76,7 @@ interface AppAPIContext { saveManifestPath: (url: string) => void confirmFirmwareSelection: (board: string) => void manifestPath: Accessor + availableNetworks: Accessor // add types later ports: Accessor setPorts: (ports: IDropdownList[]) => void } @@ -128,6 +128,7 @@ export const AppAPIProvider: Component = (props) => { autoSelect: true, }, ports: [], + availableNetworks: [], } const [state, setState] = createStore(defaultState) @@ -260,6 +261,7 @@ export const AppAPIProvider: Component = (props) => { ) } + const availableNetworks = createMemo(() => apiState().availableNetworks) const getGHRestStatus = createMemo(() => apiState().ghAPI.status) const getFirmwareAssets = createMemo(() => apiState().ghAPI.assets) const getFirmwareVersion = createMemo(() => apiState().ghAPI.version) @@ -695,6 +697,7 @@ export const AppAPIProvider: Component = (props) => { trackerName, ports, setPorts, + availableNetworks, }}> {props.children} From 6f9c13f0e6594f1dd1acf61000a719d9191a5a8c Mon Sep 17 00:00:00 2001 From: luckmer Date: Sat, 20 Sep 2025 16:53:48 +0200 Subject: [PATCH 13/48] integrate wireless workflow --- .vscode/settings.json | 2 - src-tauri/src/lib/esp/src/api.rs | 74 +++- src-tauri/src/lib/esp/src/lib.rs | 3 +- src/components/Board/SelectBoard/index.tsx | 53 --- .../Buttons/DropdownButton/index.tsx | 18 - src/components/Cards/NetworkCard/index.tsx | 23 +- .../Dropdown/DropdownList/index.tsx | 59 --- .../Dropdown/PortDropdown/index.tsx | 35 -- src/components/SelectNetwork/index.tsx | 73 ---- src/containers/FlashFirmware/index.tsx | 19 +- .../FlashWizard/FlashProcessWizard.tsx | 79 +--- .../FlashWizard/SelectPortWizard.tsx | 166 ++++++++ .../FlashWizard/SetupProcessWizard.tsx | 52 +-- .../FlashWizard/TerminalProcessWizard.tsx | 5 + .../FlashWizard/WiredProcessWizard.tsx | 47 ++- .../FlashWizard/WirelessProcessWizard.tsx | 144 +++++-- src/containers/FlashWizard/index.tsx | 48 ++- src/containers/ManageBoard/index.tsx | 147 ------- src/containers/ManageNetwork/index.tsx | 30 -- src/containers/Modals/DevtoolsModal.tsx | 4 +- src/containers/Modals/SelectPortModal.tsx | 22 +- src/containers/Modals/SelectboardModal.tsx | 8 +- src/containers/Modals/WifiModalcontainer.tsx | 152 +++---- src/esp/api.ts | 367 ----------------- src/esp/commands.ts | 26 ++ src/esp/espApiCore.ts | 380 ++++++++++++++++++ src/esp/espCore.ts | 59 +++ src/esp/index.ts | 8 + src/esp/interfaces/enums.ts | 24 ++ src/esp/interfaces/types.ts | 110 +++++ src/pages/BoardManagement/index.tsx | 61 --- src/pages/Modals/ApModeModal.tsx | 4 +- src/pages/Modals/BeforeFlashingModal.tsx | 12 +- src/pages/Modals/BeforeSelectBoardModal.tsx | 8 +- src/pages/Modals/SelectBoardModal.tsx | 6 +- src/pages/Modals/SelectPortModal.tsx | 3 +- src/pages/Modals/WifiModal.tsx | 4 +- src/pages/NetworkManagement/index.tsx | 62 --- src/pages/Terminal/index.tsx | 40 +- src/pages/VirtualList/index.tsx | 86 ---- src/routes/index.tsx | 5 +- src/static/index.ts | 33 +- src/static/types/enums.ts | 63 ++- src/static/types/interfaces.ts | 31 -- src/store/animation/animation.ts | 45 ++- src/store/animation/selectors.ts | 2 +- src/store/context/api.tsx | 35 +- src/store/network/network.ts | 70 ++++ src/store/network/selectors.ts | 5 + src/store/terminal/actions.ts | 147 ++++--- src/utils/index.ts | 8 +- 51 files changed, 1431 insertions(+), 1536 deletions(-) delete mode 100644 src/components/Board/SelectBoard/index.tsx delete mode 100644 src/components/Buttons/DropdownButton/index.tsx delete mode 100644 src/components/Dropdown/DropdownList/index.tsx delete mode 100644 src/components/Dropdown/PortDropdown/index.tsx delete mode 100644 src/components/SelectNetwork/index.tsx create mode 100644 src/containers/FlashWizard/SelectPortWizard.tsx create mode 100644 src/containers/FlashWizard/TerminalProcessWizard.tsx delete mode 100644 src/containers/ManageBoard/index.tsx delete mode 100644 src/containers/ManageNetwork/index.tsx delete mode 100644 src/esp/api.ts create mode 100644 src/esp/commands.ts create mode 100644 src/esp/espApiCore.ts create mode 100644 src/esp/espCore.ts create mode 100644 src/esp/index.ts create mode 100644 src/esp/interfaces/enums.ts create mode 100644 src/esp/interfaces/types.ts delete mode 100644 src/pages/BoardManagement/index.tsx delete mode 100644 src/pages/NetworkManagement/index.tsx delete mode 100644 src/pages/VirtualList/index.tsx create mode 100644 src/store/network/network.ts create mode 100644 src/store/network/selectors.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index f3cc90e0..42388b04 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,6 +16,4 @@ "XAIO", "XIAOSENSES" ], - "python-envs.defaultEnvManager": "ms-python.python:system", - "python-envs.pythonProjects": [] } \ No newline at end of file diff --git a/src-tauri/src/lib/esp/src/api.rs b/src-tauri/src/lib/esp/src/api.rs index 639e5676..d7a9ab22 100644 --- a/src-tauri/src/lib/esp/src/api.rs +++ b/src-tauri/src/lib/esp/src/api.rs @@ -284,13 +284,28 @@ pub fn cancel_stream_logs(state: State<'_, Mutex>) -> EspResult<()> { #[derive(Debug, Serialize, Deserialize)] #[serde(tag = "command", content = "data", rename_all = "snake_case")] pub enum Command { - SetWifi { ssid: String, password: String }, - SetMdns { hostname: String }, - SwitchMode { mode: String }, + SetWifi { + ssid: String, + password: String, + name: String, + channel: u8, + power: u8, + }, + SetMdns { + hostname: String, + }, + SwitchMode { + mode: String, + }, + ConnectWifi, GetMdnsName, GetDeviceMode, ScanNetworks, - Pause { pause: bool }, + GetWifiStatus, + RestartDevice, + Pause { + pause: bool, + }, } #[derive(Debug, Serialize)] @@ -398,6 +413,7 @@ pub async fn get_possible_networks( buffer.extend_from_slice(&chunk); let response = String::from_utf8_lossy(&buffer).trim().to_string(); + if response.contains("Networks scanned") { return Ok(response); } @@ -414,3 +430,53 @@ pub async fn get_possible_networks( .await .map_err(|e| e.to_string())? } + +#[command] +pub async fn get_wifi_connection_status( + port_name: String, + commands: Vec, +) -> Result { + let operation = CommandsOperation { commands }; + let payload = serde_json::to_string(&operation).map_err(|e| e.to_string())? + "\n"; + println!("get connection status: "); + tauri::async_runtime::spawn_blocking(move || { + let mut serial_port = serialport::new(port_name, 115_200) + .flow_control(FlowControl::None) + .timeout(Duration::from_millis(100)) + .open_native() + .map_err(|e| e.to_string())?; + + serial_port + .write_all(payload.as_bytes()) + .map_err(|e| e.to_string())?; + serial_port.flush().map_err(|e| e.to_string())?; + + log::debug!("{:?}", serde_json::to_string(&operation)); + + let start_time = std::time::Instant::now(); + let mut buffer = Vec::new(); + + while start_time.elapsed() < Duration::from_secs(30) { + match serial_port.bytes_to_read() { + Ok(bytes_available) if bytes_available > 0 => { + let mut chunk = vec![0u8; bytes_available as usize]; + if serial_port.read_exact(&mut chunk).is_ok() { + buffer.extend_from_slice(&chunk); + + let response = String::from_utf8_lossy(&buffer).trim().to_string(); + if response.contains("connected to") || response.contains("not connected") { + return Ok(response); + } + } + } + _ => { + std::thread::sleep(Duration::from_millis(250)); + } + } + } + + Err("Operation timed out".to_string()) + }) + .await + .map_err(|e| e.to_string())? +} diff --git a/src-tauri/src/lib/esp/src/lib.rs b/src-tauri/src/lib/esp/src/lib.rs index 83d6cc87..218733ff 100644 --- a/src-tauri/src/lib/esp/src/lib.rs +++ b/src-tauri/src/lib/esp/src/lib.rs @@ -21,7 +21,8 @@ pub fn init() -> TauriPlugin { stream_logs, cancel_stream_logs, send_commands, - get_possible_networks + get_possible_networks, + get_wifi_connection_status ]) .setup(move |app| { app.manage(Mutex::new(EspState { diff --git a/src/components/Board/SelectBoard/index.tsx b/src/components/Board/SelectBoard/index.tsx deleted file mode 100644 index 98fac2a7..00000000 --- a/src/components/Board/SelectBoard/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { SelectButton } from '@components/Buttons/SelectButton' -import Dropdown from '@components/Dropdown/Dropdown' -import DropdownList from '@components/Dropdown/DropdownList' -import Typography from '@components/Typography' -import { type IDropdownList } from '@interfaces/interfaces' -import { Component, Show } from 'solid-js' - -export interface IProps { - boards: IDropdownList[] - onSubmit: (board: string) => void - selectedBoard: string - firmwareVersion: string -} - -export const SelectBoard: Component = (props) => { - return ( -
-
- - - { - props.onSubmit(data.label) - }} - /> - -
- - Firmware version: - - }> - - {props.firmwareVersion} - - -
-
-
- ) -} diff --git a/src/components/Buttons/DropdownButton/index.tsx b/src/components/Buttons/DropdownButton/index.tsx deleted file mode 100644 index 5e77f006..00000000 --- a/src/components/Buttons/DropdownButton/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Typography from '@components/Typography' -import { Component } from 'solid-js' - -export interface IProps { - label: string -} - -export const DropdownButton: Component = (props) => { - return ( - - ) -} - -export default DropdownButton diff --git a/src/components/Cards/NetworkCard/index.tsx b/src/components/Cards/NetworkCard/index.tsx index c9615024..331284c4 100644 --- a/src/components/Cards/NetworkCard/index.tsx +++ b/src/components/Cards/NetworkCard/index.tsx @@ -1,14 +1,16 @@ import Button from '@components/Buttons/Button' import DefaultButton from '@components/Buttons/DefaultButton' import Typography from '@components/Typography' +import { INetwork } from '@store/network/network' import { FaSolidWifi } from 'solid-icons/fa' import { IoChevronBackSharp } from 'solid-icons/io' import { Component, For, Show } from 'solid-js' export interface IProps { onClickManualSetup: () => void + onClickNetwork: (network: INetwork) => void onClickBack: () => void - data: any[] + data: INetwork[] } const NetworkCard: Component = (props) => { @@ -61,18 +63,27 @@ const NetworkCard: Component = (props) => { }> {(el) => ( -
- - {el.ssid} +
{ + props.onClickNetwork(el) + }}> + + {!el.ssid ? 'Hidden' : el.ssid} {el.channel} - {`(${el.signal} dBm) `} + {`(${el.rssi} dBm) `} - {el.security} + {el.auth_mode}
)} diff --git a/src/components/Dropdown/DropdownList/index.tsx b/src/components/Dropdown/DropdownList/index.tsx deleted file mode 100644 index 6b583d27..00000000 --- a/src/components/Dropdown/DropdownList/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { DefaultBoard } from '@components/Board/DefaultBoard' -import Typography from '@components/Typography' -import { IDropdownList } from '@interfaces/interfaces' -import { classNames } from '@src/utils' -import { Component, For, Show } from 'solid-js' - -export interface IProps { - onClick: (data: IDropdownList) => void - ref?: (el: HTMLDivElement) => void - activeElement: string - data: IDropdownList[] - styles?: string - tabIndex?: number - fallbackLabel?: string - isScrollbar?: boolean - disableTop?: boolean -} - -const DropdownList: Component = (props) => { - return ( -
props.ref?.(el)} - class={classNames( - props.styles, - 'dropdown-content right-[-13px] p-12 rounded-12 border border-solid border-black-800 bg-black-900 w-[350px]', - )} - style={!props.disableTop ? { top: 'calc(100% + 20px)' } : undefined}> -
- - - - {props.fallbackLabel ?? 'Loading...'} - -
- }> - - {(data) => ( - { - props.onClick(data) - }} - /> - )} - - -
-
- ) -} - -export default DropdownList diff --git a/src/components/Dropdown/PortDropdown/index.tsx b/src/components/Dropdown/PortDropdown/index.tsx deleted file mode 100644 index de989ded..00000000 --- a/src/components/Dropdown/PortDropdown/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { DropdownButton } from '@components/Buttons/DropdownButton' -import Dropdown from '@components/Dropdown/Dropdown' -import DropdownList from '@components/Dropdown/DropdownList' -import { IDropdownList } from '@interfaces/interfaces' -import { classNames } from '@src/utils' -import { Component } from 'solid-js' - -export interface IProps { - onClick: (port: IDropdownList) => void - label: string - isScrollbar: boolean - activeElement: string - data: IDropdownList[] - class?: string -} - -const PortDropdown: Component = (props) => { - return ( - - - - - ) -} - -export default PortDropdown diff --git a/src/components/SelectNetwork/index.tsx b/src/components/SelectNetwork/index.tsx deleted file mode 100644 index faee5422..00000000 --- a/src/components/SelectNetwork/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import Input from '@components/Inputs/Input' -import NetworkInput from '@components/Inputs/NetworkInput' -import PasswordInput from '@components/Inputs/PasswordInput' -import Typography from '@components/Typography' -import { shortMdnsAddress } from '@src/utils' -import { Component } from 'solid-js' - -export interface IProps { - ssid: string - password: string - mdns: string - onChangeSSID: (ssid: string) => void - onChangePassword: (password: string) => void - onChangeMdns: (mdns: string) => void -} - -export const SelectNetwork: Component = (props) => { - return ( -
-
- - Tracker name - - - {`The tracker will be accessible under: http://${ - !props.mdns ? 'openiristracker' : shortMdnsAddress(props.mdns) - }.local`} - -
- -
-
-
- - SSID - -
- -
-
-
- - Password - -
- -
-
-
- ) -} diff --git a/src/containers/FlashFirmware/index.tsx b/src/containers/FlashFirmware/index.tsx index a21cafd1..3944d126 100644 --- a/src/containers/FlashFirmware/index.tsx +++ b/src/containers/FlashFirmware/index.tsx @@ -2,8 +2,9 @@ import { ENotificationType, FLASH_STATUS, MODAL_TYPE } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' import Terminal from '@pages/Terminal' import { useNavigate } from '@solidjs/router' -import { espApi, UsbSerialPortInfo } from '@src/esp/api' -import { BoardConnectionMethod, DEFAULT_PORT_NAME, usb } from '@src/static' +import { getApi } from '@src/esp' +import { UsbSerialPortInfo } from '@src/esp/interfaces/types' +import { BOARD_CONNECTION_METHOD, DEFAULT_PORT_NAME, USB } from '@src/static' import { download } from '@src/utils' import { useAppAPIContext } from '@store/context/api' import { useAppNotificationsContext } from '@store/context/notifications' @@ -51,7 +52,7 @@ export const ManageFlashFirmware = () => { if (!availablePorts.length) { if (!hasCleared) { - setActivePortName(DEFAULT_PORT_NAME, true) + setActivePortName(DEFAULT_PORT_NAME) setPorts([]) hasCleared = true } @@ -68,10 +69,6 @@ export const ManageFlashFirmware = () => { : `${port.vid}:${port.pid}`, })) - if (activePort().autoSelect) { - setActivePortName(portList[0]?.label ?? DEFAULT_PORT_NAME, true) - } - setPorts(portList) } @@ -85,7 +82,7 @@ export const ManageFlashFirmware = () => { createEffect(() => { const interval = setInterval(() => { - espApi.availablePorts().then(loadPorts).catch(onLoadError) + getApi().getAvailablePorts().then(loadPorts).catch(onLoadError) }, 250) onCleanup(() => clearInterval(interval)) @@ -98,7 +95,7 @@ export const ManageFlashFirmware = () => { }) const isUSBBoard = createMemo(() => { - return activeBoard().includes(usb) + return activeBoard().includes(USB) }) const notification = createMemo(() => { @@ -110,7 +107,7 @@ export const ManageFlashFirmware = () => { }) const board = createMemo(() => { - const connectionMethod = BoardConnectionMethod[activeBoard().replace('_release', '')] + const connectionMethod = BOARD_CONNECTION_METHOD[activeBoard().replace('_release', '')] return connectionMethod ? `${activeBoard()} (${connectionMethod})` : activeBoard() }) @@ -131,7 +128,7 @@ export const ManageFlashFirmware = () => { firmwareVersion={`Openiris-${getFirmwareVersion()}`} firmwareState={flashFirmwareState().filter((el) => el?.status !== FLASH_STATUS.NONE)} onClickPort={(port) => { - setActivePortName(port, false) + setActivePortName(port) const elem: Element | null = document.activeElement if (elem instanceof HTMLElement) { elem?.blur() diff --git a/src/containers/FlashWizard/FlashProcessWizard.tsx b/src/containers/FlashWizard/FlashProcessWizard.tsx index 238d5cad..377501ed 100644 --- a/src/containers/FlashWizard/FlashProcessWizard.tsx +++ b/src/containers/FlashWizard/FlashProcessWizard.tsx @@ -1,18 +1,16 @@ import Card from '@components/Cards/Card' import Typography from '@components/Typography' -import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' +import { ACTION, FLASH_WIZARD_STEPS, INIT_WIZARD_STEPS } from '@interfaces/enums' import { IFirmwareState } from '@interfaces/interfaces' -import { espApi } from '@src/esp/api' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' -import { useAppAPIContext } from '@store/context/api' import { firmwareState, isActiveProcess, percentageProgress } from '@store/terminal/selectors' -import { BiRegularChip, BiRegularError, BiRegularLoaderAlt } from 'solid-icons/bi' +import { setAbortController } from '@store/terminal/terminal' +import { BiRegularError, BiRegularLoaderAlt } from 'solid-icons/bi' import { IoCheckmarkSharp } from 'solid-icons/io' import { Accessor, batch, createMemo, Match, Switch } from 'solid-js' const FlashProcessWizard = () => { - const { activePort, isActivePortValid } = useAppAPIContext() const flashFirmwareState: Accessor = createMemo(() => { const state = Object.keys(firmwareState()).map((key) => { return { step: key, ...firmwareState()[key] } @@ -32,7 +30,7 @@ const FlashProcessWizard = () => { if (isActiveProcess()) return batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) + setStep(INIT_WIZARD_STEPS.SELECT_PORT) }) }} onClickPrimary={() => {}} @@ -53,19 +51,16 @@ const FlashProcessWizard = () => { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) + setStep(INIT_WIZARD_STEPS.SELECT_PORT) }) }} onClickSecondary={() => { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.BEFORE_CONTINUE_CONFIG) - }) + // connect terminal steps later }} onClickPrimary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.BEFORE_CONTINUE_CONFIG) + setStep(FLASH_WIZARD_STEPS.SELECT_MODE) }) }} label="Firmware flashed!"> @@ -90,13 +85,15 @@ const FlashProcessWizard = () => { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) + setAbortController('openiris') + setStep(INIT_WIZARD_STEPS.SELECT_PORT) }) }} onClickPrimary={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) + setAbortController('openiris') + setStep(INIT_WIZARD_STEPS.SELECT_PORT) }) }} label="Failed to flash board"> @@ -106,60 +103,6 @@ const FlashProcessWizard = () => { - - { - batch(() => { - setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) - }) - }} - onClickPrimary={() => { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.CHECK_PORT_CONNECTION) - }) - espApi - .validateUserPortConnection(activePort().activePortName) - .then((status) => { - if (status) { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_MODE) - }) - return - } - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) - }) - }) - .catch(() => { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) - }) - }) - }} - label="Before proceeding" - description="Unplug your board, then reconnect it to the PC without pressing any buttons and press Show logs." - /> - - - - - Verifying port connection status. -
process can take up to (5s) - - - ) } diff --git a/src/containers/FlashWizard/SelectPortWizard.tsx b/src/containers/FlashWizard/SelectPortWizard.tsx new file mode 100644 index 00000000..4b737ef7 --- /dev/null +++ b/src/containers/FlashWizard/SelectPortWizard.tsx @@ -0,0 +1,166 @@ +import SelectButton from '@components/Buttons/SelectButton' +import Card from '@components/Cards/Card' +import Typography from '@components/Typography' +import { + ACTION, + FLASH_MODE, + FLASH_WIZARD_STEPS, + MODAL_TYPE, + PORT_WIZARD_STEPS, + WIRED_WIZARD_STEPS, + WIRELESS_WIZARD_STEPS, +} from '@interfaces/enums' +import { getApi } from '@src/esp' +import { setAction, setStep } from '@store/animation/animation' +import { activeStep, selectedMode } from '@store/animation/selectors' +import { useAppAPIContext } from '@store/context/api' +import { useAppUIContext } from '@store/context/ui' +import { setAvailableNetworks } from '@store/network/network' +import { BiRegularChip, BiRegularLoaderAlt } from 'solid-icons/bi' +import { BsDisplayport } from 'solid-icons/bs' +import { batch, Match, Switch } from 'solid-js' + +const SelectPortWizard = () => { + const { activePort, isActivePortValid, setActivePortName } = useAppAPIContext() + const { setOpenModal } = useAppUIContext() + + const onClickVerifyPortConnection = async () => { + batch(() => { + setAction(ACTION.NEXT) + setStep(PORT_WIZARD_STEPS.PORT_CHECK_PORT_CONNECTION) + }) + + const api = getApi() + + try { + await api.switchDeviceMode( + activePort().activePortName, + selectedMode() === FLASH_MODE.WIRED ? 'uvc' : 'wifi', + ) + } catch (err) { + console.log('waaa??', err) + } + + try { + const isTheSamePort = await api.checkPortConnection(activePort().activePortName) + + console.log(isTheSamePort) + if (isTheSamePort) { + if (selectedMode() === FLASH_MODE.WIRED) { + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_NAME) + }) + } else { + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_WIRELESS_MODE) + }) + + try { + const networks = await api.getAvailableNetworks(activePort().activePortName) + setAvailableNetworks(networks) + } catch (err) { + console.log(err) + setAvailableNetworks([]) + } + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SELECT_NETWORK) + }) + } + return + } else { + batch(() => { + setAction(ACTION.NEXT) + setActivePortName('') + setStep(PORT_WIZARD_STEPS.PORT_SELECT_PORT) + }) + } + } catch (err) { + console.log(err) + batch(() => { + setAction(ACTION.NEXT) + setActivePortName('') + setStep(PORT_WIZARD_STEPS.PORT_SELECT_PORT) + }) + } + } + + return ( + + + { + batch(() => { + setAction(ACTION.PREV) + setStep(FLASH_WIZARD_STEPS.SELECT_MODE) + }) + }} + onClickPrimary={async () => { + batch(() => { + setAction(ACTION.NEXT) + setStep(PORT_WIZARD_STEPS.PORT_CHECK_PORT_CONNECTION) + }) + + onClickVerifyPortConnection() + }} + label="Before proceeding" + description="Unplug your board, then reconnect it to the PC without pressing any buttons." + /> + + + + + Verifying port connection status. +
process can take up to (5s) + + + + + { + batch(() => { + setAction(ACTION.PREV) + setStep(PORT_WIZARD_STEPS.PORT_BEFORE_PROCEEDING) + }) + }} + onClickPrimary={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(PORT_WIZARD_STEPS.PORT_CHECK_PORT_CONNECTION) + }) + + onClickVerifyPortConnection() + }} + label="Select Port" + description="Choose the port your device is connected to, then click the button below to begin flashing and follow the on-screen instructions."> + { + setOpenModal({ open: true, type: MODAL_TYPE.SELECT_PORT }) + }} + /> + + + + ) +} + +export default SelectPortWizard diff --git a/src/containers/FlashWizard/SetupProcessWizard.tsx b/src/containers/FlashWizard/SetupProcessWizard.tsx index f0f5476c..5ed240a7 100644 --- a/src/containers/FlashWizard/SetupProcessWizard.tsx +++ b/src/containers/FlashWizard/SetupProcessWizard.tsx @@ -1,8 +1,8 @@ import SelectButton from '@components/Buttons/SelectButton' import Card from '@components/Cards/Card' -import { ACTION, FLASH_WIZARD_STEPS, MODAL_TYPE } from '@interfaces/enums' +import { ACTION, FLASH_WIZARD_STEPS, INIT_WIZARD_STEPS, MODAL_TYPE } from '@interfaces/enums' import { setAction, setStep } from '@store/animation/animation' -import { activeStep, prevStep } from '@store/animation/selectors' +import { activeStep } from '@store/animation/selectors' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { installOpenIris } from '@store/terminal/actions' @@ -16,12 +16,13 @@ import { BsDisplayport } from 'solid-icons/bs' import { batch, Match, Switch } from 'solid-js' const SetupProcessWizard = () => { - const { activeBoard, activePort, downloadAsset, getFirmwareType } = useAppAPIContext() const { setOpenModal, hideModal } = useAppUIContext() + const { activeBoard, activePort, downloadAsset, getFirmwareType, setActivePortName } = + useAppAPIContext() return ( - + { onClickPrimary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_BOARD) + setStep(INIT_WIZARD_STEPS.SELECT_BOARD) }) }} onClickSecondary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.BEFORE_PROCEEDING) + setStep(INIT_WIZARD_STEPS.INIT_BEFORE_PROCEEDING) }) }} label="Flash Your Board" description="Click the button below to start the flashing process and follow the on-screen prompts to complete the setup." /> - + { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.INIT) + setStep(INIT_WIZARD_STEPS.PROCESS_INIT) }) }} onClickPrimary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_PORT) + setActivePortName('') + setStep(INIT_WIZARD_STEPS.SELECT_PORT) }) }} primaryButtonLabel="Next" @@ -75,7 +77,7 @@ const SetupProcessWizard = () => { /> - + { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SELECT_BOARD) + setStep(INIT_WIZARD_STEPS.SELECT_BOARD) }) }} onClickPrimary={() => { - if (prevStep() === FLASH_WIZARD_STEPS.CHECK_PORT_CONNECTION) { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SELECT_MODE) - }) - return - } if (!hideModal()) { setOpenModal({ open: true, @@ -136,27 +131,6 @@ const SetupProcessWizard = () => { /> - - { - batch(() => { - setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.INIT) - }) - }} - onClickSecondary={() => { - batch(() => { - setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SHOW_TERMINAL) - }) - }} - label="Before proceeding" - description="Unplug your board, then reconnect it to the PC without pressing any buttons and press Show logs." - /> - ) } diff --git a/src/containers/FlashWizard/TerminalProcessWizard.tsx b/src/containers/FlashWizard/TerminalProcessWizard.tsx new file mode 100644 index 00000000..7083020f --- /dev/null +++ b/src/containers/FlashWizard/TerminalProcessWizard.tsx @@ -0,0 +1,5 @@ +const TerminalProcessWizard = () => { + return <> +} + +export default TerminalProcessWizard diff --git a/src/containers/FlashWizard/WiredProcessWizard.tsx b/src/containers/FlashWizard/WiredProcessWizard.tsx index 8eb2718f..d2b83d99 100644 --- a/src/containers/FlashWizard/WiredProcessWizard.tsx +++ b/src/containers/FlashWizard/WiredProcessWizard.tsx @@ -1,8 +1,13 @@ import Card from '@components/Cards/Card' import Input from '@components/Inputs/Input' import Typography from '@components/Typography' -import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' -import { espApi } from '@src/esp/api' +import { + ACTION, + FLASH_WIZARD_STEPS, + INIT_WIZARD_STEPS, + WIRED_WIZARD_STEPS, +} from '@interfaces/enums' +import { getApi } from '@src/esp' import { shortMdnsAddress } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' @@ -19,7 +24,7 @@ const WiredProcessWizard = () => { return ( - + { }} onClickPrimary={() => { batch(() => { - setStep(FLASH_WIZARD_STEPS.FLASH_WIRED_PROCESS) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_PROCESS) setIsPendingUpdate(true) setAction(ACTION.NEXT) setError('') }) - - espApi + getApi() .setupWiredConnection(trackerName(), activePort().activePortName) .then(() => { batch(() => { - setStep(FLASH_WIZARD_STEPS.FLASH_WIRED_PROCESS_SUCCESS) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_PROCESS_SUCCESS) setAction(ACTION.NEXT) }) }) .catch((err) => { batch(() => { - setStep(FLASH_WIZARD_STEPS.FLASH_WIRED_PROCESS_FAILED) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_PROCESS_FAILED) setAction(ACTION.NEXT) setError(err.message) }) @@ -91,7 +95,7 @@ const WiredProcessWizard = () => {
- + { if (isPendingUpdate()) return batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_NAME) }) }} - onClickPrimary={() => {}} - description="Switching to wired mode… The device will now appear as a UVC camera. with an additional COM port for communication" - /> + onClickPrimary={() => {}}> + + Switching to wired mode… The device will now appear as a UVC camera. with an + additional COM port for communication + + - + { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_NAME) }) }} onClickSecondary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.INIT) + setStep(INIT_WIZARD_STEPS.PROCESS_INIT) }) }} label="Its done!" description="Your device is set up and ready to go." /> - + { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_NAME) }) }} onClickPrimary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_NAME) }) }}> - {!error().length + {!error()?.length ? 'Something went wrong, please contact with us on discord' : error()} diff --git a/src/containers/FlashWizard/WirelessProcessWizard.tsx b/src/containers/FlashWizard/WirelessProcessWizard.tsx index f13f49bc..293db846 100644 --- a/src/containers/FlashWizard/WirelessProcessWizard.tsx +++ b/src/containers/FlashWizard/WirelessProcessWizard.tsx @@ -3,55 +3,90 @@ import NetworkCard from '@components/Cards/NetworkCard' import NetworkInput from '@components/Inputs/NetworkInput' import PasswordInput from '@components/Inputs/PasswordInput' import Typography from '@components/Typography' -import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' +import { + ACTION, + FLASH_WIZARD_STEPS, + INIT_WIZARD_STEPS, + WIRELESS_WIZARD_STEPS, +} from '@interfaces/enums' +import { getApi } from '@src/esp' import { shortMdnsAddress } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' import { useAppAPIContext } from '@store/context/api' +import { setMdns, setPassword, setSelectedNetwork, setSsid } from '@store/network/network' +import { availableNetworks, mdns, password, selectedNetwork, ssid } from '@store/network/selectors' import { BiRegularError, BiRegularLoaderAlt } from 'solid-icons/bi' import { IoCheckmarkSharp } from 'solid-icons/io' import { RiSystemLockPasswordLine } from 'solid-icons/ri' -import { batch, Match, Switch } from 'solid-js' +import { batch, createMemo, Match, Switch } from 'solid-js' const WirelessProcessWizard = () => { - const { ssid, password, setNetwork, mdns, availableNetworks } = useAppAPIContext() + const { isActivePortValid, activePort } = useAppAPIContext() + + const sortedNetworks = createMemo(() => { + return [...availableNetworks()].sort((a, b) => { + return Math.abs(+a.rssi) - Math.abs(+b.rssi) + }) + }) return ( - + {}} - onClickPrimary={() => {}} + label="Wireless Mode" + isLoader> + + Switching to wireless mode. Please wait. + + + + + - + { batch(() => { setAction(ACTION.PREV) setStep(FLASH_WIZARD_STEPS.SELECT_MODE) }) }} + onClickNetwork={(network) => { + batch(() => { + setAction(ACTION.NEXT) + setSelectedNetwork(network) + setSsid(network.ssid) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_CREDENTIALS) + }) + }} onClickManualSetup={() => {}} /> - + 0} icon={RiSystemLockPasswordLine} - onClickBack={() => {}} + onClickBack={() => { + batch(() => { + setAction(ACTION.PREV) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SELECT_NETWORK) + }) + }} onClickPrimary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SETUP_MDNS) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_MDNS) }) }} description="Here you set your Wi-Fi password so the device can connect to your wireless network."> @@ -62,7 +97,7 @@ const WirelessProcessWizard = () => { { - setNetwork(ssid(), password, mdns()) + setPassword(password) }} value={password()} placeholder="Enter password" @@ -70,7 +105,7 @@ const WirelessProcessWizard = () => {
- + { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SETUP_CREDENTIALS) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_CREDENTIALS) }) }} - onClickPrimary={() => {}}> + onClickPrimary={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_WIFI_CONNECTING_PROCESS) + }) + getApi() + .setupWirelessConnection( + activePort().activePortName, + mdns(), + ssid(), + password(), + selectedNetwork()?.channel ?? 0, + ) + .then(() => { + batch(() => { + setAction(ACTION.NEXT) + setStep( + WIRELESS_WIZARD_STEPS.WIRELESS_WIFI_CONNECTING_PROCESS_SUCCESS, + ) + }) + }) + .catch((err) => { + console.log('yep error', err) + batch(() => { + setAction(ACTION.NEXT) + setStep( + WIRELESS_WIZARD_STEPS.WIRELESS_WIFI_CONNECTING_PROCESS_FAILED, + ) + }) + }) + }}>
The tracker will be accessible under @@ -100,7 +165,7 @@ const WirelessProcessWizard = () => { id="mdns" type="text" onChange={(mdns) => { - setNetwork(ssid(), password(), mdns) + setMdns(mdns) }} value={mdns()} placeholder={ @@ -110,7 +175,7 @@ const WirelessProcessWizard = () => {
- + { description="Attempting to connect to the specified network" /> - + { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_MDNS) }) }} onClickSecondary={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.INIT) + setStep(INIT_WIZARD_STEPS.PROCESS_INIT) }) }} label="Its done!" description="Your device is set up and ready to go." /> - + {}} - onClickSecondary={() => {}} - onClickPrimary={() => {}} - label="Failed to connect to the specified network"> - Lorem ipsum ... + onClickBack={() => { + batch(() => { + setAction(ACTION.PREV) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_MDNS) + }) + }} + onClickSecondary={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SELECT_NETWORK) + }) + }} + onClickPrimary={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SETUP_MDNS) + }) + }} + label="Connection failed"> + Failed to connect to the specified network diff --git a/src/containers/FlashWizard/index.tsx b/src/containers/FlashWizard/index.tsx index 2db65840..a5b2bbd1 100644 --- a/src/containers/FlashWizard/index.tsx +++ b/src/containers/FlashWizard/index.tsx @@ -1,23 +1,45 @@ -import Card from '@components/Card' +import Card from '@components/Cards/Card' import Typography from '@components/Typography' -import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' +import { + ACTION, + FLASH_MODE, + FLASH_WIZARD_STEPS, + PORT_WIZARD_STEPS, + WIRED_WIZARD_STEPS, + WIRELESS_WIZARD_STEPS, +} from '@interfaces/enums' import SwipeAnimation from '@src/Animation' -import { setAction, setStep } from '@store/animation/animation' +import { classNames } from '@src/utils' +import { setAction, setSelectedMode, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' import { BiRegularChip } from 'solid-icons/bi' -import { batch, Match, Switch } from 'solid-js' +import { batch, createMemo, Match, Switch } from 'solid-js' import FlashProcessWizard from './FlashProcessWizard' +import SelectPortWizard from './SelectPortWizard' import SetupProcessWizard from './SetupProcessWizard' +import TerminalProcessWizard from './TerminalProcessWizard' import WiredProcessWizard from './WiredProcessWizard' import WirelessProcessWizard from './WirelessProcessWizard' const FlashWizard = () => { + const maxSize = createMemo(() => { + if (activeStep() === WIRELESS_WIZARD_STEPS.WIRELESS_SELECT_NETWORK) { + return 'h-[480px] max-w-[720px] w-full mx-24' + } + return 'min-h-[480px] max-w-[420px] w-full mx-24' + }) + return (
-
+
+ { onClickBack={() => { batch(() => { setAction(ACTION.PREV) - setStep(FLASH_WIZARD_STEPS.BEFORE_CONTINUE_CONFIG) + setStep(FLASH_WIZARD_STEPS.FLASH_PROCESS_SUCCESS) + }) + }} + onClickSecondary={() => { + batch(() => { + setAction(ACTION.NEXT) + setStep(PORT_WIZARD_STEPS.PORT_BEFORE_PROCEEDING) + setSelectedMode(FLASH_MODE.WIRELESS) }) }} - onClickSecondary={() => {}} onClickOption={() => { batch(() => { setAction(ACTION.NEXT) - setStep(FLASH_WIZARD_STEPS.SETUP_TRACKER_NAME) + setStep(PORT_WIZARD_STEPS.PORT_BEFORE_PROCEEDING) + setSelectedMode(FLASH_MODE.WIRED) }) }} label="Select Mode"> @@ -48,8 +77,9 @@ const FlashWizard = () => { - + +
diff --git a/src/containers/ManageBoard/index.tsx b/src/containers/ManageBoard/index.tsx deleted file mode 100644 index e2af1ce1..00000000 --- a/src/containers/ManageBoard/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { type IDropdownList } from '@interfaces/interfaces' -import { isValidChannel } from '@interfaces/utils' -import { BoardManagement } from '@pages/BoardManagement' -import { useNavigate } from '@solidjs/router' -import { BoardDescription, ChannelOptions, debugModes, supportedBoards, usb } from '@src/static' -import { DebugMode } from '@src/static/types' -import { MODAL_TYPE, TITLEBAR_ACTION } from '@src/static/types/enums' -import { useAppAPIContext } from '@src/store/context/api' -import { useAppContext } from '@store/context/app' -import { useAppUIContext } from '@store/context/ui' -import { setIsSoftwareDownloaded } from '@store/terminal/terminal' -import { appWindow } from '@tauri-apps/api/window' -import { Accessor, createMemo } from 'solid-js' -import { debug, trace } from 'tauri-plugin-log-api' - -export const ManageBoard = () => { - const navigate = useNavigate() - const { getDebugMode, setDebugMode } = useAppContext() - const { setOpenModal } = useAppUIContext() - const { - getFirmwareAssets, - getFirmwareVersion, - confirmFirmwareSelection, - activeBoard, - channelMode, - setChannelMode, - } = useAppAPIContext() - - const boards: Accessor = createMemo(() => { - return getFirmwareAssets() - .map((item) => { - trace(`${item.name}`) - return { - label: item.name, - description: BoardDescription[item.name.replace('_release', '')] ?? '--', - } - }) - .sort((boardA, boardB) => { - const boardALabel = boardA.label.replace('_release', '') - const boardBLabel = boardB.label.replace('_release', '') - const isBoardARelease = boardA.label.includes('_release') - const isBoardBRelease = boardB.label.includes('_release') - - const boardAIsSupported = supportedBoards.includes(boardALabel) - const boardBIsSupported = supportedBoards.includes(boardBLabel) - - if (boardAIsSupported && boardBIsSupported) { - if (isBoardARelease && !isBoardBRelease) return 1 - if (!isBoardARelease && isBoardBRelease) return -1 - } - - if (boardAIsSupported && !boardBIsSupported) return -1 - if (!boardAIsSupported && boardBIsSupported) return 1 - - return 0 - }) - }) - - const firmwareVersion = createMemo(() => { - return getFirmwareVersion?.() ?? '' - }) - - const debugMode = createMemo(() => { - return getDebugMode() ?? '' - }) - - const isUSBBoard = createMemo(() => { - return activeBoard().includes(usb) - }) - - return ( - ({ - label: el, - }))} - activeBoard={activeBoard()} - firmwareVersion={firmwareVersion()} - onClickSetChannelMode={(label) => { - if (!isValidChannel(label)) { - return - } - const elem: Element | null = document.activeElement - setChannelMode(label) - if (elem instanceof HTMLElement) { - elem?.blur() - } - }} - setDebugMode={(debugMode) => { - const elem: Element | null = document.activeElement - debug(debugMode) - setDebugMode(debugMode as DebugMode) - if (elem instanceof HTMLElement) { - elem?.blur() - } - }} - onClickConfirm={() => { - if (!activeBoard() || !firmwareVersion()) { - return - } - navigate(isUSBBoard() ? '/flashFirmware' : '/network') - }} - onSubmit={(value) => { - const elem: Element | null = document.activeElement - if (elem instanceof HTMLElement) { - elem?.blur() - } - - if (activeBoard() === value) return - if (value.match(/_release/)) { - setOpenModal({ open: true, type: MODAL_TYPE.BEFORE_SELECT_BOARD, board: value }) - return - } - setIsSoftwareDownloaded(false) - confirmFirmwareSelection(value) - }} - onClickHeader={(action: TITLEBAR_ACTION) => { - switch (action) { - case TITLEBAR_ACTION.MINIMIZE: - appWindow.minimize() - break - case TITLEBAR_ACTION.MAXIMIZE: - appWindow.toggleMaximize() - break - case TITLEBAR_ACTION.CLOSE: - appWindow.close() - break - default: - return - } - }} - onClickOpenModal={(id) => { - const el = document.getElementById(id) - if (el instanceof HTMLDialogElement) { - el.showModal() - } - }} - /> - ) -} - -export default ManageBoard diff --git a/src/containers/ManageNetwork/index.tsx b/src/containers/ManageNetwork/index.tsx deleted file mode 100644 index 5dd7255e..00000000 --- a/src/containers/ManageNetwork/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { NetworkManagement } from '@pages/NetworkManagement' -import { useNavigate } from '@solidjs/router' -import { staticMdns } from '@src/static' -import { useAppAPIContext } from '@store/context/api' - -export const ManageNetwork = () => { - const navigate = useNavigate() - const { ssid, password, setNetwork, mdns } = useAppAPIContext() - const { loader } = useAppAPIContext() - - return ( - { - navigate('/') - }} - onSubmit={(ssid, password, trackerName) => { - if (loader()) return - const mdns = !trackerName ? staticMdns : trackerName - setNetwork(ssid, password, mdns) - navigate('/flashFirmware') - }} - /> - ) -} - -export default ManageNetwork diff --git a/src/containers/Modals/DevtoolsModal.tsx b/src/containers/Modals/DevtoolsModal.tsx index 6f41fcf1..6de712ad 100644 --- a/src/containers/Modals/DevtoolsModal.tsx +++ b/src/containers/Modals/DevtoolsModal.tsx @@ -1,7 +1,7 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { isValidChannel } from '@interfaces/utils' import DevtoolsModal from '@pages/Modals/DevtoolsModal' -import { ChannelOptions } from '@src/static' +import { CHANNEL_OPTIONS } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' @@ -13,7 +13,7 @@ const DevtoolsModalContainer = () => { return ( { const { modal, setOpenModal } = useAppUIContext() const loadPorts = (availablePorts: UsbSerialPortInfo[]) => { - if (ports().length === availablePorts.length) return - if (!availablePorts.length) { - setActivePortName('', false) + setActivePortName('') setPorts([]) return } @@ -29,10 +27,6 @@ const SelectPortModalContainer = () => { : `${port.vid}:${port.pid}`, })) - if (activePort().autoSelect) { - setActivePortName(portList[0]?.label ?? DEFAULT_PORT_NAME, true) - } - setPorts(portList) } @@ -43,10 +37,12 @@ const SelectPortModalContainer = () => { createEffect( on(isModalActive, (status) => { const interval = setInterval(() => { - espApi - .availablePorts() + getApi() + .getAvailablePorts() .then(loadPorts) - .catch(() => {}) + .catch(() => { + setPorts([]) + }) }, 250) if (!status) { @@ -82,7 +78,7 @@ const SelectPortModalContainer = () => { setOpenModal({ open: false, type: MODAL_TYPE.NONE }) }} onClickConfirmBoard={(port) => { - setActivePortName(port, false) + setActivePortName(port) setOpenModal({ open: false, type: MODAL_TYPE.NONE }) }} /> diff --git a/src/containers/Modals/SelectboardModal.tsx b/src/containers/Modals/SelectboardModal.tsx index b4832bd4..96e08b58 100644 --- a/src/containers/Modals/SelectboardModal.tsx +++ b/src/containers/Modals/SelectboardModal.tsx @@ -1,7 +1,7 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' import SelectBoardModal from '@pages/Modals/SelectBoardModal' -import { BoardDescription, supportedBoards } from '@src/static' +import { BOARD_DESCRIPTION, RECOMMENDED_BOARDS } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' @@ -26,7 +26,7 @@ const SelectBoardModalContainer = () => { trace(`${item.name}`) return { label: item.name, - description: BoardDescription[item.name.replace('_release', '')] ?? '--', + description: BOARD_DESCRIPTION[item.name.replace('_release', '')] ?? '--', } }) .sort((boardA, boardB) => { @@ -35,8 +35,8 @@ const SelectBoardModalContainer = () => { const isBoardARelease = boardA.label.includes('_release') const isBoardBRelease = boardB.label.includes('_release') - const boardAIsSupported = supportedBoards.includes(boardALabel) - const boardBIsSupported = supportedBoards.includes(boardBLabel) + const boardAIsSupported = RECOMMENDED_BOARDS.includes(boardALabel) + const boardBIsSupported = RECOMMENDED_BOARDS.includes(boardBLabel) if (boardAIsSupported && boardBIsSupported) { if (isBoardARelease && !isBoardBRelease) return 1 diff --git a/src/containers/Modals/WifiModalcontainer.tsx b/src/containers/Modals/WifiModalcontainer.tsx index 559788c4..52ba1abd 100644 --- a/src/containers/Modals/WifiModalcontainer.tsx +++ b/src/containers/Modals/WifiModalcontainer.tsx @@ -1,89 +1,71 @@ -import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' -import WifiModal from '@pages/Modals/WifiModal' -import { type Command, espApi } from '@src/esp/api' -import { DEFAULT_PORT_NAME } from '@src/static' -import { useAppAPIContext } from '@store/context/api' -import { useAppNotificationsContext } from '@store/context/notifications' -import { useAppUIContext } from '@store/context/ui' -import { appWindow } from '@tauri-apps/api/window' -import { createMemo, createSignal } from 'solid-js' - const WifiModalContainer = () => { - const [isSending, setIsSending] = createSignal(false) - const { mdns, ssid, password, activePort } = useAppAPIContext() - const { modal, setOpenModal } = useAppUIContext() - const { addNotification } = useAppNotificationsContext() - - const config = createMemo(() => { - return [ - { command: 'set_mdns', data: { hostname: mdns() } }, - { command: 'set_wifi', data: { ssid: ssid(), password: password() } }, - ] - }) - - const notify = (title: string, type: ENotificationType) => { - addNotification({ title, message: title, type }) - } - - const activePortName = createMemo(() => { - return activePort().activePortName - }) - - const onClickUpdateNetworkSettings = async () => { - setIsSending(true) - - if (activePortName() === DEFAULT_PORT_NAME) { - setTimeout(() => { - setIsSending(false) - }, 250) - return - } - - notify('sending credentials', ENotificationType.INFO) - await espApi.sendCommands(activePortName(), config()) - notify('Sent credentials', ENotificationType.INFO) - - setIsSending(false) - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) - } - - return ( - { - switch (action) { - case TITLEBAR_ACTION.MINIMIZE: - appWindow.minimize() - break - case TITLEBAR_ACTION.MAXIMIZE: - appWindow.toggleMaximize() - break - case TITLEBAR_ACTION.CLOSE: - appWindow.close() - break - default: - return - } - }} - onClickClose={() => { - if (isSending()) return - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) - }} - onClick={() => { - if (isSending()) return - onClickUpdateNetworkSettings().catch(async (err) => { - if (err instanceof Error) { - notify(err.message, ENotificationType.ERROR) - } else { - notify(err, ENotificationType.ERROR) - } - setIsSending(false) - }) - }} - /> - ) + // const [isSending, setIsSending] = createSignal(false) + // const { mdns, ssid, password, activePort } = useAppAPIContext() + // const { modal, setOpenModal } = useAppUIContext() + // const { addNotification } = useAppNotificationsContext() + // const config = createMemo(() => { + // return [ + // { command: 'set_mdns', data: { hostname: mdns() } }, + // { command: 'set_wifi', data: { ssid: ssid(), password: password() } }, + // ] + // }) + // const notify = (title: string, type: ENotificationType) => { + // addNotification({ title, message: title, type }) + // } + // const activePortName = createMemo(() => { + // return activePort().activePortName + // }) + // const onClickUpdateNetworkSettings = async () => { + // setIsSending(true) + // if (activePortName() === DEFAULT_PORT_NAME) { + // setTimeout(() => { + // setIsSending(false) + // }, 250) + // return + // } + // notify('sending credentials', ENotificationType.INFO) + // await espApi.sendCommands(activePortName(), config()) + // notify('Sent credentials', ENotificationType.INFO) + // setIsSending(false) + // setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + // } + // return ( + // { + // switch (action) { + // case TITLEBAR_ACTION.MINIMIZE: + // appWindow.minimize() + // break + // case TITLEBAR_ACTION.MAXIMIZE: + // appWindow.toggleMaximize() + // break + // case TITLEBAR_ACTION.CLOSE: + // appWindow.close() + // break + // default: + // return + // } + // }} + // onClickClose={() => { + // if (isSending()) return + // setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + // }} + // onClick={() => { + // if (isSending()) return + // onClickUpdateNetworkSettings().catch(async (err) => { + // if (err instanceof Error) { + // notify(err.message, ENotificationType.ERROR) + // } else { + // notify(err, ENotificationType.ERROR) + // } + // setIsSending(false) + // }) + // }} + // /> + // ) } export default WifiModalContainer diff --git a/src/esp/api.ts b/src/esp/api.ts deleted file mode 100644 index 61d17ea5..00000000 --- a/src/esp/api.ts +++ /dev/null @@ -1,367 +0,0 @@ -import { sleep, stringToHex } from '@src/utils' -import { invoke } from '@tauri-apps/api/tauri' -import { appWindow } from '@tauri-apps/api/window' -import { apiTextParser } from './utils' - -export type UsbSerialPortInfo = { - portName: string - vid: number - pid: number - manufacturer: string | null - product: string | null - serialNumber: string | null -} - -type NativePortInfo = { - port_name: string - port_type: { - UsbPort: { - vid: number - pid: number - manufacturer: string | null - product: string | null - serial_number: string | null - } - } -} - -const availablePorts = async (): Promise => { - const nativePortInfos = await invoke('plugin:esp|available_ports') - - return nativePortInfos.map((nativePortInfo) => ({ - portName: nativePortInfo.port_name, - vid: nativePortInfo.port_type.UsbPort.vid, - pid: nativePortInfo.port_type.UsbPort.pid, - manufacturer: nativePortInfo.port_type.UsbPort.manufacturer, - product: nativePortInfo.port_type.UsbPort.product, - serialNumber: nativePortInfo.port_type.UsbPort.serial_number, - })) -} - -const testConnection = async (portName: string): Promise => { - await invoke('plugin:esp|test_connection', { - portName, - }) -} - -type EspflashStatus = - | { - type: 'Init' - address: number - total: number - } - | { - type: 'Update' - current: number - } - | { - type: 'Finish' - } - -export type ProgressCallback = (percentage: number) => void - -const flash = async (portName: string, progressCallback: ProgressCallback): Promise => { - let total = 0 - - const portEventNameHexed = stringToHex(portName) - const unlisten = await appWindow.listen( - `plugin-esp-flash-${portEventNameHexed}`, - ({ payload }) => { - switch (payload.type) { - case 'Init': { - total = payload.total - break - } - - case 'Update': { - if (total > 0) { - // In theory the total should always be set before the first Progress event, - // but we check this just for sanity. - progressCallback(Math.round((payload.current / total) * 100)) - } - break - } - - case 'Finish': { - progressCallback(100) - break - } - } - }, - ) - - try { - await invoke('plugin:esp|flash', { - portName, - }) - } finally { - unlisten() - } -} - -type LogEvent = - | { - Data: string - } - | { - Error: string - } - -const streamLogs = async ( - portName: string, - callback: (logs: string) => void, - errorCallback: (error: Error, hasOpenirisInstallation?: boolean) => void, - signal?: AbortSignal, -): Promise => { - let buffer = '' - - const unlisten = await appWindow.listen('plugin-esp-logs', ({ payload }) => { - if ('Data' in payload) { - buffer += payload.Data - const lines = buffer.split('\r\n') - buffer = lines.pop()! - - for (const line of lines) { - callback(line) - } - } else { - errorCallback(new Error(payload.Error)) - } - }) - - signal?.addEventListener('abort', () => { - unlisten() - void invoke('plugin:esp|cancel_stream_logs', { - portName, - }) - }) - - await invoke('plugin:esp|stream_logs', { - portName, - }) -} - -export type SetWifiCommand = { - command: 'set_wifi' - data: { - ssid: string - password: string - } -} - -export type SetMdnsCommand = { - command: 'set_mdns' - data: { - hostname: string - } -} - -export type switchMode = { - command: 'switch_mode' - data: { - mode: 'uvc' | 'wifi' | 'auto' - } -} - -export type getMdnsName = { - command: 'get_mdns_name' -} - -export type getDeviceMode = { - command: 'get_device_mode' -} - -export type ScanNetworks = { - command: 'scan_networks' -} - -export type Pause = { - command: 'pause' - data: { - pause: boolean - } -} - -export type Command = - | SetWifiCommand - | SetMdnsCommand - | getMdnsName - | getDeviceMode - | switchMode - | ScanNetworks - | Pause - -const sendCommands = async (portName: string, commands: Command[]): Promise => { - return await invoke('plugin:esp|send_commands', { - portName, - commands, - }) -} - -export const validateUserPortConnection = async ( - currentUserActivePort: string, -): Promise => { - await sleep(2000) - const CHECK_INTERVAL = 250 - const TIMEOUT = 5000 - const maxChecks = Math.ceil(TIMEOUT / CHECK_INTERVAL) - let checks = 0 - - return new Promise((resolve) => { - const interval = setInterval(async () => { - checks++ - - try { - const ports = await availablePorts() - const found = ports.some((port) => port.portName === currentUserActivePort) - - if (found) { - clearInterval(interval) - resolve(true) - } - } catch (err) { - console.error('Error while validating port connection', err) - } - - if (checks >= maxChecks) { - clearInterval(interval) - resolve(false) - } - }, CHECK_INTERVAL) - }) -} - -export const getAvailableNetworks = async (port: string) => { - await sendCommands(port, [{ command: 'pause', data: { pause: true } }]) - - const response: string = await invoke('plugin:esp|get_possible_networks', { - portName: port, - commands: [{ command: 'scan_networks' }], - }) - - return response - .split('\n') - .filter((el) => el.match('networks')) - .map((el) => JSON.parse(el)?.networks ?? []) - .flat() -} - -export const getDeviceName = async (port: string) => { - const response = await sendCommands(port, [{ command: 'get_mdns_name' }]) - const parsedResponse: { results: Array } = JSON.parse(response) - - return parsedResponse.results.map((res) => apiTextParser<{ hostname: string }>(res))[0].hostname -} - -export const getDeviceMode = async (port: string) => { - const response = await sendCommands(port, [{ command: 'get_device_mode' }]) - const parsedResponse: { results: Array } = JSON.parse(response) - - return parsedResponse.results.map((res) => apiTextParser<{ mode: string }>(res))[0].mode -} - -export const switchDeviceMode = async (port: string, mode: 'uvc' | 'wifi' | 'auto') => { - await sendCommands(port, [{ command: 'switch_mode', data: { mode } }]) -} - -export const setupWiredConnection = async (mdns: string, port: string) => { - let tries = 5 - - const promise = new Promise(async (resolve, reject) => { - while (tries > 0) { - try { - const currentHostname = await getDeviceName(port) - - if (JSON.stringify(currentHostname) === JSON.stringify(mdns)) { - resolve('') - return - } - - await sendCommands(port, [{ command: 'set_mdns', data: { hostname: mdns } }]) - await sleep(200) - - const updatedHostName = await getDeviceName(port) - - if (JSON.stringify(updatedHostName) === JSON.stringify(mdns)) { - resolve('') - return - } - } catch (err) { - if (tries === 1) { - if (err instanceof Error) { - reject(`'Failed to switch device mode': ${err.message}`) - } - reject(`'Failed to switch device mode': ${err}`) - return - } - } - - tries-- - await sleep(200) - } - reject('Failed to setup wired connection') - }) - - await promise - - const wiredMode = 'uvc' - let switchModeTries = 5 - - const updateDeviceModePromise = new Promise(async (resolve, reject) => { - while (switchModeTries > 0) { - try { - const currentDeviceMode = await getDeviceMode(port) - const isValidBefore = - JSON.stringify(currentDeviceMode.toLocaleLowerCase()) === - JSON.stringify(wiredMode) - - if (isValidBefore) { - resolve('') - return - } - - await switchDeviceMode(port, wiredMode) - await sleep(200) - - const updatedDeviceMode = await getDeviceMode(port) - - const isValidAfter = - JSON.stringify(updatedDeviceMode.toLocaleLowerCase()) === - JSON.stringify(wiredMode) - - if (isValidAfter) { - resolve('') - return - } - } catch (err) { - if (switchModeTries === 1) { - if (err instanceof Error) { - reject(`'Failed to switch device mode': ${err.message}`) - } - reject(`'Failed to switch device mode': ${err}`) - return - } - } - - switchModeTries-- - await sleep(200) - } - - reject('Failed to switch device mode') - }) - - await updateDeviceModePromise -} - -export const espApi = { - validateUserPortConnection, - getDeviceMode, - getDeviceName, - setupWiredConnection, - getAvailableNetworks, - availablePorts, - testConnection, - flash, - streamLogs, - sendCommands, -} diff --git a/src/esp/commands.ts b/src/esp/commands.ts new file mode 100644 index 00000000..867ba7dc --- /dev/null +++ b/src/esp/commands.ts @@ -0,0 +1,26 @@ +import { COMMAND_ENUM, ESP_COMMAND_ENUM } from './interfaces/enums' + +export const ESP_COMMAND: Record = { + [ESP_COMMAND_ENUM.GET_WIFI_CONNECTION_STATUS]: 'plugin:esp|get_wifi_connection_status', + [ESP_COMMAND_ENUM.GET_POSSIBLE_NETWORKS]: 'plugin:esp|get_possible_networks', + [ESP_COMMAND_ENUM.GET_AVAILABLE_NETWORKS]: 'plugin:esp|available_ports', + [ESP_COMMAND_ENUM.CANCEL_STREAM_LOGS]: 'plugin:esp|cancel_stream_logs', + [ESP_COMMAND_ENUM.TEST_CONNECTION]: 'plugin:esp|test_connection', + [ESP_COMMAND_ENUM.SEND_COMMANDS]: 'plugin:esp|send_commands', + [ESP_COMMAND_ENUM.STREAM_LOGS]: 'plugin:esp|stream_logs', + [ESP_COMMAND_ENUM.GET_LOGS]: 'plugin-esp-logs', + [ESP_COMMAND_ENUM.FLASH]: 'plugin:esp|flash', +} + +export const COMMAND: Record = { + [COMMAND_ENUM.GET_WIFI_STATUS]: 'get_wifi_status', + [COMMAND_ENUM.GET_DEVICE_MODE]: 'get_device_mode', + [COMMAND_ENUM.RESTART_DEVICE]: 'restart_device', + [COMMAND_ENUM.SCAN_NETWORKS]: 'scan_networks', + [COMMAND_ENUM.GET_MDNS_NAME]: 'get_mdns_name', + [COMMAND_ENUM.CONNECT_WIFI]: 'connect_wifi', + [COMMAND_ENUM.SWITCH_MODE]: 'switch_mode', + [COMMAND_ENUM.SET_MDNS]: 'set_mdns', + [COMMAND_ENUM.SET_WIFI]: 'set_wifi', + [COMMAND_ENUM.PAUSE]: 'pause', +} diff --git a/src/esp/espApiCore.ts b/src/esp/espApiCore.ts new file mode 100644 index 00000000..7b3763b4 --- /dev/null +++ b/src/esp/espApiCore.ts @@ -0,0 +1,380 @@ +import { sleep, stringToHex } from '@src/utils' +import { INetwork } from '@store/network/network' +import { invoke, InvokeArgs } from '@tauri-apps/api/tauri' +import { appWindow } from '@tauri-apps/api/window' +import * as Type from './interfaces/types' +import { apiTextParser } from './utils' +import { COMMAND, ESP_COMMAND } from './commands' + +export class EspApiCore { + AUTH_MODE: Record = { + 0: 'Open', + 1: 'WEP', + 2: 'WPA PSK', + 3: 'WPA2 PSK', + 4: 'WPA WPA2 PSK', + 5: 'WPA2 Enterprise', + 6: 'WPA3 PSK', + 7: 'WPA2 WPA3 PSK', + } + + public async sendCommand( + command: string, + data: InvokeArgs | undefined = undefined, + ): Promise { + if (data) { + return (await invoke(command, data)) as T + } + return (await invoke(command)) as T + } + + public async _sendCommands(data: InvokeArgs): Promise { + return (await invoke(ESP_COMMAND.SEND_COMMANDS, data)) as T + } + + public async _validateConnection(portName: string) { + await this.sendCommand(ESP_COMMAND.TEST_CONNECTION, { portName }) + } + + public async _setMdnsName(portName: string, mdns: string) { + await this._sendCommands({ + commands: [{ command: COMMAND.SET_MDNS, data: { hostname: mdns } }], + portName, + }) + } + + public async _pause(portName: string) { + await this._sendCommands({ + portName, + commands: [{ command: COMMAND.PAUSE, data: { pause: true } }], + }) + } + + public async _checkPortConnection(currentUserActivePort: string) { + await sleep(2000) + const CHECK_INTERVAL = 250 + const TIMEOUT = 5000 + const maxChecks = Math.ceil(TIMEOUT / CHECK_INTERVAL) + let checks = 0 + + return new Promise((resolve) => { + const interval = setInterval(async () => { + checks++ + + try { + const ports = await this._getAvailablePorts() + + const found = ports.some((port) => port.portName === currentUserActivePort) + + if (found) { + clearInterval(interval) + resolve(true) + } + } catch (err) { + console.error('Error while validating port connection', err) + } + + if (checks >= maxChecks) { + clearInterval(interval) + resolve(false) + } + }, CHECK_INTERVAL) + }) + } + + public async _getPossibleNetworks(port: string): Promise { + // await this._pause(port) + + await invoke(ESP_COMMAND.GET_WIFI_CONNECTION_STATUS, { + commands: [{ command: COMMAND.GET_WIFI_STATUS }], + portName: port, + }) + + const response: string = await invoke(ESP_COMMAND.GET_POSSIBLE_NETWORKS, { + commands: [{ command: COMMAND.SCAN_NETWORKS }], + portName: port, + }) + + console.log(response.split('\n').filter((el) => el.match('networks'))) + + return response + .split('\n') + .filter((el) => el.match('networks')) + .map((el) => JSON.parse(el)?.networks ?? []) + .flat() + .map((network) => ({ + ...network, + auth_mode: this.AUTH_MODE[network.auth_mode] ?? network.auth_mode, + })) + } + + public async _getDeviceMode(portName: string) { + const response = await this._sendCommands({ + commands: [{ command: COMMAND.GET_DEVICE_MODE }], + portName, + }) + + console.log(response) + const parsedResponse: { results: Array } = JSON.parse(response) + return parsedResponse.results.map((res) => apiTextParser<{ mode: string }>(res))[0].mode + } + + async _getDeviceName(portName: string) { + const response = await this._sendCommands({ + commands: [{ command: COMMAND.GET_MDNS_NAME }], + portName, + }) + + const parsedResponse: { results: Array } = JSON.parse(response) + return parsedResponse.results.map((res) => apiTextParser<{ hostname: string }>(res))[0] + .hostname + } + + async _getAvailablePorts() { + const nativePortInfos = await this.sendCommand( + ESP_COMMAND.GET_AVAILABLE_NETWORKS, + ) + + return nativePortInfos.map((nativePortInfo) => ({ + portName: nativePortInfo.port_name, + vid: nativePortInfo.port_type.UsbPort.vid, + pid: nativePortInfo.port_type.UsbPort.pid, + manufacturer: nativePortInfo.port_type.UsbPort.manufacturer, + product: nativePortInfo.port_type.UsbPort.product, + serialNumber: nativePortInfo.port_type.UsbPort.serial_number, + })) + } + + public async _switchDeviceMode(port: string, deviceMode: Type.DeviceMode) { + let switchModeTries = 5 + + const updateDeviceModePromise = new Promise(async (resolve, reject) => { + while (switchModeTries > 0) { + try { + const currentDeviceMode = await this._getDeviceMode(port) + + console.log(currentDeviceMode) + const isValidBefore = + JSON.stringify(currentDeviceMode.toLocaleLowerCase()) === + JSON.stringify(deviceMode) + + if (isValidBefore) { + resolve('') + return + } + + await this._sendCommands({ + commands: [{ command: COMMAND.SWITCH_MODE, data: { mode: deviceMode } }], + portName: port, + }) + + await sleep(200) + + const updatedDeviceMode = await this._getDeviceMode(port) + + const isValidAfter = + JSON.stringify(updatedDeviceMode.toLocaleLowerCase()) === + JSON.stringify(deviceMode) + + if (isValidAfter) { + resolve('') + return + } + } catch (err) { + if (switchModeTries === 1) { + if (err instanceof Error) { + reject(`'Failed to switch device mode': ${err.message}`) + } + reject(`'Failed to switch device mode': ${err}`) + return + } + } + + switchModeTries-- + await sleep(200) + } + + reject('Failed to switch device mode') + }) + + await updateDeviceModePromise + + await this._sendCommands({ + commands: [{ command: COMMAND.RESTART_DEVICE }], + portName: port, + }) + + await sleep(2000) + } + + public async _switchDeviceName(port: string, mdns: string) { + let tries = 5 + const promise = new Promise(async (resolve, reject) => { + while (tries > 0) { + try { + const currentHostname = await this._getDeviceName(port) + + if (JSON.stringify(currentHostname) === JSON.stringify(mdns)) { + resolve('') + return + } + + await this._setMdnsName(port, mdns) + await sleep(200) + + const updatedHostName = await this._getDeviceName(port) + + if (JSON.stringify(updatedHostName) === JSON.stringify(mdns)) { + resolve('') + return + } + } catch (err) { + if (tries === 1) { + if (err instanceof Error) { + reject(`'Failed to switch device mode': ${err.message}`) + } + reject(`'Failed to switch device mode': ${err}`) + return + } + } + + tries-- + await sleep(200) + } + reject('Failed to setup wired connection') + }) + + await promise + } + + public async _flash(portName: string, progressCallback: Type.ProgressCallback): Promise { + let total = 0 + + const portEventNameHexed = stringToHex(portName) + const unlisten = await appWindow.listen( + `plugin-esp-flash-${portEventNameHexed}`, + ({ payload }) => { + switch (payload.type) { + case 'Init': { + total = payload.total + break + } + + case 'Update': { + if (total > 0) { + // In theory the total should always be set before the first Progress event, + // but we check this just for sanity. + progressCallback(Math.round((payload.current / total) * 100)) + } + break + } + + case 'Finish': { + progressCallback(100) + break + } + } + }, + ) + + try { + await invoke(ESP_COMMAND.FLASH, { + portName, + }) + } finally { + unlisten() + } + } + + public async _streamLogs( + portName: string, + callback: (logs: string) => void, + errorCallback: (error: Error, hasOpenirisInstallation?: boolean) => void, + signal?: AbortSignal, + ): Promise { + let buffer = '' + + const unlisten = await appWindow.listen( + ESP_COMMAND.GET_LOGS, + ({ payload }) => { + if ('Data' in payload) { + buffer += payload.Data + const lines = buffer.split('\r\n') + buffer = lines.pop()! + + for (const line of lines) { + callback(line) + } + } else { + errorCallback(new Error(payload.Error)) + } + }, + ) + + signal?.addEventListener('abort', () => { + unlisten() + void invoke(ESP_COMMAND.CANCEL_STREAM_LOGS, { + portName, + }) + }) + + await invoke(ESP_COMMAND.STREAM_LOGS, { portName }) + } + + // TODO temporary solution + public async _setupWirelessConnection( + port: string, + mdns: string, + ssid: string, + password: string, + channel: number, + ) { + console.log(1) + await this._switchDeviceMode(port, 'wifi') + + console.log(2) + const commands = [ + { command: COMMAND.SET_MDNS, data: { hostname: mdns } }, + { + command: COMMAND.SET_WIFI, + data: { name: 'main', ssid, password, channel, power: 0 }, + }, + ] + + await this._sendCommands({ portName: port, commands }) + await this._sendCommands({ portName: port, commands: [{ command: COMMAND.CONNECT_WIFI }] }) + + const response: string = await invoke(ESP_COMMAND.GET_WIFI_CONNECTION_STATUS, { + commands: [{ command: COMMAND.GET_WIFI_STATUS }], + portName: port, + }) + + const data = response + .split('\n') + .filter((el) => el.match('results')) + .map((el) => el) + + const connectionStatus = data + .filter((el) => el.match('results')) + .map((el) => { + const response = el.split('\n')[0].split(':') + + const isConnected = response.includes('connected') + const isError = response.includes('disconnected') + + if (isConnected) return true + if (isError) return false + + return undefined + }) + .filter((el) => !!el) + .every((el) => el) + + if (!connectionStatus) throw new Error('Failed to setup wireless connection') + } + + public async _setupWiredConnection(mdns: string, port: string) { + await this._switchDeviceName(port, mdns) + await this._switchDeviceMode(port, 'uvc') + } +} diff --git a/src/esp/espCore.ts b/src/esp/espCore.ts new file mode 100644 index 00000000..213036ac --- /dev/null +++ b/src/esp/espCore.ts @@ -0,0 +1,59 @@ +import { EspApiCore } from './espApiCore' +import * as Type from './interfaces/types' + +export class EspApiClientProvider extends EspApiCore { + public async getAvailableNetworks(port: string) { + return this._getPossibleNetworks(port) + } + + public async getDeviceMode(portName: string) { + return this._getDeviceMode(portName) + } + + public async validateConnection(portName: string) { + return this._validateConnection(portName) + } + + public async switchDeviceMode(port: string, deviceMode: Type.DeviceMode) { + return this._switchDeviceMode(port, deviceMode) + } + + public async getDeviceName(port: string) { + return this._getDeviceName(port) + } + + public async flash(portName: string, progressCallback: Type.ProgressCallback) { + return this._flash(portName, progressCallback) + } + + public async streamLogs( + portName: string, + callback: (logs: string) => void, + errorCallback: (error: Error, hasOpenirisInstallation?: boolean) => void, + signal?: AbortSignal, + ) { + return this._streamLogs(portName, callback, errorCallback, signal) + } + + public async setupWirelessConnection( + port: string, + mdns: string, + ssid: string, + password: string, + channel: number, + ) { + return this._setupWirelessConnection(port, mdns, ssid, password, channel) + } + + public async setupWiredConnection(mdns: string, port: string) { + return this._setupWiredConnection(mdns, port) + } + + public async checkPortConnection(currentUserActivePort: string) { + return this._checkPortConnection(currentUserActivePort) + } + + public async getAvailablePorts() { + return this._getAvailablePorts() + } +} diff --git a/src/esp/index.ts b/src/esp/index.ts new file mode 100644 index 00000000..691be061 --- /dev/null +++ b/src/esp/index.ts @@ -0,0 +1,8 @@ +import { EspApiClientProvider } from './espCore' + +let _api: EspApiClientProvider | undefined + +export const getApi = (): EspApiClientProvider => { + _api = new EspApiClientProvider() + return _api +} diff --git a/src/esp/interfaces/enums.ts b/src/esp/interfaces/enums.ts new file mode 100644 index 00000000..90cd1859 --- /dev/null +++ b/src/esp/interfaces/enums.ts @@ -0,0 +1,24 @@ +export enum ESP_COMMAND_ENUM { + GET_WIFI_CONNECTION_STATUS = 'GET_WIFI_CONNECTION_STATUS', + GET_AVAILABLE_NETWORKS = 'GET_AVAILABLE_NETWORKS', + GET_POSSIBLE_NETWORKS = 'GET_POSSIBLE_NETWORKS', + CANCEL_STREAM_LOGS = 'CANCEL_STREAM_LOGS', + TEST_CONNECTION = 'TEST_CONNECTION', + SEND_COMMANDS = 'SEND_COMMANDS', + STREAM_LOGS = 'STREAM_LOGS', + GET_LOGS = 'GET_LOGS', + FLASH = 'FLASH', +} + +export enum COMMAND_ENUM { + GET_DEVICE_MODE = 'GET_DEVICE_MODE', + GET_WIFI_STATUS = 'GET_WIFI_STATUS', + RESTART_DEVICE = 'RESTART_DEVICE', + SCAN_NETWORKS = 'SCAN_NETWORKS', + GET_MDNS_NAME = 'GET_MDNS_NAME', + CONNECT_WIFI = 'CONNECT_WIFI', + SWITCH_MODE = 'SWITCH_MODE', + SET_MDNS = 'SET_MDNS', + SET_WIFI = 'SET_WIFI', + PAUSE = 'PAUSE', +} diff --git a/src/esp/interfaces/types.ts b/src/esp/interfaces/types.ts new file mode 100644 index 00000000..e19781f0 --- /dev/null +++ b/src/esp/interfaces/types.ts @@ -0,0 +1,110 @@ +export type SetWifiCommand = { + command: 'set_wifi' + data: { + name: string + channel: number + power: number + ssid: string + password: string + } +} + +export type SetMdnsCommand = { + command: 'set_mdns' + data: { + hostname: string + } +} + +export type switchMode = { + command: 'switch_mode' + data: { + mode: 'uvc' | 'wifi' | 'auto' + } +} + +export type getMdnsName = { + command: 'get_mdns_name' +} + +export type getDeviceMode = { + command: 'get_device_mode' +} + +export type ScanNetworks = { + command: 'scan_networks' +} + +export type Pause = { + command: 'pause' + data: { + pause: boolean + } +} + +export type ConnectWifi = { + command: 'connect_wifi' +} + +export type GetWifiStatus = { + command: 'get_wifi_status' +} + +export type Command = + | SetWifiCommand + | SetMdnsCommand + | getMdnsName + | getDeviceMode + | switchMode + | ScanNetworks + | Pause + | ConnectWifi + | GetWifiStatus + +export type DeviceMode = 'uvc' | 'wifi' | 'auto' + +export type EspflashStatus = + | { + type: 'Init' + address: number + total: number + } + | { + type: 'Update' + current: number + } + | { + type: 'Finish' + } + +export type NativePortInfo = { + port_name: string + port_type: { + UsbPort: { + vid: number + pid: number + manufacturer: string | null + product: string | null + serial_number: string | null + } + } +} + +export type UsbSerialPortInfo = { + portName: string + vid: number + pid: number + manufacturer: string | null + product: string | null + serialNumber: string | null +} + +export type ProgressCallback = (percentage: number) => void + +export type LogEvent = + | { + Data: string + } + | { + Error: string + } diff --git a/src/pages/BoardManagement/index.tsx b/src/pages/BoardManagement/index.tsx deleted file mode 100644 index 79020cbf..00000000 --- a/src/pages/BoardManagement/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { type Component } from 'solid-js' -import { SelectBoard } from '@components/Board/SelectBoard' -import { Devtools } from '@components/DevTools' -import { Footer } from '@components/Footer' -import { type IDropdownList } from '@interfaces/interfaces' -import { type CHANNEL_TYPE, TITLEBAR_ACTION } from '@src/static/types/enums' - -export interface IProps { - onClickSetChannelMode: (data: string) => void - onClickHeader: (action: TITLEBAR_ACTION) => void - setDebugMode: (debugMode: string) => void - onClickOpenModal: (id: string) => void - onSubmit: (board: string) => void - onClickConfirm: () => void - boards: IDropdownList[] - channelOptions: IDropdownList[] - firmwareVersion: string - debugModes: IDropdownList[] - activeBoard: string - channelMode: CHANNEL_TYPE - debugMode: string - lockButton: boolean - version: string -} - -export const BoardManagement: Component = (props) => { - return ( -
-
-
- - -
-
-
-
-
-
- ) -} - -export default BoardManagement diff --git a/src/pages/Modals/ApModeModal.tsx b/src/pages/Modals/ApModeModal.tsx index 69ea363d..e84fd666 100644 --- a/src/pages/Modals/ApModeModal.tsx +++ b/src/pages/Modals/ApModeModal.tsx @@ -3,7 +3,7 @@ import { Button } from '@components/Buttons/Button' import { Modal } from '@components/Modal' import ModalHeader from '@components/ModalHeader' import { TITLEBAR_ACTION } from '@interfaces/enums' -import { apModalID } from '@src/static' +import { AP_MODE_ID } from '@src/static' import Typography from '@components/Typography' export interface IProps { @@ -19,7 +19,7 @@ const ApModeModal: Component = (props) => { return ( void @@ -21,7 +21,7 @@ const BeforeFlashingModal: Component = (props) => { return ( @@ -62,7 +62,7 @@ const BeforeFlashingModal: Component = (props) => { isActive={true} label="Install Openiris" onClick={() => { - const el = document.getElementById(beforeFlashingModalID) + const el = document.getElementById(BEFORE_FLASHING_MODE) if (el instanceof HTMLDialogElement) { el.close() } diff --git a/src/pages/Modals/BeforeSelectBoardModal.tsx b/src/pages/Modals/BeforeSelectBoardModal.tsx index d5b6be3a..d8b5e382 100644 --- a/src/pages/Modals/BeforeSelectBoardModal.tsx +++ b/src/pages/Modals/BeforeSelectBoardModal.tsx @@ -1,10 +1,10 @@ -import { Component } from 'solid-js' import { Footer } from '@components/Footer' import { Modal } from '@components/Modal' import ModalHeader from '@components/ModalHeader' -import { TITLEBAR_ACTION } from '@interfaces/enums' -import { beforeSelectBoardModalID } from '@src/static' import Typography from '@components/Typography' +import { TITLEBAR_ACTION } from '@interfaces/enums' +import { BEFORE_SELECT_BOARD_MODE } from '@src/static' +import { Component } from 'solid-js' export interface IProps { onClickHeader: (action: TITLEBAR_ACTION) => void @@ -18,7 +18,7 @@ const BeforeSelectBoardModal: Component = (props) => { return ( diff --git a/src/pages/Modals/SelectBoardModal.tsx b/src/pages/Modals/SelectBoardModal.tsx index 6dcc3f2b..c1a1dafe 100644 --- a/src/pages/Modals/SelectBoardModal.tsx +++ b/src/pages/Modals/SelectBoardModal.tsx @@ -5,7 +5,7 @@ import ModalHeader from '@components/ModalHeader' import Typography from '@components/Typography' import { TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' -import { beforeSelectBoardModalID } from '@src/static' +import { BEFORE_SELECT_BOARD_MODE } from '@src/static' import { BsSearch } from 'solid-icons/bs' import { Component, createMemo, createSignal, For, Show } from 'solid-js' @@ -30,7 +30,7 @@ const SelectBoardModal: Component = (props) => { { props.onClickClose() @@ -69,7 +69,7 @@ const SelectBoardModal: Component = (props) => { {...data} isActive={data.label === props.activeBoard} onClick={() => { - const el = document.getElementById(beforeSelectBoardModalID) + const el = document.getElementById(BEFORE_SELECT_BOARD_MODE) if (el instanceof HTMLDialogElement) { el.close() } diff --git a/src/pages/Modals/SelectPortModal.tsx b/src/pages/Modals/SelectPortModal.tsx index 7aad9355..e9b9540f 100644 --- a/src/pages/Modals/SelectPortModal.tsx +++ b/src/pages/Modals/SelectPortModal.tsx @@ -5,8 +5,7 @@ import ModalHeader from '@components/ModalHeader' import Typography from '@components/Typography' import { TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' -import { beforeSelectBoardModalID, SELECT_PORT_MODAL_ID } from '@src/static' -import { BsSearch } from 'solid-icons/bs' +import { SELECT_PORT_MODAL_ID } from '@src/static' import { Component, createMemo, createSignal, For, Show } from 'solid-js' export interface IProps { diff --git a/src/pages/Modals/WifiModal.tsx b/src/pages/Modals/WifiModal.tsx index c90fb90f..e00c7ae7 100644 --- a/src/pages/Modals/WifiModal.tsx +++ b/src/pages/Modals/WifiModal.tsx @@ -3,7 +3,7 @@ import { Button } from '@components/Buttons/Button' import { Modal } from '@components/Modal' import ModalHeader from '@components/ModalHeader' import { TITLEBAR_ACTION } from '@interfaces/enums' -import { wifiModalID } from '@src/static' +import { WIFI_MODE_ID } from '@src/static' import Typography from '@components/Typography' export interface IProps { @@ -19,7 +19,7 @@ const WifiModal: Component = (props) => { return ( void - onSubmit: (ssid: string, password: string, mdns: string) => void - isLoading: boolean - ssid: string - mdns: string - password: string -} - -export const NetworkManagement: Component = (props) => { - const [ssid, setSSID] = createSignal('') - const [password, setPassword] = createSignal('') - const [mdns, setMdns] = createSignal('') - - const isNotActive = createMemo(() => !ssid() || !password()) - - onMount(() => { - setSSID(props.ssid) - setPassword(props.password) - setMdns(props.mdns) - }) - - return ( -
-
-
- { - if (/[^A-Za-z\d]/.test(value)) return - setMdns(value.toLocaleLowerCase()) - }} - /> -
-
-
{ - if (isNotActive()) return - props.onSubmit(ssid(), password(), mdns()) - }} - isPrimaryActive={isNotActive()} - isSecondActive={false} - primaryLabel="Confirm" - secondLabel="Select board" - /> -
-
-
- ) -} - -export default NetworkManagement diff --git a/src/pages/Terminal/index.tsx b/src/pages/Terminal/index.tsx index 464e873b..1a822a25 100644 --- a/src/pages/Terminal/index.tsx +++ b/src/pages/Terminal/index.tsx @@ -1,15 +1,11 @@ -import { Component, createEffect, createSignal, For, Show } from 'solid-js' import { Button } from '@components/Buttons/Button' import { Footer } from '@components/Footer' -import PortDropdown from '@components/Dropdown/PortDropdown' import Firmware from '@components/Terminal/Firmware' import Step from '@components/Terminal/Step' import TerminalHeader from '@components/Terminal/TerminalHeader' import { FLASH_STATUS, FLASH_STEP } from '@interfaces/enums' import { IActivePort, IDropdownList, IFirmwareState } from '@interfaces/interfaces' -import { VirtualList } from '@pages/VirtualList' -import { DEFAULT_PORT_NAME } from '@src/static' -import { shortName } from '@src/utils' +import { Component, createEffect, createSignal, For, Show } from 'solid-js' export interface IProps { onClickInstallOpenIris: () => void @@ -47,24 +43,6 @@ const Terminal: Component = (props) => { action() } - const renderPortDropdown = (additionalClass: string) => ( - props.onClickPort(port.label)} - data={props.ports} - isScrollbar={props.ports.length >= 4} - label={shortName( - props.activePort.autoSelect - ? DEFAULT_PORT_NAME - : props.activePort.activePortName.toLowerCase(), - 3, - )} - activeElement={ - props.activePort.autoSelect ? DEFAULT_PORT_NAME : props.activePort.activePortName - } - /> - ) - return (
@@ -122,11 +100,11 @@ const Terminal: Component = (props) => {
- + /> */}
@@ -140,22 +118,19 @@ const Terminal: Component = (props) => {
-
- {renderPortDropdown('max-[1027px]:hidden !w-auto min-[1028px]:visible')}
diff --git a/src/pages/VirtualList/index.tsx b/src/pages/VirtualList/index.tsx deleted file mode 100644 index 0326284f..00000000 --- a/src/pages/VirtualList/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, createMemo, createSignal, For, onCleanup, onMount } from 'solid-js' - -export interface IProps { - items: string[] -} - -export const VirtualList: Component = (props) => { - const [scrollTop, setScrollTop] = createSignal(0) - - let parentRef - const itemHeight = 24 - const viewportHeight = 1200 - - const startIdx = () => { - return Math.floor(scrollTop() / itemHeight) - } - - const endIdx = () => { - return Math.min(props.items.length, Math.ceil((scrollTop() + viewportHeight) / itemHeight)) - } - - const handleScroll = (e) => { - setScrollTop(e.target.scrollTop) - } - - onMount(() => { - if (parentRef) { - parentRef.addEventListener('scroll', handleScroll) - } - - onCleanup(() => { - if (parentRef) { - parentRef.removeEventListener('scroll', handleScroll) - } - }) - }) - - const items = createMemo(() => { - return props.items.slice(startIdx(), endIdx()) - }) - - const height = createMemo(() => { - const height = props.items.length * itemHeight - return height > 600 ? '600px' : 'auto' - }) - - return ( -
(parentRef = el)} - style={{ height: height(), width: '100%', overflow: 'auto' }}> -
- - {(item, index) => { - return ( -
- 
-                                    {item}
-
-
- ) - }} - -
-
- ) -} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index a975301b..fa09621a 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,15 +1,12 @@ -import { lazy } from 'solid-js' import type { RouteDefinition } from '@solidjs/router' +import { lazy } from 'solid-js' -const NetworkConfigurator = lazy(() => import('@containers/ManageNetwork')) -const BoardConfigurator = lazy(() => import('@containers/ManageBoard')) const FlashFirmware = lazy(() => import('@containers/FlashFirmware')) const page404 = lazy(() => import('@containers/404/[...404]')) const FlashWizard = lazy(() => import('@containers/FlashWizard')) export const routes: RouteDefinition[] = [ { path: '/flashFirmware', component: FlashFirmware }, - { path: '/network', component: NetworkConfigurator }, { path: '/', component: FlashWizard }, { path: '**', component: page404 }, ] diff --git a/src/static/index.ts b/src/static/index.ts index fee8b7bd..911a63e9 100644 --- a/src/static/index.ts +++ b/src/static/index.ts @@ -1,30 +1,19 @@ import { type IChannelOptions } from '@interfaces/interfaces' import { BOARD_TYPE, CHANNEL_TYPE } from './types/enums' -export const supportedBoards: string[] = [BOARD_TYPE.XIAOSENSES_3, BOARD_TYPE.XIAOSENSES_3_USB] -export const debugModes: string[] = ['off', 'error', 'warn', 'info', 'debug', 'trace'] -export const defaultMdnsLength = 24 -export const portBaudRate = 115200 -export const mdnsLength = 12 -export const radius = 24 -export const usb = 'USB' -export const questionModalId = 'questionModal' -export const apModalID = 'apMode' -export const logsModalID = 'logs' -export const wifiModalID = 'wifiMode' -export const beforeFlashingModalID = 'beforeFlashingMode' -export const beforeSelectBoardModalID = 'BeforeSelectBoardMode' +export const RECOMMENDED_BOARDS: string[] = [BOARD_TYPE.XIAOSENSES_3, BOARD_TYPE.XIAOSENSES_3_USB] +export const DEFAULT_MDNS_LENGTH = 24 +export const MDNS_LENGTH = 12 +export const USB = 'USB' +export const AP_MODE_ID = 'AP_MODE_ID' +export const WIFI_MODE_ID = 'WIFI_MODE_ID' +export const BEFORE_FLASHING_MODE = 'BEFORE_FLASHING_MODE' +export const BEFORE_SELECT_BOARD_MODE = 'BEFORE_SELECT_BOARD_MODE' export const SELECT_PORT_MODAL_ID = 'SELECT_PORT_MODAL_ID' export const DEVTOOLS_MODAL_ID = 'DEVTOOLS_MODAL_ID' -export const debugModalId = 'debugModal' -export const staticMdns = 'openiristracker' -export const DEVICE_LOST = 'The device has been lost.' -export const STREAM_IS_UNDER = 'The stream is under' -export const SSID_MISSING = 'ssid missing' -export const AP_IP_ADDRESS = 'AP IP address:' export const DEFAULT_PORT_NAME = 'auto' -export const BoardDescription: { +export const BOARD_DESCRIPTION: { [key in BOARD_TYPE]: string } = { [BOARD_TYPE.BABBLE_WROOMS_S3]: 'Official Babble tracker board (wireless mode)', @@ -45,7 +34,7 @@ export const BoardDescription: { [BOARD_TYPE.XIAOSENSES_3_USB]: "SeedStudio's XIAO ESP32-S3 Sense (wired mode)", } -export const BoardConnectionMethod: { +export const BOARD_CONNECTION_METHOD: { [key in BOARD_TYPE]: string } = { [BOARD_TYPE.BABBLE_WROOMS_S3]: 'wireless mode', @@ -65,7 +54,7 @@ export const BoardConnectionMethod: { [BOARD_TYPE.XIAOSENSES_3_USB]: 'wired mode', } -export const ChannelOptions: Record = { +export const CHANNEL_OPTIONS: Record = { [CHANNEL_TYPE.OFFICIAL]: { label: CHANNEL_TYPE.OFFICIAL, description: 'Official channel for official releases.', diff --git a/src/static/types/enums.ts b/src/static/types/enums.ts index f54d546f..73b5e451 100644 --- a/src/static/types/enums.ts +++ b/src/static/types/enums.ts @@ -146,27 +146,52 @@ export enum ACTION { PREV = 'PREV', } -export enum FLASH_WIZARD_STEPS { - INIT = 'INIT', +export enum INIT_WIZARD_STEPS { + PROCESS_INIT = 'PROCESS_INIT', SELECT_BOARD = 'SELECT_BOARD', + INIT_BEFORE_PROCEEDING = 'INIT_BEFORE_PROCEEDING', SELECT_PORT = 'SELECT_PORT', - BEFORE_PROCEEDING = 'BEFORE_PROCEEDING', - CHECK_PORT_CONNECTION = 'CHECK_PORT_CONNECTION', - FLASH_PROCESS = 'FLASH_PROCESS', +} + +export enum FLASH_WIZARD_STEPS { FLASH_PROCESS_SUCCESS = 'FLASH_PROCESS_SUCCESS', - BEFORE_CONTINUE_CONFIG = 'BEFORE_CONTINUE_CONFIG', - SELECT_MODE = 'SELECT_MODE', FLASH_PROCESS_FAILED = 'FLASH_PROCESS_FAILED', - SETUP_TRACKER_NAME = 'SETUP_TRACKER_NAME', - SELECT_NETWORK = 'SELECT_NETWORK', - FLASH_WIRED_PROCESS = 'FLASH_WIRED_PROCESS', - FLASH_WIRED_PROCESS_FAILED = 'FLASH_WIRED_PROCESS_FAILED', - FLASH_WIRED_PROCESS_SUCCESS = 'FLASH_WIRED_PROCESS_SUCCESS', - SHOW_TERMINAL = 'SHOW_TERMINAL', - SETUP_CREDENTIALS = 'SETUP_CREDENTIALS', - SCAN_NETWORK = 'SCAN_NETWORK', - SETUP_MDNS = 'SETUP_MDNS', - WIFI_CONNECTING = 'WIFI_CONNECTING', - WIFI_CONNECTING_SUCCESS = 'WIFI_CONNECTING_SUCCESS', - WIFI_CONNECTING_FAILED = 'WIFI_CONNECTING_FAILED', + FLASH_PROCESS = 'FLASH_PROCESS', + SELECT_MODE = 'SELECT_MODE', +} + +export enum FLASH_MODE { + TERMINAL = 'TERMINAL', + WIRELESS = 'WIRELESS', + WIRED = 'WIRED', +} + +export enum TERMINAL_WIZARD_STEPS {} + +export enum PORT_WIZARD_STEPS { + PORT_BEFORE_PROCEEDING = 'PORT_BEFORE_PROCEEDING', + PORT_CHECK_PORT_CONNECTION = 'PORT_CHECK_PORT_CONNECTION', + PORT_SELECT_PORT = 'PORT_SELECT_PORT', +} + +export enum WIRED_WIZARD_STEPS { + WIRED_SETUP_TRACKER_PROCESS_SUCCESS = 'WIRED_SETUP_TRACKER_PROCESS_SUCCESS', + WIRED_SETUP_TRACKER_PROCESS_FAILED = 'WIRED_SETUP_TRACKER_PROCESS_FAILED', + WIRED_SETUP_TRACKER_PROCESS = 'WIRED_SETUP_TRACKER_PROCESS', + WIRED_SETUP_TRACKER_NAME = 'WIRED_SETUP_TRACKER_NAME', +} + +export enum WIRELESS_WIZARD_STEPS { + WIRELESS_WIFI_CONNECTING_PROCESS_SUCCESS = 'WIRELESS_WIFI_CONNECTING_PROCESS_SUCCESS', + WIRELESS_WIFI_CONNECTING_PROCESS_FAILED = 'WIRELESS_WIFI_CONNECTING_PROCESS_FAILED', + WIRELESS_PORT_CONNECTION_VALIDATION = 'WIRELESS_PORT_CONNECTION_VALIDATION', + WIRELESS_VALIDATE_PORT_CONNECTION = 'WIRELESS_VALIDATE_PORT_CONNECTION', + WIRELESS_SCAN_FOR_NETWORKS_FAILED = 'WIRELESS_SCAN_FOR_NETWORKS_FAILED', + WIRELESS_WIFI_CONNECTING_PROCESS = 'WIRELESS_WIFI_CONNECTING_PROCESS', + WIRELESS_SETUP_WIRELESS_MODE = 'WIRELESS_SETUP_WIRELESS_MODE', + WIRELESS_SCAN_FOR_NETWORKS = 'WIRELESS_SCAN_FOR_NETWORKS', + WIRELESS_SETUP_CREDENTIALS = 'WIRELESS_SETUP_CREDENTIALS', + WIRELESS_SELECT_NETWORK = 'WIRELESS_SELECT_NETWORK', + WIRELESS_SELECT_PORT = 'WIRELESS_SELECT_PORT', + WIRELESS_SETUP_MDNS = 'WIRELESS_SETUP_MDNS', } diff --git a/src/static/types/interfaces.ts b/src/static/types/interfaces.ts index 6a18c50e..4d7c8876 100644 --- a/src/static/types/interfaces.ts +++ b/src/static/types/interfaces.ts @@ -145,7 +145,6 @@ export interface AppStoreNotifications { export type IActivePort = { activePortName: string - autoSelect: boolean } export interface AppStoreAPI { @@ -154,17 +153,13 @@ export interface AppStoreAPI { ghAPI: IGHRest firmwareType: string activeBoard: string - ssid: string - password: string apModeStatus: boolean - mdns: string trackerName: string channelMode: CHANNEL_TYPE manifestPath: string activePort: IActivePort ports: IDropdownList[] isActivePortValid: boolean - availableNetworks: any[] // add types later } export interface IOpenModal { @@ -186,32 +181,6 @@ export interface ISignal { dataTerminalReady: boolean } -export interface INavigatorPort extends Navigator { - readable: { - locked: boolean - pipeThrough: ( - data: TextDecoderStream, - object?: unknown, - ) => { - pipeThrough: ( - data: TransformStream, - object?: unknown, - ) => { - pipeTo: (data: WritableStream, object?: unknown) => Promise - } - } - } - setSignals: ({ requestToSend, dataTerminalReady }: ISignal) => Promise - open: ({ baudRate }: { baudRate: number }) => Promise - close: () => Promise -} - -export interface INavigator extends Navigator { - serial: { - requestPort: () => Promise - } -} - export interface IChannelOptions { label: CHANNEL_TYPE description: string diff --git a/src/store/animation/animation.ts b/src/store/animation/animation.ts index 723facce..9ae79816 100644 --- a/src/store/animation/animation.ts +++ b/src/store/animation/animation.ts @@ -1,26 +1,45 @@ -import { ACTION, FLASH_WIZARD_STEPS } from '@interfaces/enums' +import { + ACTION, + INIT_WIZARD_STEPS, + FLASH_WIZARD_STEPS, + TERMINAL_WIZARD_STEPS, + WIRED_WIZARD_STEPS, + WIRELESS_WIZARD_STEPS, + FLASH_MODE, + PORT_WIZARD_STEPS, +} from '@interfaces/enums' import { createMemo } from 'solid-js' import { createStore, produce } from 'solid-js/store' +export type steps = + | INIT_WIZARD_STEPS + | FLASH_WIZARD_STEPS + | TERMINAL_WIZARD_STEPS + | WIRED_WIZARD_STEPS + | WIRELESS_WIZARD_STEPS + | PORT_WIZARD_STEPS + export interface IAnimationState { action: ACTION - step: FLASH_WIZARD_STEPS - prevStep: FLASH_WIZARD_STEPS - activeStep: FLASH_WIZARD_STEPS + step: steps + prevStep: steps + activeStep: steps showComponent: boolean + selectedMode: FLASH_MODE } const defaultState: IAnimationState = { - step: FLASH_WIZARD_STEPS.SELECT_MODE, - activeStep: FLASH_WIZARD_STEPS.SELECT_MODE, - prevStep: FLASH_WIZARD_STEPS.SELECT_MODE, + step: INIT_WIZARD_STEPS.PROCESS_INIT, + activeStep: INIT_WIZARD_STEPS.PROCESS_INIT, + prevStep: INIT_WIZARD_STEPS.PROCESS_INIT, + selectedMode: FLASH_MODE.WIRED, action: ACTION.NEXT, showComponent: true, } const [state, setState] = createStore(defaultState) -export const setStep = (step: FLASH_WIZARD_STEPS) => { +export const setStep = (step: steps) => { setState( produce((s) => { s.prevStep = s.step @@ -37,7 +56,7 @@ export const setAction = (action: ACTION) => { ) } -export const setActiveStep = (activeStep: FLASH_WIZARD_STEPS) => { +export const setActiveStep = (activeStep: steps) => { setState( produce((s) => { s.activeStep = activeStep @@ -53,4 +72,12 @@ export const setShowComponent = (showComponent: boolean) => { ) } +export const setSelectedMode = (mode: FLASH_MODE) => { + setState( + produce((s) => { + s.selectedMode = mode + }), + ) +} + export const animationState = createMemo(() => state) diff --git a/src/store/animation/selectors.ts b/src/store/animation/selectors.ts index 00d758d1..e0ff5409 100644 --- a/src/store/animation/selectors.ts +++ b/src/store/animation/selectors.ts @@ -1,5 +1,5 @@ import { createStoreSelectors } from '@store/utils' import { animationState } from './animation' -export const { activeStep, action, step, showComponent, prevStep } = +export const { activeStep, action, step, showComponent, prevStep, selectedMode } = createStoreSelectors(animationState) diff --git a/src/store/context/api.tsx b/src/store/context/api.tsx index 2cb4a781..c282f296 100644 --- a/src/store/context/api.tsx +++ b/src/store/context/api.tsx @@ -46,17 +46,14 @@ interface AppAPIContext { getRESTDevice: Accessor getRESTResponse: Accessor loader: Accessor - ssid: Accessor apModeStatus: Accessor - password: Accessor - mdns: Accessor isActivePortValid: Accessor channelMode: Accessor setRESTStatus: (status: RESTStatus) => void setRESTDevice: (device: string) => void setRESTResponse: (response: object) => void - activePort: Accessor<{ activePortName: string; autoSelect: boolean }> + activePort: Accessor<{ activePortName: string }> //********************************* endpoints *************************************/ getEndpoints: Accessor> getEndpoint: (key: string) => IEndpoint @@ -69,14 +66,12 @@ interface AppAPIContext { useOTA: (firmwareName: string, device: string) => Promise setActiveBoard: (board: string) => void setIsActivePortValid: (status: boolean) => void - setActivePortName: (portName: string, autoSelect: boolean) => void - setNetwork: (ssid: string, password: string, mdns: string) => void + setActivePortName: (portName: string) => void setChannelMode: (channel: CHANNEL_TYPE) => void setAPModeStatus: (status: boolean) => void saveManifestPath: (url: string) => void confirmFirmwareSelection: (board: string) => void manifestPath: Accessor - availableNetworks: Accessor // add types later ports: Accessor setPorts: (ports: IDropdownList[]) => void } @@ -115,20 +110,15 @@ export const AppAPIProvider: Component = (props) => { assets: [], version: '', }, - ssid: '', - password: '', firmwareType: '', trackerName: '', loader: false, apModeStatus: false, - mdns: '', manifestPath: '', activePort: { activePortName: '', - autoSelect: true, }, ports: [], - availableNetworks: [], } const [state, setState] = createStore(defaultState) @@ -225,25 +215,15 @@ export const AppAPIProvider: Component = (props) => { }), ) } - const setActivePortName = (activePortName: string, autoSelect: boolean) => { + const setActivePortName = (activePortName: string) => { setState( produce((s) => { s.activePort = { activePortName, - autoSelect, } }), ) } - const setNetwork = (ssid: string, password: string, mdns: string) => { - setState( - produce((s) => { - s.ssid = ssid - s.password = password - s.mdns = mdns - }), - ) - } const setAPModeStatus = (status: boolean) => { setState( @@ -261,14 +241,12 @@ export const AppAPIProvider: Component = (props) => { ) } - const availableNetworks = createMemo(() => apiState().availableNetworks) const getGHRestStatus = createMemo(() => apiState().ghAPI.status) const getFirmwareAssets = createMemo(() => apiState().ghAPI.assets) const getFirmwareVersion = createMemo(() => apiState().ghAPI.version) const getFirmwareType = createMemo(() => apiState().firmwareType) const trackerName = createMemo(() => apiState().trackerName) const loader = createMemo(() => apiState().loader) - const mdns = createMemo(() => apiState().mdns) const channelMode = createMemo(() => apiState().channelMode) const apModeStatus = createMemo(() => apiState().apModeStatus) const manifestPath = createMemo(() => apiState().manifestPath) @@ -302,8 +280,6 @@ export const AppAPIProvider: Component = (props) => { const getRESTStatus = createMemo(() => apiState().restAPI.status) const getRESTDevice = createMemo(() => apiState().restAPI.device) const getRESTResponse = createMemo(() => apiState().restAPI.response) - const ssid = createMemo(() => apiState().ssid) - const password = createMemo(() => apiState().password) const ports = createMemo(() => apiState().ports) const getEndpoints = createMemo(() => endpointsMap) const getEndpoint = (key: string) => @@ -654,9 +630,6 @@ export const AppAPIProvider: Component = (props) => { return ( = (props) => { apModeStatus, setAPModeStatus, channelMode, - mdns, setChannelMode, saveManifestPath, manifestPath, @@ -697,7 +669,6 @@ export const AppAPIProvider: Component = (props) => { trackerName, ports, setPorts, - availableNetworks, }}> {props.children} diff --git a/src/store/network/network.ts b/src/store/network/network.ts new file mode 100644 index 00000000..0d86a275 --- /dev/null +++ b/src/store/network/network.ts @@ -0,0 +1,70 @@ +import { createMemo } from 'solid-js' +import { createStore, produce } from 'solid-js/store' + +export interface INetwork { + ssid: string + channel: number + rssi: string + mac_address: string + auth_mode: string +} + +export interface INetworkStore { + availableNetworks: INetwork[] + selectedNetwork: INetwork | undefined + mdns: string + password: string + ssid: string +} + +const defaultState: INetworkStore = { + availableNetworks: [], + selectedNetwork: undefined, + password: '', + mdns: '', + ssid: '', +} + +const [state, setState] = createStore(defaultState) + +export const setAvailableNetworks = (networks: any[]) => { + setState( + produce((s) => { + s.availableNetworks = networks + }), + ) +} + +export const setSelectedNetwork = (network: INetwork) => { + setState( + produce((s) => { + s.selectedNetwork = network + }), + ) +} + +export const setPassword = (password: string) => { + setState( + produce((s) => { + s.password = password + }), + ) +} + +export const setMdns = (mdns: string) => { + setState( + produce((s) => { + s.mdns = mdns + }), + ) +} + +export const setSsid = (ssid: string) => { + setState( + produce((s) => { + s.ssid = ssid + }), + ) +} + +export const networkState = createMemo(() => state) diff --git a/src/store/network/selectors.ts b/src/store/network/selectors.ts new file mode 100644 index 00000000..0b7cf254 --- /dev/null +++ b/src/store/network/selectors.ts @@ -0,0 +1,5 @@ +import { createStoreSelectors } from '@store/utils' +import { networkState } from './network' + +export const { availableNetworks, password, mdns, ssid, selectedNetwork } = + createStoreSelectors(networkState) diff --git a/src/store/terminal/actions.ts b/src/store/terminal/actions.ts index 40d1861c..4da43fb9 100644 --- a/src/store/terminal/actions.ts +++ b/src/store/terminal/actions.ts @@ -1,5 +1,4 @@ import { ACTION, FLASH_STATUS, FLASH_STEP, FLASH_WIZARD_STEPS } from '@interfaces/enums' -import { espApi } from '@src/esp/api' import { logs as logsDescription } from '@src/static/ui/logs' import { trimLogsByTextLength } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' @@ -14,6 +13,7 @@ import { setProcessStatus, updateFirmwareState, } from './terminal' +import { getApi } from '@src/esp' export const openDocs = () => { const currentMainWindow = getCurrent() @@ -62,6 +62,7 @@ const runStep = async (step: FLASH_STEP, action: () => Promise): Promise Promise): Promise Promise) => { clearLogs() - try { await runStep(FLASH_STEP.REQUEST_PORT, async () => { - await espApi.testConnection(portName) + await getApi().validateConnection(portName) }) await runStep(FLASH_STEP.MANIFEST_PATH, async () => { @@ -105,7 +105,7 @@ export const installOpenIris = async (portName: string, downloadManifest: () => }) await runStep(FLASH_STEP.FLASH_FIRMWARE, async () => { - await espApi.flash(portName, (progress) => { + await getApi().flash(portName, (progress) => { setInstallationProgress(progress) if (progress >= 100) { setAction(ACTION.NEXT) @@ -116,82 +116,73 @@ export const installOpenIris = async (portName: string, downloadManifest: () => } catch { return } - setProcessStatus(false) } export const getFirmwareLogs = async (portName: string, signal?: AbortController) => { - clearLogs() - - const logs: string[] = [] - const SLICE_SIZE = 100 - let slicer = SLICE_SIZE - const chunkSize = 10000 - let tries = 5 - - function processLogsInChunks(data: string, chunkSize: number) { - let index = 0 - function processChunk() { - const end = Math.min(index + chunkSize, data.length) - const chunk = data.slice(index, end) - const trimmedChunk = trimLogsByTextLength(chunk, 106) - logs.push(...trimmedChunk) - index += chunkSize - if (index < data.length) { - requestAnimationFrame(processChunk) - } - } - processChunk() - } - - const interval = setInterval(() => { - if (signal?.signal?.aborted) { - slicer = SLICE_SIZE - tries = 5 - clearInterval(interval) - return - } - - if (slicer >= detailedLogs().length) { - tries-- - } - - const data = logs.slice(slicer - SLICE_SIZE, slicer) - setLogs(FLASH_STEP.LOGS, data, true) - - if (!tries && !signal?.signal?.aborted) { - if (!detailedLogs().length) { - updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED) - } else { - updateState(FLASH_STEP.LOGS, FLASH_STATUS.SUCCESS) - } - clearInterval(interval) - } - - slicer += SLICE_SIZE - }, 1500) - - try { - await runStep(FLASH_STEP.LOGS, async () => { - await espApi.streamLogs( - portName, - (data) => { - setDetailedLogs(data) - processLogsInChunks(data, chunkSize) - }, - async (err, hasOpenirisInstallation) => { - clearInterval(interval) - if (firmwareState()[FLASH_STEP.LOGS]?.status === FLASH_STATUS.SUCCESS) return - if (!hasOpenirisInstallation) { - updateState(FLASH_STEP.LOGS, FLASH_STATUS.ABORTED) - } else { - updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED, err) - } - }, - signal?.signal, - ) - }) - } catch { - return - } + // clearLogs() + // const logs: string[] = [] + // const SLICE_SIZE = 100 + // let slicer = SLICE_SIZE + // const chunkSize = 10000 + // let tries = 5 + // function processLogsInChunks(data: string, chunkSize: number) { + // let index = 0 + // function processChunk() { + // const end = Math.min(index + chunkSize, data.length) + // const chunk = data.slice(index, end) + // const trimmedChunk = trimLogsByTextLength(chunk, 106) + // logs.push(...trimmedChunk) + // index += chunkSize + // if (index < data.length) { + // requestAnimationFrame(processChunk) + // } + // } + // processChunk() + // } + // const interval = setInterval(() => { + // if (signal?.signal?.aborted) { + // slicer = SLICE_SIZE + // tries = 5 + // clearInterval(interval) + // return + // } + // if (slicer >= detailedLogs().length) { + // tries-- + // } + // const data = logs.slice(slicer - SLICE_SIZE, slicer) + // setLogs(FLASH_STEP.LOGS, data, true) + // if (!tries && !signal?.signal?.aborted) { + // if (!detailedLogs().length) { + // updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED) + // } else { + // updateState(FLASH_STEP.LOGS, FLASH_STATUS.SUCCESS) + // } + // clearInterval(interval) + // } + // slicer += SLICE_SIZE + // }, 1500) + // try { + // await runStep(FLASH_STEP.LOGS, async () => { + // await espApi.streamLogs( + // portName, + // (data) => { + // setDetailedLogs(data) + // processLogsInChunks(data, chunkSize) + // }, + // async (err, hasOpenirisInstallation) => { + // clearInterval(interval) + // if (firmwareState()[FLASH_STEP.LOGS]?.status === FLASH_STATUS.SUCCESS) return + // if (!hasOpenirisInstallation) { + // updateState(FLASH_STEP.LOGS, FLASH_STATUS.ABORTED) + // } else { + // updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED, err) + // } + // }, + // signal?.signal, + // ) + // }) + // } catch { + // return + // } } diff --git a/src/utils/index.ts b/src/utils/index.ts index dd81842d..cc599b55 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,4 @@ -import { defaultMdnsLength, mdnsLength } from '@src/static' +import { DEFAULT_MDNS_LENGTH, MDNS_LENGTH } from '@src/static' export const CapitalizeFirstLetter = (letter: string) => { return letter.charAt(0).toUpperCase() + letter.slice(1) @@ -17,9 +17,9 @@ export const isEmpty = (obj: object | Array) => { } export const shortMdnsAddress = (text: string) => { - if (text.length < defaultMdnsLength) return text - const firstHalf = text.slice(0, mdnsLength) - const secondHalf = text.slice(text.length - mdnsLength, text.length) + if (text.length < DEFAULT_MDNS_LENGTH) return text + const firstHalf = text.slice(0, MDNS_LENGTH) + const secondHalf = text.slice(text.length - MDNS_LENGTH, text.length) return `${firstHalf}...${secondHalf}` } From 2fb14b80b6e920c8530c152a67796c511928f9a1 Mon Sep 17 00:00:00 2001 From: luckmer Date: Sat, 20 Sep 2025 17:03:44 +0200 Subject: [PATCH 14/48] leftover --- src/containers/FlashWizard/SelectPortWizard.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/containers/FlashWizard/SelectPortWizard.tsx b/src/containers/FlashWizard/SelectPortWizard.tsx index 4b737ef7..0a938473 100644 --- a/src/containers/FlashWizard/SelectPortWizard.tsx +++ b/src/containers/FlashWizard/SelectPortWizard.tsx @@ -37,14 +37,9 @@ const SelectPortWizard = () => { activePort().activePortName, selectedMode() === FLASH_MODE.WIRED ? 'uvc' : 'wifi', ) - } catch (err) { - console.log('waaa??', err) - } - try { const isTheSamePort = await api.checkPortConnection(activePort().activePortName) - console.log(isTheSamePort) if (isTheSamePort) { if (selectedMode() === FLASH_MODE.WIRED) { batch(() => { From ef41ab090a71d4658650346dd1d14f8af87f3643 Mon Sep 17 00:00:00 2001 From: luckmer Date: Sun, 21 Sep 2025 14:23:08 +0200 Subject: [PATCH 15/48] logger --- src/components/Header/index.tsx | 15 ++ .../FlashWizard/SelectPortWizard.tsx | 15 +- .../FlashWizard/SetupProcessWizard.tsx | 13 +- .../FlashWizard/WiredProcessWizard.tsx | 8 + .../FlashWizard/WirelessProcessWizard.tsx | 12 +- src/containers/FlashWizard/index.tsx | 1 - src/containers/Header/index.tsx | 5 + .../Modals/ApModeModalContainer.tsx | 111 ------------- src/containers/Modals/BeforeFlashingModal.tsx | 16 +- src/containers/Modals/DevtoolsModal.tsx | 4 + src/containers/Modals/SelectPortModal.tsx | 15 +- src/containers/Modals/SelectboardModal.tsx | 13 +- src/esp/espApiCore.ts | 2 - src/logger/index.ts | 10 ++ src/logger/loggerApi.ts | 65 ++++++++ src/logger/loggerCore.ts | 51 ++++++ src/pages/Modals/ApModeModal.tsx | 77 --------- src/pages/Modals/SelectPortModal.tsx | 4 +- src/store/terminal/actions.ts | 150 ++++++++++-------- 19 files changed, 307 insertions(+), 280 deletions(-) delete mode 100644 src/containers/Modals/ApModeModalContainer.tsx create mode 100644 src/logger/index.ts create mode 100644 src/logger/loggerApi.ts create mode 100644 src/logger/loggerCore.ts delete mode 100644 src/pages/Modals/ApModeModal.tsx diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index d87e98dd..cbabcaf6 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,11 +2,14 @@ import DefaultButton from '@components/Buttons/DefaultButton' import Typography from '@components/Typography' import { TITLEBAR_ACTION } from '@interfaces/enums' import { classNames } from '@src/utils' +import { FaSolidDownload } from 'solid-icons/fa' +import { TbDatabaseExport } from 'solid-icons/tb' import { Component, Show } from 'solid-js' interface IProps { onClickHome?: () => void onClick: (action: TITLEBAR_ACTION) => void + onClickDownloadLogs: () => void appVersion?: string docs?: boolean } @@ -44,6 +47,18 @@ const Header: Component = (props) => {
+
{ + props.onClickDownloadLogs() + }}> + + + +
{ const onClickVerifyPortConnection = async () => { batch(() => { + logger.infoStart('Verify Port connection') + logger.add('active port: ' + activePort().activePortName) + logger.add('selected mode: ' + selectedMode()) + logger.add('is active port valid: ' + isActivePortValid()) + setAction(ACTION.NEXT) setStep(PORT_WIZARD_STEPS.PORT_CHECK_PORT_CONNECTION) }) @@ -56,15 +62,14 @@ const SelectPortWizard = () => { const networks = await api.getAvailableNetworks(activePort().activePortName) setAvailableNetworks(networks) } catch (err) { - console.log(err) setAvailableNetworks([]) } + batch(() => { setAction(ACTION.NEXT) setStep(WIRELESS_WIZARD_STEPS.WIRELESS_SELECT_NETWORK) }) } - return } else { batch(() => { setAction(ACTION.NEXT) @@ -73,13 +78,17 @@ const SelectPortWizard = () => { }) } } catch (err) { - console.log(err) batch(() => { + logger.errorStart('Verify Port connection ERROR') + logger.add(err instanceof Error ? err.message : `${err}`) + logger.errorEnd('Verify Port connection ERROR') setAction(ACTION.NEXT) setActivePortName('') setStep(PORT_WIZARD_STEPS.PORT_SELECT_PORT) }) } + + logger.infoEnd('Verify Port connection') } return ( diff --git a/src/containers/FlashWizard/SetupProcessWizard.tsx b/src/containers/FlashWizard/SetupProcessWizard.tsx index 5ed240a7..b58b1d58 100644 --- a/src/containers/FlashWizard/SetupProcessWizard.tsx +++ b/src/containers/FlashWizard/SetupProcessWizard.tsx @@ -1,6 +1,8 @@ import SelectButton from '@components/Buttons/SelectButton' import Card from '@components/Cards/Card' import { ACTION, FLASH_WIZARD_STEPS, INIT_WIZARD_STEPS, MODAL_TYPE } from '@interfaces/enums' +import { logger } from '@src/logger' +import { download } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' import { useAppAPIContext } from '@store/context/api' @@ -96,14 +98,11 @@ const SetupProcessWizard = () => { }) return } - if (!hideModal()) { - setOpenModal({ - open: true, - type: MODAL_TYPE.BEFORE_FLASHING, - }) - return true - } + batch(() => { + logger.infoStart('INIT_WIZARD_STEPS.SELECT_PORT') + logger.add(`firmware type : ${getFirmwareType()}`) + logger.add(`active port : ${activePort().activePortName}`) setAction(ACTION.NEXT) setStep(FLASH_WIZARD_STEPS.FLASH_PROCESS) setAbortController('openiris') diff --git a/src/containers/FlashWizard/WiredProcessWizard.tsx b/src/containers/FlashWizard/WiredProcessWizard.tsx index d2b83d99..2923da06 100644 --- a/src/containers/FlashWizard/WiredProcessWizard.tsx +++ b/src/containers/FlashWizard/WiredProcessWizard.tsx @@ -8,6 +8,7 @@ import { WIRED_WIZARD_STEPS, } from '@interfaces/enums' import { getApi } from '@src/esp' +import { logger } from '@src/logger' import { shortMdnsAddress } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' @@ -40,6 +41,9 @@ const WiredProcessWizard = () => { }} onClickPrimary={() => { batch(() => { + logger.infoStart('setupWiredConnection') + logger.add('tracker name: ' + trackerName()) + logger.add('active port: ' + activePort().activePortName) setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_PROCESS) setIsPendingUpdate(true) setAction(ACTION.NEXT) @@ -55,6 +59,9 @@ const WiredProcessWizard = () => { }) .catch((err) => { batch(() => { + logger.errorStart('setupWiredConnection ERROR') + logger.add(err.message) + logger.errorEnd('setupWiredConnection ERROR') setStep(WIRED_WIZARD_STEPS.WIRED_SETUP_TRACKER_PROCESS_FAILED) setAction(ACTION.NEXT) setError(err.message) @@ -62,6 +69,7 @@ const WiredProcessWizard = () => { }) .finally(() => { setIsPendingUpdate(false) + logger.infoEnd('setupWiredConnection') }) }}> diff --git a/src/containers/FlashWizard/WirelessProcessWizard.tsx b/src/containers/FlashWizard/WirelessProcessWizard.tsx index 293db846..aa0cc4d3 100644 --- a/src/containers/FlashWizard/WirelessProcessWizard.tsx +++ b/src/containers/FlashWizard/WirelessProcessWizard.tsx @@ -10,6 +10,7 @@ import { WIRELESS_WIZARD_STEPS, } from '@interfaces/enums' import { getApi } from '@src/esp' +import { logger } from '@src/logger' import { shortMdnsAddress } from '@src/utils' import { setAction, setStep } from '@store/animation/animation' import { activeStep } from '@store/animation/selectors' @@ -121,7 +122,11 @@ const WirelessProcessWizard = () => { batch(() => { setAction(ACTION.NEXT) setStep(WIRELESS_WIZARD_STEPS.WIRELESS_WIFI_CONNECTING_PROCESS) + logger.infoStart('Setup wireless connection') + logger.add('active port: ' + activePort().activePortName) + logger.add('mdns: ' + mdns()) }) + getApi() .setupWirelessConnection( activePort().activePortName, @@ -139,14 +144,19 @@ const WirelessProcessWizard = () => { }) }) .catch((err) => { - console.log('yep error', err) batch(() => { + logger.errorStart('Verify Port connection ERROR') + logger.add(err instanceof Error ? err.message : `${err}`) + logger.errorEnd('Verify Port connection ERROR') setAction(ACTION.NEXT) setStep( WIRELESS_WIZARD_STEPS.WIRELESS_WIFI_CONNECTING_PROCESS_FAILED, ) }) }) + .finally(() => { + logger.infoEnd('Setup wireless connection') + }) }}>
diff --git a/src/containers/FlashWizard/index.tsx b/src/containers/FlashWizard/index.tsx index a5b2bbd1..9391b59f 100644 --- a/src/containers/FlashWizard/index.tsx +++ b/src/containers/FlashWizard/index.tsx @@ -5,7 +5,6 @@ import { FLASH_MODE, FLASH_WIZARD_STEPS, PORT_WIZARD_STEPS, - WIRED_WIZARD_STEPS, WIRELESS_WIZARD_STEPS, } from '@interfaces/enums' import SwipeAnimation from '@src/Animation' diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index cd138adf..46f80c92 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -1,11 +1,16 @@ import Header from '@components/Header' +import { logger } from '@src/logger' import { TITLEBAR_ACTION } from '@src/static/types/enums' +import { download } from '@src/utils' import { appWindow } from '@tauri-apps/api/window' export const HeaderRoot = () => { return (
{ + download(logger.getLogs(), 'firmwareLogs.log') + }} onClick={async (action: TITLEBAR_ACTION) => { switch (action) { case TITLEBAR_ACTION.MINIMIZE: diff --git a/src/containers/Modals/ApModeModalContainer.tsx b/src/containers/Modals/ApModeModalContainer.tsx deleted file mode 100644 index 9200f969..00000000 --- a/src/containers/Modals/ApModeModalContainer.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { ENotificationType, MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' -import ApModeModal from '@pages/Modals/ApModeModal' -import { useAppAPIContext } from '@store/context/api' -import { useAppNotificationsContext } from '@store/context/notifications' -import { useAppUIContext } from '@store/context/ui' -import { listen } from '@tauri-apps/api/event' -import { appWindow } from '@tauri-apps/api/window' -import { createEffect, createSignal, onCleanup } from 'solid-js' -import { debug } from 'tauri-plugin-log-api' - -const ApModeModalContainer = () => { - const { modal, setOpenModal } = useAppUIContext() - const { addNotification } = useAppNotificationsContext() - const { ssid, password, useRequestHook } = useAppAPIContext() - const [response, setResponse] = createSignal() - - const configureAPConnection = async () => { - addNotification({ - title: 'Making request', - message: 'Making request', - type: ENotificationType.INFO, - }) - debug(`ssid: ${ssid()}`) - debug(`pass: ${password()}`) - debug(`confirmPass: ${password()}`) - - //* Check if there is a response from the device - await useRequestHook('ping', '192.168.4.1') - - if (response()!['msg'] !== 'ok') { - addNotification({ - title: 'Error', - message: - 'Could not connect to device, please connect your PC to the EyeTrackVR Access Point and try again.', - type: ENotificationType.ERROR, - }) - return - } - - //* Make Request to set network settings - await useRequestHook( - 'wifi', - '192.168.4.1', - `?ssid=${ssid()}&password=${password()}&networkName=${ssid()}&channel=1&power=52&adhoc=0`, - ) - - //* Trigger save of network settings - addNotification({ - title: 'Success', - message: response()!['msg'], - type: ENotificationType.SUCCESS, - }) - await useRequestHook('save', '192.168.4.1') - } - - const _listen = async () => { - const unlisten = await listen('request-response', (event) => { - const parsedResponse = JSON.parse(event.payload) - setResponse(parsedResponse) - debug(`[NetworkSettings]: ${JSON.stringify(parsedResponse)}`) - }) - return unlisten - } - - const listenToResponse = async () => { - const unlisten = await _listen() - onCleanup(unlisten) - } - - createEffect(() => { - if (modal().type === MODAL_TYPE.AP_MODE) { - listenToResponse().catch(console.error) - } - }) - - return ( - { - switch (action) { - case TITLEBAR_ACTION.MINIMIZE: - appWindow.minimize() - break - case TITLEBAR_ACTION.MAXIMIZE: - appWindow.toggleMaximize() - break - case TITLEBAR_ACTION.CLOSE: - appWindow.close() - break - default: - return - } - }} - onClickClose={() => { - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) - }} - onClick={() => { - configureAPConnection().catch(() => { - addNotification({ - title: 'AP Mode configuration failed', - message: 'Failed to configure AP Mode', - type: ENotificationType.ERROR, - }) - }) - }} - /> - ) -} - -export default ApModeModalContainer diff --git a/src/containers/Modals/BeforeFlashingModal.tsx b/src/containers/Modals/BeforeFlashingModal.tsx index 3ef5b4f2..e259b54c 100644 --- a/src/containers/Modals/BeforeFlashingModal.tsx +++ b/src/containers/Modals/BeforeFlashingModal.tsx @@ -6,6 +6,7 @@ import { TITLEBAR_ACTION, } from '@interfaces/enums' import BeforeFlashingModal from '@pages/Modals/BeforeFlashingModal' +import { logger } from '@src/logger' import { setAction, setStep } from '@store/animation/animation' import { useAppAPIContext } from '@store/context/api' import { useAppNotificationsContext } from '@store/context/notifications' @@ -57,6 +58,11 @@ const BeforeFlashingModalContainer = () => { }} onClickInstallOpeniris={() => { batch(() => { + logger.infoStart('BeforeFlashingModalContainer') + logger.add('button: onClickInstallOpeniris') + logger.add(`firmware type : ${getFirmwareType()}`) + logger.add(`active port : ${activePortName()}`) + setAction(ACTION.NEXT) setStep(FLASH_WIZARD_STEPS.FLASH_PROCESS) setOpenModal({ open: false, type: MODAL_TYPE.NONE }) @@ -69,9 +75,13 @@ const BeforeFlashingModalContainer = () => { }) return true } - setAbortController('openiris') - setProcessStatus(true) - restartFirmwareState() + batch(() => { + logger.infoEnd('BeforeFlashingModalContainer') + setAbortController('openiris') + setProcessStatus(true) + restartFirmwareState() + }) + installOpenIris(activePortName(), async () => { await downloadAsset(getFirmwareType()) }).catch(() => ({})) diff --git a/src/containers/Modals/DevtoolsModal.tsx b/src/containers/Modals/DevtoolsModal.tsx index 6de712ad..fab846b3 100644 --- a/src/containers/Modals/DevtoolsModal.tsx +++ b/src/containers/Modals/DevtoolsModal.tsx @@ -1,6 +1,7 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { isValidChannel } from '@interfaces/utils' import DevtoolsModal from '@pages/Modals/DevtoolsModal' +import { logger } from '@src/logger' import { CHANNEL_OPTIONS } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' @@ -36,6 +37,8 @@ const DevtoolsModalContainer = () => { setOpenModal({ open: false, type: MODAL_TYPE.NONE }) }} onClickSetChannelMode={(label) => { + logger.infoStart('DevtoolsModalContainer') + logger.add(`Selected release: ${label} onClickSetChannelMode`) if (!isValidChannel(label)) { return } @@ -44,6 +47,7 @@ const DevtoolsModalContainer = () => { if (elem instanceof HTMLElement) { elem?.blur() } + logger.infoEnd('SelectPortModalContainer') }} /> ) diff --git a/src/containers/Modals/SelectPortModal.tsx b/src/containers/Modals/SelectPortModal.tsx index 91ec1c77..6adc7a86 100644 --- a/src/containers/Modals/SelectPortModal.tsx +++ b/src/containers/Modals/SelectPortModal.tsx @@ -3,10 +3,11 @@ import { IDropdownList } from '@interfaces/interfaces' import SelectPortModal from '@pages/Modals/SelectPortModal' import { getApi } from '@src/esp' import { UsbSerialPortInfo } from '@src/esp/interfaces/types' +import { logger } from '@src/logger' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' -import { createEffect, createMemo, on, onCleanup } from 'solid-js' +import { batch, createEffect, createMemo, on, onCleanup } from 'solid-js' const SelectPortModalContainer = () => { const { setActivePortName, activePort, ports, setPorts } = useAppAPIContext() @@ -77,9 +78,15 @@ const SelectPortModalContainer = () => { onClickClose={() => { setOpenModal({ open: false, type: MODAL_TYPE.NONE }) }} - onClickConfirmBoard={(port) => { - setActivePortName(port) - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + onClickConfirmPort={(port) => { + batch(() => { + logger.infoStart('SelectPortModalContainer') + logger.add('onClickConfirmPort') + logger.add(`Selected port: ${port}`) + setActivePortName(port) + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + logger.infoEnd('SelectPortModalContainer') + }) }} /> ) diff --git a/src/containers/Modals/SelectboardModal.tsx b/src/containers/Modals/SelectboardModal.tsx index 96e08b58..5e6e4354 100644 --- a/src/containers/Modals/SelectboardModal.tsx +++ b/src/containers/Modals/SelectboardModal.tsx @@ -1,11 +1,12 @@ import { MODAL_TYPE, TITLEBAR_ACTION } from '@interfaces/enums' import { IDropdownList } from '@interfaces/interfaces' import SelectBoardModal from '@pages/Modals/SelectBoardModal' +import { logger } from '@src/logger' import { BOARD_DESCRIPTION, RECOMMENDED_BOARDS } from '@src/static' import { useAppAPIContext } from '@store/context/api' import { useAppUIContext } from '@store/context/ui' import { appWindow } from '@tauri-apps/api/window' -import { Accessor, createMemo } from 'solid-js' +import { Accessor, batch, createMemo } from 'solid-js' import { trace } from 'tauri-plugin-log-api' const SelectBoardModalContainer = () => { const { confirmFirmwareSelection, getFirmwareAssets, activeBoard } = useAppAPIContext() @@ -75,8 +76,14 @@ const SelectBoardModalContainer = () => { setOpenModal({ open: false, type: MODAL_TYPE.NONE }) }} onClickConfirmBoard={(board) => { - confirmFirmwareSelection(board) - setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + batch(() => { + logger.infoStart('SelectBoardModalContainer') + logger.add('button: onClickConfirmBoard') + logger.add(`Selected board: ${board}`) + confirmFirmwareSelection(board) + setOpenModal({ open: false, type: MODAL_TYPE.NONE }) + logger.infoEnd('SelectBoardModalContainer') + }) }} /> ) diff --git a/src/esp/espApiCore.ts b/src/esp/espApiCore.ts index 7b3763b4..eb6553ec 100644 --- a/src/esp/espApiCore.ts +++ b/src/esp/espApiCore.ts @@ -329,10 +329,8 @@ export class EspApiCore { password: string, channel: number, ) { - console.log(1) await this._switchDeviceMode(port, 'wifi') - console.log(2) const commands = [ { command: COMMAND.SET_MDNS, data: { hostname: mdns } }, { diff --git a/src/logger/index.ts b/src/logger/index.ts new file mode 100644 index 00000000..2d715b3f --- /dev/null +++ b/src/logger/index.ts @@ -0,0 +1,10 @@ +import { LoggerCore } from './loggerCore' + +let _logger: LoggerCore | undefined + +const getLogger = (): LoggerCore => { + _logger = new LoggerCore() + return _logger +} + +export const logger = getLogger() diff --git a/src/logger/loggerApi.ts b/src/logger/loggerApi.ts new file mode 100644 index 00000000..97d5c7b0 --- /dev/null +++ b/src/logger/loggerApi.ts @@ -0,0 +1,65 @@ +export class LoggerApi { + private data: string[] = [] + + public _add(message: string): void { + this.data.push(message) + } + + private sectionStart(type: string, action: string): void { + const label = action ? `${type} (${action}) START` : `${type} START` + this._add('') + this._add(`------------${label}------------`) + this._add('') + } + + private sectionEnd(type: string, action: string): void { + const label = action ? `${type} (${action}) END` : `${type} END` + this._add('') + this._add(`------------${label}------------`) + this._add('') + } + + public _functionStart(action: string): void { + this.sectionStart('LOG', action) + } + + public _functionEnd(action: string): void { + this.sectionEnd('LOG', action) + } + + public _logStart(action: string): void { + this.sectionStart('LOG', action) + } + + public _logEnd(action: string): void { + this.sectionEnd('LOG', action) + } + + public _infoStart(action: string): void { + this.sectionStart('INFO', action) + } + + public _infoEnd(action: string): void { + this.sectionEnd('INFO', action) + } + + public _warnStart(action: string): void { + this.sectionStart('WARNING', action) + } + + public _warnEnd(action: string): void { + this.sectionEnd('WARNING', action) + } + + public _errorStart(action: string): void { + this.sectionStart('ERROR', action) + } + + public _errorEnd(action: string): void { + this.sectionEnd('ERROR', action) + } + + public _getLogs(): string { + return this.data.join('\n') + } +} diff --git a/src/logger/loggerCore.ts b/src/logger/loggerCore.ts new file mode 100644 index 00000000..a8cb8fbc --- /dev/null +++ b/src/logger/loggerCore.ts @@ -0,0 +1,51 @@ +import { LoggerApi } from './loggerApi' + +export class LoggerCore extends LoggerApi { + public getLogs() { + return this._getLogs() + } + + public add(message: string) { + this._add(message) + } + + public functionStart(action: string) { + this._functionStart(action) + } + + public functionEnd(action: string) { + this._functionEnd(action) + } + + public logStart(action?: string) { + this._logStart(action ?? '') + } + + public logEnd(action?: string) { + this._logEnd(action ?? '') + } + + public infoStart(action?: string) { + this._infoStart(action ?? '') + } + + public infoEnd(action?: string) { + this._infoEnd(action ?? '') + } + + public warnStart(action?: string) { + this._warnStart(action ?? '') + } + + public warnEnd(action?: string) { + this._warnEnd(action ?? '') + } + + public errorStart(action?: string) { + this._errorStart(action ?? '') + } + + public errorEnd(action?: string) { + this._errorEnd(action ?? '') + } +} diff --git a/src/pages/Modals/ApModeModal.tsx b/src/pages/Modals/ApModeModal.tsx deleted file mode 100644 index e84fd666..00000000 --- a/src/pages/Modals/ApModeModal.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Component, createSignal, Show } from 'solid-js' -import { Button } from '@components/Buttons/Button' -import { Modal } from '@components/Modal' -import ModalHeader from '@components/ModalHeader' -import { TITLEBAR_ACTION } from '@interfaces/enums' -import { AP_MODE_ID } from '@src/static' -import Typography from '@components/Typography' - -export interface IProps { - onClickHeader: (action: TITLEBAR_ACTION) => void - onClickClose: () => void - onClick: () => void - isActive: boolean - version: string -} - -const ApModeModal: Component = (props) => { - const [enableAPMode, setEnableAPMode] = createSignal(false) - - return ( - -
- -
- - Important! - - - Before pressing the Send AP Request check - that you have the firmware already{' '} - installed and you are connected to - EyeTrackVR Wi-Fi. - - }> - - Read the documentation before turning on - AP mode. - - -
-
-
-
- - ) -} - -export default ApModeModal diff --git a/src/pages/Modals/SelectPortModal.tsx b/src/pages/Modals/SelectPortModal.tsx index e9b9540f..12cc906a 100644 --- a/src/pages/Modals/SelectPortModal.tsx +++ b/src/pages/Modals/SelectPortModal.tsx @@ -10,7 +10,7 @@ import { Component, createMemo, createSignal, For, Show } from 'solid-js' export interface IProps { onClickHeader: (action: TITLEBAR_ACTION) => void - onClickConfirmBoard: (board: string) => void + onClickConfirmPort: (board: string) => void onClickClose: () => void isActive: boolean version: string @@ -75,7 +75,7 @@ const SelectPortModal: Component = (props) => { if (el instanceof HTMLDialogElement) { el.close() } - props.onClickConfirmBoard(data.label) + props.onClickConfirmPort(data.label) }} /> )} diff --git a/src/store/terminal/actions.ts b/src/store/terminal/actions.ts index 4da43fb9..7403132b 100644 --- a/src/store/terminal/actions.ts +++ b/src/store/terminal/actions.ts @@ -14,6 +14,7 @@ import { updateFirmwareState, } from './terminal' import { getApi } from '@src/esp' +import { logger } from '@src/logger' export const openDocs = () => { const currentMainWindow = getCurrent() @@ -60,18 +61,23 @@ const runStep = async (step: FLASH_STEP, action: () => Promise): Promise Promise): Promise Promise): Promise Promise) => { clearLogs() try { + logger.infoStart('installOpenIris') + await runStep(FLASH_STEP.REQUEST_PORT, async () => { await getApi().validateConnection(portName) }) @@ -113,6 +129,8 @@ export const installOpenIris = async (portName: string, downloadManifest: () => } }) }) + + logger.infoEnd('installOpenIris') } catch { return } @@ -120,69 +138,69 @@ export const installOpenIris = async (portName: string, downloadManifest: () => } export const getFirmwareLogs = async (portName: string, signal?: AbortController) => { - // clearLogs() - // const logs: string[] = [] - // const SLICE_SIZE = 100 - // let slicer = SLICE_SIZE - // const chunkSize = 10000 - // let tries = 5 - // function processLogsInChunks(data: string, chunkSize: number) { - // let index = 0 - // function processChunk() { - // const end = Math.min(index + chunkSize, data.length) - // const chunk = data.slice(index, end) - // const trimmedChunk = trimLogsByTextLength(chunk, 106) - // logs.push(...trimmedChunk) - // index += chunkSize - // if (index < data.length) { - // requestAnimationFrame(processChunk) - // } - // } - // processChunk() - // } - // const interval = setInterval(() => { - // if (signal?.signal?.aborted) { - // slicer = SLICE_SIZE - // tries = 5 - // clearInterval(interval) - // return - // } - // if (slicer >= detailedLogs().length) { - // tries-- - // } - // const data = logs.slice(slicer - SLICE_SIZE, slicer) - // setLogs(FLASH_STEP.LOGS, data, true) - // if (!tries && !signal?.signal?.aborted) { - // if (!detailedLogs().length) { - // updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED) - // } else { - // updateState(FLASH_STEP.LOGS, FLASH_STATUS.SUCCESS) - // } - // clearInterval(interval) - // } - // slicer += SLICE_SIZE - // }, 1500) - // try { - // await runStep(FLASH_STEP.LOGS, async () => { - // await espApi.streamLogs( - // portName, - // (data) => { - // setDetailedLogs(data) - // processLogsInChunks(data, chunkSize) - // }, - // async (err, hasOpenirisInstallation) => { - // clearInterval(interval) - // if (firmwareState()[FLASH_STEP.LOGS]?.status === FLASH_STATUS.SUCCESS) return - // if (!hasOpenirisInstallation) { - // updateState(FLASH_STEP.LOGS, FLASH_STATUS.ABORTED) - // } else { - // updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED, err) - // } - // }, - // signal?.signal, - // ) - // }) - // } catch { - // return - // } + clearLogs() + const logs: string[] = [] + const SLICE_SIZE = 100 + let slicer = SLICE_SIZE + const chunkSize = 10000 + let tries = 5 + function processLogsInChunks(data: string, chunkSize: number) { + let index = 0 + function processChunk() { + const end = Math.min(index + chunkSize, data.length) + const chunk = data.slice(index, end) + const trimmedChunk = trimLogsByTextLength(chunk, 106) + logs.push(...trimmedChunk) + index += chunkSize + if (index < data.length) { + requestAnimationFrame(processChunk) + } + } + processChunk() + } + const interval = setInterval(() => { + if (signal?.signal?.aborted) { + slicer = SLICE_SIZE + tries = 5 + clearInterval(interval) + return + } + if (slicer >= detailedLogs().length) { + tries-- + } + const data = logs.slice(slicer - SLICE_SIZE, slicer) + setLogs(FLASH_STEP.LOGS, data, true) + if (!tries && !signal?.signal?.aborted) { + if (!detailedLogs().length) { + updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED) + } else { + updateState(FLASH_STEP.LOGS, FLASH_STATUS.SUCCESS) + } + clearInterval(interval) + } + slicer += SLICE_SIZE + }, 1500) + try { + await runStep(FLASH_STEP.LOGS, async () => { + await getApi().streamLogs( + portName, + (data) => { + setDetailedLogs(data) + processLogsInChunks(data, chunkSize) + }, + async (err, hasOpenirisInstallation) => { + clearInterval(interval) + if (firmwareState()[FLASH_STEP.LOGS]?.status === FLASH_STATUS.SUCCESS) return + if (!hasOpenirisInstallation) { + updateState(FLASH_STEP.LOGS, FLASH_STATUS.ABORTED) + } else { + updateState(FLASH_STEP.LOGS, FLASH_STATUS.FAILED, err) + } + }, + signal?.signal, + ) + }) + } catch { + return + } } From 6e6070aab0ad12e04a41478d6d8d77891027bdcf Mon Sep 17 00:00:00 2001 From: luckmer Date: Wed, 24 Sep 2025 19:18:49 +0200 Subject: [PATCH 16/48] terminal --- src/common/theme.ts | 5 + src/common/typography.ts | 8 +- .../OptionButton}/index.tsx | 6 +- src/components/Dropdown/Dropdown/index.tsx | 20 -- src/components/Header/index.tsx | 33 ++- src/components/Modal/{ => Modal}/index.tsx | 0 .../{ => Modal}/ModalHeader/index.tsx | 0 src/components/Terminal/Firmware/index.tsx | 19 -- src/components/Terminal/Step/index.tsx | 82 ------ .../{Terminal => }/TerminalHeader/index.tsx | 0 src/containers/FlashFirmware/index.tsx | 202 ------------- .../FlashWizard/FlashProcessWizard.tsx | 18 +- .../FlashWizard/SelectPortWizard.tsx | 1 - .../FlashWizard/SetupProcessWizard.tsx | 11 +- .../FlashWizard/TerminalProcessWizard.tsx | 46 ++- src/containers/Header/index.tsx | 5 + .../Modals/BeforeSelectBoardContainer.tsx | 46 --- src/containers/Terminal/index.tsx | 57 ++++ src/esp/espApiCore.ts | 6 +- src/esp/espCore.ts | 2 +- src/pages/Modals/BeforeFlashingModal.tsx | 4 +- src/pages/Modals/BeforeSelectBoardModal.tsx | 50 ---- src/pages/Modals/DevtoolsModal.tsx | 8 +- src/pages/Modals/SelectBoardModal.tsx | 8 +- src/pages/Modals/SelectPortModal.tsx | 8 +- src/pages/Modals/WifiModal.tsx | 4 +- src/pages/Terminal/index.tsx | 271 ++++++++---------- src/routes/index.tsx | 4 +- src/static/types/enums.ts | 5 +- src/store/animation/animation.ts | 10 +- src/store/terminal/actions.ts | 66 +---- src/store/terminal/selectors.ts | 1 - src/store/terminal/terminal.ts | 30 +- src/styles/scrollbar.css | 23 +- src/utils/index.ts | 37 --- 35 files changed, 343 insertions(+), 753 deletions(-) rename src/components/{Board/DefaultBoard => Buttons/OptionButton}/index.tsx (92%) delete mode 100644 src/components/Dropdown/Dropdown/index.tsx rename src/components/Modal/{ => Modal}/index.tsx (100%) rename src/components/{ => Modal}/ModalHeader/index.tsx (100%) delete mode 100644 src/components/Terminal/Firmware/index.tsx delete mode 100644 src/components/Terminal/Step/index.tsx rename src/components/{Terminal => }/TerminalHeader/index.tsx (100%) delete mode 100644 src/containers/FlashFirmware/index.tsx delete mode 100644 src/containers/Modals/BeforeSelectBoardContainer.tsx create mode 100644 src/containers/Terminal/index.tsx delete mode 100644 src/pages/Modals/BeforeSelectBoardModal.tsx diff --git a/src/common/theme.ts b/src/common/theme.ts index ce8532ff..a22207ae 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -69,11 +69,15 @@ export const theme = { 200: '#50e897', 100: '#92FA81', }, + orange: { + 100: '#D18F52', + }, yellow: { 100: '#E8FA81', }, lightBlue: { 300: '#79A0CF', + 100: '#8DB2BF', }, brown: { '900': '#1b1b1f', @@ -81,6 +85,7 @@ export const theme = { '400': '#00101a', '300': '#2B2B2B', }, + blue: { 900: '#1F3042', 800: '#03233a', diff --git a/src/common/typography.ts b/src/common/typography.ts index ee6a42ad..439898be 100644 --- a/src/common/typography.ts +++ b/src/common/typography.ts @@ -1,6 +1,6 @@ import { cva } from 'class-variance-authority' -export const typography = cva('not-italic select-none', { +export const typography = cva('not-italic ', { variants: { text: { h1: 'text-h1 font-[400] leading-[30px] tracking-[0.02em]', @@ -25,16 +25,22 @@ export const typography = cva('not-italic select-none', { red: 'text-red-100', purple: 'text-purple-100', lightGrey: 'text-grey-100', + lightBlue: 'text-lightBlue-100', + orange: 'text-orange-100', green: 'text-green-200', }, nowrap: { true: 'whitespace-nowrap', }, + select: { + false: 'select-none', + }, ellipsis: { true: 'text-ellipsis overflow-hidden whitespace-nowrap', }, }, defaultVariants: { + select: false, text: 'body', color: 'grey', }, diff --git a/src/components/Board/DefaultBoard/index.tsx b/src/components/Buttons/OptionButton/index.tsx similarity index 92% rename from src/components/Board/DefaultBoard/index.tsx rename to src/components/Buttons/OptionButton/index.tsx index 5fe9acf5..53d817f4 100644 --- a/src/components/Board/DefaultBoard/index.tsx +++ b/src/components/Buttons/OptionButton/index.tsx @@ -1,14 +1,12 @@ import Typography from '@components/Typography' import { Component, Show } from 'solid-js' - export interface IProps { onClick: () => void label: string description?: string isActive?: boolean } - -export const DefaultBoard: Component = (props) => { +const OptionButton: Component = (props) => { return (