add curves feature (FE-only)

FarmBot · Jan 12, 2023 · b93dc1a · b93dc1a
1 parent d4a1461
commit b93dc1a
Show file tree

Hide file tree

Showing 52 changed files with 2,428 additions and 70 deletions.
diff --git a/frontend/__test_support__/fake_state/app.ts b/frontend/__test_support__/fake_state/app.ts
@@ -1,6 +1,7 @@
 import { AppState } from "../../reducer";
 import { fakeMovementState } from "../fake_bot_data";
 import {
+  curvesPanelState,
   metricPanelState,
   plantsPanelState,
   pointsPanelState,
@@ -15,6 +16,7 @@ export const app: AppState = {
   plantsPanelState: plantsPanelState(),
   weedsPanelState: weedsPanelState(),
   pointsPanelState: pointsPanelState(),
+  curvesPanelState: curvesPanelState(),
   sequencesPanelState: sequencesPanelState(),
   metricPanelState: metricPanelState(),
   controlsPopupOpen: false,

diff --git a/frontend/__test_support__/fake_state/resources.ts b/frontend/__test_support__/fake_state/resources.ts
@@ -28,6 +28,7 @@ import {
   TaggedWeedPointer,
   TaggedWizardStepResult,
   TaggedTelemetry,
+  TaggedCurve,
 } from "farmbot";
 import { fakeResource } from "../fake_resource";
 import {
@@ -540,6 +541,7 @@ export function fakeAlert(): TaggedAlert {
     priority: 100,
   });
 }
+
 export function fakePointGroup(): TaggedPointGroup {
   return fakeResource("PointGroup", {
     name: "Fake",
@@ -555,3 +557,11 @@ export function fakePointGroup(): TaggedPointGroup {
     member_count: 0,
   });
 }
+
+export function fakeCurve(): TaggedCurve {
+  return fakeResource("Curve", {
+    name: "Fake",
+    type: "water",
+    data: { 1: 0, 2: 1 },
+  });
+}
diff --git a/frontend/__test_support__/panel_state.ts b/frontend/__test_support__/panel_state.ts
@@ -5,6 +5,7 @@ import {
   PointsPanelState,
   SequencesPanelState,
   MetricPanelState,
+  CurvesPanelState,
 } from "../interfaces";
 
 export const settingsPanelState = (): SettingsPanelState => {
@@ -47,6 +48,12 @@ export const pointsPanelState = (): PointsPanelState => ({
   soilHeight: false,
 });
 
+export const curvesPanelState = (): CurvesPanelState => ({
+  water: false,
+  spread: false,
+  height: false,
+});
+
 export const sequencesPanelState = (): SequencesPanelState => ({
   sequences: true,
   featured: false,

diff --git a/frontend/__test_support__/resource_index_builder.ts b/frontend/__test_support__/resource_index_builder.ts
@@ -426,6 +426,7 @@ const KIND_PRIORITY: ResourceLookupTable = {
   WizardStepResult: 4,
   Telemetry: 4,
   Crop: 4,
+  Curve: 4,
 };
 export function buildResourceIndex(resources: TaggedResource[] = FAKE_RESOURCES,
   state = emptyState()) {

diff --git a/frontend/__tests__/reducer_test.ts b/frontend/__tests__/reducer_test.ts
@@ -1,6 +1,7 @@
 import { Actions } from "../constants";
 import { appReducer } from "../reducer";
 import {
+  CurvesPanelState,
   MetricPanelState,
   MovementState,
   PlantsPanelState,
@@ -78,6 +79,17 @@ describe("resource reducer", () => {
       .toBe(!state.pointsPanelState.groups);
   });
 
+  it("toggles curves panel options", () => {
+    const payload: keyof CurvesPanelState = "water";
+    const state = app;
+    const newState = appReducer(state, {
+      type: Actions.TOGGLE_CURVES_PANEL_OPTION,
+      payload,
+    });
+    expect(newState.curvesPanelState.water)
+      .toBe(!state.curvesPanelState.water);
+  });
+
   it("toggles sequences panel options", () => {
     const payload: keyof SequencesPanelState = "featured";
     const state = app;

diff --git a/frontend/api/api.ts b/frontend/api/api.ts
@@ -181,4 +181,6 @@ export class API {
   get featuredSequencesPath() { return `${this.baseUrl}/api/featured_sequences`; }
   /** /api/wizard_step_results/:id */
   get wizardStepResultsPath() { return `${this.baseUrl}/api/wizard_step_results/`; }
+  /** /api/curves/:id */
+  get curvesPath() { return `${this.baseUrl}/api/curves/`; }
 }
diff --git a/frontend/api/crud.ts b/frontend/api/crud.ts
@@ -262,6 +262,7 @@ export function saveAll(input: TaggedResource[],
 export function urlFor(tag: ResourceName) {
   const OPTIONS: Partial<Record<ResourceName, string>> = {
     Alert: API.current.alertPath,
+    Curve: API.current.curvesPath,
     Device: API.current.devicePath,
     FarmEvent: API.current.farmEventsPath,
     FarmwareEnv: API.current.farmwareEnvPath,

diff --git a/frontend/constants.ts b/frontend/constants.ts
@@ -1168,6 +1168,9 @@ export namespace Content {
   export const NO_ZONES =
     trim(`Press "+" to add a zone.`);
 
+  export const NO_CURVES =
+    trim(`Press "+" to add a curve.`);
+
   export const ENTER_CROP_SEARCH_TERM =
     trim(`Search for a crop to add to your garden.`);
 
@@ -2264,6 +2267,7 @@ export enum Actions {
   TOGGLE_WEEDS_PANEL_OPTION = "TOGGLE_WEEDS_PANEL_OPTION",
   TOGGLE_POINTS_PANEL_OPTION = "TOGGLE_POINTS_PANEL_OPTION",
   TOGGLE_SETTINGS_PANEL_OPTION = "TOGGLE_SETTINGS_PANEL_OPTION",
+  TOGGLE_CURVES_PANEL_OPTION = "TOGGLE_CURVES_PANEL_OPTION",
   TOGGLE_SEQUENCES_PANEL_OPTION = "TOGGLE_SEQUENCES_PANEL_OPTION",
   TOGGLE_METRIC_PANEL_OPTION = "TOGGLE_METRIC_PANEL_OPTION",
   BULK_TOGGLE_SETTINGS_PANEL = "BULK_TOGGLE_SETTINGS_PANEL",

diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -601,6 +601,7 @@
   }
 }
 
+.curve-info-panel,
 .weed-info-panel,
 .point-info-panel,
 .plant-info-panel {
@@ -1912,21 +1913,30 @@ li {
   }
 }
 
-.group-detail-panel {
-  .panel-header-icon-group {
-    display: flex;
-    float: right;
-    padding: 1.5rem;
-    .fa-sort {
-      margin-top: 0.25rem;
-      color: $white;
-    }
-    .fa-trash {
-      margin-top: 0.25rem;
-      margin-left: 2rem;
-      color: $white;
-    }
+.panel-header-icon-group {
+  display: flex;
+  float: right;
+  padding: 1.5rem;
+  .fa-copy,
+  .fa-sort {
+    margin-top: 0.25rem;
+    color: $white;
+  }
+  .fa-trash {
+    margin-top: 0.25rem;
+    margin-left: 2rem;
+    color: $white;
+  }
+  .color-picker {
+    margin-right: 0.5rem;
+  }
+  .fa-expand {
+    margin-top: 0.25rem;
+    color: $dark_gray;
   }
+}
+
+.group-detail-panel {
   .panel-content {
     max-height: calc(100vh - 14rem);
     overflow-y: auto;
@@ -2361,6 +2371,157 @@ li {
   }
 }
 
+.curve-action-popover {
+  .bp4-popover-content {
+    background: $dark_gray;
+  }
+  .bp4-popover-arrow-fill {
+    fill: $dark_gray;
+  }
+  .curve-action-menu {
+    max-width: 150px;
+    .transparent-button {
+      position: absolute;
+      right: 0;
+      width: 50%;
+      color: $off_white
+    }
+    label {
+      width: 100%;
+      color: $off_white;
+      margin-top: 0.75rem;
+    }
+    .filter-search {
+      width: 100%;
+      button {
+        box-shadow: none !important;
+      }
+    }
+    input {
+      box-shadow: none;
+      width: 90%;
+    }
+    .curve-menu-row {
+      display: flex;
+      position: relative;
+      height: 3rem;
+      margin-top: 0.5rem;
+      &.last {
+        height: 2rem;
+      }
+    }
+  }
+}
+
+.curve-info-panel {
+  .panel-title {
+    .white-text {
+      color: $dark_gray;
+      &:hover {
+        color: $dark_gray;
+      }
+    }
+  }
+  .panel-header-icon-group {
+    i {
+      color: $dark_gray;
+    }
+  }
+}
+
+.curve-info-panel-content-wrapper {
+  .bp4-popover-wrapper {
+    float: right;
+    margin-left: 1rem;
+    margin-top: 1rem;
+  }
+  table {
+    th {
+      text-transform: uppercase;
+      color: $dark_gray;
+      font-size: 1.3rem;
+    }
+    td,
+    th {
+      background: $lighter_gray;
+      border: 1px solid $light_gray;
+      padding-left: 1rem;
+      p {
+        display: inline;
+        font-size: 1.4rem;
+        color: $dark_gray;
+      }
+      &.active {
+        background: $white;
+      }
+      &.active-input {
+        padding: 0;
+      }
+      .percent-green {
+        color: $green;
+      }
+      .percent-red {
+        color: $red;
+      }
+      input {
+        font-size: 1.4rem;
+        padding-left: 1rem;
+      }
+    }
+  }
+  .row-radio {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-left: 1rem;
+    margin-top: -0.5rem;
+    &.active {
+      background: $blue;
+    }
+  }
+}
+
+.curves-inventory-panel-content {
+  padding: 0;
+  .curve-search-item {
+    height: 4rem;
+    line-height: 4rem;
+    cursor: pointer;
+    .curve-search-item-info {
+      text-align: right;
+      font-size: 1rem;
+      padding-right: 1rem;
+      line-height: 4rem;
+      float: right;
+    }
+    .curve-search-item-name {
+      width: 40%;
+      margin-left: 1.25rem;
+    }
+  }
+}
+
+.crop-curve-info {
+  .header {
+    display: flex;
+    position: relative;
+    height: 4rem;
+  }
+  p {
+    line-height: 4rem;
+    font-size: 1.3rem;
+  }
+  label {
+    margin-top: 0 !important;
+  }
+  i {
+    position: absolute;
+    right: 0;
+    line-height: 4rem;
+  }
+}
+
 .sensors-panel,
 .controls-panel {
   .panel-content {
@@ -2738,18 +2899,6 @@ li {
 }
 
 .designer-sequence-editor-panel {
-  .panel-header-icon-group {
-    display: flex;
-    float: right;
-    padding: 1.5rem;
-    .color-picker {
-      margin-right: 0.5rem;
-    }
-    .fa-expand {
-      margin-top: 0.25rem;
-      color: $dark_gray;
-    }
-  }
   .green,
   .red {
     .panel-title {