Add "Remove nodes" button

frafra · May 12, 2022 · 3b82742 · 3b82742
1 parent b7e524e
commit 3b82742
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/web/src/components/actions.js b/web/src/components/actions.js
@@ -6,6 +6,7 @@ const classNames = require('classnames');
 
 function Actions({ state, setState }) {
   const busy = state === states.LOADING;
+  const loaded = state === states.LOADED;
   return (
     <>
       <button
@@ -16,7 +17,7 @@ function Actions({ state, setState }) {
       >
         <i className="fas fa-sync-alt" />
         &nbsp;
-        <span>Show data </span>
+        <span>Show nodes </span>
         <span
           className={classNames('spinner-border', 'spinner-border-sm', {
             'd-none': !busy,
@@ -25,6 +26,16 @@ function Actions({ state, setState }) {
         />
         <span className="visually-hidden">Loading...</span>
       </button>
+      <button
+        id="clean"
+        className={classNames('btn', 'btn-secondary', { disabled: !loaded })}
+        type="button"
+        onClick={(_) => setState(states.CLEAN)}
+      >
+        <i className="fas fa-trash-alt" />
+        &nbsp;
+        <span>Remove nodes </span>
+      </button>
       {state === states.ERROR ? (
         <p>
           Something went wrong! Please try again later or{' '}

diff --git a/web/src/constants.js b/web/src/constants.js
@@ -7,6 +7,7 @@ export const tileURL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 export const dataTileURL = 'tiles/{z}/{x}/{y}.png';
 
 export const states = {
+  CLEAN: 'clean',
   LOADING: 'loading',
   LOADED: 'loaded',
   ERROR: 'error',

diff --git a/web/src/main.js b/web/src/main.js
@@ -48,12 +48,13 @@ function App() {
             }
           });
         break;
-      case states.LOADED:
-        break;
       case states.ERROR:
+      case states.CLEAN:
         setBoundsLoaded();
         setDownloadLink(null);
+        setGeojson(null);
         break;
+      case states.LOADED:
       default:
         break;
     }