diff --git a/src/components/save/SaveDialog.jsx b/src/components/save/SaveDialog.jsx index 96a1966..3975870 100644 --- a/src/components/save/SaveDialog.jsx +++ b/src/components/save/SaveDialog.jsx @@ -1,10 +1,12 @@ import React from 'react'; -import { getUrlData } from '$utils/history'; +import { getUrlData, pushPath } from '$utils/history'; import { toTranslit } from '$utils/format'; import { TIPS } from '$constants/tips'; import { MODES } from '$constants/modes'; import { postMap } from '$utils/api'; +import classnames from 'classnames'; + export class SaveDialog extends React.Component { state = { address: '', @@ -12,21 +14,25 @@ export class SaveDialog extends React.Component { error: '', sending: false, finished: false, - success: false, overwriting: false, }; + getAddress = () => { + const { path } = getUrlData(); + const { title, address } = this.state; + return toTranslit(address.trim()) || toTranslit(title.trim()) || toTranslit(path.trim()); + }; + setTitle = ({ target: { value } }) => this.setState({ title: (value || '') }); setAddress = ({ target: { value } }) => this.setState({ address: (value || '') }); cancelSaving = () => this.props.editor.changeMode(MODES.NONE); - sendSaveRequest = () => { + sendSaveRequest = (e, force = false) => { const { route, stickers } = this.props.editor.dumpData(); - const { title, address } = this.state; + const { title } = this.state; const { id, token } = this.props.user; - const { path, host } = getUrlData(); postMap({ id, @@ -34,13 +40,40 @@ export class SaveDialog extends React.Component { route, stickers, title, - address: (toTranslit(address.trim()) || toTranslit(title.trim()) || toTranslit(path.trim())), - }).then(console.log).catch(console.warn); + force, + address: this.getAddress(), + }).then(this.parseResponse).catch(console.warn); }; + forceSaveRequest = e => this.sendSaveRequest(e, true); + + parseResponse = data => { + if (data.success) return this.setSuccess(data); + if (data.mode === 'overwriting') return this.setOverwrite(data.description); + return this.setError(data.description); + }; + + setSuccess = ({ address, description }) => { + pushPath(`/${address}/edit`); + + this.setState({ + error: description, finished: true, sending: true, overwriting: false + }); + }; + + setOverwrite = error => this.setState({ + error, finished: false, sending: true, overwriting: true + }); + + setError = error => this.setState({ + error, finished: false, sending: true, overwriting: false + }); + render() { - const { address, title, error } = this.state; - const { path, host } = getUrlData(); + const { + title, error, finished, overwriting, sending + } = this.state; + const { host } = getUrlData(); return (
@@ -54,7 +87,7 @@ export class SaveDialog extends React.Component {
- +
@@ -65,9 +98,26 @@ export class SaveDialog extends React.Component {
-
+
+ + { !finished &&
Отмена
-
Сохранить
+ } + + { + (!sending || (sending && !overwriting && !finished)) && +
Сохранить
+ } + + { + sending && overwriting && +
Перезаписать
+ } + + { finished && +
Отлично, спасибо!
+ } +
@@ -76,4 +126,4 @@ export class SaveDialog extends React.Component {
); } -}; +} diff --git a/src/containers/App.jsx b/src/containers/App.jsx index a5a7056..51ec5cd 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -41,7 +41,6 @@ export class App extends React.Component { this.editor.stopEditing(); } }) - .catch(console.warn) .catch(this.startEmptyEditor); } else { // this.hideLoader(); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 807dc4a..a0d7caf 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -195,10 +195,12 @@ export class Editor { startEditing = () => { this.poly.poly.enableEdit(); + this.stickers.startEditing(); }; stopEditing = () => { this.poly.poly.disableEdit(); + this.stickers.stopEditing(); }; dumpData = () => ({ diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index c0820cb..066fa51 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -129,9 +129,13 @@ export class Sticker { angle: this.angle, latlng: this.latlng, sticker: this.sticker, - }) - - stopEditing = () => ({ - }); + + stopEditing = () => { + this.element.className = 'sticker-container inactive'; + }; + + startEditing = () => { + this.element.className = 'sticker-container'; + }; } diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index 7549947..e180b08 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -53,4 +53,12 @@ export class Stickers { }; dumpData = () => this.stickers.map(sticker => sticker.dumpData()); + + startEditing = () => { + this.stickers.map(sticker => sticker.startEditing()); + } + + stopEditing = () => { + this.stickers.map(sticker => sticker.stopEditing()); + } } diff --git a/src/styles/button.less b/src/styles/button.less index 28a4383..f358e21 100644 --- a/src/styles/button.less +++ b/src/styles/button.less @@ -20,6 +20,10 @@ &.danger { background: #ed2f3b; } + + &.success { + background: #17bf6d; + } } .button-group { diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 457adbf..6d4129a 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -1,6 +1,7 @@ .sticker-container { outline: none; position: relative; + transition: transform 250ms; &:before { content: ' '; @@ -28,6 +29,14 @@ transform: scale(1); } } + + &.inactive { + pointer-events: none; + + .sticker-delete { + display: none; + } + } } .sticker-label { diff --git a/src/utils/api.js b/src/utils/api.js index 1fd88a6..b9e21e7 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -31,10 +31,10 @@ export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, { name, action: 'load' } -}).then(result => (result && result.data && result.data.data && result.data.owner && { ...result.data.data, owner: result.data.owner })); +}).then(result => (result && result.data && result.data.data && { ...result.data.data, owner: (result.data.owner || null) })); export const postMap = ({ - title, address, route, stickers, id, token + title, address, route, stickers, id, token, force, }) => axios.post(API.POST_MAP, { action: 'store', title, @@ -43,4 +43,5 @@ export const postMap = ({ stickers, id, token, -}).then(result => (result && result.data && result.data.data && result.data.owner && { ...result.data.data, owner: result.data.owner })); + force, +}).then(result => (result && result.data && result.data));