providers: complete?

src/components/dialogs/CancelDialog.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { MODES } from '$constants/modes';
+import { editor } from '$modules/Editor';
+import { Icon } from '$components/panels/Icon';
+
+type Props = {
+  stopEditing: Function,
+  setMode: Function,
+  setEditing: Function,
+};
+
+export class CancelDialog extends React.Component<Props, void> {
+  cancel = () => {
+    this.props.stopEditing();
+    // editor.cancelEditing();
+    // this.props.setEditing(false);
+    // this.props.setMode(MODES.NONE);
+  };
+
+  proceed = () => {
+    this.props.setMode(MODES.NONE);
+  };
+
+  render() {
+    return (
+      <div className="helper cancel-helper">
+        <div className="helper__text danger">
+          <Icon icon="icon-cancel-1" />
+          <div className="big upper">Закрыть редактор?</div>
+        </div>
+        <div className="helper__buttons">
+          <div className="button router-helper__button" onClick={this.cancel}>
+            Удалить измения
+          </div>
+
+          <div className="button primary router-helper__button" onClick={this.proceed}>
+            Вернуться
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/dialogs/LogoDialog.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+
+type Props = {
+  logo: String,
+  setLogo: Function,
+}
+
+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(item => (
+        <div
+          className={classnames('helper-menu-item', { active: (item === logo) })}
+          onClick={() => setLogo(item)}
+          key={item}
+        >
+          {LOGOS[item][0]}
+        </div>
+      ))
+    }
+  </div>
+);

src/components/dialogs/ProviderDialog.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
+import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+import { MODES } from '$constants/modes';
+
+type Props = {
+  setProvider: Function,
+  setMode: Function,
+  provider: String,
+};
+
+export class ProviderDialog extends React.Component<Props, void> {
+  closeDialog = () => this.props.setMode(MODES.NONE);
+
+  render() {
+    const { provider, setProvider } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="helper provider-helper">
+          {
+            Object.keys(PROVIDERS).map(item => (
+              <div
+                className={classnames('provider-helper-thumb', { active: provider === item })}
+                style={{
+                  backgroundImage: `url(${replaceProviderUrl(item, { x: 5980, y: 2589, zoom: 13 })})`,
+                }}
+                onClick={() => setProvider(item)}
+                key={PROVIDERS[item].name}
+              >
+                {
+                  provider === item &&
+                    <div className="provider-helper-check">
+                      <Icon icon="icon-check-1" />
+                    </div>
+                }
+              </div>
+            ))
+          }
+        </div>
+        <div className="helper">
+          <div className="helper__text">
+            <Icon icon="icon-map-1" />
+            <div className="big upper">ВЫБЕРИТЕ СТИЛЬ КАРТЫ</div>
+          </div>
+          <div className="helper__buttons button-group" onClick={this.closeDialog}>
+            <Icon icon="icon-cancel-1" />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

src/components/dialogs/RouterDialog.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+
+type Props = {
+  routerCancel: Function,
+  routerSubmit: Function,
+  routerPoints: Number,
+}
+
+const noPoints = ({ routerCancel }: Props) => (
+  <div className="helper router-helper">
+    <div className="helper__text">
+      <Icon icon="icon-pin-1" />
+      <div className="big white upper">
+        Укажите первую точку на карте
+      </div>
+    </div>
+    <div className="helper__buttons">
+      <div className="button router-helper__button" onClick={routerCancel}>
+        Отмена
+      </div>
+    </div>
+  </div>
+);
+
+const firstPoint = ({ routerCancel }: Props) => (
+  <div className="helper router-helper">
+    <div className="helper__text">
+      <Icon icon="icon-pin-1" />
+      <div className="big white upper">УКАЖИТЕ СЛЕДУЮЩУЮ ТОЧКУ</div>
+    </div>
+    <div className="helper__buttons">
+      <div className="button router-helper__button" onClick={routerCancel}>
+        Отмена
+      </div>
+    </div>
+  </div>
+);
+
+const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
+  <div className="helper router-helper">
+    <div className="helper__text success">
+      <Icon icon="icon-check-1" />
+      <div className="big upper">Продолжайте маршрут</div>
+    </div>
+    <div className="helper__buttons button-group">
+      <div className="button button_red router-helper__button" onClick={routerCancel}>
+        Отмена
+      </div>
+      <div className="button primary router-helper__button" onClick={routerSubmit}>
+        Применить
+      </div>
+    </div>
+  </div>
+);
+
+export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => (
+  <div>
+    {!routerPoints && noPoints({ routerCancel })}
+    {routerPoints === 1 && firstPoint({ routerCancel })}
+    {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
+  </div>
+);

src/components/dialogs/SaveDialog.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { getUrlData, pushPath } from '$utils/history';
+import { toTranslit } from '$utils/format';
+import { TIPS } from '$constants/tips';
+import { MODES } from '$constants/modes';
+
+type Props = {
+  address: String, // initial?
+  title: String, // initial?
+
+  save_error: String,
+  save_finished: Boolean,
+  save_overwriting: Boolean,
+  save_processing: Boolean,
+
+  setMode: Function,
+  sendSaveRequest: Function,
+};
+
+type State = {
+  address: String,
+  title: String,
+};
+
+export class SaveDialog extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      address: props.address || '',
+      title: props.title || '',
+    };
+  }
+
+  getAddress = () => {
+    const { path } = getUrlData();
+    const { title, address } = this.state;
+
+    return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()) || toTranslit(path.trim());
+  };
+
+  setTitle = ({ target: { value } }) => this.setState({ title: (value || '') });
+
+  setAddress = ({ target: { value } }) => this.setState({ address: (value || '') });
+
+  // cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
+  cancelSaving = () => this.props.setMode(MODES.NONE);
+
+  sendSaveRequest = (e, force = false) => {
+    const { title } = this.state;
+    const address = this.getAddress();
+
+    this.props.sendSaveRequest({
+      title, address, force,
+    });
+  };
+
+  forceSaveRequest = e => this.sendSaveRequest(e, true);
+
+  render() {
+    const { title } = this.state;
+    const { save_error, save_finished, save_overwriting, save_processing } = this.props;
+    const { host } = getUrlData();
+
+    return (
+      <div className="helper save-helper">
+        <div className="save-title">
+          <div className="save-title-input">
+            <label className="save-title-label">Название</label>
+            <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">http://{host}/</label>
+            <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
+          </div>
+
+          <div className="save-text">
+            { save_error || TIPS.SAVE_INFO }
+          </div>
+
+          <div className="save-buttons">
+            <div className="save-buttons-text" />
+            <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 success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
+              }
+
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    );
+  }
+}

src/components/dialogs/StickersDialog.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+
+import { stickers } from '$constants/stickers';
+import sprite from '$sprites/stickers.svg';
+
+type Props = {
+  setActiveSticker: Function
+};
+
+export const StickersDialog = ({ setActiveSticker }: Props) => (
+  <div className="helper stickers-helper">
+    {
+      stickers.map(sticker => (
+        <div className="sticker-preview" key={sticker}>
+          <svg width={48} height={48} viewBox="0 0 64 64" onClick={() => setActiveSticker(sticker)}>
+            <use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
+          </svg>
+        </div>
+      ))
+    }
+  </div>
+);

src/components/dialogs/TrashDialog.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+
+type Props = {
+  clearPoly: Function,
+  clearStickers: Function,
+  clearAll: Function,
+  clearCancel: Function,
+}
+
+export const TrashDialog = ({
+  clearPoly, clearStickers, clearAll, clearCancel
+}: Props) => (
+  <div className="helper trash-helper">
+    <div className="helper__text danger">
+      <Icon icon="icon-trash-4" />
+      <div className="big upper">Удалить:</div>
+    </div>
+    <div className="helper__buttons">
+      <div className="button-group">
+        <div className="button router-helper__button" onClick={clearPoly}>
+          Маршрут
+        </div>
+        <div className="button router-helper__button" onClick={clearStickers}>
+          Стикеры
+        </div>
+        <div className="button router-helper__button" onClick={clearAll}>
+          Удалить все
+        </div>
+      </div>
+      <div className="button primary router-helper__button" onClick={clearCancel}>
+        Отмена
+      </div>
+    </div>
+  </div>
+);