Icons

webpage/src/Icon.js

+/*
+ * Copyright (2019) Levi Coffman
+ */
+
+import React, {Component} from 'react';
+import styled from 'styled-components';
+
+// ******** STYLE *********
+
+const IconDiv = styled.div`
+    width: 10em;
+    height: 15em;
+    border-style: solid;
+    border-radius: 1em;
+    overflow: hidden;
+    box-shadow: .1em .1em .3em black;
+    margin-bottom: .6em;
+    margin-right: .6em;
+`;
+
+/**
+ * HeadShot style.
+ */
+const Img = styled.img`
+    width: 100%;
+    height: 75%;
+    display: block;
+`;
+
+/**
+ * Name tag style.
+ *
+ * @type {React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | never}
+ */
+const NameDiv = styled.h3`
+    width: 100%;
+    height: 17%;
+    margin: 0;
+    box-sizing: border-box;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+/**
+ * Status bar style.
+ *
+ * @type {React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | never}
+ */
+const StatusDiv = styled.div`
+    width: 100%;
+    height: 8%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.status.COLOR};
+`;
+
+// ****** Component *******
+
+const STATUS = {
+    NEEDS_WATER: {
+        TEXT: "Needs water!",
+        CODE: "1",
+        COLOR: "red",
+    },
+    GOOD: {
+        TEXT: "Happy",
+        CODE: "2",
+        COLOR: "green",
+    },
+    LOADING: {
+        TEXT: "Loading...",
+        CODE: "0",
+        COLOR: "grey",
+    },
+    UNAVAILABLE: {
+        TEXT: "Unavailable",
+        CODE: "-1",
+        COLOR: "grey",
+    },
+};
+
+/**
+ * An icon for a plant. When clicked, will redirect to the plants page.
+ * Displays the current water status of the plant.
+ */
+class Icon extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            status: STATUS.LOADING,
+        };
+    }
+
+    componentDidMount() {
+        // Setup the status event listeners
+
+        // Setup the error handler
+        this.errorListener = (event) => {
+            this.setState({status: STATUS.UNAVAILABLE});
+        };
+        this.props.sse.addEventListener('error', this.errorListener, false);
+
+        // Setup the update handler
+        this.updateListener = (event) => {
+            let code = JSON.parse(event.data).CODE;
+
+            // Set the status
+            for (let status in STATUS) {
+                if (!STATUS.hasOwnProperty(status))
+                    continue;
+
+                // Check if this status is the one we want
+                if (STATUS[status].CODE === code) {
+                    this.setState({status: STATUS[status]});
+                    return;
+                }
+            }
+        };
+        this.props.sse.addEventListener(`update-${this.props.plantID}`, this.updateListener, false);
+    }
+
+    componentWillUnmount() {
+        // Remove the status event listeners
+        this.props.sse.removeEventListener("error", this.errorListener);
+        this.props.sse.removeEventListener(`update-${this.props.plantID}`, this.updateListener);
+    }
+
+    /**
+     * Called when this icon gets clicked on.
+     *
+     * @param event
+     */
+    onClick = (event) => {
+        console.log(`Clicked on ${this.props.plantName}`);
+    };
+
+    render() {
+        return (
+            <IconDiv onClick={this.onClick} >
+                <Img className="IconImage" src={`icons/${this.props.plantID}.jpg`} alt="Icon"/>
+                <NameDiv>
+                    {this.props.plantName}
+                </NameDiv>
+                <StatusDiv status={this.state.status}>
+                    Status: {this.state.status.TEXT}
+                </StatusDiv>
+            </IconDiv>
+        );
+    }
+}
+
+export default Icon;
\ No newline at end of file