Merge pull request #473 from NBISweden/dev/hour-feedback

Visual feedback on number of hours logged
NBISweden · May 20, 2022 · b313e68 · b313e68
2 parents e6d3580 + 37f5dd4
commit b313e68
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/frontend/src/icons/exclamation-triangle.svg b/frontend/src/icons/exclamation-triangle.svg
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -621,3 +621,17 @@ Other button classes are defined further down together with other classes for th
   display: flex;
   justify-content: center;
 }
+
+.feedback-check {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1.5rem;
+}
+
+.feedback-warning {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 0.7rem;
+}
diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
@@ -5,6 +5,8 @@ import {
   getISOWeek,
   getISOWeekYear,
   setISOWeek,
+  isPast,
+  addDays,
 } from "date-fns";
 import { Row } from "../components/Row";
 import { HeaderRow } from "../components/HeaderRow";
@@ -29,6 +31,8 @@ import { AuthContext } from "../components/AuthProvider";
 import { useParams } from "react-router-dom";
 import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
 import LoadingOverlay from "react-loading-overlay-ts";
+import warning from "../icons/exclamation-triangle.svg";
+import check from "../icons/check.svg";
 
 const beforeUnloadHandler = (event) => {
   event.preventDefault();
@@ -673,13 +677,37 @@ export const Report = () => {
                   );
                 })}
               <div className="col-1 cell-container">
-                <input
-                  aria-label="total of hours spent during the week"
-                  type="text"
-                  className="cell not-outline"
-                  value={getTotalHoursWeek()}
-                  readOnly
-                />
+                <div className="comment-container">
+                  <input
+                    aria-label="total of hours spent during the week"
+                    type="text"
+                    className="cell not-outline"
+                    value={getTotalHoursWeek()}
+                    readOnly
+                  />
+                  {/* Only show warnings for weeks that have passed. 
+                    It must be at least Saturday. */}
+                  {isPast(addDays(currentWeekArray[4], 1)) && (
+                    <img
+                      src={getTotalHoursWeek() === 40 ? check : warning}
+                      alt={
+                        getTotalHoursWeek() === 40
+                          ? "check: 40 hours logged this week"
+                          : "warning: less or more than 40 hours logged this week"
+                      }
+                      className={
+                        getTotalHoursWeek() === 40
+                          ? "feedback-check"
+                          : "feedback-warning"
+                      }
+                      title={
+                        getTotalHoursWeek() === 40
+                          ? "40 hours logged"
+                          : "less or more than 40 hours logged"
+                      }
+                    />
+                  )}
+                </div>
               </div>
             </div>
           </section>