Merge pull request #1732 from FarmBot/diagnosis-icons

Diagnosis icons

frontend/css/global.scss

@@ -150,6 +150,24 @@ fieldset {
   pointer-events: all;
 }
 
+.diagnosis-indicator {
+  text-align: center !important;
+  i {
+    display: block;
+    position: absolute;
+    top: 0.1rem;
+    left: 0.1rem;
+    color: $white;
+    font-size: 14px;
+    &.fa-times {
+      left: 0.25rem;
+    }
+    &.fa-question {
+      left: 0.35rem;
+    }
+  }
+}
+
 .connectivity-popover-portal {
   .bp3-transition-container {
     z-index: 999;

frontend/devices/connectivity/connectivity_row.tsx

@@ -15,22 +15,29 @@ export interface StatusRowProps {
   hoveredConnection?: string | undefined;
 }
 
-const iconLookup: CowardlyDictionary<string> = {
+const colorLookup: CowardlyDictionary<string> = {
   true: "green",
   false: "red",
   undefined: "yellow"
 };
 
+const iconLookup: CowardlyDictionary<string> = {
+  true: "check",
+  false: "times",
+  undefined: "question"
+};
+
 export function ConnectivityRow(props: StatusRowProps) {
   const { connectionStatus, connectionName, hoveredConnection } = props;
-  const colorClass = iconLookup["" + connectionStatus] || "grey";
+  const colorClass = colorLookup["" + connectionStatus];
   const connectorColorClass = connectionName === "botFirmware" &&
     colorClass === "yellow" ? "red" : colorClass;
   const hoverClass = hoveredConnection === connectionName ? "hover" : "";
   const hoverOver = props.hover ? props.hover : () => { };
   const className = props.header
     ? "saucer active grey"
-    : `saucer active ${colorClass} ${hoverClass}`;
+    : `diagnosis-indicator saucer active ${colorClass} ${hoverClass}`;
+  const icon = iconLookup["" + connectionStatus];
 
   const getTitle = () => {
     switch (connectionStatus) {
@@ -45,7 +52,9 @@ export function ConnectivityRow(props: StatusRowProps) {
       <div className={className}
         title={props.header ? t("Status") : getTitle()}
         onMouseEnter={hoverOver(connectionName)}
-        onMouseLeave={hoverOver(undefined)} />
+        onMouseLeave={hoverOver(undefined)}>
+        {!props.header && <i className={`fa fa-${icon}`} />}
+      </div>
       {!props.header &&
         <div className={`saucer-connector ${connectorColorClass}`} />}
     </Col>

frontend/devices/connectivity/diagnosis.tsx

@@ -21,20 +21,23 @@ export const DiagnosisSaucer = (props: DiagnosisProps) => {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
   const title = diagnosisBoolean ? t("Ok") : t("Error");
-  return <div className={"saucer active " + diagnosisColor} title={title} />;
+  return <div
+    className={"diagnosis-indicator saucer active " + diagnosisColor}
+    title={title}>
+    <i className={`fa fa-${diagnosisBoolean ? "check" : "times"}`} />
+  </div>;
 };
 
 export function Diagnosis(props: DiagnosisProps) {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
-  const title = diagnosisBoolean ? t("Ok") : t("Error");
   return <div className={"diagnosis-section"}>
     <div className={"connectivity-diagnosis"}>
       <h4>{t("Diagnosis")}</h4>
     </div>
     <Row>
       <Col xs={1}>
-        <div className={"saucer active " + diagnosisColor} title={title} />
+        <DiagnosisSaucer {...props} />
         <div className={"saucer-connector last " + diagnosisColor} />
       </Col>
       <Col xs={10} className={"connectivity-diagnosis"}>

frontend/farm_designer/point_groups/criteria/apply.ts

@@ -1,7 +1,7 @@
-import { every, get, uniq, gt, lt, isNumber } from "lodash";
+import { every, get, uniq, gt, lt, isNumber, isEqual } from "lodash";
 import { TaggedPoint, TaggedPointGroup } from "farmbot";
 import moment from "moment";
-import { PointGroupCriteria } from "./interfaces";
+import { PointGroupCriteria, DEFAULT_CRITERIA } from "./interfaces";
 
 /** Check if a string or number criteria field is empty. */
 const eqCriteriaEmpty =
@@ -45,6 +45,7 @@ export const selectPointsByCriteria = (
   allPoints: TaggedPoint[],
   now = moment(),
 ): TaggedPoint[] => {
+  if (isEqual(criteria, DEFAULT_CRITERIA)) { return []; }
   const check = checkCriteria(criteria, now);
   return allPoints.filter(point =>
     every(Object.keys(criteria).map((key: keyof PointGroupCriteria) =>

frontend/farm_designer/point_groups/criteria/interfaces.ts

@@ -15,7 +15,7 @@ export const DEFAULT_CRITERIA: Readonly<PointGroupCriteria> = {
   number_eq: {},
   number_gt: {},
   number_lt: {},
-  string_eq: { pointer_type: ["Plant"] },
+  string_eq: {},
 };
 
 export interface GroupCriteriaProps {

frontend/farm_designer/point_groups/criteria/show.tsx

@@ -83,8 +83,8 @@ export const NumberCriteriaSelection = (props: NumberCriteriaProps) => {
 };
 
 const DAY_OPERATOR_DDI_LOOKUP = (): { [x: string]: DropDownItem } => ({
-  ["<"]: { label: t("less than"), value: "<" },
-  [">"]: { label: t("greater than"), value: ">" },
+  ["<"]: { label: t("Less than"), value: "<" },
+  [">"]: { label: t("Greater than"), value: ">" },
 });
 
 /** Edit and view day criteria. */