`mark_as` object picker logic

webpack/sequences/step_tiles/mark_as.tsx

@@ -4,39 +4,50 @@ import { StepParams } from "../interfaces";
 import { ToolTips } from "../../constants";
 import { StepWrapper, StepHeader, StepContent } from "../step_ui/index";
 import { Row, Col, FBSelect } from "../../ui/index";
+import {
+  MARK_AS_ACTIONS,
+  MARK_AS_OBJECTS,
+  MarkableKind,
+  selectedMarkableObject,
+  setObjectKind,
+} from "./mark_as/options";
 
-export function MarkAs({
-  dispatch, currentStep, index, currentSequence }: StepParams) {
-  const className = "wait-step";
-  return <StepWrapper>
-    <StepHeader
-      className={className}
-      helpText={ToolTips.WAIT}
-      currentSequence={currentSequence}
-      currentStep={currentStep}
-      dispatch={dispatch}
-      index={index} />
-    <StepContent className={className}>
-      <Row>
-        <Col xs={4}>
-          <label>{t("Mark")}</label>
-          <FBSelect
-            list={[]}
-            placeholder="Foo"
-            onChange={() => { }}
-            selectedItem={{ label: "Plant", value: 0 }} />
-        </Col>
-        <Col xs={4}>
-          <label>{t("As")}</label>
-          <FBSelect
-            list={[]}
-            placeholder="Foo"
-            onChange={() => { }}
-            selectedItem={undefined} />
-        </Col>
-        <Col xs={4} />
-      </Row>
-    </StepContent>
-  </StepWrapper>;
+export interface MarkAsState { markableKind: MarkableKind | undefined; }
 
+export class MarkAs extends React.Component<StepParams, MarkAsState> {
+  state: MarkAsState = { markableKind: undefined };
+
+  render() {
+    const { dispatch, currentStep, index, currentSequence } = this.props;
+    const className = "wait-step";
+    return <StepWrapper>
+      <StepHeader
+        className={className}
+        helpText={ToolTips.WAIT}
+        currentSequence={currentSequence}
+        currentStep={currentStep}
+        dispatch={dispatch}
+        index={index} />
+      <StepContent className={className}>
+        <Row>
+          <Col xs={4}>
+            <label>{t("Mark")}</label>
+            <FBSelect
+              list={MARK_AS_OBJECTS}
+              onChange={setObjectKind(this.setState.bind(this))}
+              selectedItem={selectedMarkableObject(this.state.markableKind)} />
+          </Col>
+          <Col xs={4}>
+            <label>{t("As")}</label>
+            <FBSelect
+              list={MARK_AS_ACTIONS["Plant"]}
+              onChange={() => { }}
+              allowEmpty={false}
+              selectedItem={MARK_AS_ACTIONS["Plant"][0]} />
+          </Col>
+          <Col xs={4} />
+        </Row>
+      </StepContent>
+    </StepWrapper>;
+  }
 }

webpack/sequences/step_tiles/mark_as/options.ts

@@ -1,17 +1,50 @@
-// import { ResourceName, TaggedPlantPointer } from "farmbot";
-// import { DropDownItem } from "../../../ui";
+import { DropDownItem } from "../../../ui";
+import { MarkAsState } from "../mark_as";
 
-// const OPTIONS: Partial<Record<ResourceName, DropDownItem[]>> = {
-//   "Tool": [],
-//   "Plant": [],
-//   "Point": []
-// };
+export type MarkableKind =
+  | "Tool"
+  | "Plant";
 
-// const isWeed = (plant: TaggedPlantPointer) => {
-//   const cb = plant.body.meta["created_by"];
-//   if (cb == "weed-detection") {
-//     return true;
-//   }
-//   return false;
-// };
-// //
+const KIND_MAP: Record<MarkableKind, MarkableKind> = { // For type safety later.
+  Tool: "Tool",
+  Plant: "Plant"
+};
+
+export const MARAKBLE_DDI_LOOKUP: Record<MarkableKind, DropDownItem> = {
+  Tool: { label: "Tool", value: "Tool" },
+  Plant: { label: "Plant", value: "Plant" },
+};
+
+export const MARK_AS_OBJECTS: DropDownItem[] =
+  Object.values(MARAKBLE_DDI_LOOKUP);
+
+export const MARK_AS_ACTIONS: Record<MarkableKind, DropDownItem[]> = {
+  Tool: [
+    { label: "Mounted", value: "mounted" },
+    { label: "Dismounted", value: "dismounted" },
+  ],
+  Plant: [
+    { label: "Planned", value: "planned" },
+    { label: "Planted", value: "planted" },
+    { label: "Harvested", value: "harvested" },
+    { label: "Removed", value: "removed" }
+  ]
+};
+
+const MARKABLE_KINDS = Object.keys(KIND_MAP);
+// this.state.markableKind ? MARAKBLE_DDI_LOOKUP[this.state.markableKind] : undefined
+export const selectedMarkableObject =
+  (x: string | undefined): DropDownItem | undefined => {
+    return isMarkableKind(x) ? MARAKBLE_DDI_LOOKUP[x] : undefined;
+  };
+
+export const isMarkableKind = (x: unknown): x is MarkableKind => {
+  return (x && typeof (x) == "string" && MARKABLE_KINDS.includes(x));
+};
+
+type StateSetter = (s: MarkAsState) => void;
+
+export const setObjectKind = (cb: StateSetter) => (d: DropDownItem) => {
+  const { value } = d;
+  cb({ markableKind: isMarkableKind(value) ? value : undefined });
+};