Skip to content

Commit

Permalink
feat: add layers panel, and interactivity
Browse files Browse the repository at this point in the history
  • Loading branch information
@bishalspkt
bishalspkt committed Jan 7, 2024
1 parent d149709 commit 03657fb
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 26 deletions.
76 changes: 53 additions & 23 deletions src/components/map-controls/map-controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,73 @@ interface UploadGeoJSONButtonProps {
setGeoJSON: React.Dispatch<React.SetStateAction<Record<string, unknown> | undefined>> // Update the type of geoJSON
}

type PanelType = "upload" | "layers";
type PanelStatus = "minimized" | "maximized" | "hidden";
type PanelAction = "toggle-hidden" | "toggle-maximized";

export default function MapControls({ setGeoJSON }: UploadGeoJSONButtonProps) {
const title = "Import GeoJSON";
const [uploadMinimized, setUploadMinimized] = useState(false);
const [layersMinimized, setLayersMinimized] = useState(false);
const [uploadPanelStatus, setUploadPanelStatus] = useState<PanelStatus>("maximized");
const [layersPanelStatus, setLayersPanelStatus] = useState<PanelStatus>("hidden");


const togglePanel = (panel: PanelType, action: PanelAction) => {
switch (panel) {
case "upload":
setLayersPanelStatus("hidden")

const toggleUploadMinimize = () => {
setUploadMinimized(!uploadMinimized);
};
action === "toggle-hidden"
? setUploadPanelStatus(uploadPanelStatus === "hidden" ? "maximized" : "hidden")
: setUploadPanelStatus(uploadPanelStatus === "minimized" ? "maximized" : "minimized");
break;
case "layers":
setUploadPanelStatus("hidden")

const toggleLayersMinimize = () => {
setLayersMinimized(!layersMinimized);
action === "toggle-hidden"
? setLayersPanelStatus(layersPanelStatus === "hidden" ? "maximized" : "hidden")
: setLayersPanelStatus(layersPanelStatus === "minimized" ? "maximized" : "minimized");
break;
default:
alert("Something unexpected happened. Panel has unknown value")
}
}

return (
<>
<div className="fixed top-16 left-4 flex flex-col gap-2">
<Button variant="outline" size="icon" className="rounded-3xl" onClick={toggleUploadMinimize}><Upload className="h-5 w-5"/></Button>
<Button variant="outline" size="icon" className="rounded-3xl" onClick={toggleLayersMinimize}><Layers className="h-5 w-5"/></Button>
<Button variant="outline" size="icon" className="rounded-3xl"><Download className="h-5 w-5"/></Button>
<div className="fixed top-16 left-4 flex flex-col gap-2">
<Button variant="outline" size="icon" className="rounded-3xl" onClick={() => togglePanel("upload", "toggle-hidden")}><Upload className="h-5 w-5" /></Button>
<Button variant="outline" size="icon" className="rounded-3xl" onClick={() => togglePanel("layers", "toggle-hidden")}><Layers className="h-5 w-5" /></Button>
<Button variant="outline" size="icon" className="rounded-3xl"><Download className="h-5 w-5" /></Button>
</div>
<div className="fixed left-8 bottom-0 mx-8 rounded sm:w-[450px] w-[300px] text-black font-semibold bg-white shadow-lg border border-b-0">
<div className="flex border-b border-gray-300 px-4 py-2 my-2 gap-2 hover:cursor-pointer" onClick={toggleUploadMinimize}>
<p>{title}</p>
<a className={`bg-gray-400 h-8 w-8 text-white rounded-2xl ${uploadMinimized ? '' : 'rotate-180'} ml-auto leading-10`}> ^ </a>
</div>
{!uploadMinimized && (
<>

{uploadPanelStatus !== "hidden" &&
<div className="fixed left-8 bottom-0 mx-8 rounded sm:w-[450px] w-[300px] text-black font-semibold bg-white shadow-lg border border-b-0">
<div className="flex border-b border-gray-300 px-4 py-2 my-2 gap-2 hover:cursor-pointer" onClick={() => togglePanel("upload", "toggle-maximized")}>
<p>Import GeoJSON</p>
</div>
{uploadPanelStatus === "maximized" && (
<div className="flex flex-col gap-2 px-4 py-2 text-left">
<UploadGeoJSONButton setGeoJSON={setGeoJSON} />

<p className="text-l text-bold my-2 mx-auto">OR</p>
<PasteGeoJSONForm setGeoJSON={setGeoJSON} />
</div>
</>
)}
</div>

)}
</div>
}
{layersPanelStatus !== "hidden" &&
<div className="fixed left-8 bottom-0 mx-8 rounded sm:w-[450px] w-[300px] text-black font-semibold bg-white shadow-lg border border-b-0">
<div className="flex border-b border-gray-300 px-4 py-2 my-2 gap-2 hover:cursor-pointer">
<p>Your Layers</p>
</div>
{layersPanelStatus === "maximized" && (
<div className="flex flex-col gap-2 px-4 py-2 text-left">
<p>You have not added any layers</p>
<p className="text-gray-600 text-sm">To add layers, import your GeoJSON</p>
<Button className="mr-auto" onClick={() => togglePanel("upload", "toggle-hidden")}>Import your GeoJSON</Button>
</div>
)}
</div>
}
</>
);
}
11 changes: 8 additions & 3 deletions src/components/map-controls/upload-geojson.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import { useRef } from "react";
import { Button } from "../ui/button";
interface UploadGeoJSONButtonProps {
setGeoJSON: (geoJSON: Record<string, unknown>) => void; // Update the type of geoJSON
showTitleAndDescription?: boolean;
}

export default function UploadGeoJSONButton({ setGeoJSON }: UploadGeoJSONButtonProps) {
export default function UploadGeoJSONButton({ setGeoJSON, showTitleAndDescription = true }: UploadGeoJSONButtonProps) {

const fileUploadRef = useRef<HTMLInputElement>(null);
const dialogCloseRef = useRef<HTMLButtonElement>(null);
Expand Down Expand Up @@ -46,8 +47,12 @@ export default function UploadGeoJSONButton({ setGeoJSON }: UploadGeoJSONButtonP

return (
<>
<p>Upload a GeoJSON file to get started</p>
<p className="text-gray-600 text-sm">You may select a .json or .geojson file that is less than 10MB in size.</p>
{showTitleAndDescription && (
<>
<p>Upload a GeoJSON file to get started</p>
<p className="text-gray-600 text-sm">You may select a .json or .geojson file that is less than 10MB in size.</p>
</>
)}
<div className="py-2 mr-auto">
<Button onClick={() => fileUploadRef.current?.click()}>Upload GeoJSON</Button>
</div>
Expand Down

0 comments on commit 03657fb

Please sign in to comment.