-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: remove Buckets List page, add Chunks and Data tabs to Device
- Loading branch information
1 parent
ab23173
commit 2d5c86a
Showing
24 changed files
with
2,093 additions
and
443 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
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
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
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
98 changes: 0 additions & 98 deletions
98
packages/console/src/Components/Bucket/List/BucketList.tsx
This file was deleted.
Oops, something went wrong.
13 changes: 13 additions & 0 deletions
13
packages/console/src/Components/Device/Common/ModalEditGroup/ModalEditGroup.style.tsx
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,13 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const Characters = styled.div` | ||
| color: rgba(0, 0, 0, 0.6); | ||
| display: inline-block; | ||
| text-align: right; | ||
| font-size: 0.73rem; | ||
| position: absolute; | ||
| right: 10px; | ||
| top: 50%; | ||
| transform: translate(0%, -50%); | ||
| z-index: 12; | ||
| `; |
50 changes: 50 additions & 0 deletions
50
packages/console/src/Components/Device/Common/ModalEditGroup/ModalEditGroup.tsx
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,50 @@ | ||
| import type { IDevice, IDeviceData } from "@tago-io/tcore-sdk/types"; | ||
| import { useCallback, useState } from "react"; | ||
| import editDeviceData from "../../../../Requests/editDeviceData.ts"; | ||
| import { FormGroup, Input, Modal } from "../../../../index.ts"; | ||
| import { EIcon } from "../../../Icon/Icon.types"; | ||
| import * as Style from "./ModalEditGroup.style"; | ||
|
|
||
| interface ModalEditGroupProps { | ||
| device: IDevice; | ||
| data: IDeviceData; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export function ModalEditGroup(props: ModalEditGroupProps) { | ||
| const { data, device, onClose } = props; | ||
| const [value, setValue] = useState(() => String(data.group || "")); | ||
|
|
||
| const confirm = useCallback(async () => { | ||
| data.group = String(value); | ||
| await editDeviceData(device.id, data); | ||
| }, [value, device?.id, data]); | ||
|
|
||
| return ( | ||
| <Modal | ||
| onClose={onClose} | ||
| onCancel={onClose} | ||
| onConfirm={confirm} | ||
| title="Edit group" | ||
| width="400px" | ||
| > | ||
| <FormGroup | ||
| addMarginBottom={false} | ||
| icon={EIcon.cube} | ||
| tooltip="Insert the group for this data item" | ||
| label="Group" | ||
| > | ||
| <div style={{ position: "relative" }}> | ||
| <Input | ||
| autoFocus | ||
| onChange={(e) => setValue(e.target.value.substring(0, 24))} | ||
| value={value} | ||
| placeholder="Enter the group for the data item" | ||
| spellCheck="false" | ||
| /> | ||
| <Style.Characters>{String(value).length} / 24</Style.Characters> | ||
| </div> | ||
| </FormGroup> | ||
| </Modal> | ||
| ); | ||
| } |
71 changes: 71 additions & 0 deletions
71
packages/console/src/Components/Device/Common/ModalEditLocation/ModalEditLocation.tsx
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,71 @@ | ||
| import type { IDevice, IDeviceData } from "@tago-io/tcore-sdk/types"; | ||
| import { useCallback, useState } from "react"; | ||
| import editDeviceData from "../../../../Requests/editDeviceData.ts"; | ||
| import { Col, FormGroup, Input, Modal, Row } from "../../../../index.ts"; | ||
| import { EIcon } from "../../../Icon/Icon.types"; | ||
|
|
||
| interface ModalEditLocationProps { | ||
| device: IDevice; | ||
| data: IDeviceData; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export function ModalEditLocation(props: ModalEditLocationProps) { | ||
| const { data, device, onClose } = props; | ||
|
|
||
| const [lat, setLat] = useState(() => data.location?.coordinates?.[1] || ""); | ||
| const [lng, setLng] = useState(() => data.location?.coordinates?.[0] || ""); | ||
|
|
||
| const confirm = useCallback(async () => { | ||
| data.location = { | ||
| type: "Point", | ||
| coordinates: [Number(lng), Number(lat)], | ||
| }; | ||
| await editDeviceData(device.id, data); | ||
| }, [lat, lng, device?.id, data]); | ||
|
|
||
| return ( | ||
| <Modal | ||
| onClose={onClose} | ||
| onCancel={onClose} | ||
| onConfirm={confirm} | ||
| title="Edit location" | ||
| width="550px" | ||
| isConfirmButtonDisabled={!lat || !lng} | ||
| > | ||
| <Row> | ||
| <Col size="6"> | ||
| <FormGroup | ||
| addMarginBottom={false} | ||
| icon={EIcon.cube} | ||
| tooltip="Insert the latitude for this data item" | ||
| label="Latitude" | ||
| > | ||
| <Input | ||
| autoFocus | ||
| onChange={(e) => setLat(e.target.value)} | ||
| value={lat} | ||
| placeholder="Enter the latitude for the data item" | ||
| /> | ||
| </FormGroup> | ||
| </Col> | ||
|
|
||
| <Col size="6"> | ||
| <FormGroup | ||
| addMarginBottom={false} | ||
| icon={EIcon.cube} | ||
| tooltip="Insert the longitude for this data item" | ||
| label="Longitude" | ||
| > | ||
| <Input | ||
| autoFocus | ||
| onChange={(e) => setLng(e.target.value)} | ||
| value={lng} | ||
| placeholder="Enter the longitude for the data item" | ||
| /> | ||
| </FormGroup> | ||
| </Col> | ||
| </Row> | ||
| </Modal> | ||
| ); | ||
| } |
9 changes: 9 additions & 0 deletions
9
packages/console/src/Components/Device/Common/ModalEditMetadata/ModalEditMetadata.style.tsx
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,9 @@ | ||
| import styled from "styled-components"; | ||
| import FormControlStyles from "../../../Styles/FormControlStyles.ts"; | ||
|
|
||
| export const TextArea = styled.textarea` | ||
| ${FormControlStyles} | ||
| resize: none; | ||
| height: 300px; | ||
| font-family: Monospace; | ||
| `; |
57 changes: 57 additions & 0 deletions
57
packages/console/src/Components/Device/Common/ModalEditMetadata/ModalEditMetadata.tsx
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 type { IDevice, IDeviceData } from "@tago-io/tcore-sdk/types"; | ||
| import { useCallback, useState } from "react"; | ||
| import editDeviceData from "../../../../Requests/editDeviceData.ts"; | ||
| import { FormGroup, Modal } from "../../../../index.ts"; | ||
| import { EIcon } from "../../../Icon/Icon.types"; | ||
| import * as Style from "./ModalEditMetadata.style"; | ||
|
|
||
| interface ModalEditMetadataProps { | ||
| device: IDevice; | ||
| data: IDeviceData; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export function ModalEditMetadata(props: ModalEditMetadataProps) { | ||
| const { data, device, onClose } = props; | ||
| const [value, setValue] = useState(() => | ||
| data.metadata ? JSON.stringify(data.metadata, null, 2) : "", | ||
| ); | ||
|
|
||
| const confirm = useCallback(async () => { | ||
| data.metadata = JSON.parse(value); | ||
| await editDeviceData(device.id, data); | ||
| }, [value, device?.id, data]); | ||
|
|
||
| let validJSON = true; | ||
| try { | ||
| JSON.parse(value); | ||
| validJSON = true; | ||
| } catch (ex) { | ||
| validJSON = false; | ||
| } | ||
|
|
||
| return ( | ||
| <Modal | ||
| onClose={onClose} | ||
| onCancel={onClose} | ||
| onConfirm={confirm} | ||
| title="Edit metadata" | ||
| width="550px" | ||
| isConfirmButtonDisabled={!validJSON} | ||
| > | ||
| <FormGroup | ||
| addMarginBottom={false} | ||
| icon={EIcon.cube} | ||
| tooltip="Insert the group for this data item" | ||
| label="Metadata" | ||
| > | ||
| <Style.TextArea | ||
| autoFocus | ||
| onChange={(e) => setValue(e.target.value)} | ||
| placeholder="Insert a valid JSON" | ||
| value={value} | ||
| /> | ||
| </FormGroup> | ||
| </Modal> | ||
| ); | ||
| } |
Oops, something went wrong.