muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleaned out user reducer

Browse source
This commit is contained in:
Fedor Katurov 2020-01-08 14:25:46 +07:00
parent 103097edbd
commit af8d270460
13 changed files with 462 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/StickerDesc.tsx
View file

@ -10,7 +10,7 @@ type State = {
text: String; text: String;
} }
export class StickerDesc extends React.PureComponent<Props, State> { class StickerDesc extends React.PureComponent<Props, State> {
state = { state = {
text: this.props.value, text: this.props.value,
}; };
@ -56,3 +56,5 @@ export class StickerDesc extends React.PureComponent<Props, State> {
) )
} }
} }
export { StickerDesc };

137
src/components/dialogs/SaveDialog.tsx
View file

@ -7,32 +7,32 @@ import { Icon } from '$components/panels/Icon';
import { Switch } from '$components/Switch'; import { Switch } from '$components/Switch';
import classnames from 'classnames'; import classnames from 'classnames';
import { sendSaveRequest, setMode } from "$redux/user/actions";
import ExpandableTextarea from 'react-expandable-textarea'; 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 { const mapStateToProps = state => ({
address: string, map: selectMap(state),
title: string, user: selectUser(state),
is_public: boolean, });
width: number, const mapDispatchToProps = {
setMode: typeof setMode, setMode: USER_ACTIONS.setMode,
sendSaveRequest: typeof sendSaveRequest, sendSaveRequest: USER_ACTIONS.sendSaveRequest,
save_error: string, };
save_loading: boolean, type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & { width: number };
save_finished: boolean,
save_overwriting: boolean,
}
interface State { interface State {
address: string, address: string;
title: string, title: string;
is_public: boolean, is_public: boolean;
description: string, description: string;
} }
export class SaveDialog extends React.Component<Props, State> { class SaveDialogUnconnected extends React.Component<Props, State> {
constructor(props) { constructor(props) {
super(props); super(props);
@ -48,21 +48,30 @@ export class SaveDialog extends React.Component<Props, State> {
const { path } = getUrlData(); const { path } = getUrlData();
const { title, address } = this.state; 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)) || '') }); setTitle = ({ target: { value } }) =>
setAddress = ({ target: { value } }) => this.setState({ address: (value && value.substr(0, 32) || '') }); this.setState({ title: (value && value.substr(0, 64)) || '' });
setDescription = ({ target: { value } }) => this.setState({ description: (value && value.substr(0, 256) || '') }); 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) => { sendSaveRequest = (e, force = false) => {
const { title, is_public, description } = this.state; const { title, is_public, description } = this.state;
const address = this.getAddress(); const address = this.getAddress();
this.props.sendSaveRequest({ this.props.sendSaveRequest({
title, address, force, is_public, description, title,
address,
force,
is_public,
description,
}); });
}; };
forceSaveRequest = e => this.sendSaveRequest(e, true); forceSaveRequest = e => this.sendSaveRequest(e, true);
@ -81,7 +90,10 @@ export class SaveDialog extends React.Component<Props, State> {
render() { render() {
const { title, is_public, description } = this.state; 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(); const { host, protocol } = getUrlData();
return ( return (
@ -92,13 +104,21 @@ export class SaveDialog extends React.Component<Props, State> {
<div className="save-title"> <div className="save-title">
<div className="save-title-input"> <div className="save-title-input">
<div className="save-title-label">Название</div> <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> </div>
<div className="save-description"> <div className="save-description">
<div className="save-address-input"> <div className="save-address-input">
<label className="save-address-label">{protocol}//{host}/</label> <label className="save-address-label">
{protocol}//{host}/
</label>
<input <input
type="text" type="text"
value={this.getAddress()} value={this.getAddress()}
@ -120,37 +140,42 @@ export class SaveDialog extends React.Component<Props, State> {
onChange={this.setDescription} onChange={this.setDescription}
/> />
</div> </div>
<div className="save-text"> <div className="save-text">{save_error || TIPS.SAVE_INFO}</div>
{ save_error || TIPS.SAVE_INFO }
</div>
<div className="save-buttons"> <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} /> <Switch active={is_public} />
{ {is_public ? ' В каталоге карт' : ' Только по ссылке'}
is_public
? ' В каталоге карт'
: ' Только по ссылке'
}
</div> </div>
<div> <div>
{ !save_finished && {!save_finished && (
<div className="button" onClick={this.cancelSaving}>Отмена</div> <div className="button" onClick={this.cancelSaving}>
} Отмена
{ </div>
!save_finished && !save_overwriting && )}
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div> {!save_finished && !save_overwriting && (
} <div className="button primary" onClick={this.sendSaveRequest}>
{ Сохранить
save_overwriting && </div>
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div> )}
} {save_overwriting && (
{ save_finished && <div className="button danger" onClick={this.forceSaveRequest}>
<div className="button" onClick={this.onCopy}>Скопировать</div> Перезаписать
} </div>
{ save_finished && )}
<div className="button success" onClick={this.cancelSaving}>Отлично!</div> {save_finished && (
} <div className="button" onClick={this.onCopy}>
Скопировать
</div>
)}
{save_finished && (
<div className="button success" onClick={this.cancelSaving}>
Отлично!
</div>
)}
</div> </div>
</div> </div>
</div> </div>
@ -159,3 +184,7 @@ export class SaveDialog extends React.Component<Props, State> {
); );
} }
} }
const SaveDialog = connect(mapStateToProps, mapDispatchToProps)(SaveDialogUnconnected);
export { SaveDialog };

88
src/components/dialogs/TitleDialog.tsx
View file

@ -1,28 +1,30 @@
import React from 'react'; import React from 'react';
import { bindActionCreators } from "redux";
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import classnames from 'classnames'; import classnames from 'classnames';
import { getStyle } from "$utils/dom"; import { getStyle } from '$utils/dom';
import { nearestInt } from "$utils/geom"; import { nearestInt } from '$utils/geom';
import { IRootState } from "$redux/user"; import { parseDesc } from '$utils/format';
import { parseDesc } from "$utils/format"; import { selectUser } from '$redux/user/selectors';
import { selectMap } from '$redux/map/selectors';
interface ITitleDialogProps { const mapStateToProps = state => ({
editing: IRootState['editing'], user: selectUser(state),
title?: IRootState['title'], map: selectMap(state),
description?: IRootState['description'], });
minLines?: number,
maxLines?: number,
}
interface ITitleDialogState { type Props = ReturnType<typeof mapStateToProps> & {
minLines?: number;
maxLines?: number;
};
interface State {
raised: boolean; raised: boolean;
height: number; height: number;
height_raised: number; height_raised: number;
} }
export class Component extends React.PureComponent<ITitleDialogProps, ITitleDialogState> { export class TitleDialogUnconnected extends React.PureComponent<Props, State> {
state = { state = {
raised: false, raised: false,
height: 0, 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 title_margin = parseInt(getStyle(this.ref_title, 'margin-bottom'), 10) || 0;
const text_margins = (parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) + const text_margins =
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;; (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 text_line = parseInt(getStyle(this.ref_text, 'line-height'), 10) || 0;
const container_height = sizer_height - title_height - title_margin - text_margins; 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 min_height = (this.props.minLines || 5) * text_line;
const max_height = (this.props.maxLines || 20) * 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 =
const height_raised = nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) + text_margins; 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({ this.setState({
height: ((height_raised - height) < 2 * text_line ? height_raised : height), height: height_raised - height < 2 * text_line ? height_raised : height,
height_raised height_raised,
}); });
}; };
render() { render() {
const { editing, title, description } = this.props; const {
user: { editing },
map: { title, description },
} = this.props;
const { raised, height, height_raised } = this.state; const { raised, height, height_raised } = this.state;
return ( return (
<div className="title-dialog-wrapper"> <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 <div
className={classnames('title-dialog', { active: title && !editing })} className={classnames('title-dialog', { active: title && !editing })}
onMouseOver={this.onHover} onMouseOver={this.onHover}
@ -85,31 +100,37 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
> >
<div <div
className="title-dialog-pane title-dialog-name" className="title-dialog-pane title-dialog-name"
ref={el => { this.ref_title = el; }} ref={el => {
this.ref_title = el;
}}
> >
<h2>{title}</h2> <h2>{title}</h2>
</div> </div>
<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={{ style={{
height: (raised ? height_raised : height), height: raised ? height_raised : height,
marginBottom: height === 0 ? 0 : 15, marginBottom: height === 0 ? 0 : 15,
}} }}
ref={el => { this.ref_overflow = el; }} ref={el => {
this.ref_overflow = el;
}}
> >
<div <div
ref={el => { this.ref_text = el; }} ref={el => {
this.ref_text = el;
}}
> >
{ {parseDesc(description)}
parseDesc(description)
}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) );
} }
ref_sizer; ref_sizer;
@ -118,7 +139,6 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
ref_overflow; ref_overflow;
} }
const mapStateToProps = ({ user: { editing, title, description } }) => ({ editing, title, description }); const TitleDialog = connect(mapStateToProps)(TitleDialogUnconnected);
const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component); export { TitleDialog };

3
src/components/panels/EditorDialog.tsx
View file

@ -8,13 +8,10 @@ import { LogoDialog } from '$components/dialogs/LogoDialog';
import { SaveDialog } from '$components/dialogs/SaveDialog'; import { SaveDialog } from '$components/dialogs/SaveDialog';
import { CancelDialog } from '$components/dialogs/CancelDialog'; import { CancelDialog } from '$components/dialogs/CancelDialog';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import * as USER_ACTIONS from '$redux/user/actions';
import { ProviderDialog } from '$components/dialogs/ProviderDialog'; import { ProviderDialog } from '$components/dialogs/ProviderDialog';
import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog'; import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog';
import * as MAP_ACTIONS from '$redux/map/actions';
import { selectUserMode } from '$redux/user/selectors'; import { selectUserMode } from '$redux/user/selectors';
const mapStateToProps = state => ({ mode: selectUserMode(state) }); const mapStateToProps = state => ({ mode: selectUserMode(state) });

123
src/components/panels/TopRightPanel.tsx
View file

@ -1,71 +1,72 @@
// flow // flow
import React from 'react'; import React, { useCallback } from 'react';
import { Icon } from '$components/panels/Icon'; import { Icon } from '$components/panels/Icon';
import { PROVIDERS } from '$constants/providers'; import { PROVIDERS } from '$constants/providers';
import { LOGOS } from '$constants/logos'; 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 { connect } from 'react-redux';
import { MODES } from '$constants/modes'; 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 { const mapStateToProps = state => ({
startProviderMode: () => void, map: selectMap(state),
startLogoMode: () => void, user: selectUser(state),
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)),
}); });
export const TopRightPanel = connect( const mapDispatchToProps = {
mapStateToProps, setMode: USER_ACTIONS.setMode,
mapDispatchToProps };
)(Component);
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 };

112
src/components/panels/UserPanel.tsx
View file

@ -1,9 +1,9 @@
import React from "react"; import React, { PureComponent } from 'react';
import { GuestButton } from "$components/user/GuestButton"; import { GuestButton } from '$components/user/GuestButton';
import { DEFAULT_USER, IUser, ROLES } from "$constants/auth"; import { DEFAULT_USER, IUser, ROLES } from '$constants/auth';
import { UserButton } from "$components/user/UserButton"; import { UserButton } from '$components/user/UserButton';
import { UserMenu } from "$components/user/UserMenu"; import { UserMenu } from '$components/user/UserMenu';
import { import {
setUser, setUser,
userLogout, userLogout,
@ -12,18 +12,17 @@ import {
gotVkUser, gotVkUser,
setDialogActive, setDialogActive,
openMapDialog, openMapDialog,
getGPXTrack getGPXTrack,
} from "$redux/user/actions"; } from '$redux/user/actions';
import { bindActionCreators } from "redux"; import { connect } from 'react-redux';
import { connect } from "react-redux"; import { Icon } from '$components/panels/Icon';
import { Icon } from "$components/panels/Icon";
import classnames from "classnames"; import classnames from 'classnames';
import { CLIENT } from "$config/frontend"; import { CLIENT } from '$config/frontend';
import { DIALOGS, TABS } from "$constants/dialogs"; import { DIALOGS, TABS } from '$constants/dialogs';
import { IRootState } from "$redux/user"; import { IRootState } from '$redux/user';
import { Tooltip } from "$components/panels/Tooltip"; import { Tooltip } from '$components/panels/Tooltip';
import { TitleDialog } from "$components/dialogs/TitleDialog"; import { TitleDialog } from '$components/dialogs/TitleDialog';
interface Props extends IRootState { interface Props extends IRootState {
userLogout: typeof userLogout; userLogout: typeof userLogout;
@ -39,34 +38,26 @@ interface State {
menuOpened: boolean; menuOpened: boolean;
} }
export class Component extends React.PureComponent<Props, State> { export class UserPanelUnconnected extends PureComponent<Props, State> {
state = { state = {
menuOpened: false menuOpened: false,
}; };
componentDidMount() { componentDidMount() {
window.addEventListener("message", e => { window.addEventListener('message', e => {
const { data } = e; const { data } = e;
if ( if (
!data || !data ||
!data.type || !data.type ||
data.type !== "oauth_login" || data.type !== 'oauth_login' ||
!data.user || !data.user ||
!data.user.id || !data.user.id ||
!data.user.token !data.user.token
) )
return; return;
const { const { id, token, role = 'vk', name = '', ip = '', photo = '', agent = '' } = data.user;
id,
token,
role = "vk",
name = "",
ip = "",
photo = "",
agent = ""
} = data.user;
const user = { const user = {
...DEFAULT_USER, ...DEFAULT_USER,
@ -77,8 +68,8 @@ export class Component extends React.PureComponent<Props, State> {
name, name,
ip, ip,
agent, agent,
photo photo,
} },
}; };
this.setState({ menuOpened: false }); this.setState({ menuOpened: false });
@ -105,7 +96,7 @@ export class Component extends React.PureComponent<Props, State> {
window.open( window.open(
`https://oauth.vk.com/authorize?client_id=5987644&scope=&redirect_uri=${CLIENT.API_ADDR}/api/auth/vk`, `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` `location=no,width=700,height=370,scrollbars=no,top=${top},left=${left},resizable=no`
); );
}; };
@ -113,7 +104,7 @@ export class Component extends React.PureComponent<Props, State> {
render() { render() {
const { const {
props: { user, dialog, dialog_active, is_empty }, props: { user, dialog, dialog_active, is_empty },
state: { menuOpened } state: { menuOpened },
} = this; } = this;
return ( return (
@ -127,7 +118,7 @@ export class Component extends React.PureComponent<Props, State> {
) : ( ) : (
<UserButton user={user} setMenuOpened={this.setMenuOpened} /> <UserButton user={user} setMenuOpened={this.setMenuOpened} />
)} )}
{user && user.role && user.role !== "guest" && menuOpened && ( {user && user.role && user.role !== 'guest' && menuOpened && (
<UserMenu <UserMenu
userLogout={this.props.userLogout} userLogout={this.props.userLogout}
openAppInfoDialog={this.openAppInfoDialog} openAppInfoDialog={this.openAppInfoDialog}
@ -140,7 +131,7 @@ export class Component extends React.PureComponent<Props, State> {
<div className="control-bar"> <div className="control-bar">
<button <button
className={classnames({ className={classnames({
active: dialog_active && dialog === DIALOGS.MAP_LIST active: dialog_active && dialog === DIALOGS.MAP_LIST,
})} })}
onClick={this.openMapsDialog} onClick={this.openMapsDialog}
> >
@ -152,10 +143,7 @@ export class Component extends React.PureComponent<Props, State> {
<div className="control-sep" /> <div className="control-sep" />
<div className="control-bar"> <div className="control-bar">
<button <button className={classnames({ active: false })} onClick={this.props.takeAShot}>
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Tooltip>Снимок карты</Tooltip> <Tooltip>Снимок карты</Tooltip>
<Icon icon="icon-shot-4" /> <Icon icon="icon-shot-4" />
</button> </button>
@ -165,10 +153,7 @@ export class Component extends React.PureComponent<Props, State> {
<div className="control-sep" /> <div className="control-sep" />
<div className="control-bar"> <div className="control-bar">
<button <button className={classnames({ active: false })} onClick={this.props.getGPXTrack}>
className={classnames({ active: false })}
onClick={this.props.getGPXTrack}
>
<Tooltip>Экспорт GPX</Tooltip> <Tooltip>Экспорт GPX</Tooltip>
<Icon icon="icon-gpx-1" /> <Icon icon="icon-gpx-1" />
</button> </button>
@ -181,25 +166,24 @@ export class Component extends React.PureComponent<Props, State> {
} }
} }
const mapStateToProps = ({ const mapStateToProps = ({ user: { dialog, dialog_active, user, is_empty } }) => ({
user: { dialog, dialog_active, user, is_empty } dialog,
}) => ({ dialog, dialog_active, user, is_empty }); dialog_active,
const mapDispatchToProps = dispatch => user,
bindActionCreators( is_empty,
{ });
setUser,
userLogout,
takeAShot,
setDialog,
gotVkUser,
setDialogActive,
openMapDialog,
getGPXTrack
},
dispatch
);
export const UserPanel = connect( const mapDispatchToProps = {
mapStateToProps, setUser,
mapDispatchToProps userLogout,
)(Component); takeAShot,
setDialog,
gotVkUser,
setDialogActive,
openMapDialog,
getGPXTrack,
};
const UserPanel = connect(mapStateToProps, mapDispatchToProps)(UserPanelUnconnected);
export { UserPanel };

3
src/components/renderer/Renderer.tsx
View file

@ -8,10 +8,11 @@ import 'croppr/dist/croppr.css';
import { LOGOS } from '$constants/logos'; import { LOGOS } from '$constants/logos';
import { RendererPanel } from '$components/panels/RendererPanel'; import { RendererPanel } from '$components/panels/RendererPanel';
import { IRootState } from "$redux/user"; import { IRootState } from "$redux/user";
import { IRoute } from '$redux/map/types';
type Props = { type Props = {
data: IRootState['renderer']['data'], data: IRootState['renderer']['data'],
logo: IRootState['logo'], logo: IRoute['logo'],
hideRenderer: typeof hideRenderer, hideRenderer: typeof hideRenderer,
cropAShot: typeof cropAShot, cropAShot: typeof cropAShot,
}; };

35
src/redux/map/types.ts
View file

@ -1,17 +1,32 @@
import { LatLng } from "leaflet"; import { LatLng } from 'leaflet';
import { IRoutePoint } from '$utils/gpx';
export type ILatLng = { export type ILatLng = {
lat: number, lat: number;
lng: number, lng: number;
} };
export type IMapRoute = ILatLng[]; export type IMapRoute = ILatLng[];
export interface IStickerDump { export interface IStickerDump {
latlng: ILatLng, latlng: ILatLng;
set: string, set: string;
sticker: string, sticker: string;
angle?: number, angle?: number;
text?: string, 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;
} }

17
src/redux/user/actions.ts
View file

@ -1,6 +1,7 @@
import { USER_ACTIONS } from '$redux/user/constants'; import { USER_ACTIONS } from '$redux/user/constants';
import { IUser } from "$constants/auth"; import { IUser } from "$constants/auth";
import { IRootState } from "$redux/user"; import { IRootState } from "$redux/user";
import { IRoute } from '$redux/map/types';
export const setUser = (user: IUser) => ({ type: USER_ACTIONS.SET_USER, user }); export const setUser = (user: IUser) => ({ type: USER_ACTIONS.SET_USER, user });
export const userLogout = () => ({ type: USER_ACTIONS.USER_LOGOUT }); 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 clearCancel = () => ({ type: USER_ACTIONS.CLEAR_CANCEL });
export const sendSaveRequest = (payload: { export const sendSaveRequest = (payload: {
title: IRootState['title'], title: IRoute['title'],
address: IRootState['address'], address: IRoute['address'],
is_public: IRootState['is_public'], is_public: IRoute['is_public'],
description: IRootState['description'], description: IRoute['description'],
force: boolean, force: boolean,
}) => ({ }) => ({
type: USER_ACTIONS.SEND_SAVE_REQUEST, 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 setSaveLoading = (save_loading: IRootState['save_loading']) => ({ type: USER_ACTIONS.SET_SAVE_LOADING, save_loading });
export const setSaveSuccess = (payload: { export const setSaveSuccess = (payload: {
address: IRootState['address'], address: IRoute['address'],
title: IRootState['address'], title: IRoute['address'],
is_public: IRootState['is_public'], is_public: IRoute['is_public'],
description: IRootState['description'], description: IRoute['description'],
save_error: string, save_error: string,
}) => ({ type: USER_ACTIONS.SET_SAVE_SUCCESS, ...payload }); }) => ({ type: USER_ACTIONS.SET_SAVE_SUCCESS, ...payload });

49
src/redux/user/index.ts
View file

@ -1,29 +1,10 @@
import { createReducer } from 'reduxsauce'; import { createReducer } from 'reduxsauce';
import { DEFAULT_USER, IUser } from '$constants/auth'; import { DEFAULT_USER, IUser } from '$constants/auth';
import { MODES } from '$constants/modes'; import { MODES } from '$constants/modes';
import { DEFAULT_LOGO, LOGOS } from '$constants/logos'; import { DIALOGS, IDialogs } from '$constants/dialogs';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
import { DIALOGS, IDialogs, TABS } from '$constants/dialogs';
import { IStickers } from "$constants/stickers"; import { IStickers } from "$constants/stickers";
import { IRoutePoint } from '$utils/gpx';
import { IStickerDump } from '$redux/map/types';
import { USER_HANDLERS } from './handlers'; 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 { export interface IRouteListItem {
address: string, address: string,
title: string, title: string,
@ -38,22 +19,22 @@ export interface IRootReducer {
user: IUser, user: IUser,
editing: boolean, editing: boolean,
mode: typeof MODES[keyof typeof MODES], mode: typeof MODES[keyof typeof MODES],
logo: keyof typeof LOGOS, // logo: keyof typeof LOGOS,
routerPoints: number, routerPoints: number,
distance: number, distance: number,
description: string, // description: string,
estimated: number, estimated: number,
speed: number, speed: number,
activeSticker: { set?: keyof IStickers, sticker?: string }, activeSticker: { set?: keyof IStickers, sticker?: string },
title: string, // title: string,
address: string, // address: string,
address_origin: string, // address_origin: string,
changed: boolean, changed: boolean,
provider: keyof typeof PROVIDERS, // provider: keyof typeof PROVIDERS,
markers_shown: boolean, markers_shown: boolean,
is_published: boolean, is_published: boolean,
is_public: boolean, // is_public: boolean,
is_empty: boolean, is_empty: boolean,
is_routing: boolean, is_routing: boolean,
@ -104,24 +85,24 @@ export const INITIAL_STATE: IRootReducer = {
user: { ...DEFAULT_USER }, user: { ...DEFAULT_USER },
mode: MODES.NONE, mode: MODES.NONE,
logo: DEFAULT_LOGO, // logo: DEFAULT_LOGO,
routerPoints: 0, routerPoints: 0,
distance: 0, distance: 0,
description: '', // description: '',
estimated: 0, estimated: 0,
speed: 15, speed: 15,
activeSticker: { set: null, sticker: null }, activeSticker: { set: null, sticker: null },
title: '', // title: '',
address: '', // address: '',
address_origin: '', // address_origin: '',
provider: DEFAULT_PROVIDER, // provider: DEFAULT_PROVIDER,
markers_shown: true, markers_shown: true,
changed: false, changed: false,
editing: false, editing: false,
is_published: false, is_published: false,
is_public: false, // is_public: false,
is_empty: true, is_empty: true,
is_routing: false, is_routing: false,

5
src/utils/api.ts
View file

@ -1,6 +1,6 @@
import axios from 'axios/index'; import axios from 'axios/index';
import { API } from '$constants/api'; import { API } from '$constants/api';
import { IRootState, IRouteListItem, IRoute } from '$redux/user'; import { IRootState, IRouteListItem } from '$redux/user';
import { IUser } from '$constants/auth'; import { IUser } from '$constants/auth';
import { CLIENT } from '$config/frontend'; import { CLIENT } from '$config/frontend';
import { LatLngLiteral } from 'leaflet'; import { LatLngLiteral } from 'leaflet';
@ -10,6 +10,7 @@ import {
IResultWithStatus, IResultWithStatus,
configWithToken, configWithToken,
} from './middleware'; } from './middleware';
import { IRoute } from '$redux/map/types';
const arrayToObject = (array: any[], key: string): {} => const arrayToObject = (array: any[], key: string): {} =>
array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {}); array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
@ -63,7 +64,7 @@ export const getGuestToken = (): Promise<IResultWithStatus<{
export const getStoredMap = ({ export const getStoredMap = ({
name, name,
}: { }: {
name: IRootState['address']; name: IRoute['address'];
}): Promise<IResultWithStatus<{ }): Promise<IResultWithStatus<{
route: IRoute; route: IRoute;
error?: string; error?: string;

162
src/utils/format.ts
View file

@ -1,7 +1,154 @@
const ru = [' ','\\.',',',':','\\?','#','Я','я','Ю','ю','Ч','ч','Ш','ш','Щ','щ','Ж','ж','А','а','Б','б','В','в','Г','г','Д','д','Е','е','Ё','ё','З','з','И','и','Й','й','К','к','Л','л','М','м','Н','н', 'О','о','П','п','Р','р','С','с','Т','т','У','у','Ф','ф','Х','х','Ц','ц','Ы','ы','Ь','ь','Ъ','ъ','Э','э']; 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 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 => { export const toHours = (info: number): string => {
const hrs = parseInt(String(info), 10); const hrs = parseInt(String(info), 10);
@ -10,10 +157,11 @@ export const toHours = (info: number): string => {
return `${hrs}:${lmin}`; return `${hrs}:${lmin}`;
}; };
export const toTranslit = (string: 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) || ''))) 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(/(\[[^\]^]+\])/, ``) // export const colorizeTitle = (text: string): string => text.replace(/(\[[^\]^]+\])/, ``)

4
src/utils/renderer.ts
View file

@ -3,7 +3,7 @@ import { COLORS, CLIENT } from '$config/frontend';
import saveAs from 'file-saver'; import saveAs from 'file-saver';
import { replaceProviderUrl } from '$constants/providers'; import { replaceProviderUrl } from '$constants/providers';
import { STICKERS } from '$constants/stickers'; 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 { IStickerDump } from '$redux/map/types';
import { IRootState } from '$redux/user'; import { IRootState } from '$redux/user';
import { 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)); canvas.toBlob(blob => saveAs(blob, title));