tag stuff

src/pbHelpers/Connectivity.tsx

@@ -0,0 +1,100 @@
+import {
+  SignalCellular4Bar,
+  SignalCellularOff,
+  SignalWifi4Bar,
+  SignalWifiOff
+} from "@mui/icons-material";
+import moment from "moment";
+import { pond } from "protobuf-ts/pond";
+import { getTextSecondary } from "theme/text";
+
+export interface ConnectivityDescriber {
+  icon: any;
+  description: string;
+  tooltip: string;
+}
+
+export enum Activity {
+  unknown = 0,
+  active = 1,
+  away = 2,
+  missing = 3
+}
+
+function getActivity(lastActive: string, checkInPeriod: number, now: moment.Moment): Activity {
+  let secondsSinceLastActive = moment.duration(now.diff(moment(lastActive))).asSeconds();
+  if (secondsSinceLastActive > checkInPeriod * 3) {
+    return Activity.missing;
+  } else if (secondsSinceLastActive > checkInPeriod) {
+    return Activity.away;
+  } else if (isNaN(secondsSinceLastActive)) {
+    return Activity.unknown;
+  }
+  return Activity.active;
+}
+
+function getColour(activity: Activity): string {
+  switch (activity) {
+    case Activity.active:
+      return "var(--status-ok)";
+    case Activity.away:
+      return "var(--status-risk)";
+    case Activity.missing:
+      return getTextSecondary();
+    default:
+      return "var(--status-unknown)";
+  }
+}
+
+function getIcon(platform: pond.DevicePlatform, activity: Activity): JSX.Element {
+  let colour = getColour(activity);
+  if (
+    platform === pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON ||
+    platform === pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR
+  ) {
+    if (activity === Activity.missing) {
+      return <SignalCellularOff style={{ color: colour }} />;
+    }
+    return <SignalCellular4Bar style={{ color: colour }} />;
+  }
+  if (activity === Activity.missing) {
+    return <SignalWifiOff style={{ color: colour }} />;
+  }
+  return <SignalWifi4Bar style={{ color: colour }} />;
+}
+
+function getTooltip(platform: pond.DevicePlatform): string {
+  switch (platform) {
+    case pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON ||
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR ||
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK ||
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN:
+      return "Communicates via Cellular";
+    case pond.DevicePlatform.DEVICE_PLATFORM_PHOTON ||
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_S3:
+      return "Communicates via Wi-Fi";
+    default:
+      return "";
+  }
+}
+
+function getDescription(lastActive: string): string {
+  if (lastActive === "") {
+    return "Never active";
+  }
+  return "Active " + moment(lastActive).fromNow();
+}
+
+export function describeConnectivity(
+  platform: pond.DevicePlatform,
+  lastActive: string,
+  checkInPeriod: number,
+  now: moment.Moment
+): ConnectivityDescriber {
+  let activity = getActivity(lastActive, checkInPeriod, now);
+  return {
+    icon: getIcon(platform, activity),
+    description: getDescription(lastActive),
+    tooltip: getTooltip(platform)
+  };
+}

src/pbHelpers/FirmwareVersion.tsx

@@ -0,0 +1,44 @@
+import FirmwareIcon from "@mui/icons-material/Security";
+
+export interface FirmwareVersionHelper {
+  description: string;
+  icon: any;
+  tooltip: string;
+  colour: string;
+}
+
+const oldFirmwareColour = "var(--status-warning)";
+const currentFirmwareColour = "var(--status-ok)";
+
+export function getFirmwareVersionHelper(
+  version: string,
+  available: string
+): FirmwareVersionHelper {
+  const firmwareIcon = <FirmwareIcon />;
+  const oldFirmwareIcon = <FirmwareIcon style={{ color: oldFirmwareColour }} />;
+  const currentFirmwareIcon = <FirmwareIcon style={{ color: currentFirmwareColour }} />;
+  let helper = {} as FirmwareVersionHelper;
+  if (!version || version === "") {
+    helper.description = "Unknown version";
+    helper.icon = oldFirmwareIcon;
+    helper.tooltip = "We don't know what version your device is, it may behave unexpectedly";
+  } else if (available !== "" && version !== available) {
+    helper.description = version;
+    helper.icon = oldFirmwareIcon;
+    helper.tooltip =
+      "A firmware upgrade is available, some features may be disabled for out-of-date devices";
+  } else if (available === "") {
+    helper.description = version;
+    helper.icon = firmwareIcon;
+    helper.tooltip = "Running version " + version;
+  } else {
+    helper.description = version;
+    helper.icon = currentFirmwareIcon;
+    helper.tooltip = "Your device is running the latest firmware";
+  }
+  return helper;
+}
+
+export function getFirmwareVersionColour(outdated: boolean): string {
+  return outdated ? oldFirmwareColour : currentFirmwareColour;
+}

src/pbHelpers/Status.tsx

@@ -0,0 +1,68 @@
+import { cyan } from "@mui/material/colors";
+import AcceptedIcon from "@mui/icons-material/CloudDone";
+import PendingIcon from "@mui/icons-material/CloudQueueTwoTone";
+import RejectedIcon from "@mui/icons-material/SmsFailed";
+import React from "react";
+
+export interface StatusHelper {
+  description: string;
+  icon: any;
+}
+
+const Unknown: StatusHelper = {
+  description: "Status unknown",
+  icon: null
+};
+
+const Pending: StatusHelper = {
+  description: "Pending changes",
+  icon: <PendingIcon style={{ color: cyan["600"] }} />
+};
+
+const Stale: StatusHelper = {
+  description: "Stale update",
+  icon: null
+};
+
+const Accepted: StatusHelper = {
+  description: "Settings synced",
+  icon: <AcceptedIcon style={{ color: "var(--status-ok)" }} />
+};
+
+const Rejected: StatusHelper = {
+  description: "Update failed",
+  icon: <RejectedIcon style={{ color: "var(--status-warning)" }} />
+};
+
+const Received: StatusHelper = {
+  description: "Settings synced",
+  icon: <AcceptedIcon style={{ color: "var(--status-ok)" }} />
+};
+
+const STATUS_MAP = new Map<string, StatusHelper>([
+  ["pending", Pending],
+  ["stale", Stale],
+  ["accepted", Accepted],
+  ["rejected", Rejected],
+  ["received", Received]
+]);
+
+export function getStatusHelper(status: string): StatusHelper {
+  const statuses = Array.from(STATUS_MAP.keys());
+  for (var i = 0; i < statuses.length; i++) {
+    let key = statuses[i];
+    if (status === key) {
+      return STATUS_MAP.get(key) as StatusHelper;
+    }
+  }
+
+  return Unknown;
+}
+
+export function getStatusDescription(status: string): string {
+  return getStatusHelper(status).description;
+}
+
+export function getStatusIcon(status: string): any {
+  return getStatusHelper(status).icon;
+}