-
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactored connect page panes into separate components
- Loading branch information
1 parent
7c55d7f
commit d660a5f
Showing
6 changed files
with
183 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from "react"; | ||
| import { ArrowPathIcon } from "@heroicons/react/24/outline"; | ||
| import SerialPortOption from "@app/components/connection/SerialPortOption"; | ||
|
|
||
| import type { RequestStatus } from "@features/requests/requestReducer"; | ||
|
|
||
| export interface ISerialConnectPaneProps { | ||
| availableSerialPorts: string[] | null; | ||
| activePort: string; | ||
| activePortState: RequestStatus; | ||
| handlePortSelected: (portName: string) => void; | ||
| refreshPorts: () => void; | ||
| } | ||
|
|
||
| const SerialConnectPane = ({ | ||
| availableSerialPorts, | ||
| activePort, | ||
| activePortState, | ||
| handlePortSelected, | ||
| refreshPorts, | ||
| }: ISerialConnectPaneProps) => { | ||
| return ( | ||
| <div> | ||
| <div className="flex flex-col mt-4"> | ||
| <div className="flex flex-col gap-4"> | ||
| {availableSerialPorts?.length ? ( | ||
| availableSerialPorts.map((portName) => ( | ||
| <SerialPortOption | ||
| key={portName} | ||
| name={portName} | ||
| connectionState={ | ||
| activePort === portName ? activePortState : { status: "IDLE" } | ||
| } | ||
| onClick={handlePortSelected} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <p className="text-base leading-6 font-normal text-gray-500 pl-40 pr-40 text-center"> | ||
| No ports detected. | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <button | ||
| type="button" | ||
| className="flex flex-row justify-center align-middle mx-auto gap-4 mt-5" | ||
| onClick={() => refreshPorts()} | ||
| > | ||
| <ArrowPathIcon className="text-gray-400 w-6 h-6 hover:cursor-pointer" /> | ||
| <p className="my-auto text-gray-500">Refresh ports</p> | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SerialConnectPane; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from "react"; | ||
| import type { FormEventHandler } from "react"; | ||
| import { | ||
| EllipsisHorizontalCircleIcon, | ||
| LinkIcon, | ||
| } from "@heroicons/react/24/outline"; | ||
|
|
||
| import type { RequestStatus } from "@features/requests/requestReducer"; | ||
|
|
||
| export interface ITcpConnectPaneProps { | ||
| socketAddress: string; | ||
| setSocketAddress: (socketAddress: string) => void; | ||
| socketPort: string; | ||
| setSocketPort: (socketPort: string) => void; | ||
| activeSocketState: RequestStatus; | ||
| handleSocketConnect: FormEventHandler; | ||
| } | ||
|
|
||
| const TcpConnectPane = ({ | ||
| socketAddress, | ||
| setSocketAddress, | ||
| socketPort, | ||
| setSocketPort, | ||
| activeSocketState, | ||
| handleSocketConnect, | ||
| }: ITcpConnectPaneProps) => { | ||
| return ( | ||
| <form className="flex flex-col gap-4 mt-4" onSubmit={handleSocketConnect}> | ||
| <input | ||
| className="flex-1 border border-gray-400 rounded-lg px-5 py-4 text-gray-700 placeholder:text-gray-400 h-full bg-transparent focus:outline-none disabled:cursor-wait" | ||
| type="text" | ||
| enterKeyHint="go" | ||
| placeholder="IP address or host name" | ||
| value={socketAddress} | ||
| onChange={(e) => setSocketAddress(e.target.value)} | ||
| disabled={activeSocketState.status === "PENDING"} | ||
| /> | ||
|
|
||
| <input | ||
| className="flex-1 border border-gray-400 rounded-lg px-5 py-4 text-gray-700 placeholder:text-gray-400 h-full bg-transparent focus:outline-none disabled:cursor-wait" | ||
| type="text" | ||
| placeholder="Port" | ||
| value={socketPort} | ||
| onChange={(e) => setSocketPort(e.target.value)} | ||
| disabled={activeSocketState.status === "PENDING"} | ||
| /> | ||
|
|
||
| <button | ||
| className="flex flex-row flex-1 justify-center gap-3 border rounded-lg border-gray-400 mx-auto px-5 py-4 hover:bg-gray-50 hover:border-gray-500 hover:shadow-lg disabled:cursor-wait" | ||
| disabled={activeSocketState.status === "PENDING"} | ||
| type="submit" | ||
| > | ||
| {activeSocketState.status === "PENDING" ? ( | ||
| <> | ||
| <EllipsisHorizontalCircleIcon className="w-6 h-6 text-gray-500" /> | ||
| <p className="text-gray-700">Connecting...</p> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <LinkIcon className="w-6 h-6 text-gray-500" /> | ||
| <p className="text-gray-700">Connect</p> | ||
| </> | ||
| )} | ||
| </button> | ||
|
|
||
| {activeSocketState.status === "FAILED" && ( | ||
| <div> | ||
| <p className="pl-6 pr-2 ml-4 text-sm leading-5 font-light text-red-600 my-1"> | ||
| {activeSocketState.message} | ||
| </p> | ||
| </div> | ||
| )} | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default TcpConnectPane; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters