Add icons to status updates.

concord-consortium · Jan 30, 2024 · 2eedfd4 · 2eedfd4
1 parent da22396
commit 2eedfd4
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 30 deletions.
diff --git a/src/assets/images/icon-done.svg b/src/assets/images/icon-done.svg
diff --git a/src/assets/images/icon-progress-indicator.svg b/src/assets/images/icon-progress-indicator.svg
diff --git a/src/assets/icon-warning.svg → src/assets/images/icon-warning.svg b/src/assets/icon-warning.svg → src/assets/images/icon-warning.svg
diff --git a/src/components/App.scss b/src/components/App.scss
@@ -38,33 +38,65 @@
     display: flex;
     align-items: center;
     width: 100%;
-    justify-content: right;
+    justify-content: space-between;
     margin: 21px 0;
 
-    .clear-data-button {
-      border: none;
-      color: #72bfca;
-      background-color: white;
-      cursor: pointer;
-    }
-    .get-data-button {
-      width: 82px;
-      height: 31px;
-      margin: 0 0 0 13px;
-      border-radius: 3px;
-      border: solid 1px #000;
-      background-color: #fff;
-      color: #000;
-      margin-right: 15px;
-      cursor: pointer;
-      &:hover {
-        background-color: rgba(198, 198, 198, 0.25);
+    .status-update {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 5px;
+      .status-icon {
+        .progress {
+         animation-name: spin;
+         animation-duration: 1000ms;
+         animation-iteration-count: infinite;
+
+        }
       }
-      &:disabled {
-        cursor: default;
-        color: #a2a2a2;
-        border: solid 1px #a2a2a2;
+      .status-message {
+        width: 120px;
       }
     }
+
+      .clear-data-button {
+        border: none;
+        color: #72bfca;
+        background-color: white;
+        cursor: pointer;
+        font-family: 'Montserrat', sans-serif;
+        padding: 0px;
+      }
+      .get-data-button {
+        width: 82px;
+        height: 31px;
+        margin-left: 13px;
+        border-radius: 3px;
+        border: solid 1px #000;
+        background-color: #fff;
+        color: #000;
+        font-family: 'Montserrat', sans-serif;
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(198, 198, 198, 0.25);
+        }
+        &:disabled {
+          cursor: default;
+          color: #a2a2a2;
+          border: solid 1px #a2a2a2;
+        }
+      }
+
+
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import dayjs from "dayjs";
 import { ClientNotification, addComponentListener, initializePlugin } from "@concord-consortium/codap-plugin-api";
 import { LocationPicker } from "./location-picker";
 import { DateRange } from "./date-range/date-range";
@@ -8,14 +9,16 @@ import { InfoModal } from "./info-modal";
 import { useStateContext } from "../hooks/use-state";
 import { adjustStationDataset, getWeatherStations } from "../utils/getWeatherStations";
 import { addNotificationHandler, createStationsDataset, guaranteeGlobal } from "../utils/codapHelpers";
-import InfoIcon from "../assets/images/icon-info.svg";
 import { useCODAPApi } from "../hooks/use-codap-api";
 import { composeURL, formatData } from "../utils/noaaApiHelper";
 import { StationDSName, globalMaxDate, globalMinDate } from "../constants";
 import { geoLocSearch } from "../utils/geonameSearch";
 import { DataReturnWarning } from "./data-return-warning";
 import { IState } from "../types";
-import dayjs from "dayjs";
+import InfoIcon from "../assets/images/icon-info.svg";
+import ProgressIcon from "../assets/images/icon-progress-indicator.svg";
+import DoneIcon from "../assets/images/icon-done.svg";
+import WarningIcon from "../assets/images/icon-warning.svg";
 
 import "./App.scss";
 
@@ -31,6 +34,7 @@ export const App = () => {
   const { showModal, location, weatherStation, startDate, endDate, timezone, units, frequencies, selectedFrequency } = state;
   const { filterItems, createNOAAItems } = useCODAPApi();
   const [statusMessage, setStatusMessage] = useState("");
+  const [statusIcon, setStatusIcon] = useState<JSX.Element>();
   const [isFetching, setIsFetching] = useState(false);
   const [disableGetData, setDisableGetData] = useState(true);
   const weatherStations = getWeatherStations();
@@ -139,19 +143,23 @@ export const App = () => {
       const items = Array.isArray(dataRecords) ? dataRecords : [dataRecords];
       const filteredItems = filterItems(items);
       setStatusMessage("Sending weather records to CODAP");
+      setStatusIcon(<ProgressIcon className="status-icon progress"/>);
       await createNOAAItems(filteredItems).then(
         function (result: any) {
           setIsFetching(false);
+          setStatusIcon(<DoneIcon className="done"/>);
           setStatusMessage(`Retrieved ${filteredItems.length} cases`);
           return result;
         },
         function (msg: string) {
           setIsFetching(false);
+          setStatusIcon(<WarningIcon className="warning"/>);
           setStatusMessage(msg);
         }
       );
     } else {
       setIsFetching(false);
+      setStatusIcon(<WarningIcon className="warning"/>);
       setStatusMessage("No data retrieved");
     }
   };
@@ -170,6 +178,7 @@ export const App = () => {
     console.warn("fetchErrorHandler: " + resultText);
     console.warn("fetchErrorHandler error: " + message);
     setIsFetching(false);
+    setStatusIcon(<WarningIcon className="warning"/>);
     setStatusMessage(message);
   };
 
@@ -180,6 +189,7 @@ export const App = () => {
       const isEndDateAfterStartDate = endDate.getTime() >= startDate.getTime();
       if (isEndDateAfterStartDate) {
         setStatusMessage("Fetching weather records from NOAA");
+        setStatusIcon(<ProgressIcon className="progress"/>);
         const tURL = composeURL({
           startDate,
           endDate,
@@ -230,10 +240,15 @@ export const App = () => {
       <AttributesSelector />
       {frequencies[selectedFrequency].attrs.length > 0 && <AttributeFilter />}
       <div className="divider" />
-      <div className="footer">
-        {statusMessage && <div>{statusMessage}</div>}
-        <button className="clear-data-button">Clear Data</button>
-        <button className="get-data-button" disabled={isFetching || disableGetData} onClick={handleGetData}>Get Data</button>
+      <div className={"footer"}>
+        <div className="status-update">
+          <div className="status-icon">{statusIcon ? statusIcon: ""}</div>
+          <div className="status-message">{statusMessage ? statusMessage: ""}</div>
+        </div>
+        <div>
+          <button className="clear-data-button">Clear Data</button>
+          <button className="get-data-button" disabled={isFetching || disableGetData} onClick={handleGetData}>Get Data</button>
+        </div>
       </div>
       {showModal === "info" && <InfoModal />}
       {showModal === "data-return-warning" && <DataReturnWarning />}

diff --git a/src/components/date-range/date-range.tsx b/src/components/date-range/date-range.tsx
@@ -3,7 +3,7 @@ import { IFrequency } from "../../types";
 import { useStateContext } from "../../hooks/use-state";
 import { DateSelector } from "./date-selector";
 import { Calendars } from "./calendars";
-import WarningIcon from "../../assets/icon-warning.svg";
+import WarningIcon from "../../assets/images/icon-warning.svg";
 import { defaultDates } from "../../constants";
 
 import "./date-range.scss";