-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(web): add dataSource, layerSidePanel component in beta (#633)
- Loading branch information
Showing
33 changed files
with
1,277 additions
and
62 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
153 changes: 153 additions & 0 deletions
153
web/src/beta/features/Editor/DataSourceManager/Asset/index.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,153 @@ | ||
| import React from "react"; | ||
|
|
||
| import Button from "@reearth/beta/components/Button"; | ||
| import Toggle from "@reearth/beta/components/Toggle"; | ||
| import generateRandomString from "@reearth/beta/utils/generate-random-string"; | ||
| import RadioButton from "@reearth/classic/components/atoms/RadioButton"; | ||
| import Select from "@reearth/classic/components/atoms/Select"; | ||
| import { Option } from "@reearth/classic/components/atoms/SelectOption"; | ||
|
|
||
| import { DataProps } from ".."; | ||
| import { | ||
| ColJustiftBetween, | ||
| AssetWrapper, | ||
| InputGroup, | ||
| Input, | ||
| SourceTypeWrapper, | ||
| RadioButtonLabel, | ||
| SubmitWrapper, | ||
| TextArea, | ||
| } from "../utils"; | ||
|
|
||
| const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => { | ||
| const [sourceType, setSourceType] = React.useState("url"); // ["url", "local", "value"] | ||
| const [fileFormat, setFileFormat] = React.useState("GeoJSON"); | ||
| const [value, setValue] = React.useState(""); | ||
| const [prioritizePerformance, setPrioritizePerformance] = React.useState(false); | ||
|
|
||
| const handleSubmit = () => { | ||
| onSubmit({ | ||
| layerType: "simple", | ||
| sceneId, | ||
| title: generateRandomString(5), | ||
| visible: true, | ||
| config: { | ||
| data: { | ||
| url: sourceType === "url" && value !== "" ? value : null, | ||
| type: fileFormat.toLowerCase(), | ||
| value: sourceType === "value" && value !== "" ? value : null, | ||
| }, | ||
| resource: { | ||
| clampToGround: true, | ||
| }, | ||
| marker: { | ||
| heightReference: "clamp", | ||
| }, | ||
| polygon: { | ||
| heightReference: "clamp", | ||
| }, | ||
| polyline: { | ||
| clampToGround: true, | ||
| }, | ||
| }, | ||
| }); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ColJustiftBetween> | ||
| <AssetWrapper> | ||
| <InputGroup | ||
| label="Source Type" | ||
| description="Select the type of data source you want to add."> | ||
| <SourceTypeWrapper> | ||
| <RadioButtonLabel> | ||
| <RadioButton | ||
| value="url" | ||
| checked={sourceType == "url"} | ||
| handleChange={c => c && setSourceType("url")} | ||
| /> | ||
| From URL | ||
| </RadioButtonLabel> | ||
| <RadioButtonLabel> | ||
| <RadioButton | ||
| value="value" | ||
| checked={sourceType == "value"} | ||
| handleChange={c => c && setSourceType("value")} | ||
| /> | ||
| From Value | ||
| </RadioButtonLabel> | ||
| </SourceTypeWrapper> | ||
| </InputGroup> | ||
| {sourceType == "url" && ( | ||
| <> | ||
| <InputGroup | ||
| label="File Format" | ||
| description="File format of the data source you want to add."> | ||
| <Select value={fileFormat} onChange={setFileFormat}> | ||
| {["GeoJSON", "KML", "CZML"].map(op => ( | ||
| <Option key={op} value={op} label={op}> | ||
| {op} | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
| </InputGroup> | ||
| <InputGroup label="Resource URL" description="URL of the data source you want to add."> | ||
| <Input | ||
| type="text" | ||
| placeholder="Input Text" | ||
| value={value} | ||
| onChange={e => setValue(e.target.value)} | ||
| /> | ||
| </InputGroup> | ||
| {fileFormat === "GeoJSON" && ( | ||
| <InputGroup | ||
| label="Prioritize Performance" | ||
| description="URL of the data source you want to add."> | ||
| <Toggle | ||
| checked={prioritizePerformance} | ||
| disabled={true} | ||
| onChange={v => setPrioritizePerformance(v)} | ||
| /> | ||
| </InputGroup> | ||
| )} | ||
| </> | ||
| )} | ||
| {sourceType == "value" && ( | ||
| <> | ||
| <InputGroup | ||
| label="File Format" | ||
| description="File format of the data source you want to add."> | ||
| <Select value={fileFormat} onChange={setFileFormat}> | ||
| {["GeoJSON", "KML", "CZML"].map(op => ( | ||
| <Option key={op} value={op} label={op}> | ||
| {op} | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
| </InputGroup> | ||
| <InputGroup label="Value" description="Description around."> | ||
| <TextArea | ||
| placeholder="Write down your text" | ||
| rows={8} | ||
| value={value} | ||
| onChange={e => setValue(e.target.value)} | ||
| /> | ||
| </InputGroup> | ||
| </> | ||
| )} | ||
| </AssetWrapper> | ||
| <SubmitWrapper> | ||
| <Button | ||
| text="Add to Layer" | ||
| buttonType="primary" | ||
| size="medium" | ||
| onClick={handleSubmit} | ||
| disabled={(sourceType === "url" || sourceType === "value") && !value} | ||
| /> | ||
| </SubmitWrapper> | ||
| </ColJustiftBetween> | ||
| ); | ||
| }; | ||
|
|
||
| export default Asset; |
113 changes: 113 additions & 0 deletions
113
web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.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,113 @@ | ||
| import React from "react"; | ||
|
|
||
| import Button from "@reearth/beta/components/Button"; | ||
| import Text from "@reearth/beta/components/Text"; | ||
| import generateRandomString from "@reearth/beta/utils/generate-random-string"; | ||
| import RadioButton from "@reearth/classic/components/atoms/RadioButton"; | ||
|
|
||
| import { DataProps } from ".."; | ||
| import { | ||
| ColJustiftBetween, | ||
| AssetWrapper, | ||
| InputGroup, | ||
| Input, | ||
| SourceTypeWrapper, | ||
| SubmitWrapper, | ||
| RadioButtonLabel, | ||
| } from "../utils"; | ||
|
|
||
| const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => { | ||
| const [sourceType, setSourceType] = React.useState("url"); // ["url", "local", "value"] | ||
| const [value, setValue] = React.useState(""); | ||
| const [lat, setLat] = React.useState(""); | ||
| const [long, setLong] = React.useState(""); | ||
|
|
||
| const handleSubmit = () => { | ||
| onSubmit({ | ||
| layerType: "simple", | ||
| sceneId, | ||
| title: generateRandomString(5), | ||
| visible: true, | ||
| config: { | ||
| data: { | ||
| url: sourceType === "url" && value !== "" ? value : null, | ||
| type: "csv", | ||
| csv: { | ||
| latColumn: lat, | ||
| lngColumn: long, | ||
| }, | ||
| }, | ||
| resource: { | ||
| clampToGround: true, | ||
| }, | ||
| marker: { | ||
| heightReference: "clamp", | ||
| }, | ||
| polygon: { | ||
| heightReference: "clamp", | ||
| }, | ||
| polyline: { | ||
| clampToGround: true, | ||
| }, | ||
| }, | ||
| }); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ColJustiftBetween> | ||
| <AssetWrapper> | ||
| <InputGroup | ||
| label="Source Type" | ||
| description="Select the type of data source you want to add."> | ||
| <SourceTypeWrapper> | ||
| <RadioButtonLabel> | ||
| <RadioButton | ||
| value="url" | ||
| checked={sourceType == "url"} | ||
| handleChange={c => c && setSourceType("url")} | ||
| /> | ||
| From URL | ||
| </RadioButtonLabel> | ||
| </SourceTypeWrapper> | ||
| </InputGroup> | ||
| <InputGroup label="Resource URL" description="URL of the data source you want to add."> | ||
| <Input | ||
| type="text" | ||
| placeholder="Input Text" | ||
| value={value} | ||
| onChange={e => setValue(e.target.value)} | ||
| /> | ||
| </InputGroup> | ||
| <Text size="body">Point coordinates</Text> | ||
| <InputGroup label="Latitude Field" description="Description around"> | ||
| <Input | ||
| type="number" | ||
| placeholder="Input Text" | ||
| value={lat} | ||
| onChange={e => setLat(e.target.value)} | ||
| /> | ||
| </InputGroup> | ||
| <InputGroup label="Longitude Field" description="Description around"> | ||
| <Input | ||
| type="number" | ||
| placeholder="Input Text" | ||
| value={long} | ||
| onChange={e => setLong(e.target.value)} | ||
| /> | ||
| </InputGroup> | ||
| </AssetWrapper> | ||
| <SubmitWrapper> | ||
| <Button | ||
| text="Add to Layer" | ||
| buttonType="primary" | ||
| size="medium" | ||
| onClick={handleSubmit} | ||
| disabled={(sourceType === "url" || sourceType === "value") && !value} | ||
| /> | ||
| </SubmitWrapper> | ||
| </ColJustiftBetween> | ||
| ); | ||
| }; | ||
|
|
||
| export default DelimitedText; |
Oops, something went wrong.