photo page upload progress and refactoring

FarmBot · Nov 16, 2018 · b28362a · b28362a
1 parent 810785d
commit b28362a
Show file tree

Hide file tree

Showing 13 changed files with 323 additions and 169 deletions.
diff --git a/webpack/css/image_flipper.scss b/webpack/css/image_flipper.scss
@@ -74,7 +74,7 @@
       font-weight: bold;
     }
   }
-  .image-metadatas {
+  .image-metadata {
     display: flex;
     label {
       margin-left: 1rem;
@@ -89,6 +89,14 @@
       margin-right: 0.5rem;
     }
   }
+  .farmware-button {
+    p {
+      float: right;
+      margin-top: 0.75rem;
+      margin-right: 1rem;
+      color: $medium_gray;
+    }
+  }
 }
 
 .index-indicator {

diff --git a/webpack/devices/components/fbos_settings/os_update_button.tsx b/webpack/devices/components/fbos_settings/os_update_button.tsx
@@ -37,7 +37,7 @@ const isWorking = (job: JobProgress | undefined) =>
   job && (job.status == "working");
 
 /** FBOS update download progress. */
-function downloadProgress(job: JobProgress | undefined) {
+export function downloadProgress(job: JobProgress | undefined) {
   if (job && isWorking(job)) {
     switch (job.unit) {
       case "bytes":

diff --git a/webpack/devices/interfaces.ts b/webpack/devices/interfaces.ts
@@ -8,7 +8,8 @@ import {
   TaggedSensor,
   TaggedDiagnosticDump,
   TaggedUser,
-  TaggedFarmwareInstallation
+  TaggedFarmwareInstallation,
+  JobProgress,
 } from "farmbot";
 import { ResourceIndex } from "../resources/interfaces";
 import { WD_ENV } from "../farmware/weed_detector/remote_env/interfaces";
@@ -223,6 +224,7 @@ export interface FarmwareProps {
   shouldDisplay: ShouldDisplay;
   saveFarmwareEnv: SaveFarmwareEnv;
   taggedFarmwareInstallations: TaggedFarmwareInstallation[];
+  imageJobs: JobProgress[];
 }
 
 export interface HardwareSettingsProps {

diff --git a/webpack/farmware/__tests__/farmware_test.tsx b/webpack/farmware/__tests__/farmware_test.tsx
@@ -42,6 +42,7 @@ describe("<FarmwarePage />", () => {
       shouldDisplay: () => false,
       saveFarmwareEnv: jest.fn(),
       taggedFarmwareInstallations: [],
+      imageJobs: [],
     };
   };
 

diff --git a/webpack/farmware/__tests__/state_to_props_test.tsx b/webpack/farmware/__tests__/state_to_props_test.tsx
@@ -14,6 +14,7 @@ import {
 } from "../../__test_support__/fake_state/resources";
 import { edit, initSave, save } from "../../api/crud";
 import { fakeFarmware } from "../../__test_support__/fake_farmwares";
+import { JobProgress } from "farmbot";
 
 describe("mapStateToProps()", () => {
 
@@ -79,6 +80,44 @@ describe("mapStateToProps()", () => {
       [botFarmwareName]: botFarmware
     });
   });
+
+  it("returns image upload job list", () => {
+    const state = fakeState();
+    state.bot.hardware.jobs = {
+      "img1.png": {
+        status: "working",
+        percent: 20,
+        unit: "percent",
+        time: "2018-11-15 18:13:21.167440Z",
+      } as JobProgress,
+      "FBOS_OTA": {
+        status: "working",
+        percent: 10,
+        unit: "percent",
+        time: "2018-11-15 17:13:21.167440Z",
+      } as JobProgress,
+      "img2.png": {
+        status: "working",
+        percent: 10,
+        unit: "percent",
+        time: "2018-11-15 19:13:21.167440Z",
+      } as JobProgress,
+    };
+    const props = mapStateToProps(state);
+    expect(props.imageJobs).toEqual([
+      {
+        status: "working",
+        percent: 10,
+        unit: "percent",
+        time: "2018-11-15 19:13:21.167440Z"
+      },
+      {
+        status: "working",
+        percent: 20,
+        unit: "percent",
+        time: "2018-11-15 18:13:21.167440Z"
+      }]);
+  });
 });
 
 describe("saveOrEditFarmwareEnv()", () => {

diff --git a/webpack/farmware/images/__tests__/image_flipper_test.tsx b/webpack/farmware/images/__tests__/image_flipper_test.tsx
@@ -1,10 +1,11 @@
 import "../../../__test_support__/unmock_i18next";
 import * as React from "react";
 import { shallow, mount } from "enzyme";
-import { ImageFlipper } from "../image_flipper";
+import { ImageFlipper, PLACEHOLDER_FARMBOT } from "../image_flipper";
 import { fakeImages } from "../../../__test_support__/fake_state/images";
 import { TaggedImage } from "farmbot";
 import { defensiveClone } from "../../../util";
+import { ImageFlipperProps } from "../interfaces";
 
 describe("<ImageFlipper/>", () => {
   function prepareImages(data: TaggedImage[]): TaggedImage[] {
@@ -17,114 +18,104 @@ describe("<ImageFlipper/>", () => {
     return images;
   }
 
+  const fakeProps = (): ImageFlipperProps => ({
+    images: prepareImages(fakeImages),
+    currentImage: undefined,
+    onFlip: jest.fn(),
+  });
+
   it("defaults to index 0 and flips up", () => {
-    const onFlip = jest.fn();
-    const currentImage = undefined;
-    const images = prepareImages(fakeImages);
-    const props = { images, currentImage, onFlip };
-    const x = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    const x = shallow(<ImageFlipper {...p} />);
     const up = (x.instance() as ImageFlipper).go(1);
     up();
-    expect(onFlip).toHaveBeenCalledWith(images[1].uuid);
+    expect(p.onFlip).toHaveBeenCalledWith(p.images[1].uuid);
   });
 
   it("flips down", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages(fakeImages);
-    const currentImage = images[1];
-    const props = { images, currentImage, onFlip };
-    const x = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.currentImage = p.images[1];
+    const x = shallow(<ImageFlipper {...p} />);
     const down = (x.instance() as ImageFlipper).go(-1);
     down();
-    expect(onFlip).toHaveBeenCalledWith(images[0].uuid);
+    expect(p.onFlip).toHaveBeenCalledWith(p.images[0].uuid);
   });
 
   it("stops at upper end", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages(fakeImages);
-    const currentImage = images[2];
-    const props = { images, currentImage, onFlip };
-    const x = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.currentImage = p.images[2];
+    const x = shallow(<ImageFlipper {...p} />);
     const up = (x.instance() as ImageFlipper).go(1);
     up();
-    expect(onFlip).not.toHaveBeenCalled();
+    expect(p.onFlip).not.toHaveBeenCalled();
   });
 
   it("stops at lower end", () => {
-    const images = prepareImages(fakeImages);
-    const props = {
-      images,
-      currentImage: images[0],
-      onFlip: jest.fn()
-    };
-    const x = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.currentImage = p.images[0];
+    const x = shallow(<ImageFlipper {...p} />);
     const down = (x.instance() as ImageFlipper).go(-1);
     down();
-    expect(props.onFlip).not.toHaveBeenCalled();
+    expect(p.onFlip).not.toHaveBeenCalled();
   });
 
   it("disables flippers when no images", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages([]);
-    const currentImage = undefined;
-    const props = { images, currentImage, onFlip };
-    const wrapper = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.images = prepareImages([]);
+    const wrapper = shallow(<ImageFlipper {...p} />);
     expect(wrapper.find("button").first().props().disabled).toBeTruthy();
     expect(wrapper.find("button").last().props().disabled).toBeTruthy();
   });
 
   it("disables flippers when only one image", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages([fakeImages[0]]);
-    const currentImage = undefined;
-    const props = { images, currentImage, onFlip };
-    const wrapper = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.images = prepareImages([fakeImages[0]]);
+    const wrapper = shallow(<ImageFlipper {...p} />);
     expect(wrapper.find("button").first().props().disabled).toBeTruthy();
     expect(wrapper.find("button").last().props().disabled).toBeTruthy();
   });
 
   it("disables next flipper on load", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages(fakeImages);
-    const currentImage = undefined;
-    const props = { images, currentImage, onFlip };
-    const wrapper = shallow(<ImageFlipper {...props} />);
+    const wrapper = shallow(<ImageFlipper {...fakeProps()} />);
     wrapper.update();
     expect(wrapper.find("button").first().props().disabled).toBeFalsy();
     expect(wrapper.find("button").last().props().disabled).toBeTruthy();
   });
 
   it("disables flipper at lower end", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages(fakeImages);
-    const currentImage = images[1];
-    const props = { images, currentImage, onFlip };
-    const wrapper = shallow(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.currentImage = p.images[1];
+    const wrapper = shallow(<ImageFlipper {...p} />);
     wrapper.setState({ disableNext: false });
     const nextButton = wrapper.render().find("button").last();
     expect(nextButton.text().toLowerCase()).toBe("next");
     expect(nextButton.prop("disabled")).toBeFalsy();
     wrapper.find("button").last().simulate("click");
-    expect(onFlip).toHaveBeenLastCalledWith(images[0].uuid);
+    expect(p.onFlip).toHaveBeenLastCalledWith(p.images[0].uuid);
     expect(wrapper.find("button").last().render().prop("disabled")).toBeTruthy();
   });
 
   it("disables flipper at upper end", () => {
-    const onFlip = jest.fn();
-    const images = prepareImages(fakeImages);
-    const currentImage = images[1];
-    const props = { images, currentImage, onFlip };
-    const wrapper = mount(<ImageFlipper {...props} />);
+    const p = fakeProps();
+    p.currentImage = p.images[1];
+    const wrapper = mount(<ImageFlipper {...p} />);
     const prevButton = wrapper.find("button").first();
     expect(prevButton.text().toLowerCase()).toBe("prev");
     expect(prevButton.props().disabled).toBeFalsy();
     prevButton.simulate("click");
     wrapper.update();
     // FAILED
-    expect(onFlip).toHaveBeenCalledWith(images[2].uuid);
+    expect(p.onFlip).toHaveBeenCalledWith(p.images[2].uuid);
     expect(wrapper.find("button").first().render().prop("disabled")).toBeTruthy();
     prevButton.simulate("click");
-    expect(onFlip).toHaveBeenCalledTimes(1);
+    expect(p.onFlip).toHaveBeenCalledTimes(1);
   });
 
+  it("renders placeholder", () => {
+    const p = fakeProps();
+    p.images[0].body.attachment_processed_at = undefined;
+    p.currentImage = p.images[0];
+    const wrapper = mount(<ImageFlipper {...p} />);
+    expect(wrapper.find("img").last().props().src).toEqual(PLACEHOLDER_FARMBOT);
+  });
 });