Merge pull request #1746 from FarmBot/weeds

Add new weed pointer type

db/migrate/20200323235926_add_show_weeds_to_web_app_config.rb

@@ -0,0 +1,8 @@
+class AddShowWeedsToWebAppConfig < ActiveRecord::Migration[6.0]
+  def change
+    add_column  :web_app_configs,
+    :show_weeds,
+    :boolean,
+    default: false
+  end
+end

frontend/__test_support__/fake_designer_state.ts

@@ -1,7 +1,8 @@
 import { DesignerState } from "../farm_designer/interfaces";
 
 export const fakeDesignerState = (): DesignerState => ({
-  selectedPlants: undefined,
+  selectedPoints: undefined,
+  selectionPointType: undefined,
   hoveredPlant: {
     plantUUID: undefined,
     icon: ""
@@ -13,7 +14,8 @@ export const fakeDesignerState = (): DesignerState => ({
   cropSearchResults: [],
   cropSearchInProgress: false,
   chosenLocation: { x: undefined, y: undefined, z: undefined },
-  currentPoint: undefined,
+  drawnPoint: undefined,
+  drawnWeed: undefined,
   openedSavedGarden: undefined,
   tryGroupSortType: undefined,
   editGroupAreaInMap: false,

frontend/__test_support__/fake_state/resources.ts

@@ -26,6 +26,7 @@ import {
   TaggedAlert,
   TaggedPointGroup,
   TaggedFolder,
+  TaggedWeedPointer,
 } from "farmbot";
 import { fakeResource } from "../fake_resource";
 import {
@@ -171,6 +172,19 @@ export function fakePoint(): TaggedGenericPointer {
   });
 }
 
+export function fakeWeed(): TaggedWeedPointer {
+  return fakeResource("Point", {
+    id: idCounter++,
+    name: "Weed 1",
+    pointer_type: "Weed",
+    x: 200,
+    y: 400,
+    z: 0,
+    radius: 100,
+    meta: { created_by: "plant-detection", color: "red" }
+  });
+}
+
 export function fakeSavedGarden(): TaggedSavedGarden {
   return fakeResource("SavedGarden", {
     id: idCounter++,
@@ -289,6 +303,7 @@ export function fakeWebAppConfig(): TaggedWebAppConfig {
     show_sensor_readings: false,
     show_plants: true,
     show_points: true,
+    show_weeds: true,
     x_axis_inverted: false,
     y_axis_inverted: false,
     z_axis_inverted: true,

frontend/__test_support__/resource_index_builder.ts

@@ -316,6 +316,27 @@ const tr15: TaggedResource = {
   "uuid": "Tool.15.50"
 };
 
+const tr16: TaggedPoint = {
+  specialStatus: SpecialStatus.SAVED,
+  kind: "Point",
+  body: {
+    id: 1395,
+    created_at: "2017-05-24T20:41:19.889Z",
+    updated_at: "2017-05-24T20:41:19.889Z",
+    meta: {
+      color: "gray",
+      created_by: "plant-detection"
+    },
+    name: "untitled",
+    pointer_type: "Weed",
+    radius: 10,
+    x: 490,
+    y: 421,
+    z: 5
+  },
+  uuid: "Point.1397.11"
+};
+
 const log: TaggedLog = {
   kind: "Log",
   specialStatus: SpecialStatus.SAVED,
@@ -345,6 +366,7 @@ export const FAKE_RESOURCES: TaggedResource[] = [
   tr0,
   tr14,
   tr15,
+  tr16,
   log,
 ];
 const KIND: keyof TaggedResource = "kind"; // Safety first, kids.

frontend/api/crud.ts

@@ -334,6 +334,7 @@ const MUST_CONFIRM_LIST: ResourceName[] = [
   "Regimen",
   "Image",
   "SavedGarden",
+  "PointGroup",
 ];
 
 const confirmationChecker = (resourceName: ResourceName, force = false) =>

frontend/constants.ts

@@ -773,7 +773,7 @@ export namespace Content {
     trim(`Click and drag or use the inputs to draw a weed.`);
 
   export const BOX_SELECT_DESCRIPTION =
-    trim(`Drag a box around the plants you would like to select.
+    trim(`Drag a box around the items you would like to select.
     Press the back arrow to exit.`);
 
   export const SAVED_GARDENS =
@@ -1139,7 +1139,8 @@ export enum Actions {
 
   // Designer
   SEARCH_QUERY_CHANGE = "SEARCH_QUERY_CHANGE",
-  SELECT_PLANT = "SELECT_PLANT",
+  SELECT_POINT = "SELECT_POINT",
+  SET_SELECTION_POINT_TYPE = "SET_SELECTION_POINT_TYPE",
   TOGGLE_HOVERED_PLANT = "TOGGLE_HOVERED_PLANT",
   TOGGLE_HOVERED_POINT = "TOGGLE_HOVERED_POINT",
   HOVER_PLANT_LIST_ITEM = "HOVER_PLANT_LIST_ITEM",
@@ -1148,7 +1149,8 @@ export enum Actions {
   OF_SEARCH_RESULTS_OK = "OF_SEARCH_RESULTS_OK",
   OF_SEARCH_RESULTS_NO = "OF_SEARCH_RESULTS_NO",
   CHOOSE_LOCATION = "CHOOSE_LOCATION",
-  SET_CURRENT_POINT_DATA = "SET_CURRENT_POINT_DATA",
+  SET_DRAWN_POINT_DATA = "SET_DRAWN_POINT_DATA",
+  SET_DRAWN_WEED_DATA = "SET_DRAWN_WEED_DATA",
   CHOOSE_SAVED_GARDEN = "CHOOSE_SAVED_GARDEN",
   TRY_SORT_TYPE = "TRY_SORT_TYPE",
   EDIT_GROUP_AREA_IN_MAP = "EDIT_GROUP_AREA_IN_MAP",

frontend/css/farm_designer/farm_designer.scss

@@ -185,30 +185,41 @@
     }
   }
 
+  %panel-item-base {
+    text-align: right;
+    font-size: 1rem;
+    padding-right: 1rem;
+    line-height: 3rem;
+    float: right;
+  }
   .plant-search-item,
   .group-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
     img {
-      margin: 0 1rem 0 0;
-      height: 4rem;
-      width: 4rem;
+      margin-right: 0.5rem;
+      height: 3rem;
+      width: 3rem;
+    }
+    &.quick-del {
+      &:hover {
+        background: lighten($red, 10%) !important;
+        &:after {
+          content: "x";
+          margin-left: 1rem;
+          color: $darkest_red;
+          font-weight: bold;
+        }
+      }
     }
-  }
-
-  %panel-item-base {
-    text-align: right;
-    font-size: 1rem;
-    padding-top: 1.4rem;
-    padding-right: 1rem;
-    float: right;
   }
   .plant-search-item-age {
     @extend %panel-item-base;
   }
   .group-item-count {
     @extend %panel-item-base;
     padding-top: 0.6rem;
+    line-height: 1rem;
   }
   .plant-search-item-name {
     display: inline-block;
@@ -219,32 +230,62 @@
     text-overflow: ellipsis;
     margin-left: 1rem;
   }
+  .weed-search-item,
   .point-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
     .saucer {
       display: inline-block;
-      margin: 0 1rem 0 0;
-      height: 2rem;
-      width: 2rem;
+      height: 3rem;
+      width: 3rem;
       vertical-align: middle;
+      margin-right: 0.25rem;
     }
   }
+  .weed-search-item-info,
   .point-search-item-info {
     text-align: right;
     font-size: 1rem;
-    padding-top: 0.6rem;
     padding-right: 1rem;
+    line-height: 3rem;
     float: right;
   }
+  .weed-search-item-name,
   .point-search-item-name {
     display: inline-block;
     vertical-align: middle;
     white-space: nowrap;
     width: 40%;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-left: 1rem;
+    margin-left: 1.25rem;
+  }
+  .tool-search-item,
+  .tool-slot-search-item {
+    line-height: 4rem;
+    cursor: pointer;
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .tool-slot-search-item-name {
+      margin-left: -1rem;
+    }
+    p {
+      font-size: 1rem;
+      line-height: 4rem;
+      &.tool-status,
+      &.tool-slot-position {
+        float: right;
+      }
+    }
+    svg {
+      vertical-align: middle;
+    }
+    .tool-slot-position-info {
+      padding: 0;
+      padding-right: 1.75rem;
+    }
   }
 }
 
@@ -284,11 +325,17 @@
 }
 
 .map-point {
+  cursor: pointer !important;
   stroke-width: 2;
   stroke-opacity: 0.3;
   fill-opacity: 0.1;
 }
 
+.map-weed {
+  cursor: pointer !important;
+}
+
+.weed-image,
 .plant-image {
   transform-origin: bottom;
   transform-box: fill-box;
@@ -337,6 +384,9 @@
       fill: $white;
       stroke: $white;
     }
+    &:hover {
+      opacity: 0.15;
+    }
   }
 }
 

frontend/css/farm_designer/farm_designer_panels.scss

@@ -291,6 +291,7 @@
   .panel-action-buttons {
     position: absolute;
     z-index: 9;
+    height: 19rem;
     width: 100%;
     background: $panel_medium_light_gray;
     padding: 0.5rem;
@@ -307,6 +308,9 @@
       float: left;
       width: 100%;
     }
+    .filter-search {
+      padding-right: 1rem;
+    }
     .plant-status-bulk-update {
       display: inline-flex;
       width: 100%;
@@ -321,15 +325,13 @@
     }
   }
   .panel-content {
-    padding-top: 15rem;
+    padding-top: 19rem;
     padding-right: 0;
     padding-left: 0;
     padding-bottom: 5rem;
     max-height: calc(100vh - 13rem);
     overflow-y: auto;
     overflow-x: hidden;
-    .plant-search-item,
-    .group-search-item { pointer-events: none; }
   }
 }
 
@@ -377,9 +379,13 @@
 
 .weed-info-panel-content,
 .point-info-panel-content {
-  .saucer {
-    margin: 1rem;
-    margin-left: 2rem;
+  .point-color-input {
+    div[class*=col-] {
+      padding-left: 0.5rem;
+    }
+    .saucer {
+      margin-top: 4.5rem;
+    }
   }
   .fb-button & .red {
     display: block;
@@ -557,22 +563,8 @@
     overflow-x: hidden;
     .tool-search-item,
     .tool-slot-search-item {
-      line-height: 4rem;
-      cursor: pointer;
       margin-left: -15px;
       margin-right: -15px;
-      .row {
-        margin-left: 0;
-        margin-right: 0;
-      }
-      p {
-        font-size: 1.2rem;
-        line-height: 4rem;
-        &.tool-status,
-        &.tool-slot-position {
-          float: right;
-        }
-      }
       .filter-search {
         .bp3-button {
           min-height: 2.5rem;
@@ -585,13 +577,6 @@
           line-height: 2rem;
         }
       }
-      svg {
-        vertical-align: middle;
-      }
-      .tool-slot-position-info {
-        padding: 0;
-        padding-right: 1rem;
-      }
     }
     .mounted-tool-header {
       display: flex;
@@ -821,6 +806,19 @@
   }
 }
 
+.weed-item-icon,
+.group-item-icon {
+  display: inline-block;
+  position: relative;
+  .weed-icon {
+    position: absolute;
+    top: 13%;
+    left: 12%;
+    width: 70%;
+    height: 70%;
+  }
+}
+
 .weeds-inventory-panel,
 .zones-inventory-panel,
 .groups-panel {