update tool slot position string

frontend/css/farm_designer/farm_designer_panels.scss

@@ -541,6 +541,9 @@
       }
       p {
         line-height: 3rem;
+        &.tool-slot-position {
+          float: right;
+        }
       }
     }
     .mounted-tool-header {

frontend/farm_designer/map/layers/farmbot/bot_position_label.ts

@@ -1,7 +1,9 @@
 import { isNumber } from "lodash";
 import { BotPosition } from "../../../../devices/interfaces";
 
-export function botPositionLabel(position: BotPosition) {
-  const show = (n: number | undefined) => isNumber(n) ? n : "---";
-  return `(${show(position.x)}, ${show(position.y)}, ${show(position.z)})`;
-}
+export const botPositionLabel =
+  (position: BotPosition, gantryMounted?: boolean) => {
+    const show = (n: number | undefined) => isNumber(n) ? n : "---";
+    const x = gantryMounted ? "gantry" : show(position.x);
+    return `(${x}, ${show(position.y)}, ${show(position.z)})`;
+  };

frontend/farm_designer/tools/__tests__/index_test.tsx

@@ -48,18 +48,24 @@ describe("<Tools />", () => {
 
   it("renders with tools", () => {
     const p = fakeProps();
-    p.tools = [fakeTool(), fakeTool()];
+    p.tools = [fakeTool(), fakeTool(), fakeTool()];
     p.tools[0].body.id = 1;
     p.tools[0].body.status = "inactive";
     p.tools[0].body.name = undefined;
     p.tools[1].body.id = 2;
     p.tools[1].body.name = "my tool";
-    p.toolSlots = [fakeToolSlot()];
+    p.tools[2].body.id = 3;
+    p.tools[2].body.name = "my tool";
+    p.toolSlots = [fakeToolSlot(), fakeToolSlot()];
     p.toolSlots[0].body.tool_id = 2;
     p.toolSlots[0].body.x = 1;
+    p.toolSlots[1].body.tool_id = 3;
+    p.toolSlots[1].body.gantry_mounted = true;
+    p.toolSlots[1].body.y = 2;
     const wrapper = mount(<Tools {...p} />);
-    ["foo", "my tool", "unnamed tool", "(1, 0, 0)", "unknown"].map(string =>
-      expect(wrapper.text().toLowerCase()).toContain(string));
+    [
+      "foo", "my tool", "unnamed tool", "(1, 0, 0)", "unknown", "(gantry, 2, 0)"
+    ].map(string => expect(wrapper.text().toLowerCase()).toContain(string));
   });
 
   it("navigates to tool", () => {

frontend/farm_designer/tools/index.tsx

@@ -208,7 +208,7 @@ interface ToolSlotInventoryItemProps {
 }
 
 const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
-  const { x, y, z, id, tool_id } = props.toolSlot.body;
+  const { x, y, z, id, tool_id, gantry_mounted } = props.toolSlot.body;
   return <div
     className={`tool-slot-search-item ${props.hovered ? "hovered" : ""}`}
     onClick={() => history.push(`/app/designer/tool-slots/${id}`)}
@@ -219,7 +219,9 @@ const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
         <p>{props.getToolName(tool_id) || t("No tool")}</p>
       </Col>
       <Col xs={5}>
-        <p style={{ float: "right" }}>{botPositionLabel({ x, y, z })}</p>
+        <p className="tool-slot-position">
+          {botPositionLabel({ x, y, z }, gantry_mounted)}
+        </p>
       </Col>
     </Row>
   </div>;