mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 19:16:41 +07:00
redux: editor-panel: login-logout
This commit is contained in:
muerwre
parent
e56e49acf4
commit
185fe80fc5
15 changed files with 314 additions and 260 deletions
|
|
@ -3,29 +3,26 @@ import { LOGOS } from '$constants/logos';
|
|||
import { Icon } from '$components/panels/Icon';
|
||||
import classnames from 'classnames';
|
||||
|
||||
export class LogoDialog extends React.Component {
|
||||
changeLogo = logo => {
|
||||
this.props.editor.changeLogo(logo);
|
||||
};
|
||||
type Props = {
|
||||
logo: String,
|
||||
setLogo: Function,
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
export const LogoDialog = ({ logo, setLogo }: Props) => (
|
||||
<div className="helper logo-helper">
|
||||
<div className="helper-back">
|
||||
<Icon icon="icon-logo" size={200} />
|
||||
</div>
|
||||
{
|
||||
Object.keys(LOGOS).map(logo => (
|
||||
Object.keys(LOGOS).map(item => (
|
||||
<div
|
||||
className={classnames('helper-menu-item', { active: (logo === this.props.logo) })}
|
||||
onClick={() => this.changeLogo(logo)}
|
||||
key={logo}
|
||||
className={classnames('helper-menu-item', { active: (item === logo) })}
|
||||
onClick={() => setLogo(item)}
|
||||
key={item}
|
||||
>
|
||||
{LOGOS[logo][0]}
|
||||
{LOGOS[item][0]}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,23 @@ import { TrashDialog } from '$components/trash/TrashDialog';
|
|||
import { LogoDialog } from '$components/logo/LogoDialog';
|
||||
import { SaveDialog } from '$components/save/SaveDialog';
|
||||
import { CancelDialog } from '$components/save/CancelDialog';
|
||||
import type { UserType } from '$constants/types';
|
||||
|
||||
type Props = {
|
||||
mode: String,
|
||||
routerPoints: Number,
|
||||
editor: Object,
|
||||
activeSticker: String,
|
||||
logo: String,
|
||||
user: UserType,
|
||||
title: String,
|
||||
address: String,
|
||||
|
||||
setLogo: Function,
|
||||
}
|
||||
export const EditorDialog = ({
|
||||
mode, routerPoints, editor, activeSticker, logo, user, title, address,
|
||||
}) => {
|
||||
mode, routerPoints, editor, activeSticker, logo, user, title, address, setLogo
|
||||
}: Props) => {
|
||||
const showDialog = (
|
||||
mode === MODES.ROUTER
|
||||
|| (mode === MODES.STICKERS && !activeSticker)
|
||||
|
|
@ -26,7 +39,7 @@ export const EditorDialog = ({
|
|||
{ mode === MODES.ROUTER && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
|
||||
{ mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
|
||||
{ mode === MODES.TRASH && <TrashDialog editor={editor} /> }
|
||||
{ mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
|
||||
{ mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
|
||||
{ mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
|
||||
{ mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { EditorDialog } from '$components/panels/EditorDialog';
|
|||
import { LogoPreview } from '$components/logo/LogoPreview';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { setMode, startEditing, stopEditing } from '$redux/user/actions';
|
||||
import { setMode, startEditing, stopEditing, setLogo } from '$redux/user/actions';
|
||||
import type { UserType } from '$constants/types';
|
||||
import { editor } from '$modules/Editor';
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ type Props = {
|
|||
setMode: Function,
|
||||
startEditing: Function,
|
||||
stopEditing: Function,
|
||||
|
||||
setLogo: Function,
|
||||
}
|
||||
|
||||
class Component extends React.PureComponent<Props, void> {
|
||||
|
|
@ -76,6 +76,7 @@ class Component extends React.PureComponent<Props, void> {
|
|||
user={user}
|
||||
title={title}
|
||||
address={address}
|
||||
setLogo={this.props.setLogo}
|
||||
/>
|
||||
|
||||
<LogoPreview logo={logo} />
|
||||
|
|
@ -209,6 +210,7 @@ function mapStateToProps(state) {
|
|||
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
setMode,
|
||||
setLogo,
|
||||
startEditing,
|
||||
stopEditing,
|
||||
}, dispatch);
|
||||
|
|
|
|||
|
|
@ -5,8 +5,18 @@ import { SERVER } from '$constants/api';
|
|||
import { DEFAULT_USER, ROLES } from '$constants/auth';
|
||||
import { UserButton } from '$components/user/UserButton';
|
||||
import { UserMenu } from '$components/user/UserMenu';
|
||||
import { setUser, userLogout } from '$redux/user/actions';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import type { UserType } from '$constants/types';
|
||||
|
||||
export class UserPanel extends React.PureComponent {
|
||||
type Props = {
|
||||
user: UserType,
|
||||
userLogout: Function,
|
||||
setUser: Function,
|
||||
};
|
||||
|
||||
export class Component extends React.PureComponent<Props, void> {
|
||||
state = {
|
||||
menuOpened: false,
|
||||
};
|
||||
|
|
@ -56,7 +66,7 @@ export class UserPanel extends React.PureComponent {
|
|||
|
||||
render() {
|
||||
const {
|
||||
props: { user, userLogout, editor, editing },
|
||||
props: { user },
|
||||
state: { menuOpened },
|
||||
} = this;
|
||||
|
||||
|
|
@ -71,7 +81,7 @@ export class UserPanel extends React.PureComponent {
|
|||
}
|
||||
{
|
||||
(user && user.role && user.role !== 'guest' && menuOpened) &&
|
||||
<UserMenu user={user} userLogout={userLogout} />
|
||||
<UserMenu user={user} userLogout={this.props.userLogout} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,3 +89,20 @@ export class UserPanel extends React.PureComponent {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const { user: { user } } = state;
|
||||
|
||||
return { user };
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({
|
||||
setUser,
|
||||
userLogout,
|
||||
}, dispatch);
|
||||
|
||||
export const UserPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
export const GuestButton = ({ onClick }) => (
|
||||
type Props = {
|
||||
onClick: Function,
|
||||
}
|
||||
|
||||
export const GuestButton = ({ onClick }: Props) => (
|
||||
<div className="control-bar user-bar">
|
||||
<button
|
||||
className="user-bar-guest"
|
||||
onClick={onClick}
|
||||
>
|
||||
<span>ВОЙТИ</span>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,29 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { UserPicture } from '$components/user/UserPicture';
|
||||
import type { UserType } from '$constants/types';
|
||||
|
||||
type Props = {
|
||||
user: UserType,
|
||||
setMenuOpened: Function,
|
||||
};
|
||||
|
||||
const getUserName = name => name.split(' ')[0];
|
||||
|
||||
export const UserButton = ({
|
||||
setMenuOpened,
|
||||
user: {
|
||||
id,
|
||||
userdata: {
|
||||
name,
|
||||
photo,
|
||||
userdata: { name, photo }
|
||||
}
|
||||
}
|
||||
}) => (
|
||||
}: Props) => (
|
||||
<div className="control-bar user-bar">
|
||||
<div className="user-button" onClick={setMenuOpened}>
|
||||
<UserPicture photo={photo} />
|
||||
|
||||
<div className="user-button-fields">
|
||||
<div className="user-button-name">{(name || id || '...')}</div>
|
||||
<div className="user-button-text">{(id || 'пользователь')}</div>
|
||||
<div className="user-button-name">{((name && getUserName(name)) || id || '...')}</div>
|
||||
<div className="user-button-text">{((name && id) || 'пользователь')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } }) => (
|
||||
type Props = {
|
||||
userLogout: Function,
|
||||
}
|
||||
|
||||
export const UserMenu = ({ userLogout }: Props) => (
|
||||
<div className="user-panel-menu">
|
||||
<div className="user-panel-text small">
|
||||
<div>Мы храним следующие данные о вас:</div>
|
||||
{ id && <div><u>ID:</u> {id}</div> }
|
||||
{ agent && <div><u>Браузер:</u> {agent}</div> }
|
||||
{ ip && <div><u>Адрес:</u> {ip}</div> }
|
||||
<div>Мы используем их для авторизации и исправления ошибок.</div>
|
||||
</div>
|
||||
<a className="user-panel-item gray" href="https://github.com/muerwre/orchidMap" target="_blank" rel="noopener noreferrer">
|
||||
Проект на github
|
||||
</a>
|
||||
|
|
@ -17,3 +14,13 @@ export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } })
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/*
|
||||
<div className="user-panel-text small">
|
||||
<div>Мы храним следующие данные о вас:</div>
|
||||
{ id && <div><u>ID:</u> {id}</div> }
|
||||
{ agent && <div><u>Браузер:</u> {agent}</div> }
|
||||
{ ip && <div><u>Адрес:</u> {ip}</div> }
|
||||
<div>Мы используем их для авторизации и исправления ошибок.</div>
|
||||
</div>
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
import { providers } from '$constants/providers';
|
||||
|
||||
export const CONFIG = {
|
||||
OSRM_URL: 'http://vault48.org:5000/route/v1',
|
||||
};
|
||||
|
||||
export const PROVIDER = providers.blank;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,8 @@ import React from 'react';
|
|||
import { editor } from '$modules/Editor';
|
||||
import { EditorPanel } from '$components/panels/EditorPanel';
|
||||
import { Fills } from '$components/Fills';
|
||||
import { DEFAULT_LOGO } from '$constants/logos';
|
||||
import { UserLocation } from '$components/UserLocation';
|
||||
import { DEFAULT_USER } from '$constants/auth';
|
||||
import { storeData, getData } from '$utils/storage';
|
||||
import { UserPanel } from '$components/panels/UserPanel';
|
||||
import { pushPath } from '$utils/history';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
|
|
@ -17,44 +13,26 @@ import { hot } from 'react-hot-loader';
|
|||
import type { UserType } from '$constants/types';
|
||||
|
||||
type Props = {
|
||||
// todo: clean this!
|
||||
user: UserType,
|
||||
editing: false,
|
||||
mode: String,
|
||||
changed: Boolean,
|
||||
distance: Number,
|
||||
title: String,
|
||||
address: String,
|
||||
mode: String,
|
||||
editing: Boolean,
|
||||
logo: String,
|
||||
routerPoints: Number,
|
||||
estimateTime: Number,
|
||||
activeSticker: String,
|
||||
title: String,
|
||||
address: String,
|
||||
}
|
||||
|
||||
type State = {
|
||||
|
||||
}
|
||||
|
||||
class Component extends React.Component<Props, State> {
|
||||
state = {
|
||||
// mode: 'none',
|
||||
// editing: false,
|
||||
logo: DEFAULT_LOGO,
|
||||
routerPoints: 0,
|
||||
totalDistance: 0,
|
||||
estimateTime: 0,
|
||||
activeSticker: null,
|
||||
// user: {
|
||||
// ...DEFAULT_USER,
|
||||
// },
|
||||
// title: '',
|
||||
// address: '',
|
||||
// changed: false,
|
||||
};
|
||||
class Component extends React.Component<Props, void> {
|
||||
// state = {
|
||||
// // mode: 'none',
|
||||
// // editing: false,
|
||||
// logo: DEFAULT_LOGO,
|
||||
// routerPoints: 0,
|
||||
// totalDistance: 0,
|
||||
// estimateTime: 0,
|
||||
// activeSticker: null,
|
||||
// // user: {
|
||||
// // ...DEFAULT_USER,
|
||||
// // },
|
||||
// // title: '',
|
||||
// // address: '',
|
||||
// // changed: false,
|
||||
// };
|
||||
|
||||
componentDidMount() {
|
||||
// this.authInit();
|
||||
|
|
@ -79,76 +57,76 @@ class Component extends React.Component<Props, State> {
|
|||
// this.startEmptyEditor();
|
||||
// }
|
||||
// };
|
||||
|
||||
startEmptyEditor = () => {
|
||||
const { user } = this.state;
|
||||
if (!user || !user.random_url || !user.id) return;
|
||||
|
||||
pushPath(`/${user.random_url}/edit`);
|
||||
|
||||
editor.owner = user.id;
|
||||
editor.startEditing();
|
||||
|
||||
this.hideLoader();
|
||||
|
||||
this.clearChanged();
|
||||
};
|
||||
|
||||
setTitle = title => this.setState({ title });
|
||||
setAddress = address => {
|
||||
this.setState({ address });
|
||||
};
|
||||
|
||||
getTitle = () => this.state.title;
|
||||
|
||||
setDataOnLoad = data => {
|
||||
this.clearChanged();
|
||||
editor.setData(data);
|
||||
this.hideLoader();
|
||||
};
|
||||
|
||||
hideLoader = () => {
|
||||
document.getElementById('loader').style.opacity = 0;
|
||||
document.getElementById('loader').style.pointerEvents = 'none';
|
||||
};
|
||||
|
||||
setMode = mode => {
|
||||
this.setState({ mode });
|
||||
};
|
||||
|
||||
setRouterPoints = routerPoints => {
|
||||
this.setState({ routerPoints });
|
||||
};
|
||||
|
||||
setTotalDist = totalDistance => {
|
||||
const time = (totalDistance && (totalDistance / 15)) || 0;
|
||||
const estimateTime = (time && parseFloat(time.toFixed(1)));
|
||||
this.setState({ totalDistance, estimateTime });
|
||||
};
|
||||
|
||||
setActiveSticker = activeSticker => {
|
||||
this.setState({ activeSticker });
|
||||
};
|
||||
|
||||
setLogo = logo => {
|
||||
this.setState({ logo });
|
||||
};
|
||||
|
||||
setEditing = editing => {
|
||||
this.setState({ editing });
|
||||
};
|
||||
|
||||
getUser = () => this.state.user;
|
||||
//
|
||||
// triggerOnChange = () => {
|
||||
// if (!this.state.editing) return;
|
||||
// startEmptyEditor = () => {
|
||||
// const { user } = this.state;
|
||||
// if (!user || !user.random_url || !user.id) return;
|
||||
//
|
||||
// this.setState({ changed: true });
|
||||
// pushPath(`/${user.random_url}/edit`);
|
||||
//
|
||||
// editor.owner = user.id;
|
||||
// editor.startEditing();
|
||||
//
|
||||
// this.hideLoader();
|
||||
//
|
||||
// this.clearChanged();
|
||||
// };
|
||||
//
|
||||
// setTitle = title => this.setState({ title });
|
||||
// setAddress = address => {
|
||||
// this.setState({ address });
|
||||
// };
|
||||
//
|
||||
// getTitle = () => this.state.title;
|
||||
//
|
||||
// setDataOnLoad = data => {
|
||||
// this.clearChanged();
|
||||
// editor.setData(data);
|
||||
// this.hideLoader();
|
||||
// };
|
||||
//
|
||||
// hideLoader = () => {
|
||||
// document.getElementById('loader').style.opacity = 0;
|
||||
// document.getElementById('loader').style.pointerEvents = 'none';
|
||||
// };
|
||||
//
|
||||
// setMode = mode => {
|
||||
// this.setState({ mode });
|
||||
// };
|
||||
//
|
||||
// setRouterPoints = routerPoints => {
|
||||
// this.setState({ routerPoints });
|
||||
// };
|
||||
//
|
||||
// setTotalDist = totalDistance => {
|
||||
// const time = (totalDistance && (totalDistance / 15)) || 0;
|
||||
// const estimateTime = (time && parseFloat(time.toFixed(1)));
|
||||
// this.setState({ totalDistance, estimateTime });
|
||||
// };
|
||||
//
|
||||
// setActiveSticker = activeSticker => {
|
||||
// this.setState({ activeSticker });
|
||||
// };
|
||||
//
|
||||
// setLogo = logo => {
|
||||
// this.setState({ logo });
|
||||
// };
|
||||
//
|
||||
// setEditing = editing => {
|
||||
// this.setState({ editing });
|
||||
// };
|
||||
//
|
||||
// getUser = () => this.state.user;
|
||||
// //
|
||||
// // triggerOnChange = () => {
|
||||
// // if (!this.state.editing) return;
|
||||
// //
|
||||
// // this.setState({ changed: true });
|
||||
// // };
|
||||
//
|
||||
// clearChanged = () => {
|
||||
// this.setState({ changed: false });
|
||||
// };
|
||||
|
||||
clearChanged = () => {
|
||||
this.setState({ changed: false });
|
||||
};
|
||||
|
||||
// editor = new Editor({
|
||||
// container: 'map',
|
||||
|
|
@ -186,45 +164,43 @@ class Component extends React.Component<Props, State> {
|
|||
// }
|
||||
// };
|
||||
|
||||
setUser = user => {
|
||||
if (!user.token || !user.id) return;
|
||||
|
||||
if (this.state.user.id === editor.owner) {
|
||||
editor.owner = user.id;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
user: {
|
||||
...DEFAULT_USER,
|
||||
...user,
|
||||
}
|
||||
});
|
||||
|
||||
this.storeUserData();
|
||||
};
|
||||
|
||||
storeUserData = () => {
|
||||
storeData('user', this.state.user);
|
||||
};
|
||||
|
||||
getUserData = () => getData('user') || null;
|
||||
|
||||
userLogout = () => {
|
||||
if (this.state.user.id === editor.owner) {
|
||||
editor.owner = null;
|
||||
}
|
||||
// setUser = user => {
|
||||
// if (!user.token || !user.id) return;
|
||||
//
|
||||
this.setState({
|
||||
user: DEFAULT_USER,
|
||||
});
|
||||
// if (this.state.user.id === editor.owner) {
|
||||
// editor.owner = user.id;
|
||||
// }
|
||||
//
|
||||
// this.setState({
|
||||
// user: {
|
||||
// ...DEFAULT_USER,
|
||||
// ...user,
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// this.storeUserData();
|
||||
// };
|
||||
|
||||
setTimeout(this.storeUserData, 0);
|
||||
};
|
||||
// storeUserData = () => {
|
||||
// storeData('user', this.state.user);
|
||||
// };
|
||||
|
||||
// getUserData = () => getData('user') || null;
|
||||
//
|
||||
// userLogout = () => {
|
||||
// if (this.state.user.id === editor.owner) {
|
||||
// editor.owner = null;
|
||||
// }
|
||||
// //
|
||||
// this.setState({
|
||||
// user: DEFAULT_USER,
|
||||
// });
|
||||
//
|
||||
// setTimeout(this.storeUserData, 0);
|
||||
// };
|
||||
|
||||
render() {
|
||||
const {
|
||||
props: { user }
|
||||
} = this;
|
||||
const { props: { user } } = this;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -235,8 +211,8 @@ class Component extends React.Component<Props, State> {
|
|||
<UserPanel
|
||||
editor={editor}
|
||||
user={user}
|
||||
setUser={this.setUser}
|
||||
userLogout={this.userLogout}
|
||||
// setUser={this.setUser}
|
||||
// userLogout={this.userLogout}
|
||||
/>
|
||||
|
||||
<EditorPanel />
|
||||
|
|
|
|||
|
|
@ -14,31 +14,19 @@ import {
|
|||
setChanged,
|
||||
setDistance,
|
||||
setEditing,
|
||||
setLogo,
|
||||
setLogo, setMode,
|
||||
setRouterPoints,
|
||||
setTitle
|
||||
} from '$redux/user/actions';
|
||||
|
||||
export class Editor {
|
||||
constructor({
|
||||
// container,
|
||||
// mode,
|
||||
// setMode,
|
||||
// setRouterPoints,
|
||||
// setTotalDist,
|
||||
// setEditing,
|
||||
// triggerOnChange,
|
||||
// getTitle,
|
||||
// clearChanged,
|
||||
// setActiveSticker,
|
||||
// setLogo,
|
||||
// setTitle,
|
||||
// setAddress,
|
||||
}) {
|
||||
constructor() {
|
||||
this.logo = DEFAULT_LOGO;
|
||||
this.owner = null;
|
||||
this.map = new Map({ container: 'map' });
|
||||
this.initialData = {};
|
||||
this.activeSticker = null;
|
||||
this.mode = MODES.NONE;
|
||||
|
||||
const {
|
||||
triggerOnChange, lockMapClicks, routerMoveStart, changeMode, pushPolyPoints,
|
||||
|
|
@ -81,8 +69,6 @@ export class Editor {
|
|||
[MODES.ROUTER]: this.router.pushWaypointOnClick,
|
||||
};
|
||||
|
||||
this.activeSticker = null;
|
||||
this.mode = MODES.NONE;
|
||||
// this.clearChanged = clearChanged;
|
||||
// this.setActiveSticker = setActiveSticker;
|
||||
// this.setLogo = setLogo;
|
||||
|
|
@ -104,6 +90,7 @@ export class Editor {
|
|||
getChanged = () => store.getState().user.changed;
|
||||
|
||||
setEditing = value => store.dispatch(setEditing(value));
|
||||
setMode = value => store.dispatch(setMode(value));
|
||||
setDistance = value => store.dispatch(setDistance(value));
|
||||
setChanged = value => store.dispatch(setChanged(value));
|
||||
setRouterPoints = value => store.dispatch(setRouterPoints(value));
|
||||
|
|
@ -121,17 +108,20 @@ export class Editor {
|
|||
};
|
||||
|
||||
createStickerOnClick = (e) => {
|
||||
// todo: move to sagas?
|
||||
if (!e || !e.latlng || !this.activeSticker) return;
|
||||
const { latlng } = e;
|
||||
|
||||
this.stickers.createSticker({ latlng, sticker: this.activeSticker });
|
||||
this.setSticker(null);
|
||||
this.setActiveSticker(null);
|
||||
};
|
||||
|
||||
changeMode = mode => {
|
||||
// todo: check if TOGGLING works (we changing MODE from the sagas now)
|
||||
if (this.mode === mode) {
|
||||
if (this.switches[mode] && this.switches[mode].toggle) {
|
||||
this.switches[mode].toggle(); // if we have special function on mode when it toggles
|
||||
// if we have special function on mode when it clicked again
|
||||
this.switches[mode].toggle();
|
||||
} else {
|
||||
this.disableMode(mode);
|
||||
// this.setMode(MODES.NONE);
|
||||
|
|
@ -154,7 +144,7 @@ export class Editor {
|
|||
};
|
||||
|
||||
onClick = e => {
|
||||
if (e.originalEvent.which === 3) return; // skip right click
|
||||
if (e.originalEvent.which === 3) return; // skip right / middle click
|
||||
if (this.clickHandlers[this.mode]) this.clickHandlers[this.mode](e);
|
||||
};
|
||||
|
||||
|
|
@ -190,45 +180,47 @@ export class Editor {
|
|||
this.poly.pushPoints(latlngs);
|
||||
};
|
||||
|
||||
setSticker = sticker => {
|
||||
this.activeSticker = sticker;
|
||||
this.setActiveSticker(sticker);
|
||||
};
|
||||
// setSticker = sticker => {
|
||||
// this.activeSticker = sticker;
|
||||
// this.setActiveSticker(sticker);
|
||||
// };
|
||||
|
||||
clearSticker = () => {
|
||||
if (this.activeSticker) {
|
||||
this.setSticker(null);
|
||||
this.setActiveSticker(null);
|
||||
} else {
|
||||
this.changeMode(MODES.NONE);
|
||||
this.setMode(MODES.NONE);
|
||||
}
|
||||
};
|
||||
|
||||
clearAll = () => {
|
||||
// todo: move to sagas
|
||||
this.poly.clearAll();
|
||||
this.router.clearAll();
|
||||
this.stickers.clearAll();
|
||||
|
||||
this.setSticker(null);
|
||||
this.changeMode(MODES.NONE);
|
||||
this.setActiveSticker(null);
|
||||
this.setMode(MODES.NONE);
|
||||
|
||||
this.clearChanged();
|
||||
};
|
||||
|
||||
changeLogo = logo => {
|
||||
// todo: move to sagas
|
||||
this.logo = logo;
|
||||
this.setLogo(logo);
|
||||
this.changeMode(MODES.NONE);
|
||||
};
|
||||
|
||||
setData = ({ route, stickers, version = 1, owner, title, address }) => {
|
||||
setData = ({
|
||||
route, stickers, version = 1, owner, title, address
|
||||
}) => {
|
||||
this.setTitle(title || '');
|
||||
const { id } = this.getUser();
|
||||
|
||||
if (address && id && owner && id === owner) this.setAddress(address);
|
||||
|
||||
if (route) {
|
||||
this.poly.setPoints(route);
|
||||
}
|
||||
if (route) this.poly.setPoints(route);
|
||||
|
||||
if (stickers) {
|
||||
stickers.map(sticker => this.stickers.createSticker({
|
||||
|
|
@ -238,9 +230,7 @@ export class Editor {
|
|||
}));
|
||||
}
|
||||
|
||||
if (owner) {
|
||||
this.owner = owner;
|
||||
}
|
||||
if (owner) this.owner = owner;
|
||||
|
||||
if (!route || route.length <= 1) return;
|
||||
|
||||
|
|
@ -258,7 +248,7 @@ export class Editor {
|
|||
version: 2,
|
||||
title: this.getTitle(),
|
||||
owner: this.owner,
|
||||
address: this.owner === id ? path : null,
|
||||
address: (this.owner === id ? path : null),
|
||||
path,
|
||||
route,
|
||||
stickers,
|
||||
|
|
@ -278,19 +268,19 @@ export class Editor {
|
|||
if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit();
|
||||
|
||||
this.stickers.startEditing();
|
||||
// this.setEditing(true);
|
||||
|
||||
console.log(this.initialData);
|
||||
// this.setEditing(true);
|
||||
// console.log(this.initialData);
|
||||
};
|
||||
|
||||
stopEditing = () => {
|
||||
const { path } = getUrlData();
|
||||
pushPath(`/${(this.initialData && this.initialData.path) || path}`);
|
||||
|
||||
this.changeMode(MODES.NONE);
|
||||
// this.changeMode(MODES.NONE);
|
||||
this.poly.poly.disableEdit();
|
||||
this.stickers.stopEditing();
|
||||
this.setEditing(false);
|
||||
// this.setEditing(false);
|
||||
};
|
||||
|
||||
cancelEditing = () => {
|
||||
|
|
@ -313,11 +303,11 @@ export class Editor {
|
|||
stickers: this.stickers.dumpData(),
|
||||
});
|
||||
|
||||
isEmpty = () => {
|
||||
const { route, stickers } = this.dumpData();
|
||||
|
||||
return (route.length > 1 && stickers.length > 0);
|
||||
};
|
||||
// isEmpty = () => {
|
||||
// const { route, stickers } = this.dumpData();
|
||||
//
|
||||
// return (route.length > 1 && stickers.length > 0);
|
||||
// };
|
||||
|
||||
hasEmptyHistory = () => {
|
||||
const { route, stickers } = this.initialData;
|
||||
|
|
@ -326,18 +316,4 @@ export class Editor {
|
|||
}
|
||||
}
|
||||
|
||||
export const editor = new Editor({
|
||||
// setMode: this.setMode,
|
||||
// setTotalDist: this.setTotalDist,
|
||||
// setEditing: this.setEditing,
|
||||
// getUser: this.getUser,
|
||||
// triggerOnChange: this.triggerOnChange,
|
||||
// getTitle: this.getTitle,
|
||||
|
||||
// setRouterPoints: this.setRouterPoints,
|
||||
// setActiveSticker: this.setActiveSticker,
|
||||
// setLogo: this.setLogo,
|
||||
// setTitle: this.setTitle,
|
||||
// setAddress: this.setAddress,
|
||||
// clearChanged: this.clearChanged,
|
||||
});
|
||||
export const editor = new Editor({});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { map, tileLayer } from 'leaflet';
|
||||
import { providers } from '$constants/providers';
|
||||
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import 'leaflet-editable';
|
||||
import { PROVIDER } from '$config';
|
||||
|
||||
export class Map {
|
||||
constructor({ container }) {
|
||||
this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
|
||||
|
||||
this.tileLayer = tileLayer(providers.default, {
|
||||
this.tileLayer = tileLayer(PROVIDER, {
|
||||
attribution: 'Независимое Велосообщество',
|
||||
maxNativeZoom: 18,
|
||||
maxZoom: 18,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { ACTIONS } from '$redux/user/constants';
|
||||
|
||||
export const setUser = user => ({ type: ACTIONS.SET_USER, user });
|
||||
export const userLogout = user => ({ type: ACTIONS.USER_LOGOUT });
|
||||
|
||||
|
||||
export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing });
|
||||
export const setMode = mode => ({ type: ACTIONS.SET_MODE, mode });
|
||||
export const setDistance = distance => ({ type: ACTIONS.SET_DISTANCE, distance });
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
export const ACTIONS = {
|
||||
SET_USER: 'SET_USER',
|
||||
SET_EDITING: 'SET_EDITING',
|
||||
USER_LOGOUT: 'USER_LOGOUT',
|
||||
|
||||
SET_EDITING: 'SET_EDITING',
|
||||
SET_MODE: 'SET_MODE',
|
||||
SET_DISTANCE: 'SET_DISTANCE',
|
||||
SET_CHANGED: 'SET_CHANGED',
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { getUrlData, pushPath } from '$utils/history';
|
|||
import { editor } from '$modules/Editor';
|
||||
import { ACTIONS } from '$redux/user/constants';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { DEFAULT_USER } from '$constants/auth';
|
||||
|
||||
const getUser = state => (state.user.user);
|
||||
const getState = state => (state.user);
|
||||
|
|
@ -101,12 +102,40 @@ function* stopEditingSaga() {
|
|||
}
|
||||
}
|
||||
|
||||
function* userLogoutSaga() {
|
||||
const { id } = yield select(getUser);
|
||||
|
||||
if (id === editor.owner) {
|
||||
editor.owner = null;
|
||||
}
|
||||
|
||||
yield put(setUser(DEFAULT_USER));
|
||||
yield call(generateGuestSaga);
|
||||
}
|
||||
|
||||
function* setActiveStickerSaga({ activeSticker }) {
|
||||
yield editor.activeSticker = activeSticker;
|
||||
return true;
|
||||
}
|
||||
|
||||
function* setLogoSaga({ logo }) {
|
||||
const { mode } = yield select(getState);
|
||||
editor.logo = logo;
|
||||
|
||||
if (mode === MODES.LOGO) {
|
||||
yield put(setMode(MODES.NONE));
|
||||
}
|
||||
}
|
||||
export function* userSaga() {
|
||||
// Login
|
||||
// yield takeLatest(AUTH_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
|
||||
// ASYNCHRONOUS!!! :-)
|
||||
|
||||
yield takeLatest(REHYDRATE, authChechSaga);
|
||||
yield takeEvery(ACTIONS.SET_MODE, setModeSaga);
|
||||
|
||||
yield takeEvery(ACTIONS.START_EDITING, startEditingSaga);
|
||||
yield takeEvery(ACTIONS.STOP_EDITING, stopEditingSaga);
|
||||
|
||||
yield takeEvery(ACTIONS.USER_LOGOUT, userLogoutSaga);
|
||||
yield takeEvery(ACTIONS.SET_ACTIVE_STICKER, setActiveStickerSaga);
|
||||
yield takeEvery(ACTIONS.SET_LOGO, setLogoSaga);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
.user-bar {
|
||||
width: 240px;
|
||||
// width: 160px;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.user-bar-guest {
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.user-button {
|
||||
width: 100%;
|
||||
width: 120px;
|
||||
padding-left: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -22,6 +26,9 @@
|
|||
background-position: 50% 50%;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.user-button-fields {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue