Create the front page of the OSD

This commit is contained in:
Ceda EI 2020-12-21 17:51:27 +05:30
parent 446afb939a
commit 7ed58e94d8
1 changed files with 22 additions and 13 deletions

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { Box, Button, Clock } from "grommet";
import { setPlugin, selectCore } from "./coreSlice"; import { setPlugin, selectCore } from "./coreSlice";
import * as plugins from "./plugins"; import * as plugins from "./plugins";
@ -12,21 +13,29 @@ function Core() {
data: coreState.data, data: coreState.data,
close: () => dispatch(setPlugin(false)) close: () => dispatch(setPlugin(false))
}; };
const dummyButtons = ["Maps", "Home Devices", "Phone"];
return <> return <>
{plugin ? null : {plugin ? plugin(props) : (
<> <Box
<p>Welcome to Honda!</p> align="center"
{Object.keys(plugins.default).map( background="light-1"
i => <p width="100vw"
onClick={() => dispatch(setPlugin(i))} justify="center"
key={i} direction="column"
> alignContent="center"
{plugins.default[i].pluginName} height="100vh"
</p>) >
} <Clock size="xxlarge" />
</> <Clock size="xxlarge" type="digital" />
<Box direction="row" margin="1.5em" wrap={true}>
<Button onClick={() => dispatch(setPlugin("mpd"))} primary
label="Music Player" />
{dummyButtons.map(i =>
<Button primary label={i} key={i} margin="0 0 0 1em" />
)}
</Box>
</Box>)
} }
{plugin ? plugin(props) :null}
</>; </>;
} }