more WIP for orbis

2025-12-11 00:33:03 +00:00 · 2018-07-28 11:36:44 +10:00
parent 3d9d6397f6
commit de1cb901fc
9 changed files with 190 additions and 104 deletions
--- a/src/app/components/ModalOrbis.jsx
+++ b/src/app/components/ModalOrbis.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import { orbisUpload } from '../utils/ShortenUrl';
+import Persist from '../stores/Persist';

 /**
 * Permalink modal
@@ -20,18 +21,53 @@ export default class ModalOrbis extends TranslatedComponent {
    super(props);

    this.state = {
-      orbisUrl: 'Shortening...'
+      orbisCreds: Persist.getOrbisCreds(),
+      orbisUrl: '...'
    };
  }

  /**
-   * Shorten URL on mount
+   * Send ship to Orbis.zone
+   * @param {SyntheticEvent} e React Event
   */
-  componentWillMount() {
-    orbisUpload(this.props.ship,
-      (orbisUrl) => this.setState({ orbisUrl }),
-      (error) => this.setState({ orbisUrl: 'Error - ' + error })
-    );
+  sendToOrbis(e) {
+    const target = e.target;
+    target.disabled = true;
+    this.setState({ orbisUrl: 'Sending...' }, () => {
+      console.log(this.props);
+      console.log(this.state)
+      orbisUpload(this.props.ship, this.state.orbisCreds)
+        .then(orbisUrl => {
+          target.disabled = false;
+          this.setState({ orbisUrl });
+        })
+        .catch(err => {
+          target.disabled = false;
+          this.setState({ orbisUrl: 'Error - ' + err });
+        });
+    });
+  }
+
+  /**
+   * Handler for changing cmdr name
+   * @param {SyntheticEvent} e React Event
+   */
+  orbisPasswordHandler(e) {
+    let password = e.target.value;
+    this.setState({ orbisCreds: { email: this.state.orbisCreds.email, password } }, () => {
+      Persist.setOrbisCreds(this.state.orbisCreds);
+    });
+  }
+
+  /**
+   * Handler for changing cmdr name
+   * @param {SyntheticEvent} e React Event
+   */
+  orbisUsername(e) {
+    let orbisUsername = e.target.value;
+    this.setState({ orbisCreds: { email: orbisUsername, password: this.state.orbisCreds.password } }, () => {
+      Persist.setOrbisCreds(this.state.orbisCreds);
+    });
  }

  /**
@@ -40,16 +76,23 @@ export default class ModalOrbis extends TranslatedComponent {
   */
  render() {
    let translate = this.context.language.translate;
+    this.orbisPasswordHandler = this.orbisPasswordHandler.bind(this);
+    this.orbisUsername = this.orbisUsername.bind(this);
+    this.sendToOrbis = this.sendToOrbis.bind(this);

    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
      <h2>{translate('permalink')}</h2>
      <br/>
-      <h3>{translate('URL')}</h3>
-      <input value={this.props.url} size={40} readOnly onFocus={ (e) => e.target.select() }/>
+      <h3>{translate('orbis email')}</h3>
+      <input defaultValue={this.state.orbisCreds.email} size={40} onChange={this.orbisUsername} onFocus={ (e) => e.target.select() }/>
+      <br/><br/>
+      <h3>{translate('orbis password')}</h3>
+      <input defaultValue={this.state.orbisCreds.password} size={40} onChange={this.orbisPasswordHandler} type={'password'} onFocus={ (e) => e.target.select() }/>
      <br/><br/>
      <h3 >{translate('shortened')}</h3>
      <input value={this.state.orbisUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>
      <br/><br/>
+      <button className={'l cb dismiss cap'} disabled={!!this.state.failed} onClick={this.sendToOrbis}>{translate('PHASE_UPLOAD_ORBIS')}</button>
      <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
    </div>;
  }
--- a/src/app/components/ModalShoppingList.jsx
+++ b/src/app/components/ModalShoppingList.jsx
@@ -208,7 +208,7 @@ export default class ModalShoppingList extends TranslatedComponent {
  }

  /**
-   * Handler for changing roll amounts
+   * Handler for changing cmdr name
   * @param {SyntheticEvent} e React Event
   */
  cmdrChangeHandler(e) {
--- a/src/app/components/SvgIcons.jsx
+++ b/src/app/components/SvgIcons.jsx
@@ -228,6 +228,30 @@ export class LinkIcon extends SvgIcon {
  }
 }

+/**
+ * Link / Permalink / Chain
+ */
+export class OrbisIcon extends SvgIcon {
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return (
+      <g transform="scale(.037296)">
+        <path d="m429 319c60.75 0 110 49.248 110 110 0 60.75-49.247 110-110 110s-110-49.247-110-110c0-60.749 49.248-110 110-110m0-20c-34.724 0-67.369 13.522-91.922 38.075s-38.075 57.198-38.075 91.922 13.522 67.369 38.075 91.922c24.553 24.554 57.198 38.075 91.922 38.075s67.369-13.521 91.922-38.075c24.554-24.553 38.075-57.198 38.075-91.922s-13.521-67.369-38.075-91.922c-24.553-24.553-57.198-38.075-91.922-38.075z" />
+        <path d="m429 235c107.14 0 194 86.855 194 194s-86.855 194-194 194-194-86.855-194-194 86.855-194 194-194m0-20c-28.881 0-56.908 5.661-83.304 16.825-25.485 10.779-48.368 26.207-68.016 45.853-19.646 19.647-35.074 42.53-45.853 68.015-11.163 26.396-16.824 54.423-16.824 83.304s5.661 56.908 16.825 83.304c10.779 25.484 26.207 48.368 45.853 68.016 19.647 19.646 42.53 35.073 68.015 45.854 26.396 11.164 54.423 16.825 83.304 16.825s56.908-5.661 83.304-16.825c25.484-10.779 48.368-26.206 68.016-45.854 19.646-19.646 35.073-42.53 45.854-68.016 11.164-26.396 16.825-54.423 16.825-83.304s-5.661-56.908-16.825-83.304c-10.779-25.485-26.206-48.368-45.854-68.015-19.646-19.646-42.53-35.074-68.016-45.853-26.396-11.164-54.423-16.825-83.304-16.825z" />
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z"/>
+        <path d="m429 63c202.14 0 366 163.86 366 366s-163.86 366-366 366-366-163.86-366-366 163.86-366 366-366m0-20c-52.101 0-102.65 10.208-150.25 30.342-45.966 19.442-87.244 47.271-122.69 82.714s-63.272 76.721-82.714 122.69c-20.134 47.601-30.342 98.153-30.342 150.25s10.208 102.65 30.342 150.25c19.442 45.967 47.271 87.244 82.714 122.69 35.443 35.442 76.721 63.271 122.69 82.715 47.601 20.133 98.153 30.342 150.25 30.342s102.65-10.209 150.25-30.342c45.967-19.442 87.244-47.271 122.69-82.715 35.441-35.442 63.271-76.721 82.714-122.69 20.133-47.601 30.342-98.153 30.342-150.25s-10.209-102.65-30.342-150.25c-19.442-45.966-47.271-87.244-82.714-122.69s-76.722-63.272-122.69-82.714c-47.601-20.134-98.153-30.342-150.25-30.342z" />
+        <path d="m429 20c225.88 0 409 183.11 409 409s-183.11 409-409 409-409-183.11-409-409 183.11-409 409-409m0-20c-57.905 0-114.09 11.345-166.99 33.721-51.087 21.608-96.963 52.538-136.36 91.93s-70.321 85.269-91.93 136.36c-22.376 52.902-33.721 109.09-33.721 166.99s11.345 114.09 33.721 166.99c21.608 51.087 52.538 96.964 91.93 136.35 39.392 39.392 85.269 70.321 136.36 91.931 52.902 22.375 109.09 33.721 166.99 33.721s114.09-11.346 166.99-33.721c51.087-21.608 96.964-52.538 136.35-91.931 39.392-39.392 70.321-85.269 91.931-136.35 22.375-52.902 33.721-109.09 33.721-166.99s-11.346-114.09-33.721-166.99c-21.608-51.087-52.538-96.963-91.931-136.36-39.392-39.392-85.269-70.321-136.35-91.93-52.902-22.376-109.09-33.721-166.99-33.721z"/>
+        <path d="m155.34 679.12 173.25-190.21-15.626-13.721-170.9 190.4zm31.01 31.714 202.41-169.1-16.418-14.417-198.76 170.43z"/>
+        <path d="m702.66 178.87-173.25 190.21 15.625 13.721 170.9-190.4zm-31.01-31.714-202.41 169.1 16.418 14.417 198.76-170.43z" />
+        <rect transform="matrix(-.7071 -.7071 .7071 -.7071 429.34 1036.2)" x="387.09" y="420.77" width="84.379" height="16.859" />
+    </g>);
+  }
+}
+
+
 /**
 * Material
 */
--- a/src/app/i18n/en.json
+++ b/src/app/i18n/en.json
--- a/src/app/pages/OutfittingPage.jsx
+++ b/src/app/pages/OutfittingPage.jsx
@@ -7,9 +7,20 @@ import Router from '../Router';
 import Persist from '../stores/Persist';
 import * as Utils from '../utils/UtilityFunctions';
 import Ship from '../shipyard/Ship';
+import * as _ from 'lodash';
 import { toDetailedBuild } from '../shipyard/Serializer';
 import { outfitURL } from '../utils/UrlGenerators';
-import { FloppyDisk, Bin, Switch, Download, Reload, LinkIcon, ShoppingIcon, MatIcon } from '../components/SvgIcons';
+import {
+  FloppyDisk,
+  Bin,
+  Switch,
+  Download,
+  Reload,
+  LinkIcon,
+  ShoppingIcon,
+  MatIcon,
+  OrbisIcon
+} from '../components/SvgIcons';
 import LZString from 'lz-string';
 import ShipSummaryTable from '../components/ShipSummaryTable';
 import StandardSlotSection from '../components/StandardSlotSection';
@@ -26,6 +37,7 @@ import OutfittingSubpages from '../components/OutfittingSubpages';
 import ModalExport from '../components/ModalExport';
 import ModalPermalink from '../components/ModalPermalink';
 import ModalShoppingList from '../components/ModalShoppingList';
+import ModalOrbis from '../components/ModalOrbis';

 /**
 * Document Title Generator
@@ -493,6 +505,22 @@ export default class OutfittingPage extends Page {
    this.context.showModal(<ModalPermalink url={window.location.href}/>);
  }

+  /**
+   * Generate Orbis link
+   */
+  _genOrbis() {
+    const data = {};
+    const ship = _.cloneDeep(this.state.ship);
+    console.log(this.state);
+    ship.coriolisId = ship.id;
+    data.coriolisShip = ship;
+    data.title = this.state.buildName;
+    data.description = this.state.buildName;
+    data.ShipName = ship.id;
+    data.Ship = ship.id;
+    this.context.showModal(<ModalOrbis ship={data}/>);
+  }
+
  /**
   * Open up a window for EDDB with a shopping list of our components
   */
@@ -616,6 +644,9 @@ export default class OutfittingPage extends Page {
            <button onClick={this._genShortlink} onMouseOver={termtip.bind(null, 'shortlink')} onMouseOut={hide}>
              <LinkIcon className='lg' />
            </button>
+            <button onClick={this._genOrbis} disabled={true} onMouseOver={termtip.bind(null, 'PHASE_UPLOAD_ORBIS')} onMouseOut={hide}>
+              <OrbisIcon className='lg' />
+            </button>
            <button onClick={this._genShoppingList} onMouseOver={termtip.bind(null, 'PHRASE_SHOPPING_MATS')} onMouseOut={hide}>
              <MatIcon className='lg' />
            </button>
--- a/src/app/stores/Persist.js
+++ b/src/app/stores/Persist.js
@@ -15,6 +15,7 @@ const LS_KEY_SIZE_RATIO = 'sizeRatio';
 const LS_KEY_TOOLTIPS = 'tooltips';
 const LS_KEY_MODULE_RESISTANCES = 'moduleResistances';
 const LS_KEY_ROLLS = 'matsPerGrade';
+const LS_KEY_ORBIS = 'orbis';

 let LS;

@@ -95,6 +96,7 @@ export class Persist extends EventEmitter {
    let buildJson = _get(LS_KEY_BUILDS);
    let comparisonJson = _get(LS_KEY_COMPARISONS);

+    this.orbisCreds = _get(LS_KEY_ORBIS) || { email: '', password: '' };
    this.onStorageChange = this.onStorageChange.bind(this);
    this.langCode = _getString(LS_KEY_LANG) || 'en';
    this.insurance = insurance && Insurance[insurance.toLowerCase()] !== undefined ? insurance : 'standard';
@@ -168,6 +170,10 @@ export class Persist extends EventEmitter {
          this.matsPerGrade = JSON.parse(newValue);
          this.emit('matsPerGrade', this.matsPerGrade);
          break;
+        case LS_KEY_ORBIS:
+          this.orbisCreds = JSON.parse(newValue);
+          this.emit('orbis', this.orbisCreds);
+          break;
      }
    } catch (e) {
      // On JSON.Parse Error - don't sync or do anything
@@ -193,6 +199,24 @@ export class Persist extends EventEmitter {
    this.emit('language', langCode);
  }

+  /**
+   * Get the current orbis.zone credentials
+   * @return {String} language code
+   */
+  getOrbisCreds() {
+    return this.orbisCreds;
+  };
+
+  /**
+   * Update and save the orbis.zone credentials
+   * @param {Object} creds object with username and password properties.
+   */
+  setOrbisCreds(creds) {
+    this.langCode = creds;
+    _put(LS_KEY_ORBIS, creds);
+    this.emit('orbis', creds);
+  }
+
  /**
   * Show tooltips setting
   * @param  {boolean} show Optional - update setting
--- a/src/app/utils/ShortenUrl.js
+++ b/src/app/utils/ShortenUrl.js
@@ -1,5 +1,6 @@
 import request from 'superagent';

+const agent = request.agent();

 /**
 * Shorten a URL
@@ -95,29 +96,46 @@ function orbisShorten(url, success, error) {
 }

 const API_ORBIS = 'http://localhost:3000/builds/add';
+const API_ORBIS_LOGIN = 'http://localhost:3000/login';
+
 /**
 * Upload to Orbis
 * @param  {object} ship        The URL to shorten
- * @param  {function} success   Success callback
- * @param  {function} error     Failure/Error callback
+ * @param {object} creds Orbis credentials
+ * @return {Promise<any>} Either a URL or error message.
 */
-export function orbisUpload(ship, success, error) {
-  if (window.navigator.onLine) {
-    try {
-      request.post(API_ORBIS)
-        .send(ship)
-        .end(function(err, response) {
-          if (err) {
-            error('Bad Request');
-          } else {
-            success(response.body.link);
-          }
-        });
-    } catch (e) {
-      console.log(e);
-      error(e.message ? e.message : e);
+export function orbisUpload(ship, creds) {
+  return new Promise(async (resolve, reject) => {
+    if (window.navigator.onLine) {
+      try {
+        agent
+          .post(API_ORBIS_LOGIN)
+          .send(creds)
+          .withCredentials()
+          .end(function(err) {
+            if (err) {
+              reject('Bad Request');
+            } else {
+              agent
+                .post(API_ORBIS)
+                .withCredentials()
+                .set('Content-Type', 'application/json')
+                .send(ship)
+                .end(function(err, response) {
+                  if (err) {
+                    reject('Bad Request');
+                  } else {
+                    resolve(response.body.link);
+                  }
+                });
+            }
+          });
+      } catch (e) {
+        console.log(e);
+        reject(e.message ? e.message : e);
+      }
+    } else {
+      reject('Not Online');
    }
-  } else {
-    error('Not Online');
-  }
+  });
 }