TRUNK
/
postnet-front
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add minor markup changes

Browse Source
dev
Platon Yasev 3 years ago
parent a014cd0a1e
commit 6a2713f880
21 changed files with 989 additions and 108 deletions
Show Stats Download Patch File Download Diff File

1
dist/assets/index.327984dc.css vendored
View File

File diff suppressed because one or more lines are too long

837
dist/assets/index.3ca87fd1.js vendored
View File

File diff suppressed because one or more lines are too long

24
dist/index.html vendored
Unescape View File

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="/favicon.ico" rel="icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PostNet by Spatial</title>
<script type="module" crossorigin src="/assets/index.43fdc108.js"></script>
<link rel="stylesheet" href="/assets/index.66bbedea.css">
</head>
<body>
<div id="root"></div>
<head>
<meta charset="UTF-8"/>
<link href="/vite.svg" rel="icon" type="image/svg+xml"/>
<link href="/favicon.ico" rel="icon"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>PostNet by Spatial</title>
<script crossorigin src="/assets/index.3ca87fd1.js" type="module"></script>
<link href="/assets/index.327984dc.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</body>
</html>

19
dist/vite.svg vendored
Unescape View File

@ -1 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88"
height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
<defs>
<linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
<stop offset="0%" stop-color="#41D1FF"></stop>
<stop offset="100%" stop-color="#BD34FE"></stop>
</linearGradient>
<linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
<stop offset="0%" stop-color="#FFEA83"></stop>
<stop offset="8.333%" stop-color="#FFDD35"></stop>
<stop offset="100%" stop-color="#FFA800"></stop>
</linearGradient>
</defs>
<path fill="url(#IconifyId1813088fe1fbc01fb466)"
d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
<path fill="url(#IconifyId1813088fe1fbc01fb467)"
d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/Map/Layers/Layers.jsx
Unescape View File

@ -1,7 +1,6 @@
import { Points } from "./Points";
import { Layer, Source } from "react-map-gl";
import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { useFilters } from "../../stores/useFilters";
import { BASE_URL } from "../../api";
@ -9,7 +8,6 @@ export const Layers = () => {
const {
filters: { prediction, region },
} = useFilters();
const { isVisible } = useLayersVisibility();
return (
<>
@ -22,7 +20,6 @@ export const Layers = () => {
{...aoLayer}
layout={{
...aoLayer.layout,
visibility: isVisible.atd ? "visible" : "none",
}}
/>
</Source>
@ -36,7 +33,6 @@ export const Layers = () => {
{...rayonLayer}
layout={{
...rayonLayer.layout,
visibility: isVisible.atd ? "visible" : "none",
}}
/>
</Source>

5
src/Map/Layers/layers-config.js
Unescape View File

@ -79,8 +79,7 @@ export const selectedRegionLayer = {
"line-cap": "round",
},
paint: {
"line-color": "#47006e",
"line-width": 2,
"line-opacity": 1,
"line-color": "#CC2222",
"line-width": 4,
},
};

10
src/Map/LayersControl/LayersControl.jsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Popover } from "antd";
import { Button, Popover, Tooltip } from "antd";
import { BiLayer } from "react-icons/all";
import { LayersVisibility } from "./LayersVisibility";
@ -9,9 +9,11 @@ export const LayersControl = () => {
trigger="click"
placement={"leftBottom"}
>
<Button className="absolute bottom-[20px] right-[20px] flex items-center justify-center p-3">
<BiLayer className="w-4 h-4" />
</Button>
<Tooltip title="Слои">
<Button className="absolute bottom-[20px] right-[20px] flex items-center justify-center p-3">
<BiLayer className="w-4 h-4" />
</Button>
</Tooltip>
</Popover>
);
};

42
src/Map/LayersControl/LayersVisibility.jsx
Unescape View File

@ -13,32 +13,14 @@ export const LayersVisibility = () => {
<div>
<Title text={"Слои"} className={"mb-1"} />
<div className={"space-y-1 flex flex-col"}>
{mode === MODES.INITIAL && (
<Checkbox
onChange={() => toggleVisibility(LAYER_IDS.initial)}
checked={isVisible[LAYER_IDS.initial]}
>
Локации к рассмотрению
</Checkbox>
)}
{mode === MODES.APPROVE_WORKING && (
<>
<Checkbox
onChange={() => toggleVisibility(LAYER_IDS.approve)}
checked={isVisible[LAYER_IDS.approve]}
>
Согласование-установка
</Checkbox>
<Checkbox
className={"!ml-0"}
onChange={() => toggleVisibility(LAYER_IDS.working)}
checked={isVisible[LAYER_IDS.working]}
>
Работает
</Checkbox>
</>
)}
{/*{mode === MODES.INITIAL && (*/}
{/* <Checkbox*/}
{/* onChange={() => toggleVisibility(LAYER_IDS.initial)}*/}
{/* checked={isVisible[LAYER_IDS.initial]}*/}
{/* >*/}
{/* Локации к рассмотрению*/}
{/* </Checkbox>*/}
{/*)}*/}
{mode === MODES.WORKING && (
<>
@ -51,14 +33,6 @@ export const LayersVisibility = () => {
</Checkbox>
</>
)}
<Checkbox
className={"!ml-0"}
onChange={() => toggleVisibility(LAYER_IDS.atd)}
checked={isVisible[LAYER_IDS.atd]}
>
Единицы АТД
</Checkbox>
</div>
</div>
);

2
src/Map/Legend.jsx
Unescape View File

@ -38,7 +38,7 @@ export function Legend() {
};
return (
<div className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background-light rounded-xl p-3">
<div className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3">
{getContent()}
</div>
);

3
src/Map/MapComponent.jsx
Unescape View File

@ -28,6 +28,7 @@ import { MapHeader } from "./MapHeader";
export const MapComponent = () => {
const mapRef = useRef(null);
const mapContainerRef = useRef(null);
const sidebarRef = useRef(null);
const { popup, setPopup } = usePopup();
const { setClickedPointConfig } = useClickedPointConfig();
const { setLayersVisibility } = useLayersVisibility();
@ -111,7 +112,7 @@ export const MapComponent = () => {
return (
<MapProvider>
<Sidebar isCollapsed={isSidebarCollapsed} />
<Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
<div className="flex-1 h-screen flex flex-col ">
<div
ref={mapContainerRef}

2
src/Map/Popup/mode-popup/ApproveWorkingPointPopup.jsx
Unescape View File

@ -37,7 +37,7 @@ export const ApproveWorkingPointPopup = ({ feature }) => {
<FeatureProperties feature={feature} dynamicStatus={status} />
<div className="flex justify-center mt-4">
<div className={"flex flex-col items-center"}>
<Title text="Сменить статус" />
<Title text="Изменить статус" />
<StatusSelect value={status} onChange={handleStatusChange} />
</div>
</div>

30
src/SignOut.jsx
Unescape View File

@ -1,7 +1,9 @@
import { Button, Popover } from "antd";
import { LogoutOutlined } from "@ant-design/icons";
import { Button, Popover, Tooltip } from "antd";
import { ArrowRightOutlined, LogoutOutlined } from "@ant-design/icons";
import { api } from "./api";
import { setAuth } from "./stores/auth";
import { useQuery } from "@tanstack/react-query";
import { Title } from "./components/Title";
export function SignOut() {
const logOut = async () => {
@ -10,23 +12,29 @@ export function SignOut() {
setAuth(false);
};
const { data } = useQuery(["profile"], async () => {
const { data } = await api.get("/accounts/profile");
return data;
});
return (
<div className="absolute top-[20px] right-[20px]">
<Popover
content={
<Button type={"primary"} onClick={logOut}>
Выйти
</Button>
<>
<Title text={data?.email} classNameText={"lowercase"} />
<Button type="primary" block onClick={logOut}>
<span className="mr-1">Выйти</span>
<ArrowRightOutlined />
</Button>
</>
}
trigger="click"
placement={"bottomRight"}
>
<Button
icon={<LogoutOutlined />}
type="primary"
size="large"
title="Выйти"
/>
<Tooltip title="Выйти" placement={"left"}>
<Button icon={<LogoutOutlined />} type="primary" size="large" />
</Tooltip>
</Popover>
</div>
);

49
src/components/ModeSelector.jsx
Unescape View File

@ -1,5 +1,5 @@
import { useMode } from "../stores/useMode";
import { Button } from "antd";
import { Button, Tooltip } from "antd";
import { AIIcon } from "../icons/AIIcon";
import { MODES } from "../config";
import { ApproveIcon } from "../icons/ApproveIcon";
@ -20,24 +20,35 @@ export const ModeSelector = () => {
return (
<>
<Button
icon={<AIIcon />}
type={getType(MODES.INITIAL)}
onClick={() => handleClick(MODES.INITIAL)}
title="Отбор локаций для работы"
/>
<Button
icon={<ApproveIcon />}
type={getType(MODES.APPROVE_WORKING)}
onClick={() => handleClick(MODES.APPROVE_WORKING)}
title="Управление статусами локаций"
/>
<Button
icon={<WorkingIcon />}
type={getType(MODES.WORKING)}
onClick={() => handleClick(MODES.WORKING)}
title="Мониторинг работающих постаматов"
/>
<Tooltip title="Отбор локаций для работы">
<Button
icon={<AIIcon />}
type={getType(MODES.INITIAL)}
onClick={() => handleClick(MODES.INITIAL)}
className="flex items-center justify-center"
size="large"
/>
</Tooltip>
<Tooltip title="Управление статусами локаций">
<Button
icon={<ApproveIcon />}
type={getType(MODES.APPROVE_WORKING)}
onClick={() => handleClick(MODES.APPROVE_WORKING)}
className="flex items-center justify-center"
size="large"
/>
</Tooltip>
<Tooltip title="Мониторинг работающих постаматов" className="text-center">
<Button
icon={<WorkingIcon />}
type={getType(MODES.WORKING)}
onClick={() => handleClick(MODES.WORKING)}
className="flex items-center justify-center"
size="large"
/>
</Tooltip>
</>
);
};

2
src/icons/Logo.jsx
Unescape View File

@ -1,4 +1,4 @@
export const Logo = ({ width = 24, height = 24 }) => {
export const Logo = ({ width = 40, height = 40 }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"

2
src/index.css
Unescape View File

@ -35,7 +35,7 @@
}
.ant-select-multiple .ant-select-selection-item {
@apply !bg-blue;
@apply !bg-rose;
}
.mapboxgl-ctrl-group,

33
src/modules/Sidebar/Sidebar.jsx
Unescape View File

@ -1,4 +1,4 @@
import { Button } from "antd";
import { Button, Checkbox } from "antd";
import {
useHasManualEdits,
usePointSelection,
@ -10,11 +10,16 @@ import { useMode } from "../../stores/useMode";
import { MODES } from "../../config";
import { twMerge } from "tailwind-merge";
import { SelectedLocations } from "./InitialSidebar/SelectedLocations";
import { forwardRef } from "react";
import { LAYER_IDS } from "../../Map/Layers/constants";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { Title } from "../../components/Title";
export const Sidebar = ({ isCollapsed }) => {
export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
const hasManualEdits = useHasManualEdits();
const { mode } = useMode();
const { reset: resetSelection } = usePointSelection();
const { isVisible, toggleVisibility } = useLayersVisibility();
return (
<div
@ -22,12 +27,34 @@ export const Sidebar = ({ isCollapsed }) => {
"h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
isCollapsed ? "basis-0 p-0 -translate-x-[320px]" : "basis-[320px] p-3"
)}
ref={ref}
>
<Header />
<div className="space-y-5 flex flex-col justify-between flex-1">
<div>
<Filters disabled={hasManualEdits} />
{mode === MODES.APPROVE_WORKING && (
<div className="mt-4">
<Title text="Статусы" />
<div className="space-y-2">
<Checkbox
onChange={() => toggleVisibility(LAYER_IDS.approve)}
checked={isVisible[LAYER_IDS.approve]}
>
Согласование-установка
</Checkbox>
<Checkbox
className={"!ml-0"}
onChange={() => toggleVisibility(LAYER_IDS.working)}
checked={isVisible[LAYER_IDS.working]}
>
Работает
</Checkbox>
</div>
</div>
)}
{mode === MODES.INITIAL && hasManualEdits ? (
<Button block className={"mt-2"} onClick={resetSelection}>
Отменить ручное редактирование
@ -46,4 +73,4 @@ export const Sidebar = ({ isCollapsed }) => {
</div>
</div>
);
};
});

2
src/modules/Sidebar/WorkingFilters/AgeSlider.jsx
Unescape View File

@ -23,7 +23,7 @@ export const AgeSlider = ({ fullRange }) => {
return (
<Slider
title={"Зреслость постамата, дней"}
title={"Зрелость постамата, дней"}
value={age}
onAfterChange={handleAfterChange}
min={fullRange?.age_day[0]}

14
src/modules/Table/ExportButton.jsx
Unescape View File

@ -1,5 +1,5 @@
import { useState } from "react";
import { Button } from "antd";
import { Button, Tooltip } from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import { download } from "../../utils";
@ -18,8 +18,14 @@ export const ExportButton = ({ provider }) => {
};
return (
<Button onClick={handleExport} loading={startExport} disabled={startExport}>
<DownloadOutlined />
</Button>
<Tooltip title="Скачать данные">
<Button
onClick={handleExport}
loading={startExport}
disabled={startExport}
>
<DownloadOutlined />
</Button>
</Tooltip>
);
};

10
src/modules/Table/HeaderWrapper.jsx
Unescape View File

@ -1,5 +1,5 @@
import { ExportButton } from "./ExportButton";
import { Button } from "antd";
import { Button, Tooltip } from "antd";
import { useTable } from "../../stores/useTable";
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
@ -15,9 +15,11 @@ const ToggleFullScreenButton = () => {
};
return (
<Button onClick={handleClick}>
{fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button>
<Tooltip title="Раскрыть на полный экран" placement={"topRight"}>
<Button onClick={handleClick}>
{fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button>
</Tooltip>
);
};

1
src/stores/useLayersVisibility.js
Unescape View File

@ -6,7 +6,6 @@ const INITIAL_STATE = {
[LAYER_IDS.initial]: true,
[LAYER_IDS.approve]: false,
[LAYER_IDS.working]: false,
[LAYER_IDS.atd]: true,
};
const store = (set) => ({

3
tailwind.config.cjs
Unescape View File

@ -11,7 +11,8 @@ module.exports = {
"white-background-light": "rgba(255, 255, 255, 0.6)",
grey: "rgba(0,0, 0, 0.5)",
"grey-light": "rgba(239,239,239,0.9)",
border: '#d9d9d9'
border: '#d9d9d9',
rose: '#FAA7B4'
},
},
},

Write Preview
Loading…
Cancel
Save