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

20
dist/index.html vendored
Unescape View File

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link href="/vite.svg" rel="icon" type="image/svg+xml"/>
<link href="/favicon.ico" rel="icon"/> <link href="/favicon.ico" rel="icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>PostNet by Spatial</title> <title>PostNet by Spatial</title>
<script type="module" crossorigin src="/assets/index.43fdc108.js"></script> <script crossorigin src="/assets/index.3ca87fd1.js" type="module"></script>
<link rel="stylesheet" href="/assets/index.66bbedea.css"> <link href="/assets/index.327984dc.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </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 { Points } from "./Points";
import { Layer, Source } from "react-map-gl"; import { Layer, Source } from "react-map-gl";
import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config"; import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { useFilters } from "../../stores/useFilters"; import { useFilters } from "../../stores/useFilters";
import { BASE_URL } from "../../api"; import { BASE_URL } from "../../api";
@ -9,7 +8,6 @@ export const Layers = () => {
const { const {
filters: { prediction, region }, filters: { prediction, region },
} = useFilters(); } = useFilters();
const { isVisible } = useLayersVisibility();
return ( return (
<> <>
@ -22,7 +20,6 @@ export const Layers = () => {
{...aoLayer} {...aoLayer}
layout={{ layout={{
...aoLayer.layout, ...aoLayer.layout,
visibility: isVisible.atd ? "visible" : "none",
}} }}
/> />
</Source> </Source>
@ -36,7 +33,6 @@ export const Layers = () => {
{...rayonLayer} {...rayonLayer}
layout={{ layout={{
...rayonLayer.layout, ...rayonLayer.layout,
visibility: isVisible.atd ? "visible" : "none",
}} }}
/> />
</Source> </Source>

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

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

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

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

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

2
src/Map/Legend.jsx
Unescape View File

@ -38,7 +38,7 @@ export function Legend() {
}; };
return ( 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()} {getContent()}
</div> </div>
); );

3
src/Map/MapComponent.jsx
Unescape View File

@ -28,6 +28,7 @@ import { MapHeader } from "./MapHeader";
export const MapComponent = () => { export const MapComponent = () => {
const mapRef = useRef(null); const mapRef = useRef(null);
const mapContainerRef = useRef(null); const mapContainerRef = useRef(null);
const sidebarRef = useRef(null);
const { popup, setPopup } = usePopup(); const { popup, setPopup } = usePopup();
const { setClickedPointConfig } = useClickedPointConfig(); const { setClickedPointConfig } = useClickedPointConfig();
const { setLayersVisibility } = useLayersVisibility(); const { setLayersVisibility } = useLayersVisibility();
@ -111,7 +112,7 @@ export const MapComponent = () => {
return ( return (
<MapProvider> <MapProvider>
<Sidebar isCollapsed={isSidebarCollapsed} /> <Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
<div className="flex-1 h-screen flex flex-col "> <div className="flex-1 h-screen flex flex-col ">
<div <div
ref={mapContainerRef} 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} /> <FeatureProperties feature={feature} dynamicStatus={status} />
<div className="flex justify-center mt-4"> <div className="flex justify-center mt-4">
<div className={"flex flex-col items-center"}> <div className={"flex flex-col items-center"}>
<Title text="Сменить статус" /> <Title text="Изменить статус" />
<StatusSelect value={status} onChange={handleStatusChange} /> <StatusSelect value={status} onChange={handleStatusChange} />
</div> </div>
</div> </div>

28
src/SignOut.jsx
Unescape View File

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

19
src/components/ModeSelector.jsx
Unescape View File

@ -1,5 +1,5 @@
import { useMode } from "../stores/useMode"; import { useMode } from "../stores/useMode";
import { Button } from "antd"; import { Button, Tooltip } from "antd";
import { AIIcon } from "../icons/AIIcon"; import { AIIcon } from "../icons/AIIcon";
import { MODES } from "../config"; import { MODES } from "../config";
import { ApproveIcon } from "../icons/ApproveIcon"; import { ApproveIcon } from "../icons/ApproveIcon";
@ -20,24 +20,35 @@ export const ModeSelector = () => {
return ( return (
<> <>
<Tooltip title="Отбор локаций для работы">
<Button <Button
icon={<AIIcon />} icon={<AIIcon />}
type={getType(MODES.INITIAL)} type={getType(MODES.INITIAL)}
onClick={() => handleClick(MODES.INITIAL)} onClick={() => handleClick(MODES.INITIAL)}
title="Отбор локаций для работы" className="flex items-center justify-center"
size="large"
/> />
</Tooltip>
<Tooltip title="Управление статусами локаций">
<Button <Button
icon={<ApproveIcon />} icon={<ApproveIcon />}
type={getType(MODES.APPROVE_WORKING)} type={getType(MODES.APPROVE_WORKING)}
onClick={() => handleClick(MODES.APPROVE_WORKING)} onClick={() => handleClick(MODES.APPROVE_WORKING)}
title="Управление статусами локаций" className="flex items-center justify-center"
size="large"
/> />
</Tooltip>
<Tooltip title="Мониторинг работающих постаматов" className="text-center">
<Button <Button
icon={<WorkingIcon />} icon={<WorkingIcon />}
type={getType(MODES.WORKING)} type={getType(MODES.WORKING)}
onClick={() => handleClick(MODES.WORKING)} onClick={() => handleClick(MODES.WORKING)}
title="Мониторинг работающих постаматов" 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 ( return (
<svg <svg
xmlns="http://www.w3.org/2000/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 { .ant-select-multiple .ant-select-selection-item {
@apply !bg-blue; @apply !bg-rose;
} }
.mapboxgl-ctrl-group, .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 { import {
useHasManualEdits, useHasManualEdits,
usePointSelection, usePointSelection,
@ -10,11 +10,16 @@ import { useMode } from "../../stores/useMode";
import { MODES } from "../../config"; import { MODES } from "../../config";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { SelectedLocations } from "./InitialSidebar/SelectedLocations"; 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 hasManualEdits = useHasManualEdits();
const { mode } = useMode(); const { mode } = useMode();
const { reset: resetSelection } = usePointSelection(); const { reset: resetSelection } = usePointSelection();
const { isVisible, toggleVisibility } = useLayersVisibility();
return ( return (
<div <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", "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" isCollapsed ? "basis-0 p-0 -translate-x-[320px]" : "basis-[320px] p-3"
)} )}
ref={ref}
> >
<Header /> <Header />
<div className="space-y-5 flex flex-col justify-between flex-1"> <div className="space-y-5 flex flex-col justify-between flex-1">
<div> <div>
<Filters disabled={hasManualEdits} /> <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 ? ( {mode === MODES.INITIAL && hasManualEdits ? (
<Button block className={"mt-2"} onClick={resetSelection}> <Button block className={"mt-2"} onClick={resetSelection}>
Отменить ручное редактирование Отменить ручное редактирование
@ -46,4 +73,4 @@ export const Sidebar = ({ isCollapsed }) => {
</div> </div>
</div> </div>
); );
}; });

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

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

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

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

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

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

1
src/stores/useLayersVisibility.js
Unescape View File

@ -6,7 +6,6 @@ const INITIAL_STATE = {
[LAYER_IDS.initial]: true, [LAYER_IDS.initial]: true,
[LAYER_IDS.approve]: false, [LAYER_IDS.approve]: false,
[LAYER_IDS.working]: false, [LAYER_IDS.working]: false,
[LAYER_IDS.atd]: true,
}; };
const store = (set) => ({ 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)", "white-background-light": "rgba(255, 255, 255, 0.6)",
grey: "rgba(0,0, 0, 0.5)", grey: "rgba(0,0, 0, 0.5)",
"grey-light": "rgba(239,239,239,0.9)", "grey-light": "rgba(239,239,239,0.9)",
border: '#d9d9d9' border: '#d9d9d9',
rose: '#FAA7B4'
}, },
}, },
}, },

Write Preview
Loading…
Cancel
Save