Fix: #31 show the descriptions of the presets when selected to give m…

…ore information about the use of the preset

src/index.html

@@ -93,6 +93,8 @@ <h2 class="accordion-header">
                         <div class="accordion-body">
                           <div id="preset-btn-group" class="row" role="group" aria-label="Preset group">
                           </div>
+                          <div id="presetDescription"
+                               class="row mt-2 p-1 border border-primary-subtle bg-primary-subtle rounded-2"></div>
                         </div>
                       </div>
                     </div>

src/web/presetcontroller.mjs

@@ -50,6 +50,8 @@ class PresetController {
 
     // Tell the SettingsController to update
     const config = this.#model.getPreset().config();
+    const description = this.#model.getPreset().description();
+    this.#view.displayDescription(description);
     this.#settingsController.updateSettings(config);
   };
 }

src/web/presetview.mjs

@@ -16,13 +16,21 @@ class PresetView {
    */
   #presetHeader;
 
+  /**
+   * @private presetDescription - reference to the HTML div that will contain
+   * the description of the current preset
+   */
+  #presetDescription;
+
   /**
    * @constructor
    */
   constructor() {
     this.#presetGroup = $('#preset-btn-group');
     this.#presetHeader = $('#currentPreset');
+    this.#presetDescription = $('#presetDescription');
 
+    this.#presetDescription.hide();
     log.trace('PresetView constructor executed');
   };
 
@@ -47,6 +55,16 @@ class PresetView {
       this.#presetGroup.append(button);
     });
   };
+
+  /**
+   * This function shows the description of the currently selected preset
+   *
+   * @param {string} description - the description of the preset
+   */
+  displayDescription(description) {
+    this.#presetDescription.html(description).show();
+  }
+
   /**
    * This is the function that is called
    * when one of the preset buttons is clicked