From d1cb0fdcb5226643f60a796b783ca0dfbad7f735 Mon Sep 17 00:00:00 2001
From: Alex Williams <alex.williams@brighter-technology.com>
Date: Tue, 9 Jul 2024 20:10:04 +0100
Subject: [PATCH] Modal Changes to export and link shortener

---
 src/app/components/ModalPermalink.jsx    | 20 ++++++-
 src/app/components/ModalShoppingList.jsx | 55 +++++++++--------
 src/app/i18n/en.json                     |  7 ++-
 src/app/stores/Persist.js                |  4 +-
 src/less/modal.less                      | 76 +++++++++++++++++-------
 5 files changed, 108 insertions(+), 54 deletions(-)

diff --git a/src/app/components/ModalPermalink.jsx b/src/app/components/ModalPermalink.jsx
index 96d611e6..975e97bc 100644
--- a/src/app/components/ModalPermalink.jsx
+++ b/src/app/components/ModalPermalink.jsx
@@ -34,6 +34,18 @@ export default class ModalPermalink extends TranslatedComponent {
     );
   }
 
+  /**
+   * Copy the shortened URL to the clipboard
+   * @param  {Event} e Click event
+   * @return {void}
+   */
+  copyShortLink() {
+    let copyText = document.getElementById("shortenedUrl");
+    // Copy the text inside the shortendUrl input to the clipboard
+    copyText.select();
+    document.execCommand("copy");
+  }
+
   /**
    * Render the modal
    * @return {React.Component} Modal Content
@@ -42,15 +54,17 @@ export default class ModalPermalink extends TranslatedComponent {
     let translate = this.context.language.translate;
 
     return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('permalink')}</h2>
+      <h3>{translate('permalink')}</h3>
       <br/>
       <h3>{translate('URL')}</h3>
       <input value={this.props.url} size={40} readOnly onFocus={ (e) => e.target.select() }/>
       <br/><br/>
       <h3 >{translate('shortened')}</h3>
-      <input value={this.state.shortenedUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/>
+      <input id={'shortenedUrl'} value={this.state.shortenedUrl} readOnly size={25} onFocus={ (e) => e.target.select() }/><button className={'cb dismiss cap'} onClick={this.copyShortLink}>{translate('copy to clipboard')}</button>
       <br/><br/>
-      <p>s.orbis.zone is the new URL shortener domain, old eddp.co urls are considered end of life and could go down at any moment. Sorry for any inconvenience.</p>
+      <hr />
+      <p>s.orbis.zone is the URL shortener domain. These links should persist indefinitely going forward. If for some reason there is a problem with the link shortening process, please report it in the EDCD Discord Server.</p>
+      <hr />
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;
   }
diff --git a/src/app/components/ModalShoppingList.jsx b/src/app/components/ModalShoppingList.jsx
index b1f21e15..5b96b29b 100644
--- a/src/app/components/ModalShoppingList.jsx
+++ b/src/app/components/ModalShoppingList.jsx
@@ -355,41 +355,46 @@ export default class ModalShoppingList extends TranslatedComponent {
     this.sendToEDEng = this.sendToEDEng.bind(this);
     this.sendToEDOMH = this.sendToEDOMH.bind(this);
     return <div className='modal' onClick={ (e) => e.stopPropagation() }>
-      <h2>{translate('PHRASE_SHOPPING_MATS')}</h2>
-      <p>{translate('PHRASE_DIFFERENT_ROLLS')}</p>
-      {/* <label>{translate('Grade 1 rolls ')}</label>
-      <input id={1} type={'number'} min={0} defaultValue={this.state.matsPerGrade[1]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 2 rolls ')}</label>
-      <input id={2} type={'number'} min={0} defaultValue={this.state.matsPerGrade[2]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 3 rolls ')}</label>
-      <input id={3} type={'number'} min={0} value={this.state.matsPerGrade[3]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 4 rolls ')}</label>
-      <input id={4} type={'number'} min={0} value={this.state.matsPerGrade[4]} onChange={this.changeHandler} />
-      <br/>
-      <label>{translate('Grade 5 rolls ')}</label>
-      <input id={5} type={'number'} min={0} value={this.state.matsPerGrade[5]} onChange={this.changeHandler} /> */}
+      <h3>{translate('PHRASE_SHOPPING_MATS')}</h3>
       <div>
-        <textarea className='cb json' readOnly value={this.state.matsList} />
+      <p>{translate('PHRASE_DIFFERENT_ROLLS')}</p>
+        <label>{translate('G1')}</label>
+        <input className={'groll'} id={1} type={'number'} min={0} defaultValue={this.state.matsPerGrade[1]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G2')}</label>
+        <input className={'groll'} id={2} type={'number'} min={0} defaultValue={this.state.matsPerGrade[2]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G3')}</label>
+        <input className={'groll'} id={3} type={'number'} min={0} value={this.state.matsPerGrade[3]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G4')}</label>
+        <input className={'groll'} id={4} type={'number'} min={0} value={this.state.matsPerGrade[4]} onChange={this.changeHandler} />
+        &nbsp;|&nbsp;<label>{translate('G5')}</label>
+        <input className={'groll'} id={5} type={'number'} min={0} value={this.state.matsPerGrade[5]} onChange={this.changeHandler} />
       </div>
-      <p hidden={compatible} id={'browserbad'} className={'l'}>{translate('PHRASE_FIREFOX_EDENGINEER')}</p>
-      <p hidden={!this.state.failed} id={'failed'} className={'l'}>{translate('PHRASE_FAILED_TO_FIND_EDENGINEER')}</p>
+
+      <div>
+        <p>{translate('PHRASE_ALL_MODULES_ALL_ROLLS')}</p>
+        <textarea className='cb json' readOnly value={this.state.matsList} />
+        <p>{translate('PHRASE_FOR_FINER_CONTROL')}</p>
+      </div>
+
       <div id='edengineer' display={this.display} hidden={!!this.state.failed && !compatible}>
-        <label hidden={!compatible || !!this.state.failed} className={'l cap'}>{translate('CMDR Name')}</label>
-        <br/>
-        <select hidden={!compatible || !!this.state.failed} className={'cmdr-select l cap'} onChange={this.cmdrChangeHandler} defaultValue={this.state.cmdrName}>
+      <hr />
+        <h3>ED Engineer</h3>
+        <h4 hidden={compatible} id={'browserbad'} className={'l'}>{translate('PHRASE_FIREFOX_EDENGINEER')}</h4>
+        <h4 hidden={!this.state.failed} id={'failed'} className={'l'}>{translate('PHRASE_FAILED_TO_FIND_EDENGINEER')}</h4>
+        <label for='cmdr-select' hidden={!!this.state.failed || !compatible} className={'l cap'}>{translate('CMDR Name:')}</label>
+        <select id='cmdr-select' hidden={!!this.state.failed || !compatible} className={'cmdr-select l cap'} onChange={this.cmdrChangeHandler} defaultValue={this.state.cmdrName}>
           {this.state.cmdrs.map(e => <option key={e}>{e}</option>)}
         </select>
         <br/>
-          <button className={'l cb dismiss cap'} hidden={!this.state.failed} disabled={!!this.state.failed || !compatible} onClick={this.sendToEDEng}>{translate('Send to EDEngineer')}</button>
+          <button className={'l cb dismiss cap'} disabled={!!this.state.failed || !compatible} onClick={this.sendToEDEng}>{translate('Send to EDEngineer')}</button>
       </div>
       <div id='edomh'>
+      <hr />
+        <h3>ED Odyssey Materials Helper</h3>
         <p>{translate('PHRASE_ENSURE_EDOMH')}</p>
-        <button style={{marginTop: 5}} className={'l cb dismiss cap'} onClick={this.sendToEDOMH}>{translate('Send to EDOMH')}</button>
+        <button className={'l cb dismiss cap'} onClick={this.sendToEDOMH}>{translate('Send to EDOMH')}</button>
       </div>
-
+      <hr />
       <button className={'r dismiss cap'} onClick={this.context.hideModal}>{translate('close')}</button>
     </div>;
   }
diff --git a/src/app/i18n/en.json b/src/app/i18n/en.json
index eef0c6ff..d3dba4ba 100644
--- a/src/app/i18n/en.json
+++ b/src/app/i18n/en.json
@@ -26,7 +26,9 @@
     "PHRASE_NO_SPECIAL": "No experimental effect",
     "PHRASE_SHOPPING_LIST": "Stations that sell this build",
     "PHRASE_SHOPPING_MATS": "Materials needed for this build",
-    "PHRASE_DIFFERENT_ROLLS": "NOTE: ED Engineer and/or EDOMH likely have their own 'rolls' configuration, so material requirements may differ!",
+    "PHRASE_DIFFERENT_ROLLS": "Material requirements will differ, based on the number of rolls per grade, per module.",
+    "PHRASE_FOR_FINER_CONTROL": "For finer control over rolls per grade/module, a more accurate list of required mats and help in finding those mats, please consider using the export options below to ED Odyssey Materials Helper, or ED Engineer, or use the Crafting Lists feature on inara.cz.",
+    "PHRASE_ALL_MODULES_ALL_ROLLS": "The list below, assumes standard to G5 Engineered (approx 80% - 90%) with the rolls above, for ALL engineered modules in the build. You can adjust the number of rolls above for each grade, however it will still apply to all engineered modules in the build.",
     "PHRASE_REFIT_SHOPPING_LIST": "Stations that sell required modules",
     "PHRASE_TOTAL_EFFECTIVE_SHIELD": "Total amount of damage that can be taken from each damage type, if using all shield cells",
     "PHRASE_TIME_TO_LOSE_SHIELDS": "Shields will hold for",
@@ -82,8 +84,7 @@
     "TT_SUMMARY_UNLADEN_TOTAL_JUMP": "Farthest possible range with no cargo, a full fuel tank, and jumping as far as possible each time",
     "TT_SUMMARY_LADEN_TOTAL_JUMP": "Farthest possible range with full cargo, a full fuel tank, and jumping as far as possible each time",
     "HELP_MODIFICATIONS_MENU": "Click on a number to enter a new value, or drag along the bar for small changes",
-    "PHRASE_FAIL_EDENGINEER": "Failed to send to EDEngineer (Launch EDEngineer and make sure the API is started then refresh the page.)",
-    "PHRASE_ENSURE_EDOMH": "Ensure EDO Material Helper is installed and registered to handle edomh:// urls, else this button will do nothing!",
+    "PHRASE_ENSURE_EDOMH": "Ensure ED Odyssey Material Helper is installed and registered to handle edomh:// urls, else this button will do nothing!",
     "PHRASE_FIREFOX_EDENGINEER": "Sending to EDEngineer is not compatible with Firefox's security settings. Please try again with Chrome.",
     "PHRASE_FAILED_TO_FIND_EDENGINEER": "Failed to find ED Engineer API. Please ensure it is running and try again.",
     "MISSING_MODULES": "Missing Modules",
diff --git a/src/app/stores/Persist.js b/src/app/stores/Persist.js
index 4ed0680d..6f3daa3f 100644
--- a/src/app/stores/Persist.js
+++ b/src/app/stores/Persist.js
@@ -108,9 +108,9 @@ export class Persist extends EventEmitter {
     this.matsPerGrade = matsPerGrade || {
       1: 2,
       2: 2,
-      3: 4,
+      3: 3,
       4: 4,
-      5: 10
+      5: 5
     };
     this.cmdrName = cmdrName || { selected: '', cmdrs: [] };
     this.tooltipsEnabled = tips === null ? true : tips;
diff --git a/src/less/modal.less b/src/less/modal.less
index 07c0a74d..c5699920 100755
--- a/src/less/modal.less
+++ b/src/less/modal.less
@@ -42,32 +42,66 @@
     margin: 0;
   }
 
+  h4 {
+    text-transform: uppercase;
+    font-family: @fStandard;
+    font-weight: normal;
+    font-size: 1em;
+    margin: 1em;
+    color: @warning;
+  }
+
   p {
-    clear: left;
-    padding: 30, 0, 0, 0;
+    margin: 1em;
+    text-wrap: pretty;
   }
 
   button {
-    margin: 100px, 0;
+    clear: bottom;
+    margin: 5px;
   }
-}
 
-textarea {
-  background: @primary-bg;
-  border: none;
-  outline: none;
-  color: @primary-disabled;
-
-  &.json {
-    display:block;
-    width:100%;
-    min-height: 10em;
-    resize: vertical;
-    user-select: text;
-    margin:2em 0;
+  hr {
+    clear: both;
+    margin: 15px, 10px, 15px, 10px;
+    padding: top, 5;
   }
-}
 
-.dismiss {
-  background-color: @primary-bg;
-}
+  select {
+    clear: bottom;
+    margin: 10px;
+    width: 50%;
+  }
+
+  label {
+    clear: bottom;
+    margin: 20px;
+    color: @primary;
+  }
+
+  .groll {
+    width: 6%;
+    margin: 5px;
+    text-align: center;
+  }
+
+  textarea {
+    background: @primary-bg;
+    border: none;
+    outline: none;
+    color: @primary-disabled;
+
+    &.json {
+      display:block;
+      width:100%;
+      min-height: 10em;
+      resize: vertical;
+      user-select: text;
+      margin:1em 0;
+    }
+  }
+
+  .dismiss {
+    background-color: @primary-bg;
+  }
+}
\ No newline at end of file