Add Maps plugin

src/Core.js

@@ -16,7 +16,6 @@ function Core() {
 		data: coreState.data,
 		close: () => dispatch(setPlugin(false))
 	};
-	const dummyButtons = ["Maps", "Phone"];
 	return <>
 		<Box height="5vh" background="light-1" justify="center" direction="row">
 			{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
@@ -41,9 +40,8 @@ function Core() {
 						label="Pet Mode" />
 					<Button onClick={() => dispatch(setPlugin("smartHome"))} primary
 						label="Smart Home" margin="0 0 0 1em" />
-					{dummyButtons.map(i =>
+					<Button onClick={() => dispatch(setPlugin("maps"))} primary
-						<Button primary label={i} key={i} margin="0 0 0 1em" />
+						label="Maps" margin="0 0 0 1em" />
-					)}
 				</Box>
 			</Box>)
 		}

src/plugins/Maps.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Box, Button } from "grommet";
+
+import { MAPS_API } from "../config";
+
+function Maps(props) {
+	const [ location, setLocation ] = useState([null, null]);
+	useEffect(() => {
+		navigator.geolocation.getCurrentPosition(
+			position => setLocation([position.coords.latitude, position.coords.longitude]),
+			() => {}
+		);
+	});
+
+	const mapsEmbedUrl = new URL("https://www.google.com/maps/embed/v1/view");
+	mapsEmbedUrl.searchParams.append("key", MAPS_API);
+	mapsEmbedUrl.searchParams.append("center", `${location[0]},${location[1]}`);
+	mapsEmbedUrl.searchParams.append("zoom", 14);
+	return (
+		<Box
+			align="center"
+			background="light-1"
+			width="100vw"
+			justify="center"
+			direction="column"
+			alignContent="center"
+			height="95vh"
+		>
+			{location[0] === null ?
+				"Loading Location":
+				<iframe
+					width="650"
+					height="300"
+					frameBorder="0"
+					style={{ border: 0 }}
+					src={mapsEmbedUrl.href}>
+				</iframe>
+			}
+			<Button primary size="large" onClick={props.close}
+				label="Dismiss" margin="1.5em" />
+		</Box>
+	);
+}
+
+Maps.propTypes = {
+	data: PropTypes.object,
+	close: PropTypes.func
+};
+
+Maps.pluginName = "Maps";
+
+export default Maps;

src/plugins/index.js

@@ -4,6 +4,7 @@ import Temperature from "./Temperature";
 import Accident from "./Accident";
 import PetMode from "./PetMode";
 import SmartHome from "./SmartHome";
+import Maps from "./Maps";
 
 export default {
 	warning: Warning,
@@ -12,4 +13,5 @@ export default {
 	accident: Accident,
 	petMode: PetMode,
 	smartHome: SmartHome,
+	maps: Maps,
 };

src/sample.config.js

@@ -3,5 +3,6 @@ const TG_API = "xxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx";
 const TG_USERID = 123456789;
 const CAR_API = "http://localhost:5000/";
 const CAMERA_URL = "http://path.to/still/image.jpg";
+const MAPS_API = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
 
-export { WS_BASE, TG_API, TG_USERID, CAR_API, CAMERA_URL };
+export { WS_BASE, TG_API, TG_USERID, CAR_API, CAMERA_URL, MAPS_API };