From c9e70ec95f733caa253b362e154b47cd5a26cbfe Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 8 Sep 2017 20:16:55 +0200
Subject: Display rack space and energy fill on overlay

---
 src/components/map/elements/ImageComponent.js | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/map/elements/ImageComponent.js

(limited to 'src/components/map/elements/ImageComponent.js')

diff --git a/src/components/map/elements/ImageComponent.js b/src/components/map/elements/ImageComponent.js
new file mode 100644
index 00000000..00766496
--- /dev/null
+++ b/src/components/map/elements/ImageComponent.js
@@ -0,0 +1,39 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Image} from "react-konva";
+
+class ImageComponent extends React.Component {
+    static propTypes = {
+        src: PropTypes.string.isRequired,
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        opacity: PropTypes.number.isRequired,
+    };
+
+    state = {
+        image: null
+    };
+
+    componentDidMount() {
+        const image = new window.Image();
+        image.src = this.props.src;
+        image.onload = () => this.setState({image});
+    }
+
+    render() {
+        return (
+            <Image
+                image={this.state.image}
+                x={this.props.x}
+                y={this.props.y}
+                width={this.props.width}
+                height={this.props.height}
+                opacity={this.props.opacity}
+            />
+        )
+    }
+}
+
+export default ImageComponent;
-- 
cgit v1.2.3