mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-26 03:26:41 +07:00
modified to match golang backend
This commit is contained in:
Fedor Katurov
parent
62cb8d8e18
commit
2144af9899
13 changed files with 296 additions and 235 deletions
|
|
@ -6,13 +6,13 @@ import { Tooltip } from "$components/panels/Tooltip";
|
|||
import { ReactElement } from "react";
|
||||
|
||||
interface Props {
|
||||
_id: string,
|
||||
address: string,
|
||||
stopEditing: typeof MapListDialog.stopEditing,
|
||||
dropRoute: typeof MapListDialog.dropRoute,
|
||||
}
|
||||
|
||||
export const RouteRowDrop = ({
|
||||
_id, stopEditing, dropRoute,
|
||||
address, stopEditing, dropRoute,
|
||||
}: Props): ReactElement<Props, null> => (
|
||||
<div
|
||||
className="route-row-drop"
|
||||
|
|
@ -21,7 +21,7 @@ export const RouteRowDrop = ({
|
|||
className="route-row"
|
||||
>
|
||||
<div className="button-group">
|
||||
<div className="button" onClick={dropRoute.bind(null, _id)}>Удалить</div>
|
||||
<div className="button" onClick={dropRoute.bind(null, address)}>Удалить</div>
|
||||
<div className="button primary" onClick={stopEditing}>Отмена</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { MapListDialog } from "$components/dialogs/MapListDialog";
|
|||
|
||||
interface Props {
|
||||
title: string;
|
||||
_id: string;
|
||||
address: string;
|
||||
is_public: boolean,
|
||||
modifyRoute: typeof MapListDialog.modifyRoute,
|
||||
}
|
||||
|
|
@ -29,10 +29,10 @@ export class RouteRowEditor extends React.Component<Props, State> {
|
|||
stopEditing = () => {
|
||||
const {
|
||||
state: { title, is_public },
|
||||
props: { _id }
|
||||
props: { address }
|
||||
} = this;
|
||||
|
||||
this.props.modifyRoute({ _id, title, is_public })
|
||||
this.props.modifyRoute({ address, title, is_public })
|
||||
};
|
||||
|
||||
setPublic = () => this.setState({ is_public: !this.state.is_public });
|
||||
|
|
|
|||
|
|
@ -1,93 +1,100 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
import * as React from "react";
|
||||
import { Icon } from "$components/panels/Icon";
|
||||
import { MapListDialog } from "$components/dialogs/MapListDialog";
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
import { ReactElement } from "react";
|
||||
import classnames from 'classnames';
|
||||
import classnames from "classnames";
|
||||
import { toggleRouteStarred } from "$redux/user/actions";
|
||||
import { TABS } from "$constants/dialogs";
|
||||
|
||||
interface Props {
|
||||
tab: string,
|
||||
tab: string;
|
||||
|
||||
_id: string,
|
||||
title: string,
|
||||
distance: number,
|
||||
is_public: boolean,
|
||||
is_admin: boolean,
|
||||
is_starred: boolean,
|
||||
address: string;
|
||||
title: string;
|
||||
distance: number;
|
||||
is_public: boolean;
|
||||
is_admin: boolean;
|
||||
is_published: boolean;
|
||||
|
||||
openRoute: typeof MapListDialog.openRoute,
|
||||
toggleStarred: typeof MapListDialog.toggleStarred,
|
||||
startEditing: typeof MapListDialog.startEditing,
|
||||
stopEditing: typeof MapListDialog.stopEditing,
|
||||
showMenu: typeof MapListDialog.showMenu,
|
||||
hideMenu: typeof MapListDialog.hideMenu,
|
||||
showDropCard: typeof MapListDialog.showDropCard,
|
||||
openRoute: typeof MapListDialog.openRoute;
|
||||
toggleStarred: typeof MapListDialog.toggleStarred;
|
||||
startEditing: typeof MapListDialog.startEditing;
|
||||
stopEditing: typeof MapListDialog.stopEditing;
|
||||
showMenu: typeof MapListDialog.showMenu;
|
||||
hideMenu: typeof MapListDialog.hideMenu;
|
||||
showDropCard: typeof MapListDialog.showDropCard;
|
||||
}
|
||||
|
||||
export const RouteRowView = ({
|
||||
title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard, hideMenu, is_admin, is_starred, toggleStarred,
|
||||
title,
|
||||
distance,
|
||||
address,
|
||||
openRoute,
|
||||
tab,
|
||||
startEditing,
|
||||
showMenu,
|
||||
showDropCard,
|
||||
hideMenu,
|
||||
is_admin,
|
||||
is_published,
|
||||
toggleStarred
|
||||
}: Props): ReactElement<Props, null> => (
|
||||
<div
|
||||
className={classnames('route-row-view', { has_menu: (tab === 'my') })}
|
||||
>
|
||||
{
|
||||
(tab === 'all' || tab === 'starred') && is_admin &&
|
||||
<div className="route-row-fav" onClick={toggleStarred.bind(null, _id)}>
|
||||
{
|
||||
is_starred
|
||||
? <Icon icon="icon-star-fill" size={24} />
|
||||
: <Icon icon="icon-star-blank" size={24} />
|
||||
}
|
||||
<div className={classnames("route-row-view", { has_menu: tab === "my" })}>
|
||||
{(tab === TABS.PENDING || tab === TABS.STARRED) && is_admin && (
|
||||
<div className="route-row-fav" onClick={toggleStarred.bind(null, address)}>
|
||||
{is_published ? (
|
||||
<Icon icon="icon-star-fill" size={24} />
|
||||
) : (
|
||||
<Icon icon="icon-star-blank" size={24} />
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
className="route-row"
|
||||
onClick={() => openRoute(_id)}
|
||||
>
|
||||
)}
|
||||
<div className="route-row" onClick={() => openRoute(address)}>
|
||||
<div className="route-title">
|
||||
{
|
||||
(tab === 'my' || !is_admin) && is_starred &&
|
||||
<div className="route-row-corner"><Icon icon="icon-star-fill" size={18} /></div>
|
||||
}
|
||||
<span>
|
||||
{(title || _id)}
|
||||
</span>
|
||||
{(tab === "my" || !is_admin) && is_published && (
|
||||
<div className="route-row-corner">
|
||||
<Icon icon="icon-star-fill" size={18} />
|
||||
</div>
|
||||
)}
|
||||
<span>{title || address}</span>
|
||||
</div>
|
||||
|
||||
<div className="route-description">
|
||||
<span>
|
||||
<Icon icon="icon-link-1" />
|
||||
{_id}
|
||||
{address}
|
||||
</span>
|
||||
<span>
|
||||
<Icon icon="icon-cycle-1" />
|
||||
{(distance && `${distance} km`) || '0 km'}
|
||||
{(distance && `${distance} km`) || "0 km"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
tab === 'my' &&
|
||||
<React.Fragment>
|
||||
<div
|
||||
className="route-row-edit-button pointer"
|
||||
onMouseOver={showMenu.bind(null, _id)}
|
||||
onMouseOut={hideMenu}
|
||||
>
|
||||
<Icon icon="icon-more-vert" />
|
||||
<div className="route-row-edit-menu pointer">
|
||||
<div onMouseDown={showDropCard.bind(null, _id)}>
|
||||
<Tooltip>Удалить</Tooltip>
|
||||
<Icon icon="icon-trash-3" size={32} />
|
||||
</div>
|
||||
<div onMouseDown={startEditing.bind(null, _id)} className="modify-button">
|
||||
<Tooltip>Редактировать</Tooltip>
|
||||
<Icon icon="icon-edit-1" size={32} />
|
||||
</div>
|
||||
{tab === "my" && (
|
||||
<React.Fragment>
|
||||
<div
|
||||
className="route-row-edit-button pointer"
|
||||
onMouseOver={showMenu.bind(null, address)}
|
||||
onMouseOut={hideMenu}
|
||||
>
|
||||
<Icon icon="icon-more-vert" />
|
||||
<div className="route-row-edit-menu pointer">
|
||||
<div onMouseDown={showDropCard.bind(null, address)}>
|
||||
<Tooltip>Удалить</Tooltip>
|
||||
<Icon icon="icon-trash-3" size={32} />
|
||||
</div>
|
||||
<div
|
||||
onMouseDown={startEditing.bind(null, address)}
|
||||
className="modify-button"
|
||||
>
|
||||
<Tooltip>Редактировать</Tooltip>
|
||||
<Icon icon="icon-edit-1" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import { MapListDialog } from "$components/dialogs/MapListDialog";
|
||||
import { RouteRowView } from "$components/maps/RouteRowView";
|
||||
import { RouteRowEditor } from "$components/maps/RouteRowEditor";
|
||||
|
|
@ -7,76 +7,85 @@ import { RouteRowDrop } from "$components/maps/RouteRowDrop";
|
|||
import { ReactElement } from "react";
|
||||
|
||||
interface Props {
|
||||
_id: string,
|
||||
tab: string,
|
||||
title: string,
|
||||
distance: number,
|
||||
is_public: boolean,
|
||||
is_starred: boolean,
|
||||
address: string;
|
||||
tab: string;
|
||||
title: string;
|
||||
distance: number;
|
||||
is_public: boolean;
|
||||
is_published: boolean;
|
||||
|
||||
is_admin: boolean,
|
||||
is_editing_target: boolean,
|
||||
is_menu_target: boolean,
|
||||
is_admin: boolean;
|
||||
is_editing_target: boolean;
|
||||
is_menu_target: boolean;
|
||||
|
||||
openRoute: typeof MapListDialog.openRoute,
|
||||
startEditing: typeof MapListDialog.startEditing,
|
||||
stopEditing: typeof MapListDialog.stopEditing,
|
||||
showMenu: typeof MapListDialog.showMenu,
|
||||
hideMenu: typeof MapListDialog.hideMenu,
|
||||
showDropCard: typeof MapListDialog.showDropCard,
|
||||
dropRoute: typeof MapListDialog.dropRoute,
|
||||
modifyRoute: typeof MapListDialog.modifyRoute,
|
||||
toggleStarred: typeof MapListDialog.toggleStarred,
|
||||
openRoute: typeof MapListDialog.openRoute;
|
||||
startEditing: typeof MapListDialog.startEditing;
|
||||
stopEditing: typeof MapListDialog.stopEditing;
|
||||
showMenu: typeof MapListDialog.showMenu;
|
||||
hideMenu: typeof MapListDialog.hideMenu;
|
||||
showDropCard: typeof MapListDialog.showDropCard;
|
||||
dropRoute: typeof MapListDialog.dropRoute;
|
||||
modifyRoute: typeof MapListDialog.modifyRoute;
|
||||
toggleStarred: typeof MapListDialog.toggleStarred;
|
||||
|
||||
is_editing_mode: 'edit' | 'drop',
|
||||
is_editing_mode: "edit" | "drop";
|
||||
}
|
||||
|
||||
export const RouteRowWrapper = ({
|
||||
title, distance, _id, openRoute, tab, startEditing, showMenu,
|
||||
showDropCard, is_public, is_editing_target, is_menu_target, is_editing_mode,
|
||||
dropRoute, stopEditing, modifyRoute, hideMenu, is_admin, is_starred, toggleStarred,
|
||||
title,
|
||||
distance,
|
||||
address,
|
||||
openRoute,
|
||||
tab,
|
||||
startEditing,
|
||||
showMenu,
|
||||
showDropCard,
|
||||
is_public,
|
||||
is_editing_target,
|
||||
is_menu_target,
|
||||
is_editing_mode,
|
||||
dropRoute,
|
||||
stopEditing,
|
||||
modifyRoute,
|
||||
hideMenu,
|
||||
is_admin,
|
||||
is_published,
|
||||
toggleStarred
|
||||
}: Props): ReactElement<Props, null> => (
|
||||
<div
|
||||
className={classnames('route-row-wrapper', {
|
||||
className={classnames("route-row-wrapper", {
|
||||
is_menu_target,
|
||||
is_editing_target,
|
||||
is_editing_target
|
||||
})}
|
||||
>
|
||||
{
|
||||
is_editing_target && is_editing_mode === 'edit' &&
|
||||
<RouteRowEditor
|
||||
title={title}
|
||||
_id={_id}
|
||||
is_public={is_public}
|
||||
modifyRoute={modifyRoute}
|
||||
/>
|
||||
}
|
||||
{
|
||||
is_editing_target && is_editing_mode === 'drop' &&
|
||||
<RouteRowDrop
|
||||
_id={_id}
|
||||
dropRoute={dropRoute}
|
||||
stopEditing={stopEditing}
|
||||
/>
|
||||
}
|
||||
{
|
||||
!is_editing_target &&
|
||||
<RouteRowView
|
||||
_id={_id}
|
||||
tab={tab}
|
||||
title={title}
|
||||
distance={distance}
|
||||
is_public={is_public}
|
||||
is_starred={is_starred}
|
||||
openRoute={openRoute}
|
||||
startEditing={startEditing}
|
||||
stopEditing={stopEditing}
|
||||
showMenu={showMenu}
|
||||
hideMenu={hideMenu}
|
||||
showDropCard={showDropCard}
|
||||
is_admin={is_admin}
|
||||
toggleStarred={toggleStarred}
|
||||
/>
|
||||
}
|
||||
{is_editing_target && is_editing_mode === "edit" && (
|
||||
<RouteRowEditor
|
||||
title={title}
|
||||
address={address}
|
||||
is_public={is_public}
|
||||
modifyRoute={modifyRoute}
|
||||
/>
|
||||
)}
|
||||
{is_editing_target && is_editing_mode === "drop" && (
|
||||
<RouteRowDrop address={address} dropRoute={dropRoute} stopEditing={stopEditing} />
|
||||
)}
|
||||
{!is_editing_target && (
|
||||
<RouteRowView
|
||||
address={address}
|
||||
tab={tab}
|
||||
title={title}
|
||||
distance={distance}
|
||||
is_public={is_public}
|
||||
is_published={is_published}
|
||||
openRoute={openRoute}
|
||||
startEditing={startEditing}
|
||||
stopEditing={stopEditing}
|
||||
showMenu={showMenu}
|
||||
hideMenu={hideMenu}
|
||||
showDropCard={showDropCard}
|
||||
is_admin={is_admin}
|
||||
toggleStarred={toggleStarred}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue