preview and clear works (grid planting)

app/serializers/plant_serializer.rb

@@ -1,5 +1,5 @@
 class PlantSerializer < BasePointSerializer
-  attributes :openfarm_slug, :plant_stage, :planted_at, :radius
+  attributes :openfarm_slug, :plant_stage, :planted_at, :radius, :meta
 
   def x
     object.x.round

frontend/api/crud.ts

@@ -245,7 +245,7 @@ export function saveAll(input: TaggedResource[],
         maybeStartTracking(uuid);
         return dispatch(save(uuid));
       });
-    Promise.all(p).then(callback, errBack);
+    return Promise.all(p).then(callback, errBack);
   };
 }
 

frontend/farm_designer/plants/grid/constants.ts

@@ -6,6 +6,7 @@ export type PlantGridData = Record<PlantGridKey, number>;
 export interface PlantGridState {
   status: "clean" | "dirty",
   grid: PlantGridData;
+  gridId: string
 }
 
 export interface PlantGridProps {
@@ -16,14 +17,14 @@ export interface PlantGridProps {
 export const plantGridKeys: PlantGridKey[] =
   ["numPlantsH", "numPlantsV", "spacingH", "spacingV", "startX", "startY"];
 
-export const EMPTY_PLANT_GRID: PlantGridState = {
+export const EMPTY_PLANT_GRID: Omit<PlantGridState, "gridId"> = {
   status: "clean",
   grid: {
-    startX: 0,
-    startY: 0,
-    spacingH: 0,
-    spacingV: 0,
-    numPlantsH: 0,
-    numPlantsV: 0,
+    startX: 5,
+    startY: 5,
+    spacingH: 5,
+    spacingV: 5,
+    numPlantsH: 5,
+    numPlantsV: 5,
   }
 };

frontend/farm_designer/plants/grid/generate_grid.ts

@@ -1,6 +1,5 @@
 import { PlantGridData } from "./constants";
 import { range } from "lodash";
-import { uuid } from "farmbot";
 import { PlantPointer } from "farmbot/dist/resources/api_resources";
 
 export function vectorGrid(params: PlantGridData): [number, number][] {
@@ -19,7 +18,7 @@ export function vectorGrid(params: PlantGridData): [number, number][] {
   return results;
 }
 
-const createPlant = (p: PlantGridData, openfarm_slug: string, gridId: string) =>
+const createPlant = (openfarm_slug: string, gridId: string) =>
   (vec: [number, number]): PlantPointer => {
     const [x, y] = vec;
     return {
@@ -35,8 +34,14 @@ const createPlant = (p: PlantGridData, openfarm_slug: string, gridId: string) =>
     };
   };
 
-export function initPlantGrid(p: PlantGridData, openfarm_slug: string): PlantPointer[] {
-  const gridId = uuid();
-  const mapper = createPlant(p, openfarm_slug, gridId);
-  return vectorGrid(p).map(mapper);
+interface PlantGridInitOption {
+  grid: PlantGridData;
+  openfarm_slug: string;
+  gridId: string;
 }
+
+export const initPlantGrid =
+  ({ grid, openfarm_slug, gridId }: PlantGridInitOption): PlantPointer[] => {
+    const mapper = createPlant(openfarm_slug, gridId);
+    return vectorGrid(grid).map(mapper);
+  };

frontend/farm_designer/plants/grid/plant_grid.tsx

@@ -9,32 +9,39 @@ import {
 } from "./constants";
 import { initPlantGrid } from "./generate_grid";
 import { init } from "../../../api/crud";
+import { uuid } from "farmbot";
+import { saveGrid, stashGrid } from "./thunks";
 
 export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
-  state: PlantGridState = EMPTY_PLANT_GRID;
+  state: PlantGridState = {
+    ...EMPTY_PLANT_GRID,
+    gridId: uuid()
+  };
 
   onchange = (key: PlantGridKey) =>
     (x: React.ChangeEvent<HTMLInputElement>) => this.setState({
       ...this.state,
-      grid: {
-        ...this.state.grid,
-        [key]: parseInt(x.currentTarget.value, 10)
-      }
+      grid: { ...this.state.grid, [key]: parseInt(x.currentTarget.value, 10) }
     });
 
   performPreview = () => {
-    const plants = initPlantGrid(this.state.grid, this.props.openfarm_slug);
+    const plants = initPlantGrid({
+      grid: this.state.grid,
+      openfarm_slug: this.props.openfarm_slug,
+      gridId: this.state.gridId
+    });
     plants.map(p => this.props.dispatch(init("Point", p)));
     this.setState({ status: "dirty" });
   }
 
   revertPreview = () => {
-    this.setState(EMPTY_PLANT_GRID);
+    const p: Promise<{}> = this.props.dispatch(stashGrid(this.state.gridId));
+    p.then(() => this.setState(EMPTY_PLANT_GRID));
   }
 
   saveGrid = () => {
-    alert("TODO");
-    this.revertPreview();
+    const p: Promise<{}> = this.props.dispatch(saveGrid(this.state.gridId));
+    p.then(() => this.setState(EMPTY_PLANT_GRID));
   }
 
   inputs = () => {

frontend/farm_designer/plants/grid/thunks.ts

@@ -0,0 +1,30 @@
+import { GetState } from "../../../redux/interfaces"
+import { ResourceIndex } from "../../../resources/interfaces";
+import { selectAllPlantPointers } from "../../../resources/selectors";
+import { TaggedPlantPointer } from "farmbot";
+import { destroy, saveAll } from "../../../api/crud";
+const filter = (gridId: string) =>
+  (p: TaggedPlantPointer) => p.body.meta["gridId"] === gridId;
+
+function findPlantByGridId(index: ResourceIndex, gridId: string) {
+  const allPlants = selectAllPlantPointers(index);
+  const myPlants = allPlants.filter(filter(gridId));
+  return myPlants;
+}
+
+export function saveGrid(_gridId: string) {
+  return function (dispatch: Function, _getState: GetState) {
+    const plants = findPlantByGridId(_getState().resources.index, _gridId);
+    const p = saveAll(plants);
+    console.log("Saving the grid");
+    return dispatch(p) as Promise<{}>;
+  };
+}
+
+export function stashGrid(_gridId: string) {
+  return function (dispatch: Function, _getState: GetState) {
+    const plants = findPlantByGridId(_getState().resources.index, _gridId);
+    const all = plants.map((x): Promise<{}> => dispatch(destroy(x.uuid, true)));
+    return Promise.all(all);
+  };
+}