Add Maps plugin
This commit is contained in:
parent
17a3436017
commit
df7470f147
|
@ -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 primary label={i} key={i} margin="0 0 0 1em" />
|
||||
)}
|
||||
<Button onClick={() => dispatch(setPlugin("maps"))} primary
|
||||
label="Maps" margin="0 0 0 1em" />
|
||||
</Box>
|
||||
</Box>)
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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 };
|
||||
|
|
Loading…
Reference in New Issue