Sync tool status across all clients

webclient/src/Tool.js

@@ -3,19 +3,41 @@ import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Lab
 import { Link } from 'react-router-dom';
 
 class Tool extends Component {
+	decodeStatus = status => {
+		if (status === null) {
+			return { msg: 'Unknown! Connection error?', canArm: false, canDisarm: false, };
+		} else if (!status.armed && !status.on) {
+			return { msg: 'Off', canArm: true, canDisarm: false, };
+		} else if (status.armed && !status.on) {
+			return { msg: 'Armed', canArm: false, canDisarm: true, };
+		} else if (status.armed && status.on) {
+			return { msg: 'On', canArm: false, canDisarm: true, };
+		} else if (!status.armed && status.on) {
+			return { msg: 'Error: Impossible state!', canArm: false, canDisarm: false, };
+		}
+	}
+
 	render() {
 		const data = this.props.data;
 		const user = this.props.user;
 		const match = this.props.match;
+		const toolStatus = this.props.toolStatus || [];
+		const requestInterlock = this.props.requestInterlock;
 
-		const category = data.categories.find((x) => 
+		const category = data.categories.find(x =>
 			x.slug === match.params.category
 		);
 
-		const tool = category.tools.find((x) => 
+		const tool = category.tools.find(x =>
 			x.id.toString() === match.params.id
 		);
 
+		const status = toolStatus.find(x =>
+			x.id.toString() === match.params.id
+		) || null;
+		const decodedStatus = this.decodeStatus(status);
+		console.log(decodedStatus);
+
 		const approved = user.authorizedTools.includes(tool.id);
 
 		return (
@@ -32,12 +54,18 @@ class Tool extends Component {
 					<Segment>
 						<Image src={tool.photo} size='medium' centered rounded />
 						<Segment textAlign='center' basic>
-							<p>Status: Off</p>
+							<p> Status: {decodedStatus.msg}</p>
 							<div>
-							<Button color='green' disabled={!approved}>
-								<Icon name='lightning' /> Arm
+							<Button color='green'
+								disabled={!approved || !decodedStatus.canArm}
+								onClick={() => requestInterlock({toolId: tool.id, action: 'arm',})}
+							>
+									<Icon name='lightning' /> Arm
 							</Button>
-							<Button color='red' disabled={!approved}>
+							<Button color='red'
+								disabled={!approved || !decodedStatus.canDisarm}
+								onClick={() => requestInterlock({toolId: tool.id, action: 'disarm',})}
+							>
 								<Icon name='stop' /> Disarm
 							</Button>
 							</div>