Adds a Home page with models table

This commit is contained in:
Roman Galochkin 2020-04-10 12:01:24 +03:00
parent 68a15168aa
commit 36e4a003d3
2 changed files with 86 additions and 8 deletions

View File

@ -70,13 +70,6 @@ module Menu = {
let make = () => {
<div className=Styles.menu>
<Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item>
{Models.all
|> E.A.fmap((model: Prop.Model.t) => {
<Item href={routeToPath(Model(model.id))} key={model.id}>
{model.name |> E.ste}
</Item>
})
|> ReasonReact.array}
<Item href={routeToPath(DistBuilder)} key="dist-builder">
{"Dist Builder" |> E.ste}
</Item>
@ -115,7 +108,7 @@ let make = () => {
| DistBuilder => <DistBuilder />
| DistBuilder2 => <DistBuilder2 />
| DistBuilder3 => <DistBuilder3 />
| Home => <div> {"Welcome" |> E.ste} </div>
| Home => <Home />
| _ => <div> {"Page is not found" |> E.ste} </div>
}}
</div>;

85
src/pages/Home.re Normal file
View File

@ -0,0 +1,85 @@
type route =
| Model(string);
let routeToPath = route =>
switch (route) {
| Model(modelId) => "/m/" ++ modelId
};
module Models = {
let all = [|
EAFunds.Interface.model,
GlobalCatastrophe.Interface.model,
Human.Interface.model,
|];
let getById = id => E.A.getBy(all, r => r.id == id);
};
module Styles = {
open Css;
let h3 = style([fontSize(`em(1.5)), marginBottom(`em(1.5))]);
let card = style([marginTop(`em(2.)), marginBottom(`em(2.))]);
};
module Table = {
module TableStyles = {
open Css;
let row = style([display(`flex), height(`em(4.))]);
let col = (~f=1.0, ()) => {
style([flex(`num(f))]);
};
};
module Item = {
[@react.component]
let make = (~model: Prop.Model.t, ~children) => {
<div className=TableStyles.row>
<div className={TableStyles.col()}>
<a
href={routeToPath(Model(model.id))}
onClick={e => {
e->ReactEvent.Synthetic.preventDefault;
ReasonReactRouter.push(routeToPath(Model(model.id)));
}}>
children
</a>
</div>
<div className={TableStyles.col(~f=3.0, ())}>
{model.description |> E.ste}
</div>
<div className={TableStyles.col()}> {model.author |> E.ste} </div>
</div>;
};
};
module ColumnsTitles = {
[@react.component]
let make = () => {
<div className=TableStyles.row>
<div className={TableStyles.col()}> {"Name" |> E.ste} </div>
<div className={TableStyles.col(~f=3.0, ())}>
{"Description" |> E.ste}
</div>
<div className={TableStyles.col()}> {"Author" |> E.ste} </div>
</div>;
};
};
[@react.component]
let make = () => {
<>
<h3 className=Styles.h3> {"Probability Models" |> E.ste} </h3>
<ColumnsTitles />
{Models.all
|> E.A.fmap((model: Prop.Model.t) => {
<Item model key={model.id}> {model.name |> E.ste} </Item>
})
|> ReasonReact.array}
</>;
};
};
[@react.component]
let make = () => {
<div> <div className=Styles.card> <Table /> </div> </div>;
};