mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-24 18:46:40 +07:00
cleaned out user reducer
This commit is contained in:
Fedor Katurov
parent
103097edbd
commit
af8d270460
13 changed files with 462 additions and 282 deletions
|
|
@ -10,7 +10,7 @@ type State = {
|
|||
text: String;
|
||||
}
|
||||
|
||||
export class StickerDesc extends React.PureComponent<Props, State> {
|
||||
class StickerDesc extends React.PureComponent<Props, State> {
|
||||
state = {
|
||||
text: this.props.value,
|
||||
};
|
||||
|
|
@ -56,3 +56,5 @@ export class StickerDesc extends React.PureComponent<Props, State> {
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
export { StickerDesc };
|
||||
|
|
@ -7,32 +7,32 @@ import { Icon } from '$components/panels/Icon';
|
|||
import { Switch } from '$components/Switch';
|
||||
|
||||
import classnames from 'classnames';
|
||||
import { sendSaveRequest, setMode } from "$redux/user/actions";
|
||||
import ExpandableTextarea from 'react-expandable-textarea';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectMap } from '$redux/map/selectors';
|
||||
import { selectUser } from '$redux/user/selectors';
|
||||
import * as USER_ACTIONS from '$redux/user/actions';
|
||||
|
||||
interface Props {
|
||||
address: string,
|
||||
title: string,
|
||||
is_public: boolean,
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
width: number,
|
||||
setMode: typeof setMode,
|
||||
sendSaveRequest: typeof sendSaveRequest,
|
||||
save_error: string,
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
sendSaveRequest: USER_ACTIONS.sendSaveRequest,
|
||||
};
|
||||
|
||||
save_loading: boolean,
|
||||
save_finished: boolean,
|
||||
save_overwriting: boolean,
|
||||
}
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & { width: number };
|
||||
|
||||
interface State {
|
||||
address: string,
|
||||
title: string,
|
||||
is_public: boolean,
|
||||
description: string,
|
||||
address: string;
|
||||
title: string;
|
||||
is_public: boolean;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export class SaveDialog extends React.Component<Props, State> {
|
||||
class SaveDialogUnconnected extends React.Component<Props, State> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -48,21 +48,30 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
const { path } = getUrlData();
|
||||
const { title, address } = this.state;
|
||||
|
||||
return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()).substr(0, 32) || toTranslit(path.trim()).substr(0, 32);
|
||||
return (
|
||||
toTranslit(address.trim()) ||
|
||||
toTranslit(title.trim().toLowerCase()).substr(0, 32) ||
|
||||
toTranslit(path.trim()).substr(0, 32)
|
||||
);
|
||||
};
|
||||
|
||||
setTitle = ({ target: { value } }) => this.setState({ title: ((value && value.substr(0, 64)) || '') });
|
||||
setAddress = ({ target: { value } }) => this.setState({ address: (value && value.substr(0, 32) || '') });
|
||||
setDescription = ({ target: { value } }) => this.setState({ description: (value && value.substr(0, 256) || '') });
|
||||
|
||||
|
||||
setTitle = ({ target: { value } }) =>
|
||||
this.setState({ title: (value && value.substr(0, 64)) || '' });
|
||||
setAddress = ({ target: { value } }) =>
|
||||
this.setState({ address: (value && value.substr(0, 32)) || '' });
|
||||
setDescription = ({ target: { value } }) =>
|
||||
this.setState({ description: (value && value.substr(0, 256)) || '' });
|
||||
|
||||
sendSaveRequest = (e, force = false) => {
|
||||
const { title, is_public, description } = this.state;
|
||||
const address = this.getAddress();
|
||||
|
||||
this.props.sendSaveRequest({
|
||||
title, address, force, is_public, description,
|
||||
title,
|
||||
address,
|
||||
force,
|
||||
is_public,
|
||||
description,
|
||||
});
|
||||
};
|
||||
forceSaveRequest = e => this.sendSaveRequest(e, true);
|
||||
|
|
@ -81,7 +90,10 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
const { title, is_public, description } = this.state;
|
||||
const { save_error, save_finished, save_overwriting, width, save_loading } = this.props;
|
||||
const {
|
||||
user: { save_error, save_finished, save_overwriting, save_loading },
|
||||
width,
|
||||
} = this.props;
|
||||
const { host, protocol } = getUrlData();
|
||||
|
||||
return (
|
||||
|
|
@ -92,13 +104,21 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
<div className="save-title">
|
||||
<div className="save-title-input">
|
||||
<div className="save-title-label">Название</div>
|
||||
<input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={this.setTitle}
|
||||
autoFocus
|
||||
readOnly={save_finished}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="save-description">
|
||||
<div className="save-address-input">
|
||||
<label className="save-address-label">{protocol}//{host}/</label>
|
||||
<label className="save-address-label">
|
||||
{protocol}//{host}/
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={this.getAddress()}
|
||||
|
|
@ -120,37 +140,42 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
onChange={this.setDescription}
|
||||
/>
|
||||
</div>
|
||||
<div className="save-text">
|
||||
{ save_error || TIPS.SAVE_INFO }
|
||||
</div>
|
||||
<div className="save-text">{save_error || TIPS.SAVE_INFO}</div>
|
||||
|
||||
<div className="save-buttons">
|
||||
<div className={classnames('save-buttons-text pointer', { gray: !is_public })} onClick={this.togglePublic}>
|
||||
<div
|
||||
className={classnames('save-buttons-text pointer', { gray: !is_public })}
|
||||
onClick={this.togglePublic}
|
||||
>
|
||||
<Switch active={is_public} />
|
||||
{
|
||||
is_public
|
||||
? ' В каталоге карт'
|
||||
: ' Только по ссылке'
|
||||
}
|
||||
{is_public ? ' В каталоге карт' : ' Только по ссылке'}
|
||||
</div>
|
||||
<div>
|
||||
{ !save_finished &&
|
||||
<div className="button" onClick={this.cancelSaving}>Отмена</div>
|
||||
}
|
||||
{
|
||||
!save_finished && !save_overwriting &&
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
|
||||
}
|
||||
{
|
||||
save_overwriting &&
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button" onClick={this.onCopy}>Скопировать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button success" onClick={this.cancelSaving}>Отлично!</div>
|
||||
}
|
||||
{!save_finished && (
|
||||
<div className="button" onClick={this.cancelSaving}>
|
||||
Отмена
|
||||
</div>
|
||||
)}
|
||||
{!save_finished && !save_overwriting && (
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>
|
||||
Сохранить
|
||||
</div>
|
||||
)}
|
||||
{save_overwriting && (
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>
|
||||
Перезаписать
|
||||
</div>
|
||||
)}
|
||||
{save_finished && (
|
||||
<div className="button" onClick={this.onCopy}>
|
||||
Скопировать
|
||||
</div>
|
||||
)}
|
||||
{save_finished && (
|
||||
<div className="button success" onClick={this.cancelSaving}>
|
||||
Отлично!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -159,3 +184,7 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SaveDialog = connect(mapStateToProps, mapDispatchToProps)(SaveDialogUnconnected);
|
||||
|
||||
export { SaveDialog };
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
import React from 'react';
|
||||
import { bindActionCreators } from "redux";
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import classnames from 'classnames';
|
||||
import { getStyle } from "$utils/dom";
|
||||
import { nearestInt } from "$utils/geom";
|
||||
import { IRootState } from "$redux/user";
|
||||
import { parseDesc } from "$utils/format";
|
||||
import { getStyle } from '$utils/dom';
|
||||
import { nearestInt } from '$utils/geom';
|
||||
import { parseDesc } from '$utils/format';
|
||||
import { selectUser } from '$redux/user/selectors';
|
||||
import { selectMap } from '$redux/map/selectors';
|
||||
|
||||
interface ITitleDialogProps {
|
||||
editing: IRootState['editing'],
|
||||
title?: IRootState['title'],
|
||||
description?: IRootState['description'],
|
||||
minLines?: number,
|
||||
maxLines?: number,
|
||||
}
|
||||
const mapStateToProps = state => ({
|
||||
user: selectUser(state),
|
||||
map: selectMap(state),
|
||||
});
|
||||
|
||||
interface ITitleDialogState {
|
||||
type Props = ReturnType<typeof mapStateToProps> & {
|
||||
minLines?: number;
|
||||
maxLines?: number;
|
||||
};
|
||||
|
||||
interface State {
|
||||
raised: boolean;
|
||||
height: number;
|
||||
height_raised: number;
|
||||
}
|
||||
|
||||
export class Component extends React.PureComponent<ITitleDialogProps, ITitleDialogState> {
|
||||
export class TitleDialogUnconnected extends React.PureComponent<Props, State> {
|
||||
state = {
|
||||
raised: false,
|
||||
height: 0,
|
||||
|
|
@ -53,8 +55,9 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
|
|||
}
|
||||
|
||||
const title_margin = parseInt(getStyle(this.ref_title, 'margin-bottom'), 10) || 0;
|
||||
const text_margins = (parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
|
||||
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;;
|
||||
const text_margins =
|
||||
(parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
|
||||
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;
|
||||
const text_line = parseInt(getStyle(this.ref_text, 'line-height'), 10) || 0;
|
||||
|
||||
const container_height = sizer_height - title_height - title_margin - text_margins;
|
||||
|
|
@ -62,22 +65,34 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
|
|||
const min_height = (this.props.minLines || 5) * text_line;
|
||||
const max_height = (this.props.maxLines || 20) * text_line;
|
||||
|
||||
const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
|
||||
const height_raised = nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) + text_margins;
|
||||
const height =
|
||||
nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) +
|
||||
text_margins;
|
||||
const height_raised =
|
||||
nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) +
|
||||
text_margins;
|
||||
|
||||
this.setState({
|
||||
height: ((height_raised - height) < 2 * text_line ? height_raised : height),
|
||||
height_raised
|
||||
height: height_raised - height < 2 * text_line ? height_raised : height,
|
||||
height_raised,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editing, title, description } = this.props;
|
||||
const {
|
||||
user: { editing },
|
||||
map: { title, description },
|
||||
} = this.props;
|
||||
const { raised, height, height_raised } = this.state;
|
||||
|
||||
return (
|
||||
<div className="title-dialog-wrapper">
|
||||
<div className="title-dialog-sizer" ref={el => { this.ref_sizer = el; }}>
|
||||
<div
|
||||
className="title-dialog-sizer"
|
||||
ref={el => {
|
||||
this.ref_sizer = el;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames('title-dialog', { active: title && !editing })}
|
||||
onMouseOver={this.onHover}
|
||||
|
|
@ -85,31 +100,37 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
|
|||
>
|
||||
<div
|
||||
className="title-dialog-pane title-dialog-name"
|
||||
ref={el => { this.ref_title = el; }}
|
||||
ref={el => {
|
||||
this.ref_title = el;
|
||||
}}
|
||||
>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classnames("title-dialog-pane title-dialog-text", { has_shade: height_raised > height })}
|
||||
className={classnames('title-dialog-pane title-dialog-text', {
|
||||
has_shade: height_raised > height,
|
||||
})}
|
||||
style={{
|
||||
height: (raised ? height_raised : height),
|
||||
height: raised ? height_raised : height,
|
||||
marginBottom: height === 0 ? 0 : 15,
|
||||
}}
|
||||
ref={el => { this.ref_overflow = el; }}
|
||||
ref={el => {
|
||||
this.ref_overflow = el;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={el => { this.ref_text = el; }}
|
||||
ref={el => {
|
||||
this.ref_text = el;
|
||||
}}
|
||||
>
|
||||
{
|
||||
parseDesc(description)
|
||||
}
|
||||
{parseDesc(description)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
ref_sizer;
|
||||
|
|
@ -118,7 +139,6 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
|
|||
ref_overflow;
|
||||
}
|
||||
|
||||
const mapStateToProps = ({ user: { editing, title, description } }) => ({ editing, title, description });
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
|
||||
const TitleDialog = connect(mapStateToProps)(TitleDialogUnconnected);
|
||||
|
||||
export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component);
|
||||
export { TitleDialog };
|
||||
|
|
|
|||
|
|
@ -8,13 +8,10 @@ import { LogoDialog } from '$components/dialogs/LogoDialog';
|
|||
import { SaveDialog } from '$components/dialogs/SaveDialog';
|
||||
import { CancelDialog } from '$components/dialogs/CancelDialog';
|
||||
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import * as USER_ACTIONS from '$redux/user/actions';
|
||||
import { ProviderDialog } from '$components/dialogs/ProviderDialog';
|
||||
import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog';
|
||||
import * as MAP_ACTIONS from '$redux/map/actions';
|
||||
import { selectUserMode } from '$redux/user/selectors';
|
||||
|
||||
const mapStateToProps = state => ({ mode: selectUserMode(state) });
|
||||
|
|
|
|||
|
|
@ -1,71 +1,72 @@
|
|||
// flow
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
import { PROVIDERS } from '$constants/providers';
|
||||
import { LOGOS } from '$constants/logos';
|
||||
import { setMode } from '$redux/user/actions';
|
||||
import * as USER_ACTIONS from '$redux/user/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { IRootState } from "$redux/user";
|
||||
import { IRootState } from '$redux/user';
|
||||
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
import { Tooltip } from '$components/panels/Tooltip';
|
||||
import { selectMap } from '$redux/map/selectors';
|
||||
import { selectUser } from '$redux/user/selectors';
|
||||
|
||||
interface Props extends IRootState {
|
||||
startProviderMode: () => void,
|
||||
startLogoMode: () => void,
|
||||
clearMode: () => void,
|
||||
}
|
||||
|
||||
const Component = ({
|
||||
provider, logo, startProviderMode, startLogoMode, clearMode, editing, markers_shown,
|
||||
}: Props) => (
|
||||
<div className="status-panel top right">
|
||||
{
|
||||
editing && !markers_shown &&
|
||||
<div className="status-bar pointer top-control padded warning icon-only tooltip-container">
|
||||
<Icon icon="icon-eye-1" size={24} />
|
||||
<Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
|
||||
</div>
|
||||
}
|
||||
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
|
||||
<Tooltip position="top">Стиль карты</Tooltip>
|
||||
<Icon icon="icon-map-1" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
|
||||
</div>
|
||||
|
||||
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
|
||||
<Tooltip position="top">Логотип</Tooltip>
|
||||
<Icon icon="icon-logo-3" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const {
|
||||
map: {
|
||||
provider,
|
||||
logo,
|
||||
},
|
||||
user: {
|
||||
markers_shown, editing
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
provider, logo, markers_shown, editing
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
startProviderMode: () => dispatch(setMode(MODES.PROVIDER)),
|
||||
startLogoMode: () => dispatch(setMode(MODES.LOGO)),
|
||||
clearMode: () => dispatch(setMode(MODES.NONE)),
|
||||
const mapStateToProps = state => ({
|
||||
map: selectMap(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
export const TopRightPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
const mapDispatchToProps = {
|
||||
setMode: USER_ACTIONS.setMode,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const TopRightPanelUnconnected = ({
|
||||
map: { provider, logo },
|
||||
user: { markers_shown, editing },
|
||||
setMode,
|
||||
}: Props) => {
|
||||
const startProviderMode = useCallback(() => setMode(MODES.PROVIDER), [setMode]);
|
||||
const startLogoMode = useCallback(() => setMode(MODES.LOGO), [setMode]);
|
||||
const clearMode = useCallback(() => setMode(MODES.NONE), [setMode]);
|
||||
|
||||
return (
|
||||
<div className="status-panel top right">
|
||||
{editing && !markers_shown && (
|
||||
<div className="status-bar pointer top-control padded warning icon-only tooltip-container">
|
||||
<Icon icon="icon-eye-1" size={24} />
|
||||
<Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="status-bar pointer top-control padded tooltip-container"
|
||||
onFocus={startProviderMode}
|
||||
onBlur={clearMode}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Tooltip position="top">Стиль карты</Tooltip>
|
||||
<Icon icon="icon-map-1" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="status-bar pointer top-control padded tooltip-container"
|
||||
onFocus={startLogoMode}
|
||||
onBlur={clearMode}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Tooltip position="top">Логотип</Tooltip>
|
||||
<Icon icon="icon-logo-3" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TopRightPanel = connect(mapStateToProps, mapDispatchToProps)(TopRightPanelUnconnected);
|
||||
|
||||
export { TopRightPanel };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { GuestButton } from "$components/user/GuestButton";
|
||||
import { DEFAULT_USER, IUser, ROLES } from "$constants/auth";
|
||||
import { UserButton } from "$components/user/UserButton";
|
||||
import { UserMenu } from "$components/user/UserMenu";
|
||||
import { GuestButton } from '$components/user/GuestButton';
|
||||
import { DEFAULT_USER, IUser, ROLES } from '$constants/auth';
|
||||
import { UserButton } from '$components/user/UserButton';
|
||||
import { UserMenu } from '$components/user/UserMenu';
|
||||
import {
|
||||
setUser,
|
||||
userLogout,
|
||||
|
|
@ -12,18 +12,17 @@ import {
|
|||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack
|
||||
} from "$redux/user/actions";
|
||||
import { bindActionCreators } from "redux";
|
||||
import { connect } from "react-redux";
|
||||
import { Icon } from "$components/panels/Icon";
|
||||
getGPXTrack,
|
||||
} from '$redux/user/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
|
||||
import classnames from "classnames";
|
||||
import { CLIENT } from "$config/frontend";
|
||||
import { DIALOGS, TABS } from "$constants/dialogs";
|
||||
import { IRootState } from "$redux/user";
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
import { TitleDialog } from "$components/dialogs/TitleDialog";
|
||||
import classnames from 'classnames';
|
||||
import { CLIENT } from '$config/frontend';
|
||||
import { DIALOGS, TABS } from '$constants/dialogs';
|
||||
import { IRootState } from '$redux/user';
|
||||
import { Tooltip } from '$components/panels/Tooltip';
|
||||
import { TitleDialog } from '$components/dialogs/TitleDialog';
|
||||
|
||||
interface Props extends IRootState {
|
||||
userLogout: typeof userLogout;
|
||||
|
|
@ -39,34 +38,26 @@ interface State {
|
|||
menuOpened: boolean;
|
||||
}
|
||||
|
||||
export class Component extends React.PureComponent<Props, State> {
|
||||
export class UserPanelUnconnected extends PureComponent<Props, State> {
|
||||
state = {
|
||||
menuOpened: false
|
||||
menuOpened: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener("message", e => {
|
||||
window.addEventListener('message', e => {
|
||||
const { data } = e;
|
||||
|
||||
if (
|
||||
!data ||
|
||||
!data.type ||
|
||||
data.type !== "oauth_login" ||
|
||||
data.type !== 'oauth_login' ||
|
||||
!data.user ||
|
||||
!data.user.id ||
|
||||
!data.user.token
|
||||
)
|
||||
return;
|
||||
|
||||
const {
|
||||
id,
|
||||
token,
|
||||
role = "vk",
|
||||
name = "",
|
||||
ip = "",
|
||||
photo = "",
|
||||
agent = ""
|
||||
} = data.user;
|
||||
const { id, token, role = 'vk', name = '', ip = '', photo = '', agent = '' } = data.user;
|
||||
|
||||
const user = {
|
||||
...DEFAULT_USER,
|
||||
|
|
@ -77,8 +68,8 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
name,
|
||||
ip,
|
||||
agent,
|
||||
photo
|
||||
}
|
||||
photo,
|
||||
},
|
||||
};
|
||||
|
||||
this.setState({ menuOpened: false });
|
||||
|
|
@ -105,7 +96,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
|
||||
window.open(
|
||||
`https://oauth.vk.com/authorize?client_id=5987644&scope=&redirect_uri=${CLIENT.API_ADDR}/api/auth/vk`,
|
||||
"socialPopupWindow",
|
||||
'socialPopupWindow',
|
||||
`location=no,width=700,height=370,scrollbars=no,top=${top},left=${left},resizable=no`
|
||||
);
|
||||
};
|
||||
|
|
@ -113,13 +104,13 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
render() {
|
||||
const {
|
||||
props: { user, dialog, dialog_active, is_empty },
|
||||
state: { menuOpened }
|
||||
state: { menuOpened },
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TitleDialog />
|
||||
|
||||
|
||||
<div className="panel active panel-user">
|
||||
<div className="user-panel">
|
||||
{!user || user.role === ROLES.guest ? (
|
||||
|
|
@ -127,7 +118,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
) : (
|
||||
<UserButton user={user} setMenuOpened={this.setMenuOpened} />
|
||||
)}
|
||||
{user && user.role && user.role !== "guest" && menuOpened && (
|
||||
{user && user.role && user.role !== 'guest' && menuOpened && (
|
||||
<UserMenu
|
||||
userLogout={this.props.userLogout}
|
||||
openAppInfoDialog={this.openAppInfoDialog}
|
||||
|
|
@ -140,7 +131,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({
|
||||
active: dialog_active && dialog === DIALOGS.MAP_LIST
|
||||
active: dialog_active && dialog === DIALOGS.MAP_LIST,
|
||||
})}
|
||||
onClick={this.openMapsDialog}
|
||||
>
|
||||
|
|
@ -152,10 +143,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.takeAShot}
|
||||
>
|
||||
<button className={classnames({ active: false })} onClick={this.props.takeAShot}>
|
||||
<Tooltip>Снимок карты</Tooltip>
|
||||
<Icon icon="icon-shot-4" />
|
||||
</button>
|
||||
|
|
@ -165,10 +153,7 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
<div className="control-sep" />
|
||||
|
||||
<div className="control-bar">
|
||||
<button
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.getGPXTrack}
|
||||
>
|
||||
<button className={classnames({ active: false })} onClick={this.props.getGPXTrack}>
|
||||
<Tooltip>Экспорт GPX</Tooltip>
|
||||
<Icon icon="icon-gpx-1" />
|
||||
</button>
|
||||
|
|
@ -181,25 +166,24 @@ export class Component extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = ({
|
||||
user: { dialog, dialog_active, user, is_empty }
|
||||
}) => ({ dialog, dialog_active, user, is_empty });
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators(
|
||||
{
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
const mapStateToProps = ({ user: { dialog, dialog_active, user, is_empty } }) => ({
|
||||
dialog,
|
||||
dialog_active,
|
||||
user,
|
||||
is_empty,
|
||||
});
|
||||
|
||||
export const UserPanel = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Component);
|
||||
const mapDispatchToProps = {
|
||||
setUser,
|
||||
userLogout,
|
||||
takeAShot,
|
||||
setDialog,
|
||||
gotVkUser,
|
||||
setDialogActive,
|
||||
openMapDialog,
|
||||
getGPXTrack,
|
||||
};
|
||||
|
||||
const UserPanel = connect(mapStateToProps, mapDispatchToProps)(UserPanelUnconnected);
|
||||
|
||||
export { UserPanel };
|
||||
|
|
|
|||
|
|
@ -8,10 +8,11 @@ import 'croppr/dist/croppr.css';
|
|||
import { LOGOS } from '$constants/logos';
|
||||
import { RendererPanel } from '$components/panels/RendererPanel';
|
||||
import { IRootState } from "$redux/user";
|
||||
import { IRoute } from '$redux/map/types';
|
||||
|
||||
type Props = {
|
||||
data: IRootState['renderer']['data'],
|
||||
logo: IRootState['logo'],
|
||||
logo: IRoute['logo'],
|
||||
hideRenderer: typeof hideRenderer,
|
||||
cropAShot: typeof cropAShot,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,17 +1,32 @@
|
|||
import { LatLng } from "leaflet";
|
||||
import { LatLng } from 'leaflet';
|
||||
import { IRoutePoint } from '$utils/gpx';
|
||||
|
||||
export type ILatLng = {
|
||||
lat: number,
|
||||
lng: number,
|
||||
}
|
||||
lat: number;
|
||||
lng: number;
|
||||
};
|
||||
|
||||
export type IMapRoute = ILatLng[];
|
||||
|
||||
|
||||
export interface IStickerDump {
|
||||
latlng: ILatLng,
|
||||
set: string,
|
||||
sticker: string,
|
||||
angle?: number,
|
||||
text?: string,
|
||||
latlng: ILatLng;
|
||||
set: string;
|
||||
sticker: string;
|
||||
angle?: number;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export interface IRoute {
|
||||
version: number;
|
||||
title: string;
|
||||
owner: number;
|
||||
address: string;
|
||||
route: IRoutePoint[];
|
||||
stickers: IStickerDump[];
|
||||
provider: string;
|
||||
is_public: boolean;
|
||||
is_published: boolean;
|
||||
description: string;
|
||||
logo: string;
|
||||
distance: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { USER_ACTIONS } from '$redux/user/constants';
|
||||
import { IUser } from "$constants/auth";
|
||||
import { IRootState } from "$redux/user";
|
||||
import { IRoute } from '$redux/map/types';
|
||||
|
||||
export const setUser = (user: IUser) => ({ type: USER_ACTIONS.SET_USER, user });
|
||||
export const userLogout = () => ({ type: USER_ACTIONS.USER_LOGOUT });
|
||||
|
|
@ -32,10 +33,10 @@ export const clearAll = () => ({ type: USER_ACTIONS.CLEAR_ALL });
|
|||
export const clearCancel = () => ({ type: USER_ACTIONS.CLEAR_CANCEL });
|
||||
|
||||
export const sendSaveRequest = (payload: {
|
||||
title: IRootState['title'],
|
||||
address: IRootState['address'],
|
||||
is_public: IRootState['is_public'],
|
||||
description: IRootState['description'],
|
||||
title: IRoute['title'],
|
||||
address: IRoute['address'],
|
||||
is_public: IRoute['is_public'],
|
||||
description: IRoute['description'],
|
||||
force: boolean,
|
||||
}) => ({
|
||||
type: USER_ACTIONS.SEND_SAVE_REQUEST,
|
||||
|
|
@ -47,10 +48,10 @@ export const resetSaveDialog = () => ({ type: USER_ACTIONS.RESET_SAVE_DIALOG });
|
|||
export const setSaveLoading = (save_loading: IRootState['save_loading']) => ({ type: USER_ACTIONS.SET_SAVE_LOADING, save_loading });
|
||||
|
||||
export const setSaveSuccess = (payload: {
|
||||
address: IRootState['address'],
|
||||
title: IRootState['address'],
|
||||
is_public: IRootState['is_public'],
|
||||
description: IRootState['description'],
|
||||
address: IRoute['address'],
|
||||
title: IRoute['address'],
|
||||
is_public: IRoute['is_public'],
|
||||
description: IRoute['description'],
|
||||
|
||||
save_error: string,
|
||||
}) => ({ type: USER_ACTIONS.SET_SAVE_SUCCESS, ...payload });
|
||||
|
|
|
|||
|
|
@ -1,29 +1,10 @@
|
|||
import { createReducer } from 'reduxsauce';
|
||||
import { DEFAULT_USER, IUser } from '$constants/auth';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { DEFAULT_LOGO, LOGOS } from '$constants/logos';
|
||||
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
|
||||
import { DIALOGS, IDialogs, TABS } from '$constants/dialogs';
|
||||
import { DIALOGS, IDialogs } from '$constants/dialogs';
|
||||
import { IStickers } from "$constants/stickers";
|
||||
import { IRoutePoint } from '$utils/gpx';
|
||||
import { IStickerDump } from '$redux/map/types';
|
||||
import { USER_HANDLERS } from './handlers';
|
||||
|
||||
export interface IRoute {
|
||||
version: number,
|
||||
title: IRootState['title'],
|
||||
owner: number,
|
||||
address: IRootState['address'],
|
||||
route: IRoutePoint[],
|
||||
stickers: IStickerDump[],
|
||||
provider: IRootState['provider'],
|
||||
is_public: IRootState['is_public'],
|
||||
is_published: IRootState['is_published'],
|
||||
description: IRootState['description'],
|
||||
logo: IRootState['logo'],
|
||||
distance: IRootState['distance']
|
||||
}
|
||||
|
||||
export interface IRouteListItem {
|
||||
address: string,
|
||||
title: string,
|
||||
|
|
@ -38,22 +19,22 @@ export interface IRootReducer {
|
|||
user: IUser,
|
||||
editing: boolean,
|
||||
mode: typeof MODES[keyof typeof MODES],
|
||||
logo: keyof typeof LOGOS,
|
||||
// logo: keyof typeof LOGOS,
|
||||
routerPoints: number,
|
||||
distance: number,
|
||||
description: string,
|
||||
// description: string,
|
||||
estimated: number,
|
||||
speed: number,
|
||||
activeSticker: { set?: keyof IStickers, sticker?: string },
|
||||
title: string,
|
||||
address: string,
|
||||
address_origin: string,
|
||||
// title: string,
|
||||
// address: string,
|
||||
// address_origin: string,
|
||||
changed: boolean,
|
||||
provider: keyof typeof PROVIDERS,
|
||||
// provider: keyof typeof PROVIDERS,
|
||||
markers_shown: boolean,
|
||||
|
||||
is_published: boolean,
|
||||
is_public: boolean,
|
||||
// is_public: boolean,
|
||||
is_empty: boolean,
|
||||
is_routing: boolean,
|
||||
|
||||
|
|
@ -104,24 +85,24 @@ export const INITIAL_STATE: IRootReducer = {
|
|||
user: { ...DEFAULT_USER },
|
||||
|
||||
mode: MODES.NONE,
|
||||
logo: DEFAULT_LOGO,
|
||||
// logo: DEFAULT_LOGO,
|
||||
routerPoints: 0,
|
||||
distance: 0,
|
||||
description: '',
|
||||
// description: '',
|
||||
estimated: 0,
|
||||
speed: 15,
|
||||
activeSticker: { set: null, sticker: null },
|
||||
title: '',
|
||||
address: '',
|
||||
address_origin: '',
|
||||
provider: DEFAULT_PROVIDER,
|
||||
// title: '',
|
||||
// address: '',
|
||||
// address_origin: '',
|
||||
// provider: DEFAULT_PROVIDER,
|
||||
|
||||
markers_shown: true,
|
||||
changed: false,
|
||||
editing: false,
|
||||
|
||||
is_published: false,
|
||||
is_public: false,
|
||||
// is_public: false,
|
||||
is_empty: true,
|
||||
is_routing: false,
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import axios from 'axios/index';
|
||||
import { API } from '$constants/api';
|
||||
import { IRootState, IRouteListItem, IRoute } from '$redux/user';
|
||||
import { IRootState, IRouteListItem } from '$redux/user';
|
||||
import { IUser } from '$constants/auth';
|
||||
import { CLIENT } from '$config/frontend';
|
||||
import { LatLngLiteral } from 'leaflet';
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
IResultWithStatus,
|
||||
configWithToken,
|
||||
} from './middleware';
|
||||
import { IRoute } from '$redux/map/types';
|
||||
|
||||
const arrayToObject = (array: any[], key: string): {} =>
|
||||
array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
|
||||
|
|
@ -63,7 +64,7 @@ export const getGuestToken = (): Promise<IResultWithStatus<{
|
|||
export const getStoredMap = ({
|
||||
name,
|
||||
}: {
|
||||
name: IRootState['address'];
|
||||
name: IRoute['address'];
|
||||
}): Promise<IResultWithStatus<{
|
||||
route: IRoute;
|
||||
error?: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,154 @@
|
|||
const ru = [' ','\\.',',',':','\\?','#','Я','я','Ю','ю','Ч','ч','Ш','ш','Щ','щ','Ж','ж','А','а','Б','б','В','в','Г','г','Д','д','Е','е','Ё','ё','З','з','И','и','Й','й','К','к','Л','л','М','м','Н','н', 'О','о','П','п','Р','р','С','с','Т','т','У','у','Ф','ф','Х','х','Ц','ц','Ы','ы','Ь','ь','Ъ','ъ','Э','э'];
|
||||
const en = ['_','','','','','','Ya','ya','Yu','yu','Ch','ch','Sh','sh','Sh','sh','Zh','zh','A','a','B','b','V','v','G','g','D','d','E','e','E','e','Z','z','I','i','J','j','K','k','L','l','M','m','N','n', 'O','o','P','p','R','r','S','s','T','t','U','u','F','f','H','h','C','c','Y','y','','','','','E', 'e'];
|
||||
const ru = [
|
||||
' ',
|
||||
'\\.',
|
||||
',',
|
||||
':',
|
||||
'\\?',
|
||||
'#',
|
||||
'Я',
|
||||
'я',
|
||||
'Ю',
|
||||
'ю',
|
||||
'Ч',
|
||||
'ч',
|
||||
'Ш',
|
||||
'ш',
|
||||
'Щ',
|
||||
'щ',
|
||||
'Ж',
|
||||
'ж',
|
||||
'А',
|
||||
'а',
|
||||
'Б',
|
||||
'б',
|
||||
'В',
|
||||
'в',
|
||||
'Г',
|
||||
'г',
|
||||
'Д',
|
||||
'д',
|
||||
'Е',
|
||||
'е',
|
||||
'Ё',
|
||||
'ё',
|
||||
'З',
|
||||
'з',
|
||||
'И',
|
||||
'и',
|
||||
'Й',
|
||||
'й',
|
||||
'К',
|
||||
'к',
|
||||
'Л',
|
||||
'л',
|
||||
'М',
|
||||
'м',
|
||||
'Н',
|
||||
'н',
|
||||
'О',
|
||||
'о',
|
||||
'П',
|
||||
'п',
|
||||
'Р',
|
||||
'р',
|
||||
'С',
|
||||
'с',
|
||||
'Т',
|
||||
'т',
|
||||
'У',
|
||||
'у',
|
||||
'Ф',
|
||||
'ф',
|
||||
'Х',
|
||||
'х',
|
||||
'Ц',
|
||||
'ц',
|
||||
'Ы',
|
||||
'ы',
|
||||
'Ь',
|
||||
'ь',
|
||||
'Ъ',
|
||||
'ъ',
|
||||
'Э',
|
||||
'э',
|
||||
];
|
||||
const en = [
|
||||
'_',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'Ya',
|
||||
'ya',
|
||||
'Yu',
|
||||
'yu',
|
||||
'Ch',
|
||||
'ch',
|
||||
'Sh',
|
||||
'sh',
|
||||
'Sh',
|
||||
'sh',
|
||||
'Zh',
|
||||
'zh',
|
||||
'A',
|
||||
'a',
|
||||
'B',
|
||||
'b',
|
||||
'V',
|
||||
'v',
|
||||
'G',
|
||||
'g',
|
||||
'D',
|
||||
'd',
|
||||
'E',
|
||||
'e',
|
||||
'E',
|
||||
'e',
|
||||
'Z',
|
||||
'z',
|
||||
'I',
|
||||
'i',
|
||||
'J',
|
||||
'j',
|
||||
'K',
|
||||
'k',
|
||||
'L',
|
||||
'l',
|
||||
'M',
|
||||
'm',
|
||||
'N',
|
||||
'n',
|
||||
'O',
|
||||
'o',
|
||||
'P',
|
||||
'p',
|
||||
'R',
|
||||
'r',
|
||||
'S',
|
||||
's',
|
||||
'T',
|
||||
't',
|
||||
'U',
|
||||
'u',
|
||||
'F',
|
||||
'f',
|
||||
'H',
|
||||
'h',
|
||||
'C',
|
||||
'c',
|
||||
'Y',
|
||||
'y',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'E',
|
||||
'e',
|
||||
];
|
||||
|
||||
export const removeGarbage = (text: string): string => text.replace(/[^A-Za-z\-_0-9]/ig, '_').replace(/_{2,}/ig, '_');
|
||||
export const removeGarbage = (text: string): string =>
|
||||
text.replace(/[^A-Za-z\-_0-9]/gi, '_').replace(/_{2,}/gi, '_');
|
||||
|
||||
export const toHours = (info: number): string => {
|
||||
const hrs = parseInt(String(info), 10);
|
||||
|
|
@ -10,10 +157,11 @@ export const toHours = (info: number): string => {
|
|||
return `${hrs}:${lmin}`;
|
||||
};
|
||||
|
||||
export const toTranslit = (string: string): string => (
|
||||
removeGarbage(ru.reduce((text, el, i) => (text.replace(new RegExp(ru[i], 'g'), en[i])), (String(string) || '')))
|
||||
);
|
||||
export const toTranslit = (string: string = ''): string =>
|
||||
removeGarbage(
|
||||
ru.reduce((text, el, i) => text.replace(new RegExp(ru[i], 'g'), en[i]), String(string) || '')
|
||||
);
|
||||
|
||||
export const parseDesc = (text: string): string => text.replace(/(\n{2,})/ig, "\n\n");
|
||||
export const parseDesc = (text: string = ''): string => text.replace(/(\n{2,})/gi, '\n\n');
|
||||
|
||||
// export const colorizeTitle = (text: string): string => text.replace(/(\[[^\]^]+\])/, ``)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { COLORS, CLIENT } from '$config/frontend';
|
|||
import saveAs from 'file-saver';
|
||||
import { replaceProviderUrl } from '$constants/providers';
|
||||
import { STICKERS } from '$constants/stickers';
|
||||
import { ILatLng } from '$redux/map/types';
|
||||
import { ILatLng, IRoute } from '$redux/map/types';
|
||||
import { IStickerDump } from '$redux/map/types';
|
||||
import { IRootState } from '$redux/user';
|
||||
import {
|
||||
|
|
@ -469,5 +469,5 @@ export const composeStickers = async ({
|
|||
);
|
||||
};
|
||||
|
||||
export const downloadCanvas = (canvas: HTMLCanvasElement, title: IRootState['title']): void =>
|
||||
export const downloadCanvas = (canvas: HTMLCanvasElement, title: IRoute['title']): void =>
|
||||
canvas.toBlob(blob => saveAs(blob, title));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue