Development (#94)

* CEC-371 Car ECU display (#79) * Merge Development (#53) * Use responsive iframe control for charts (#49) * Use responsive iframe control to charts * Move external Grafana link to Dashboard page * Remove unused embedded style class * Add button label * added delete button to deploy packages * Fix unit test warning Remove unused route from test * Fix styling of button * minor fixes per pr review Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> * Development Merge (#57) * CEC-287 Car connection status (#59) (#60) * Car connection status * Formatting * Merge Development (#64) * Add connection status to vehicles page * ConnectedIcon control * Handle Style * Development (#67) * preliminary map for vehicles * weird zoom bug * passing react tests * fixing warnings and updating snapshots * update node environment to 14 * addressing comments by changing variable types and adding styles to home page title * adding CODEOWNERS file * fixing token error * CEC-371 Update car ECUs display (#78) * Clean up className styles Update car status page to show update and ECUs * Add update ecu version button Show all ECUs on car status page Only show car ecus for search Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <69828061+drew-fisker@users.noreply.github.com> * CEC-394 Car update log (#81) * CEC-394 Car update status control * Remove Datadog RUM Remove package update components Move control components into Controls folder Add Car update status page * Display update status log Clean up unused update package code * Remove console.logs * no vars * adding timestamp to vehicle popup * modifying vehicle data query * removing extraneous code * removing console log * Clean up SonarCloud warnings (#83) * Clean up SonarCloud warnings * Bogus security warning * Fix another warning * Fix unauthorized locations request * Fix update progress control * CEC-563 New manifest format (#88) * Add ManifestCreateContext Update create manifest page * Finish UI changes and API integration * Fixes * Fix test * Remove manifest ECU file version and type * Fixes * Add manifest ecu file type control * Fix Sonar warnings * Fix test * Update codeowners * Formatting * CEC-553 Change file type to string (#90) * CEC-553 File type uses string enum * Fix test timeout * Fix * Merge development * Increase timeout * Clean up (#95) * Clean up Mock missing methods * Smell Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <69828061+drew-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <dtaylor@fiskerinc.com>
2021-10-14 12:23:16 -07:00
parent ba7611d6aa
commit 86eeaab869
32 changed files with 2293 additions and 866 deletions
--- a/src/components/Controls/FileDragArea/index.jsx
+++ b/src/components/Controls/FileDragArea/index.jsx
@@ -0,0 +1,87 @@
+import React, { useRef, useState } from "react";
+import clsx from "clsx";
+
+import useStyles from "../../useStyles";
+import { useStatusContext } from "../../Contexts/StatusContext";
+
+const FileDragArea = ({
+  onFileSelect,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  children,
+}) => {
+  const { setMessage } = useStatusContext();
+  const [over, setOver] = useState(false);
+  const classes = useStyles();
+  const inputFile = useRef();
+
+  const dragEnterHandler = (e) => {
+    setOver(true);
+    if (onDragEnter) onDragEnter(e);
+  };
+
+  const dragOverHandler = (e) => {
+    setOver(true);
+    if (onDragEnter) onDragOver(e);
+  };
+
+  const dragLeaveHandler = (e) => {
+    setOver(false);
+    if (onDragLeave) onDragLeave(e);
+  };
+
+  const dropHandler = (e) => {
+    try {
+      const { files } = e.dataTransfer;
+      if (onFileSelect) onFileSelect(files);
+      setOver(false);
+    } catch (err) {
+      setMessage(err);
+    }
+  };
+
+  const selectHandler = (e) => {
+    try {
+      const { files } = e.target;
+      if (onFileSelect) onFileSelect(files);
+    } catch (err) {
+      setMessage(err);
+    }
+  };
+
+  const onClick = (e) => {
+    try {
+      inputFile.current.click();
+    } catch (err) {
+      setMessage(err);
+    }
+  };
+
+  return (
+    <>
+      <div
+        onDragEnter={dragEnterHandler}
+        onDragOver={dragOverHandler}
+        onDragLeave={dragLeaveHandler}
+        onDrop={dropHandler}
+        onClick={onClick}
+        className={clsx(
+          classes.fileDropArea,
+          classes.clickable,
+          over ? classes.overHighlight : null
+        )}
+      >
+        {children}
+      </div>
+      <input
+        type="file"
+        onChange={selectHandler}
+        ref={inputFile}
+        className={classes.hidden}
+      />
+    </>
+  );
+};
+
+export default FileDragArea;