Filtering out tracks, routes and waypoints

src/components/drawing-selector/DrawingSelector.tsx

@@ -13,17 +13,21 @@ import { currentGpxId } from '../gpx-dialog';
 
 const id = getUri('drawingSelections', undefined);
 
-type SelectionType = 'ALL' | 'NONE' | 'CURRENT';
+type CompleteSelectionType = 'ALL' | 'NONE' | 'CURRENT';
+
+type RestrictedSelectionType = 'ALL' | 'NONE';
 
 type DrawingSelections = {
-  gpxSelection: SelectionType;
-  trkSelection: SelectionType;
-  wptSelection: SelectionType;
+  gpxSelection: CompleteSelectionType;
+  trkSelection: RestrictedSelectionType;
+  rteSelection: RestrictedSelectionType;
+  wptSelection: RestrictedSelectionType;
 };
 
 const defaultDrawingSelections: DrawingSelections = {
   gpxSelection: 'ALL',
   trkSelection: 'ALL',
+  rteSelection: 'ALL',
   wptSelection: 'ALL',
 };
 
@@ -62,19 +66,27 @@ const AllNoneCurrent: Component<{}> = (props) => {
   );
 };
 
+const AllNone: Component<{}> = (props) => {
+  return (
+    <>
+      <FormControlLabel
+        value='ALL'
+        control={<Radio />}
+        label='All'
+      ></FormControlLabel>
+      <FormControlLabel
+        value='NONE'
+        control={<Radio />}
+        label='None'
+      ></FormControlLabel>
+    </>
+  );
+};
+
 const gpxSelection = () => drawingSelections().gpxSelection;
 
-export const mustBeDrawn = (feature: Feature) => {
+const gpxMustBeDrawn = (feature: Feature) => {
   const id = feature.getId() as String;
-  const type = feature.get('type');
-  console.log({
-    caller: 'DrawingSelector / mustBeDrawn',
-    feature,
-    type,
-    id,
-    currentGpxId: currentGpxId(),
-    gpxSelection: gpxSelection(),
-  });
   if (gpxSelection() === 'ALL') {
     return true;
   }
@@ -84,6 +96,28 @@ export const mustBeDrawn = (feature: Feature) => {
   return false;
 };
 
+const typeMustBeDrawn = (feature: Feature) => {
+  const type = feature.get('type') as String;
+  if (type.startsWith('trk')) {
+    return drawingSelections().trkSelection !== 'NONE';
+  }
+  if (type === 'wpt') {
+    return drawingSelections().wptSelection !== 'NONE';
+  }
+  if (type === 'rte') {
+    return drawingSelections().rteSelection !== 'NONE';
+  }
+  return true;
+};
+
+export const mustBeDrawn = (feature: Feature) => {
+  console.log({
+    caller: 'DrawingSelector / mustBeDrawn',
+    feature,
+  });
+  return gpxMustBeDrawn(feature) && typeMustBeDrawn(feature);
+};
+
 const handleGpxSelectionChange = (ev: any) => {
   const value = ev.target.value;
   console.log({
@@ -99,6 +133,51 @@ const handleGpxSelectionChange = (ev: any) => {
   });
 };
 
+const handleTrkSelectionChange = (ev: any) => {
+  const value = ev.target.value;
+  console.log({
+    caller: 'DrawingSelector / handleTrkSelectionChange',
+    ev,
+    value,
+  });
+  const newDrawingSelections = drawingSelections();
+  newDrawingSelections.trkSelection = value;
+  dispatch({
+    action: 'putDrawingSelections',
+    params: { id, drawingSelections: newDrawingSelections },
+  });
+};
+
+const handleRteSelectionChange = (ev: any) => {
+  const value = ev.target.value;
+  console.log({
+    caller: 'DrawingSelector / handleRteSelectionChange',
+    ev,
+    value,
+  });
+  const newDrawingSelections = drawingSelections();
+  newDrawingSelections.rteSelection = value;
+  dispatch({
+    action: 'putDrawingSelections',
+    params: { id, drawingSelections: newDrawingSelections },
+  });
+};
+
+const handleWptSelectionChange = (ev: any) => {
+  const value = ev.target.value;
+  console.log({
+    caller: 'DrawingSelector / handleWptSelectionChange',
+    ev,
+    value,
+  });
+  const newDrawingSelections = drawingSelections();
+  newDrawingSelections.wptSelection = value;
+  dispatch({
+    action: 'putDrawingSelections',
+    params: { id, drawingSelections: newDrawingSelections },
+  });
+};
+
 const DrawingSelector: Component<{}> = (props) => {
   return (
     <Tree
@@ -112,6 +191,27 @@ const DrawingSelector: Component<{}> = (props) => {
           >
             <AllNoneCurrent />
           </RadioGroup>
+          <div>Tracks</div>
+          <RadioGroup
+            defaultValue={drawingSelections()?.trkSelection}
+            onChange={handleTrkSelectionChange}
+          >
+            <AllNone />
+          </RadioGroup>
+          <div>Routes</div>
+          <RadioGroup
+            defaultValue={drawingSelections()?.rteSelection}
+            onChange={handleRteSelectionChange}
+          >
+            <AllNone />
+          </RadioGroup>{' '}
+          <div>Waypoints</div>
+          <RadioGroup
+            defaultValue={drawingSelections()?.wptSelection}
+            onChange={handleWptSelectionChange}
+          >
+            <AllNone />
+          </RadioGroup>
         </>
       }
       subTree={undefined}