Simplify options

gtkirk · Mar 3, 2024 · 0a9de3e · 0a9de3e
1 parent b8693ee
commit 0a9de3e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/map.js b/src/map.js
@@ -19,9 +19,7 @@ const DEFAULT_OPTIONS = {
         opacity: 0.25,
         smoothFactor: 1,
         overrideExisting: true,
-        singleColor: false,
-        detectColors: true,
-        highlightNew: false,
+        colorMode: 'detectColors',
     },
     markerOptions: {
         color: '#00FF00',
@@ -274,7 +272,7 @@ export default class GpxMap {
     getLineOptions(track, options = this.options) {
         let lineOptions = Object.assign({}, options.lineOptions);
 
-        if (lineOptions.detectColors) {
+        if (lineOptions.colorMode === 'detectColors') {
             if (track.sport === 'walking') {
                 lineOptions.color = '#0000ff';
             } else if (track.sport === 'running') {
@@ -285,7 +283,7 @@ export default class GpxMap {
                 lineOptions.color = '#ff0000';
             }
         }
-        else if (lineOptions.highlightNew)
+        else if (lineOptions.colorMode === 'highlightNew')
         {
             let newDate = new Date(options.newDate);
             if (track.timestamp > newDate)

diff --git a/src/ui.js b/src/ui.js
@@ -309,10 +309,6 @@ export function buildSettingsModal(tracks, opts, updateCallback) {
         }
     }
 
-    let singleColor = opts.lineOptions.singleColor ? 'checked' : '';
-    let detectColors = opts.lineOptions.detectColors ? 'checked' : '';
-    let highlightNew = opts.lineOptions.highlightNew ? 'checked' : '';
-
     let themes = AVAILABLE_THEMES.map(t => {
         let selected = (t === opts.theme) ? 'selected' : '';
         return `<option ${selected} value="${t}">${t}</option>`;
@@ -336,14 +332,14 @@ export function buildSettingsModal(tracks, opts, updateCallback) {
         <legend>GPS Track Options</legend>
 
         <div class="row">
-            <input name="colorMode" type="radio" id="singleColor" ${singleColor}>
+            <input name="colorMode" type="radio" id="singleColor" value="singleColor">
             <label for="singleColor">Single color</label>
             <input name="color" type="color" value=${opts.lineOptions.color}>
             <br/>
-            <input name="colorMode" type="radio" id="detectColors" ${detectColors}>
+            <input name="colorMode" type="radio" id="detectColors" value="detectColors">
             <label for="detectColors">Color based on activity type</label>
             <br/>
-            <input name="colorMode" type="radio" id="highlightNew" ${highlightNew}>
+            <input name="colorMode" type="radio" id="highlightNew" value="highlightNew">
             <label for="highlightNew">Highlight new activities</label>
             <input type="date" id="newDate" value="${newDate || ''}" min="1990-01-01" max="${maxDate}">
         </div>
@@ -433,32 +429,35 @@ export function buildSettingsModal(tracks, opts, updateCallback) {
             options.markerOptions[optionName] = elements[opt].value;
         }
 
-        for (let opt of ['overrideExisting', 'detectColors', 'singleColor', 'highlightNew']) {
+        for (let opt of ['overrideExisting']) {
             options.lineOptions[opt] = elements[opt].checked;
         }
 
         for (let opt of ['playbackRate']) {
             options.animationOptions[opt] = elements[opt].value;
         }
 
+        options.lineOptions.colorMode = elements.namedItem('colorMode').value;
+
         updateCallback(options);
     };
 
     modal.afterClose((modal) => {
-      applyOptions();
-      modal.destroy();
+        applyOptions();
+        modal.destroy();
     });
 
     modal.afterCreate(() => {
-      let elements = document.getElementById('settings').elements;
-      for (let opt of ['theme', 'color', 'weight', 'opacity', 'markerColor',
-                       'markerWeight', 'markerOpacity', 'markerRadius',
-                       'newDate', 'detectColors', 'singleColor', 'highlightNew', 'playbackRate']) {
-        elements[opt].addEventListener('change', applyOptions);
-      }
+        let elements = document.getElementById('settings').elements;
+
+        elements.namedItem('colorMode').value = opts.lineOptions.colorMode;
+        for (let opt of ['theme', 'color', 'weight', 'opacity', 'markerColor',
+                        'markerWeight', 'markerOpacity', 'markerRadius',
+                        'newDate', 'detectColors', 'singleColor', 'highlightNew']) {
+            elements[opt].addEventListener('change', applyOptions);
+        }
     });
 
-
     return modal;
 }