chore(web): Add layers from local (#702)

Co-authored-by: nina992 <[email protected]>
reearth · Oct 2, 2023 · a4a580e · a4a580e
1 parent db2564c
commit a4a580e
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 50 deletions.
diff --git a/web/src/beta/features/Assets/constants.ts b/web/src/beta/features/Assets/constants.ts
@@ -1,3 +1,3 @@
-export const FILE_FORMATS = ".kml,.czml,.topojson,.geojson,.json,.gltf,.glb";
+export const FILE_FORMATS = ".kml,.czml,.topojson,.geojson,.json,.gltf,.glb,.csv";
 
 export const IMAGE_FORMATS = ".jpg,.jpeg,.png,.gif,.svg,.tiff,.webp";
diff --git a/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx b/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx
@@ -1,13 +1,14 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import SelectField from "@reearth/beta/components/fields/SelectField";
+import URLField from "@reearth/beta/components/fields/URLField";
 import RadioGroup from "@reearth/beta/components/RadioGroup";
 import Toggle from "@reearth/beta/components/Toggle";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 import { useT } from "@reearth/services/i18n";
 
-import { DataProps } from "..";
+import { DataProps, DataSourceOptType, FileFormatType, SourceType } from "..";
 import {
   ColJustifyBetween,
   AssetWrapper,
@@ -37,13 +38,14 @@ const SelectDataType: React.FC<{ fileFormat: string; setFileFormat: (k: string)
 
 const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
-  const [sourceType, setSourceType] = React.useState("url"); // ["url", "local", "value"]
-  const [fileFormat, setFileFormat] = React.useState("GeoJSON");
+  const [sourceType, setSourceType] = React.useState<SourceType>("local");
+  const [fileFormat, setFileFormat] = React.useState<FileFormatType>("GeoJSON");
   const [value, setValue] = React.useState("");
   const [prioritizePerformance, setPrioritizePerformance] = React.useState(false);
-  const DataSourceOptions = useMemo(
+  const DataSourceOptions: DataSourceOptType = useMemo(
     () => [
-      { label: t("From URL"), keyValue: "url" },
+      { label: t("From Assets"), keyValue: "local" },
+      { label: t("From Web"), keyValue: "url" },
       { label: t("From Value"), keyValue: "value" },
     ],
     [t],
@@ -59,14 +61,15 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         parsedValue = value;
       }
     }
+
     onSubmit({
       layerType: "simple",
       sceneId,
       title: generateRandomString(5),
       visible: true,
       config: {
         data: {
-          url: sourceType === "url" && value !== "" ? value : null,
+          url: (sourceType === "url" || sourceType === "local") && value !== "" ? value : null,
           type: fileFormat.toLowerCase(),
           value: parsedValue,
         },
@@ -87,6 +90,8 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     onClose();
   };
 
+  const handleOnChange = useCallback((value?: string) => setValue(value || ""), []);
+
   return (
     <ColJustifyBetween>
       <AssetWrapper>
@@ -97,13 +102,16 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             <RadioGroup
               options={DataSourceOptions}
               selectedValue={sourceType}
-              onChange={setSourceType}
+              onChange={(newValue: string) => setSourceType(newValue as SourceType)}
             />
           </SourceTypeWrapper>
         </InputGroup>
         {sourceType == "url" && (
           <>
-            <SelectDataType fileFormat={fileFormat} setFileFormat={setFileFormat} />
+            <SelectDataType
+              fileFormat={fileFormat}
+              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+            />
             <InputGroup
               label={t("Resource URL")}
               description={t("URL of the data source you want to add.")}>
@@ -114,22 +122,14 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
                 onChange={e => setValue(e.target.value)}
               />
             </InputGroup>
-            {fileFormat === "GeoJSON" && (
-              <InputGroup
-                label={t("Prioritize Performance")}
-                description={t("URL of the data source you want to add.")}>
-                <Toggle
-                  checked={prioritizePerformance}
-                  disabled={true}
-                  onChange={v => setPrioritizePerformance(v)}
-                />
-              </InputGroup>
-            )}
           </>
         )}
         {sourceType == "value" && (
           <>
-            <SelectDataType fileFormat={fileFormat} setFileFormat={setFileFormat} />
+            <SelectDataType
+              fileFormat={fileFormat}
+              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+            />
             <InputGroup label={t("Value")} description={t("Description around.")}>
               <TextArea
                 placeholder={t("Write down your text")}
@@ -140,7 +140,28 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             </InputGroup>
           </>
         )}
+        {sourceType == "local" && (
+          <>
+            <SelectDataType
+              fileFormat={fileFormat}
+              setFileFormat={(f: string) => setFileFormat(f as FileFormatType)}
+            />
+            <URLField fileType="asset" name={t("Asset")} value={value} onChange={handleOnChange} />
+          </>
+        )}
       </AssetWrapper>
+
+      {fileFormat === "GeoJSON" && (
+        <InputGroup
+          label={t("Prioritize Performance")}
+          description={t("URL of the data source you want to add.")}>
+          <Toggle
+            checked={prioritizePerformance}
+            disabled={true}
+            onChange={v => setPrioritizePerformance(v)}
+          />
+        </InputGroup>
+      )}
       <SubmitWrapper>
         <Button
           text={t("Add to Layer")}

diff --git a/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx b/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx
@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 
 import Button from "@reearth/beta/components/Button";
+import URLField from "@reearth/beta/components/fields/URLField";
 import RadioGroup from "@reearth/beta/components/RadioGroup";
 import Text from "@reearth/beta/components/Text";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 import { useT } from "@reearth/services/i18n";
 
-import { DataProps } from "..";
+import { DataProps, SourceType, DataSourceOptType } from "..";
 import {
   ColJustifyBetween,
   AssetWrapper,
@@ -19,11 +20,19 @@ import {
 const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const t = useT();
 
-  const [sourceType, setSourceType] = React.useState("url"); // ["url", "local", "value"]
+  const [sourceType, setSourceType] = React.useState<SourceType>("local");
   const [value, setValue] = React.useState("");
   const [lat, setLat] = React.useState("");
   const [long, setLong] = React.useState("");
 
+  const DataSourceOptions: DataSourceOptType = useMemo(
+    () => [
+      { label: t("From Assets"), keyValue: "local" },
+      { label: t("From Web"), keyValue: "url" },
+    ],
+    [t],
+  );
+
   const handleSubmit = () => {
     onSubmit({
       layerType: "simple",
@@ -32,7 +41,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
       visible: true,
       config: {
         data: {
-          url: sourceType === "url" && value !== "" ? value : null,
+          url: (sourceType === "url" || sourceType === "local") && value !== "" ? value : null,
           type: "csv",
           csv: {
             latColumn: lat,
@@ -56,6 +65,8 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     onClose();
   };
 
+  const handleOnChange = useCallback((value?: string) => setValue(value || ""), []);
+
   return (
     <ColJustifyBetween>
       <AssetWrapper>
@@ -64,20 +75,28 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           description="Select the type of data source you want to add.">
           <SourceTypeWrapper>
             <RadioGroup
-              options={[{ label: t("From URL"), keyValue: "url" }]}
+              options={DataSourceOptions}
               selectedValue={sourceType}
-              onChange={setSourceType}
+              onChange={(newValue: string) => setSourceType(newValue as SourceType)}
             />
           </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>
+
+        {sourceType == "url" && (
+          <InputGroup
+            label={t("Resource URL")}
+            description={t("URL of the data source you want to add.")}>
+            <Input
+              type="text"
+              placeholder="Input Text"
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+          </InputGroup>
+        )}
+        {sourceType == "local" && (
+          <URLField fileType="asset" value={value} name={t("Asset")} onChange={handleOnChange} />
+        )}
         <Text size="body">Point coordinates</Text>
         <InputGroup label="Latitude Field" description="Description around">
           <Input

diff --git a/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
@@ -42,7 +42,7 @@ const VectorTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         data: {
           url: urlValue !== "" ? urlValue : null,
           type: "mvt",
-          layers: layers.length <= 1 ? layers[0] : layers,
+          layers: layers.length === 1 ? layers[0] : layers,
         },
         resource: {
           clampToGround: true,

diff --git a/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
@@ -18,6 +18,8 @@ import {
 } from "../utils";
 
 const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+  const t = useT();
+
   const {
     urlValue,
     layerValue,
@@ -30,8 +32,6 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     handleLayerInput,
   } = useHooks();
 
-  const t = useT();
-
   const handleSubmit = () => {
     onSubmit({
       layerType: "simple",
@@ -42,7 +42,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         data: {
           url: urlValue !== "" ? urlValue : null,
           type: "wms",
-          layers: layers.length <= 1 ? layers[0] : layers,
+          layers: layers.length === 1 ? layers[0] : layers,
         },
         resource: {
           clampToGround: true,

diff --git a/web/src/beta/features/Editor/DataSourceManager/index.tsx b/web/src/beta/features/Editor/DataSourceManager/index.tsx
@@ -16,6 +16,14 @@ export type DataProps = {
   onSubmit: (layerAddInp: LayerAddProps) => void;
 };
 
+export type SourceType = "url" | "local" | "value";
+
+export type FileFormatType = "CSV" | "GeoJSON" | "KML" | "CZML";
+export type DataSourceOptType = {
+  label: string;
+  keyValue: SourceType;
+}[];
+
 const DataSourceManager: React.FC<DataProps> = ({ sceneId, onClose, onSubmit }) => {
   return (
     <Modal
@@ -27,18 +35,13 @@ const DataSourceManager: React.FC<DataProps> = ({ sceneId, onClose, onSubmit })
         {
           content: <Asset sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
           id: "asset",
-          label: "Asset",
+          label: "Common",
         },
         {
           content: <DelimitedText sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
           id: "delimitedText",
           label: "Delimited Text",
         },
-        {
-          content: <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
-          id: "threeDTiles",
-          label: "3D Tiles",
-        },
         {
           content: <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
           id: "wms",
@@ -49,6 +52,11 @@ const DataSourceManager: React.FC<DataProps> = ({ sceneId, onClose, onSubmit })
           id: "vectorTiles",
           label: "Vector Tile",
         },
+        {
+          content: <ThreeDTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+          id: "threeDTiles",
+          label: "3D Tiles",
+        },
       ]}
     />
   );

diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -33,17 +33,19 @@ Size Small to Large: Size Small to Large
 Size Large to Small: Size Large to Small
 File Format: ''
 File format of the data source you want to add.: ''
-From URL: ''
+From Assets: ''
+From Web: ''
 From Value: ''
 Source Type: ''
 Select the type of data source you want to add.: ''
 Resource URL: Resource URL
 URL of the data source you want to add.: ''
 Input Text: ''
-Prioritize Performance: ''
 Value: ''
 Description around.: ''
 Write down your text: ''
+Asset: ''
+Prioritize Performance: ''
 Add to Layer: ''
 Choose layer to add: Choose layer to add
 Layer of the data source you want to add.: Layer of the data source you want to add

diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -33,17 +33,19 @@ Size Small to Large: Size Small to Large
 Size Large to Small: Size Large to Small
 File Format: ファイルフォーマット
 File format of the data source you want to add.: ''
-From URL: ''
+From Assets: ''
+From Web: ''
 From Value: ''
 Source Type: ''
 Select the type of data source you want to add.: ''
 Resource URL: リソースURL
 URL of the data source you want to add.: ''
 Input Text: ''
-Prioritize Performance: ''
 Value: ''
 Description around.: ''
 Write down your text: ''
+Asset: ''
+Prioritize Performance: ''
 Add to Layer: レイヤー追加
 Choose layer to add: ''
 Layer of the data source you want to add.: ''