add photo footer to all flippers

FarmBot · Nov 16, 2018 · 2729e60 · 2729e60
1 parent b28362a
commit 2729e60
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 58 deletions.
diff --git a/webpack/css/image_flipper.scss b/webpack/css/image_flipper.scss
@@ -57,45 +57,42 @@
   }
 }
 
-.photos {
-  .photos-footer {
-    display: flex;
-    position: relative;
-    left: 2.5rem;
-    bottom: -1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    width: 90%;
-    justify-content: space-between;
-    label {
-      font-weight: normal;
-    }
-    span {
-      font-weight: bold;
-    }
+.photos-footer {
+  display: flex;
+  position: relative;
+  bottom: 1rem;
+  justify-content: space-between;
+  label {
+    font-weight: normal;
+  }
+  span {
+    font-weight: bold;
+  }
+}
+
+.image-metadata {
+  display: flex;
+  label {
+    margin-left: 1rem;
+    margin-right: 0.5rem;
   }
-  .image-metadata {
-    display: flex;
-    label {
-      margin-left: 1rem;
-      margin-right: 0.5rem;
-    }
+}
+
+.image-created-at {
+  span {
+    white-space: nowrap;
   }
-  .image-created-at {
-    span {
-      white-space: nowrap;
-    }
-    label {
-      margin-right: 0.5rem;
-    }
+  label {
+    margin-right: 0.5rem;
   }
-  .farmware-button {
-    p {
-      float: right;
-      margin-top: 0.75rem;
-      margin-right: 1rem;
-      color: $medium_gray;
-    }
+}
+
+.farmware-button {
+  p {
+    float: right;
+    margin-top: 0.75rem;
+    margin-right: 1rem;
+    color: $medium_gray;
   }
 }
 

diff --git a/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx b/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx
@@ -35,6 +35,7 @@ describe("<CameraCalibration/>", () => {
     syncStatus: "synced",
     shouldDisplay: () => false,
     saveFarmwareEnv: jest.fn(),
+    timeOffset: 0,
   });
 
   it("renders", () => {

diff --git a/webpack/farmware/camera_calibration/camera_calibration.tsx b/webpack/farmware/camera_calibration/camera_calibration.tsx
@@ -45,6 +45,7 @@ export class CameraCalibration extends
               images={this.props.images}
               currentImage={this.props.currentImage}
               onChange={this.change}
+              timeOffset={this.props.timeOffset}
               iteration={this.props.iteration}
               morph={this.props.morph}
               blur={this.props.blur}

diff --git a/webpack/farmware/camera_calibration/interfaces.ts b/webpack/farmware/camera_calibration/interfaces.ts
@@ -21,4 +21,5 @@ export interface CameraCalibrationProps {
   syncStatus: SyncStatus | undefined;
   shouldDisplay: ShouldDisplay;
   saveFarmwareEnv: SaveFarmwareEnv;
+  timeOffset: number;
 }
diff --git a/webpack/farmware/images/photos.tsx b/webpack/farmware/images/photos.tsx
@@ -72,7 +72,7 @@ const PhotoButtons = (props: {
   </div>;
 };
 
-const PhotoFooter = ({ image, timeOffset }: {
+export const PhotoFooter = ({ image, timeOffset }: {
   image: TaggedImage | undefined,
   timeOffset: number
 }) => {

diff --git a/webpack/farmware/index.tsx b/webpack/farmware/index.tsx
@@ -141,6 +141,7 @@ export class FarmwarePage extends React.Component<FarmwareProps, {}> {
           H_HI={envGet("CAMERA_CALIBRATION_H_HI", this.props.env)}
           S_HI={envGet("CAMERA_CALIBRATION_S_HI", this.props.env)}
           V_HI={envGet("CAMERA_CALIBRATION_V_HI", this.props.env)}
+          timeOffset={this.props.timeOffset}
           shouldDisplay={this.props.shouldDisplay}
           botToMqttStatus={this.props.botToMqttStatus} />;
       case "plant_detection":

diff --git a/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx b/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx
@@ -1,26 +1,25 @@
-import { ImageWorkspace } from "../image_workspace";
+import { ImageWorkspace, ImageWorkspaceProps } from "../image_workspace";
 import { fakeImage } from "../../../__test_support__/fake_state/resources";
 import { TaggedImage } from "farmbot";
 
 describe("<Body/>", () => {
-  function fakeProps() {
-    return {
-      onFlip: jest.fn(),
-      onProcessPhoto: jest.fn(),
-      onChange: jest.fn(),
-      currentImage: undefined as TaggedImage | undefined,
-      images: [] as TaggedImage[],
-      iteration: 9,
-      morph: 9,
-      blur: 9,
-      H_LO: 2,
-      S_LO: 4,
-      V_LO: 6,
-      H_HI: 8,
-      S_HI: 10,
-      V_HI: 12
-    };
-  }
+  const fakeProps = (): ImageWorkspaceProps => ({
+    onFlip: jest.fn(),
+    onProcessPhoto: jest.fn(),
+    onChange: jest.fn(),
+    currentImage: undefined as TaggedImage | undefined,
+    images: [] as TaggedImage[],
+    iteration: 9,
+    morph: 9,
+    blur: 9,
+    H_LO: 2,
+    S_LO: 4,
+    V_LO: 6,
+    H_HI: 8,
+    S_HI: 10,
+    V_HI: 12,
+    timeOffset: 0,
+  });
 
   it("triggers onChange() event", () => {
     const props = fakeProps();

diff --git a/webpack/farmware/weed_detector/image_workspace.tsx b/webpack/farmware/weed_detector/image_workspace.tsx
@@ -6,6 +6,7 @@ import { HSV } from "./interfaces";
 import { WeedDetectorSlider } from "./slider";
 import { TaggedImage } from "farmbot";
 import { t } from "i18next";
+import { PhotoFooter } from "../images/photos";
 
 const RANGES = {
   H: { LOWEST: 0, HIGHEST: 179 },
@@ -31,13 +32,14 @@ export interface NumericValues {
 
 type NumericKeyName = keyof NumericValues;
 
-interface Props extends NumericValues {
+export interface ImageWorkspaceProps extends NumericValues {
   onFlip(uuid: string | undefined): void;
   onProcessPhoto(image_id: number): void;
   currentImage: TaggedImage | undefined;
   images: TaggedImage[];
   onChange(key: NumericKeyName, value: number): void;
   invertHue?: boolean;
+  timeOffset: number;
 }
 
 /** Mapping of HSV values to FBOS Env variables. */
@@ -47,7 +49,7 @@ const CHANGE_MAP: Record<HSV, [NumericKeyName, NumericKeyName]> = {
   V: ["V_LO", "V_HI"]
 };
 
-export class ImageWorkspace extends React.Component<Props, {}> {
+export class ImageWorkspace extends React.Component<ImageWorkspaceProps, {}> {
   /** Generates a function to handle changes to blur/morph/iteration. */
   numericChange = (key: NumericKeyName) =>
     (e: React.SyntheticEvent<HTMLInputElement>) => {
@@ -160,6 +162,9 @@ export class ImageWorkspace extends React.Component<Props, {}> {
         onFlip={this.props.onFlip}
         images={this.props.images}
         currentImage={this.props.currentImage} />
+      <PhotoFooter
+        image={this.props.currentImage}
+        timeOffset={this.props.timeOffset} />
     </div>;
   }
 }
diff --git a/webpack/farmware/weed_detector/index.tsx b/webpack/farmware/weed_detector/index.tsx
@@ -79,6 +79,7 @@ export class WeedDetector
               currentImage={this.props.currentImage}
               images={this.props.images}
               onChange={this.change}
+              timeOffset={this.props.timeOffset}
               iteration={envGet(this.namespace("iteration"), this.props.env)}
               morph={envGet(this.namespace("morph"), this.props.env)}
               blur={envGet(this.namespace("blur"), this.props.env)}