add label to tool sensor indicator

FarmBot · Dec 5, 2019 · b480295 · b480295
1 parent dc9bbe6
commit b480295
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 20 deletions.
diff --git a/frontend/controls/sensors/__tests__/sensor_list_test.tsx b/frontend/controls/sensors/__tests__/sensor_list_test.tsx
@@ -12,27 +12,45 @@ describe("<SensorList/>", function () {
   const fakeProps = (): SensorListProps => {
     const pins: Pins = {
       50: {
-        mode: 0,
-        value: 1
+        mode: 1,
+        value: 500,
       },
       51: {
-        mode: 1,
-        value: 500
-      }
+        mode: 0,
+        value: 1,
+      },
+      52: {
+        mode: 0,
+        value: 1,
+      },
+      53: {
+        mode: 0,
+        value: 0,
+      },
     };
     const fakeSensor1 = fakeSensor();
     const fakeSensor2 = fakeSensor();
+    const fakeSensor3 = fakeSensor();
+    const fakeSensor4 = fakeSensor();
     fakeSensor1.body.id = 1;
     fakeSensor1.body.pin = 51;
-    fakeSensor1.body.mode = 1;
+    fakeSensor1.body.mode = 0;
     fakeSensor1.body.label = "GPIO 51";
     fakeSensor2.body.id = 2;
     fakeSensor2.body.pin = 50;
-    fakeSensor2.body.mode = 0;
+    fakeSensor2.body.mode = 1;
     fakeSensor2.body.label = "GPIO 50 - Moisture";
+    fakeSensor3.body.id = 3;
+    fakeSensor3.body.pin = 52;
+    fakeSensor3.body.mode = 0;
+    fakeSensor3.body.label = "GPIO 52 - Tool Verification";
+    fakeSensor4.body.id = 4;
+    fakeSensor4.body.pin = 53;
+    fakeSensor4.body.mode = 0;
+    fakeSensor4.body.label = "GPIO 53 - Tool Verification";
     return {
       dispatch: jest.fn(),
-      sensors: [fakeSensor2, fakeSensor1],
+      sensors: [fakeSensor2, fakeSensor1, fakeSensor3, fakeSensor4],
       pins,
       disabled: false
     };
@@ -42,12 +60,18 @@ describe("<SensorList/>", function () {
     const wrapper = mount(<SensorList {...fakeProps()} />);
     const labels = wrapper.find("label");
     const pinNumbers = wrapper.find("p");
-    expect(labels.first().text()).toEqual("GPIO 51");
-    expect(pinNumbers.first().text()).toEqual("51");
-    expect(wrapper.find(".indicator").first().text()).toEqual("500");
-    expect(labels.last().text()).toEqual("GPIO 50 - Moisture");
-    expect(pinNumbers.last().text()).toEqual("50");
-    expect(wrapper.find(".indicator").last().text()).toEqual("1");
+    expect(labels.at(0).text()).toEqual("GPIO 51");
+    expect(pinNumbers.at(0).text()).toEqual("51");
+    expect(wrapper.find(".indicator").at(0).text()).toEqual("1");
+    expect(labels.at(1).text()).toEqual("GPIO 50 - Moisture");
+    expect(pinNumbers.at(1).text()).toEqual("50");
+    expect(wrapper.find(".indicator").at(1).text()).toEqual("500");
+    expect(labels.at(2).text()).toEqual("GPIO 52 - Tool Verification");
+    expect(pinNumbers.at(2).text()).toEqual("52");
+    expect(wrapper.find(".indicator").at(2).text()).toEqual("1 (NO TOOL)");
+    expect(labels.at(3).text()).toEqual("GPIO 53 - Tool Verification");
+    expect(pinNumbers.at(3).text()).toEqual("53");
+    expect(wrapper.find(".indicator").at(3).text()).toEqual("0 (TOOL ON)");
   });
 
   const expectedPayload = (pin_number: number, pin_mode: 0 | 1) =>
@@ -60,10 +84,10 @@ describe("<SensorList/>", function () {
   it("reads sensors", () => {
     const wrapper = mount(<SensorList {...fakeProps()} />);
     const readSensorBtn = wrapper.find("button");
-    readSensorBtn.first().simulate("click");
-    expect(mockDevice.readPin).toHaveBeenCalledWith(expectedPayload(51, 1));
-    readSensorBtn.last().simulate("click");
-    expect(mockDevice.readPin).toHaveBeenLastCalledWith(expectedPayload(50, 0));
+    readSensorBtn.at(0).simulate("click");
+    expect(mockDevice.readPin).toHaveBeenCalledWith(expectedPayload(51, 0));
+    readSensorBtn.at(1).simulate("click");
+    expect(mockDevice.readPin).toHaveBeenLastCalledWith(expectedPayload(50, 1));
     expect(mockDevice.readPin).toHaveBeenCalledTimes(2);
   });
 

diff --git a/frontend/controls/sensors/sensor_list.tsx b/frontend/controls/sensors/sensor_list.tsx
@@ -38,11 +38,17 @@ const SensorReadingDisplay =
   ({ label, value, mode }: SensorReadingDisplayProps) => {
     const moistureSensor = label.toLowerCase().includes("moisture") ?
       "moisture-sensor" : "";
-    return <div className={`sensor-reading-display ${moistureSensor}`}>
+    const toolSensor = label.toLowerCase().includes("verification") ?
+      "tool-verification-sensor" : "";
+    const valueLabel = toolSensor
+      ? `${value} (${value ? t("NO TOOL") : t("TOOL ON")})`
+      : value;
+    return <div
+      className={`sensor-reading-display ${moistureSensor} ${toolSensor}`}>
       {isNumber(value) && value >= 0 &&
         <div className="indicator" style={calcIndicatorStyle({ value, mode })}>
           <span style={calcValueStyle({ value, mode })}>
-            {value}
+            {valueLabel}
           </span>
         </div>}
     </div>;

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
@@ -1195,6 +1195,11 @@ ul {
     &.moisture-sensor {
       background: linear-gradient(to right, rgba($blue, 0) 20%, $blue 80%, rgba($blue, 0) 85%);
     }
+    &.tool-verification-sensor {
+      span {
+        margin-left: 3.5rem !important;
+      }
+    }
     border-style: solid;
     border-color: $dark_gray;
     border-width: 0.1px;