diff --git a/client/App.tsx b/client/App.tsx
index a41b8be..29885f8 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -19,7 +19,9 @@ function NavContainer() {
+
+
diff --git a/client/components/DeviceImage.tsx b/client/components/DeviceImage.tsx
new file mode 100644
index 0000000..ad444f0
--- /dev/null
+++ b/client/components/DeviceImage.tsx
@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Item, ItemImageProps } from "semantic-ui-react";
+
+export default function DeviceImage(props: ItemImageProps) {
+ return ;
+}
diff --git a/client/components/DeviceView.tsx b/client/components/DeviceView.tsx
index 6ed54c8..082d3a4 100644
--- a/client/components/DeviceView.tsx
+++ b/client/components/DeviceView.tsx
@@ -1,12 +1,14 @@
import * as classNames from "classnames";
import { observer } from "mobx-react";
import * as React from "react";
+import { Link } from "react-router-dom";
import { Grid, Header, Icon, Item, SemanticICONS } from "semantic-ui-react";
+import { DeviceImage } from "@client/components";
import * as p from "@client/pages";
import * as route from "@client/routePaths";
import { AppState, injectState } from "@client/state";
-import { ConnectionState as ConState } from "@common/sprinklersRpc";
+import { ConnectionState as ConState, SprinklersDevice } from "@common/sprinklersRpc";
import { Route, RouteComponentProps, withRouter } from "react-router";
import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
@@ -44,16 +46,19 @@ const ConnectionState = observer(({ connectionState, className }:
});
interface DeviceViewProps {
- deviceId: string;
+ deviceId: number;
appState: AppState;
+ inList?: boolean;
}
class DeviceView extends React.Component> {
- render() {
- const { uiStore, sprinklersRpc, routerStore } = this.props.appState;
- const device = sprinklersRpc.getDevice(this.props.deviceId);
- const { id, connectionState, sections, sectionRunner } = device;
- const deviceBody = connectionState.isAvailable && (
+ renderBody(device: SprinklersDevice) {
+ const { inList, appState: { uiStore, routerStore } } = this.props;
+ const { connectionState, sectionRunner, sections } = device;
+ if (!connectionState.isAvailable || inList) {
+ return null;
+ }
+ return (
@@ -70,21 +75,44 @@ class DeviceView extends React.Component
);
- return (
- -
-
-
-
-
- Raspberry Pi Grinklers Device
-
- {deviceBody}
-
-
- );
+ }
+
+ render() {
+ const { deviceId, inList, appState: { sprinklersRpc, userStore } } = this.props;
+ const { userData } = userStore;
+ const iDevice = userData &&
+ userData.devices &&
+ userData.devices.find((dev) => dev.id === deviceId);
+ let itemContent: React.ReactNode;
+ if (!iDevice || !iDevice.deviceId) {
+ // TODO: better and link back to devices list
+ itemContent = You do not have access to this device;
+ } else {
+ const device = sprinklersRpc.getDevice(iDevice.deviceId);
+ const { connectionState } = device;
+ let header: React.ReactNode;
+ if (inList) { // tslint:disable-line:prefer-conditional-expression
+ header = Device {iDevice.name};
+ } else {
+ header = Device {iDevice.name};
+ }
+ itemContent = (
+
+
+
+
+
+ Raspberry Pi Grinklers Device
+
+ {this.renderBody(device)}
+
+
+ );
+ }
+ return - {itemContent}
;
}
}
diff --git a/client/components/NavBar.tsx b/client/components/NavBar.tsx
index 541fae2..64bf494 100644
--- a/client/components/NavBar.tsx
+++ b/client/components/NavBar.tsx
@@ -35,7 +35,7 @@ function NavBar({ appState }: { appState: AppState }) {
}
return (