Platon Yasev
3 years ago
parent
f31b7a4c74
commit
93c3e06c52
@ -0,0 +1,29 @@
|
||||
import { Layer, Source } from "react-map-gl";
|
||||
import { gridLayer } from "./layers-config";
|
||||
import { useGridSize } from "../stores/useGridSize";
|
||||
import { useLayersVisibility } from "../stores/useLayersVisibility";
|
||||
|
||||
export const Grid = () => {
|
||||
const { gridSize } = useGridSize();
|
||||
const {
|
||||
isVisible: { grid },
|
||||
} = useLayersVisibility();
|
||||
|
||||
return (
|
||||
<Source
|
||||
id="grid"
|
||||
type="vector"
|
||||
tiles={[
|
||||
`http://postamates.spatiality.website/martin/public.${gridSize}/{z}/{x}/{y}.pbf`,
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...gridLayer}
|
||||
layout={{
|
||||
...gridLayer.layout,
|
||||
visibility: grid ? "visible" : "none",
|
||||
}}
|
||||
/>
|
||||
</Source>
|
||||
);
|
||||
};
|
||||
@ -1,47 +1,28 @@
|
||||
import { Layer, Source } from "react-map-gl";
|
||||
import { gridLayer, pointLayer } from "./layers-config";
|
||||
import {
|
||||
getGridVisibility,
|
||||
getPointsVisibility,
|
||||
useLayersStore,
|
||||
} from "../stores/useLayersStore";
|
||||
import { Grid } from "./Grid";
|
||||
import { useRating } from "../stores/useRating";
|
||||
|
||||
export const Layers = () => {
|
||||
const isPointsVisible = useLayersStore(getPointsVisibility);
|
||||
const isGridVisible = useLayersStore(getGridVisibility);
|
||||
const { rate } = useRating();
|
||||
|
||||
console.log(rate);
|
||||
return (
|
||||
<>
|
||||
<Source
|
||||
id="grid"
|
||||
type="vector"
|
||||
tiles={[
|
||||
"https://business.spatiality.website/martin/public.service_polygon/{z}/{x}/{y}.pbf",
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...gridLayer}
|
||||
layout={{
|
||||
...gridLayer.layout,
|
||||
visibility: isGridVisible ? "visible" : "none",
|
||||
}}
|
||||
/>
|
||||
</Source>
|
||||
<Source
|
||||
id="points"
|
||||
type="vector"
|
||||
tiles={[
|
||||
"https://business.spatiality.website/martin/public.service_point/{z}/{x}/{y}.pbf",
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...pointLayer}
|
||||
layout={{
|
||||
...pointLayer.layout,
|
||||
visibility: isPointsVisible ? "visible" : "none",
|
||||
}}
|
||||
/>
|
||||
</Source>
|
||||
<Grid />
|
||||
{/*<Source*/}
|
||||
{/* id="points"*/}
|
||||
{/* type="vector"*/}
|
||||
{/* tiles={[*/}
|
||||
{/* "https://property.spatiality.website/public.service_geofeature/{z}/{x}/{y}.pbf",*/}
|
||||
{/* ]}*/}
|
||||
{/*>*/}
|
||||
{/* <Layer*/}
|
||||
{/* {...pointLayer}*/}
|
||||
{/* layout={{*/}
|
||||
{/* ...pointLayer.layout,*/}
|
||||
{/* visibility: isPointsVisible ? "visible" : "none",*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/*</Source>*/}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
import { Title } from "./Title";
|
||||
import { Slider } from "antd";
|
||||
import { useState } from "react";
|
||||
|
||||
const Mark = ({ value }) => {
|
||||
return <span className={"text-grey text-xs"}>{value}</span>;
|
||||
};
|
||||
|
||||
export const SliderComponent = ({
|
||||
title,
|
||||
value: initialValue,
|
||||
onChange,
|
||||
onAfterChange,
|
||||
min = 0,
|
||||
max = 100,
|
||||
}) => {
|
||||
const fullRangeMarks = {
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
};
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const [marks, setMarks] = useState(fullRangeMarks);
|
||||
|
||||
const handleAfterChange = (value) => {
|
||||
const [min, max] = value;
|
||||
setMarks({
|
||||
...fullRangeMarks,
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
});
|
||||
|
||||
onAfterChange?.(value);
|
||||
};
|
||||
|
||||
const handleChange = (value) => {
|
||||
setValue(value);
|
||||
onChange?.(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title text={title} />
|
||||
<Slider
|
||||
range
|
||||
value={value}
|
||||
marks={marks}
|
||||
onChange={handleChange}
|
||||
onAfterChange={handleAfterChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
import { Radio } from "antd";
|
||||
import { Title } from "../../components/Title";
|
||||
import { useGridSize } from "../../stores/useGridSize";
|
||||
|
||||
const options = [
|
||||
{ label: "3 мин", value: "net3" },
|
||||
{ label: "4 мин", value: "net4" },
|
||||
{ label: "5 мин", value: "net5" },
|
||||
];
|
||||
|
||||
export const GridSizeSelect = () => {
|
||||
const { gridSize, setGridSize } = useGridSize();
|
||||
const onChange = ({ target: { value } }) => {
|
||||
setGridSize(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col items-center"}>
|
||||
<Title text={"Зона пешей доступности"} />
|
||||
<Radio.Group
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
value={gridSize}
|
||||
optionType="button"
|
||||
buttonStyle={"solid"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,26 @@
|
||||
import { Select } from "antd";
|
||||
import { Title } from "../../components/Title";
|
||||
import { useState } from "react";
|
||||
|
||||
const options = [
|
||||
{ value: "statistic", label: "Обычная" },
|
||||
{ value: "ml", label: "Основанная на ML" },
|
||||
];
|
||||
|
||||
export const ModelSelect = () => {
|
||||
const [value, setValue] = useState("statistic");
|
||||
const handleChange = (newValue) => setValue(newValue);
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col items-center"}>
|
||||
<Title text={"Модель расчета"} />
|
||||
<Select
|
||||
className={"w-full"}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
options={options}
|
||||
disabled={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,34 +1,16 @@
|
||||
import { Slider } from "antd";
|
||||
import { Title } from "../../components/Title";
|
||||
import { useState } from "react";
|
||||
|
||||
const Mark = ({ value }) => {
|
||||
return <span className={"text-grey text-xs"}>{value}</span>;
|
||||
};
|
||||
|
||||
const fullRangeMarks = { 0: <Mark value={0} />, 100: <Mark value={100} /> };
|
||||
import { useRating } from "../../stores/useRating";
|
||||
import { SliderComponent as Slider } from "../../components/Slider";
|
||||
|
||||
export const RatingSlider = () => {
|
||||
const [marks, setMarks] = useState(fullRangeMarks);
|
||||
const { rate, setRate } = useRating();
|
||||
|
||||
const handleAfterChange = (range) => {
|
||||
const [min, max] = range;
|
||||
setMarks({
|
||||
...fullRangeMarks,
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
});
|
||||
};
|
||||
const handleAfterChange = (range) => setRate(range);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Востребованность постамата, усл. ед."} />
|
||||
<Slider
|
||||
range
|
||||
defaultValue={[0, 100]}
|
||||
marks={marks}
|
||||
onAfterChange={handleAfterChange}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
title={"Востребованность постамата, усл. ед."}
|
||||
value={rate}
|
||||
onAfterChange={handleAfterChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
import { SliderComponent as Slider } from "../../components/Slider";
|
||||
import { Button } from "antd";
|
||||
|
||||
export const Settings = () => {
|
||||
return (
|
||||
<div className={"space-y-2 min-w-[300px]"}>
|
||||
<Slider title={"Количество жителей"} />
|
||||
<Slider title={"Количество станций метро"} />
|
||||
<Slider title={"Количество существующих постаматов"} />
|
||||
<Slider title={"Whatever"} />
|
||||
<div>
|
||||
<Button type="primary" block className={"mt-2"}>
|
||||
Рассчитать
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
activeTypes: [],
|
||||
setActiveTypes: (type) =>
|
||||
set((state) => {
|
||||
if (Array.isArray(type)) {
|
||||
state.activeTypes = [];
|
||||
return;
|
||||
}
|
||||
if (state.activeTypes.includes(type)) {
|
||||
state.activeTypes = state.activeTypes.filter((id) => id !== type);
|
||||
} else {
|
||||
state.activeTypes.push(type);
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
export const useActiveTypes = create(immer(store));
|
||||
@ -0,0 +1,12 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
gridSize: "net3",
|
||||
setGridSize: (value) =>
|
||||
set((state) => {
|
||||
state.gridSize = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useGridSize = create(immer(store));
|
||||
@ -1,29 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const INITIAL_STATE = {
|
||||
points: {
|
||||
visible: true,
|
||||
filter: {},
|
||||
},
|
||||
grid: {
|
||||
visible: true,
|
||||
filter: {},
|
||||
},
|
||||
};
|
||||
|
||||
const store = (set) => ({
|
||||
layers: INITIAL_STATE,
|
||||
toggleVisibility: (layerId) =>
|
||||
set((state) => {
|
||||
state.layers[layerId].visible = !state.layers[layerId].visible;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useLayersStore = create(immer(store));
|
||||
|
||||
export const getLayerVisibility = (layerId) => (state) =>
|
||||
state.layers[layerId].visible;
|
||||
|
||||
export const getPointsVisibility = getLayerVisibility("points");
|
||||
export const getGridVisibility = getLayerVisibility("grid");
|
||||
@ -0,0 +1,17 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const INITIAL_STATE = {
|
||||
points: true,
|
||||
grid: true,
|
||||
};
|
||||
|
||||
const store = (set) => ({
|
||||
isVisible: INITIAL_STATE,
|
||||
toggleVisibility: (layerId) =>
|
||||
set((state) => {
|
||||
state.isVisible[layerId] = !state.isVisible[layerId];
|
||||
}),
|
||||
});
|
||||
|
||||
export const useLayersVisibility = create(immer(store));
|
||||
@ -0,0 +1,12 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
rate: [0, 100],
|
||||
setRate: (value) =>
|
||||
set((state) => {
|
||||
state.rate = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useRating = create(immer(store));
|
||||
@ -0,0 +1,12 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
region: null,
|
||||
setRegion: (value) =>
|
||||
set((state) => {
|
||||
state.region = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useRegion = create(immer(store));
|
||||
Loading…
Reference in new issue