fix: remove request button
This commit is contained in:
DipokalLab
parent
5ed8a120eb
commit
935067fb6d
|
|
@ -1,9 +1,7 @@
|
|||
import { useAreaStore } from "@/state/areaStore";
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface Building {
|
||||
export interface Building {
|
||||
id: number;
|
||||
tags: { [key: string]: string | undefined };
|
||||
geometry?: { lat: number; lng: number }[];
|
||||
|
|
@ -14,85 +12,37 @@ from { transform: rotate(0deg); }
|
|||
to { transform: rotate(360deg); }
|
||||
`;
|
||||
|
||||
export function BuildingHeights({ area }: { area: any }) {
|
||||
const [buildings, setBuildings] = useState<Building[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const appendAreas = useAreaStore((state) => state.appendAreas);
|
||||
|
||||
const requestBuildings = () => {
|
||||
setLoading(true);
|
||||
|
||||
const south = area[1].lat;
|
||||
const west = area[1].lng;
|
||||
const north = area[0].lat;
|
||||
const east = area[0].lng;
|
||||
console.log(south, west, north, east);
|
||||
const query = `[out:json][timeout:25];(way["building"]( ${south},${west},${north},${east} );relation["building"]( ${south},${west},${north},${east} ););out body geom;`;
|
||||
fetch("https://overpass-api.de/api/interpreter", {
|
||||
method: "POST",
|
||||
body: query,
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const blds: any = data.elements.map((element) => ({
|
||||
id: element.id,
|
||||
tags: element.tags,
|
||||
geometry: element.geometry
|
||||
? element.geometry.map((pt) => ({ lat: pt.lat, lng: pt.lon }))
|
||||
: undefined,
|
||||
}));
|
||||
setBuildings(blds);
|
||||
appendAreas(blds);
|
||||
|
||||
console.log("Building Data:", blds);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching building data:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
export function BuildingHeights({
|
||||
buildings,
|
||||
loading,
|
||||
}: {
|
||||
buildings: Building[];
|
||||
loading: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
css={css({
|
||||
position: "relative",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
css={css({
|
||||
color: "#ffffff",
|
||||
|
||||
backgroundColor: "#007bffe8",
|
||||
backdropFilter: "blur(8px)",
|
||||
border: "none",
|
||||
padding: "0.5rem 1rem",
|
||||
borderRadius: "8px",
|
||||
outline: "#086ad4c2 solid 0.1rem",
|
||||
cursor: "pointer",
|
||||
transition: "0.2s",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
":hover": {
|
||||
backgroundColor: "#085fbd",
|
||||
},
|
||||
})}
|
||||
onClick={requestBuildings}
|
||||
>
|
||||
{loading && (
|
||||
{loading && (
|
||||
<div
|
||||
css={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
color: "#555",
|
||||
})}
|
||||
>
|
||||
<Loader2
|
||||
css={css({
|
||||
animation: `${spinAnimation} 1s linear infinite`,
|
||||
})}
|
||||
size={16}
|
||||
/>
|
||||
)}
|
||||
request
|
||||
</button>
|
||||
Fetching building information...
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
css={css({
|
||||
overflow: "scroll",
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ type AreaStore = {
|
|||
lng: number;
|
||||
}[];
|
||||
|
||||
appendAreas: (areas: []) => void;
|
||||
setCenter: (center: []) => void;
|
||||
appendAreas: (areas: any[]) => void;
|
||||
setCenter: (center: any[]) => void;
|
||||
};
|
||||
|
||||
export const useAreaStore = create<AreaStore>((set) => ({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
import { Space } from "../three/Space";
|
||||
import { FullscreenModal } from "../components/FullscreenModal";
|
||||
import { Title } from "@/components/text/Title";
|
||||
|
|
@ -11,8 +11,8 @@ import {
|
|||
NextButton,
|
||||
PrevButton,
|
||||
} from "@/components/button/BottomButton";
|
||||
import { BuildingHeights } from "@/components/map/Processing";
|
||||
import { ChevronLeft, ChevronRight, Download } from "lucide-react";
|
||||
import { BuildingHeights, Building } from "@/components/map/Processing";
|
||||
import { ChevronLeft, ChevronRight, Download, Loader2 } from "lucide-react";
|
||||
import { useAreaStore } from "@/state/areaStore";
|
||||
import { useActionStore } from "@/state/exportStore";
|
||||
import { Modal } from "@/components/modal/Modal";
|
||||
|
|
@ -26,6 +26,11 @@ const IconSize = css({
|
|||
height: "14px",
|
||||
});
|
||||
|
||||
const spinAnimation = keyframes`
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
`;
|
||||
|
||||
function App() {
|
||||
const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
|
||||
const [areaData, setAreaData] = useState([]);
|
||||
|
|
@ -36,8 +41,12 @@ function App() {
|
|||
const [isFleetLogin, setIsFleetLogin] = useState(false);
|
||||
const [isFleetModal, setIsFleetModal] = useState(false);
|
||||
const [spaceList, setSpaceList] = useState([]);
|
||||
const [buildings, setBuildings] = useState<Building[]>([]);
|
||||
const [isFetchingBuildings, setIsFetchingBuildings] = useState(false);
|
||||
const [hasFetchedBuildings, setHasFetchedBuildings] = useState(false);
|
||||
|
||||
const setCenter = useAreaStore((state) => state.setCenter);
|
||||
const appendAreas = useAreaStore((state) => state.appendAreas);
|
||||
const setAction = useActionStore((state) => state.setAction);
|
||||
const setFleet = useActionStore((state) => state.setFleet);
|
||||
|
||||
|
|
@ -101,18 +110,58 @@ function App() {
|
|||
setCenter(data);
|
||||
console.log(data, "AAEE");
|
||||
setIsNextButtonDisabled(false);
|
||||
setBuildings([]);
|
||||
setHasFetchedBuildings(false);
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
setAreaData([]);
|
||||
setIsNextButtonDisabled(true);
|
||||
setBuildings([]);
|
||||
setHasFetchedBuildings(false);
|
||||
};
|
||||
|
||||
const handleClickNextStep = () => {
|
||||
const requestBuildings = async () => {
|
||||
setIsFetchingBuildings(true);
|
||||
|
||||
const south = areaData[1].lat;
|
||||
const west = areaData[1].lng;
|
||||
const north = areaData[0].lat;
|
||||
const east = areaData[0].lng;
|
||||
const query = `[out:json][timeout:25];(way["building"]( ${south},${west},${north},${east} );relation["building"]( ${south},${west},${north},${east} ););out body geom;`;
|
||||
try {
|
||||
const response = await fetch("https://overpass-api.de/api/interpreter", {
|
||||
method: "POST",
|
||||
body: query,
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
});
|
||||
const data = await response.json();
|
||||
const blds: Building[] = data.elements.map((element) => ({
|
||||
id: element.id,
|
||||
tags: element.tags,
|
||||
geometry: element.geometry
|
||||
? element.geometry.map((pt) => ({ lat: pt.lat, lng: pt.lon }))
|
||||
: undefined,
|
||||
}));
|
||||
setBuildings(blds);
|
||||
appendAreas(blds);
|
||||
setHasFetchedBuildings(true);
|
||||
} catch (error) {
|
||||
console.error("Error fetching building data:", error);
|
||||
} finally {
|
||||
setIsFetchingBuildings(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickNextStep = async () => {
|
||||
if (step == 0 && checkIsBig()) {
|
||||
setIsWarnModal(true);
|
||||
return false;
|
||||
}
|
||||
if (step == 1 && !hasFetchedBuildings) {
|
||||
await requestBuildings();
|
||||
return;
|
||||
}
|
||||
setStep(step + 1);
|
||||
};
|
||||
|
||||
|
|
@ -153,10 +202,14 @@ function App() {
|
|||
<Column gap="0.5rem">
|
||||
<Title>Processing</Title>
|
||||
<Description>
|
||||
Click the button below to get the building information.
|
||||
Click Next Step to fetch building information. Once loaded, click
|
||||
Next Step again to view the 3D scene.
|
||||
</Description>
|
||||
|
||||
<BuildingHeights area={areaData} />
|
||||
<BuildingHeights
|
||||
buildings={buildings}
|
||||
loading={isFetchingBuildings}
|
||||
/>
|
||||
</Column>
|
||||
</Column>
|
||||
</FullscreenModal>
|
||||
|
|
@ -167,10 +220,24 @@ function App() {
|
|||
|
||||
<NextButton
|
||||
isShow={step != 2}
|
||||
disabled={isNextButtonDisabled}
|
||||
disabled={isNextButtonDisabled || isFetchingBuildings}
|
||||
onClick={handleClickNextStep}
|
||||
>
|
||||
Next Step <ChevronRight css={IconSize} />
|
||||
{isFetchingBuildings ? (
|
||||
<>
|
||||
<Loader2
|
||||
css={[
|
||||
IconSize,
|
||||
css({ animation: `${spinAnimation} 1s linear infinite` }),
|
||||
]}
|
||||
/>
|
||||
Fetching...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Next Step <ChevronRight css={IconSize} />
|
||||
</>
|
||||
)}
|
||||
</NextButton>
|
||||
|
||||
<NextButton isShow={step == 2} onClick={handleClickExport}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue