Merge branch 'fix-settings-link'

bartificer · Oct 22, 2024 · 3094f9a · 3094f9a
2 parents 68f470c + 3204016
commit 3094f9a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.html b/src/index.html
@@ -318,24 +318,26 @@ <h5>Padding</h5>
                       </div> <!-- /collapseSettings -->
                     </div> <!-- /accordion-item for settings -->
 
-                    <!-- settings-link -->
-                    <div id="settings-link" class="row g-1 mt-1 mb-3">
-                      <div class="mt-2 col-md-8 col-md-8">
+                    <!-- configUrlBox -->
+                    <div id="configUrlBox" class="row g-1 mt-1 mb-3">
+                      <div class="mt-2 col-md-8">
                         <div class="input-group">
-                          <label for="savedSettingsLink" class="input-group-text">Settings link</label>
+                          <label for="configUrl" class="input-group-text">
+                            <button id="copyConfigUrlBtn"
+                            class="list-group-item px-0"
+                            aria-label="Copy link"><i class="me-3 bi bi-copy"></i>
+                            </button>
+                            Copy Config URL
+                          </label>
                           <input class="form-control rounded-end" type="text" placeholder="" readonly disabled="disabled"
-                            name="savedSettingsLink" id="savedSettingsLink" minlength="2" maxlength="20" size="1" />
+                                 name="configUrl" id="configUrl" minlength="2" maxlength="20" size="1" />
                         </div>
-                       </div>
-                       <div class="mt-2 col-sm-8 col-md-4">
-                        <div class="input-group">
-                          <button id="copySettingsLink"
-                          class="list-group-item px-0"
-                          aria-label="Copy link"><i class="me-3 bi bi-copy"></i>Copy
-                        </button>
+                        <div id="bookmarkConfigUrl" class="form-text">Bookmark Config URL to recreate the current settings config
                         </div>
-                      </div>
-                    </div> <!-- /settings-link -->
+
+                       </div>
+
+                    </div> <!-- /configUrlBox -->
 
                   </div> <!-- /accordion configOptions -->
                 <!-- /div> <! - - /accordion body - - >

diff --git a/src/web/configcontroller.mjs b/src/web/configcontroller.mjs
@@ -64,7 +64,7 @@ class ConfigController {
 
     this.#view.bindLoadConfig(this.importSettings);
     this.#view.bindSaveConfig(this.exportSettings);
-    this.#view.bindCopySettingsLink(this.copyUrl);
+    this.#view.bindConfigUrlBox(this.copyUrl);
 
     log.trace('ConfigController constructor executed');
   }
@@ -102,13 +102,13 @@ class ConfigController {
   };
 
   /**
-   * Update the settingsLink content
+   * Update the configUrl content
    * @param settings
    */
   updateLink(settings) {
     log.trace(`updateLink: ${JSON.stringify(settings)}`);
     const url = this.toUrl(settings);
-    this.#view.updateLink(url);
+    this.#view.updateConfigUrl(url);
   }
 
   /**
@@ -134,7 +134,7 @@ class ConfigController {
       // without doing this stringify action
       this.#model.setCustomPreset(settings);
       this.#settingsController.updateSettings(settings);
-      this.#view.updateLink(window.location);
+      this.#view.updateConfigUrl(window.location);
     }
   }
 

diff --git a/src/web/configview.mjs b/src/web/configview.mjs
@@ -11,22 +11,26 @@ import log from 'loglevel';
  */
 class ConfigView {
   /**
-   * @private {jQuery} savedSettingsLink - Readonly text input to display link
+   * @private {jQuery} configUrl - Readonly text input to display the url
    * encoded settings
    */
-  #savedSettingsLink;
+  #configUrl;
 
   /**
-   * @private {Object} copySettingsLink - copy button to copy the url
+   * @private {Object} configURLBtn - copy button to copy the url
    */
-  #copySettingsLink;
+  #configUrlBtn;
 
-  #settingsDiv;
+  /*
+   * @private {Object} configUrlBox - div containing the button and input text
+   * for the config url
+   */
+  #configUrlBox;
 
   constructor() {
-    this.#savedSettingsLink = $('#savedSettingsLink');
-    this.#copySettingsLink = $('#copySettingsLink');
-    this.#settingsDiv = $('#settings-link');
+    this.#configUrl = $('#configUrl');
+    this.#configUrlBtn = $('#copyConfigUrlBtn');
+    this.#configUrlBox = $('#configUrlBox');
   }
 
   /**
@@ -75,31 +79,31 @@ class ConfigView {
   }
 
   /**
-   * Bind the copy button in the settings link
+   * Bind the copy button in the configUrlBox
    *
    * @param {Function} handle - pass control to the Controller to save the link
    */
-  bindCopySettingsLink(handle) {
-    this.#settingsDiv.on('click', () => {
-      this.#savedSettingsLink.select();
-      handle(this.#savedSettingsLink.val());
-      this.#copySettingsLink.children('i')
+  bindConfigUrlBox(handle) {
+    this.#configUrlBox.on('click', () => {
+      this.#configUrl.select();
+      handle(this.#configUrl.val());
+      this.#configUrlBtn.children('i')
         .removeClass('bi-copy')
         .fadeIn(500).addClass('bi-check');
       setTimeout(() => {
-        this.#copySettingsLink.children('i')
+        this.#configUrlBtn.children('i')
           .removeClass('bi-check').addClass('bi-copy');
       }, 1000);
     });
   };
 
   /**
-   * Update the settings link
+   * Update the config url
    *
    * @param {URL} url - the url to display
    */
-  updateLink(url) {
-    this.#savedSettingsLink.val(url);
+  updateConfigUrl(url) {
+    this.#configUrl.val(url);
   }
 }