diff --git a/data/productGroups.json b/data/productGroups.json new file mode 100644 index 0000000..be37a1e --- /dev/null +++ b/data/productGroups.json @@ -0,0 +1 @@ +[{"name":"Maitotuotteet","subgroups":["Lehmänmaito","Vuohenmaito","Cheddar","Mozzarella"]},{"name":"Kukat","subgroups":["Leikkokukat","Rairuohot","Vehnä"]},{"name":"Lihatuotteet","subgroups":["Kana","Lammas","Possu","Kebabeläin"]}] \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 291d471..853b846 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,38 +1,160 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import {observable} from 'mobx'; -import {observer} from 'mobx-react'; +import { observable, action, configure } from 'mobx'; +import { observer } from 'mobx-react'; + +import "antd/es/layout/style"; +import Layout from "antd/es/layout"; + +import "antd/es/menu/style"; +import Menu from "antd/es/menu"; + +import "antd/es/card/style"; +import Card from "antd/es/card"; + +import "antd/es/grid/style"; +import { Row, Col } from "antd/es/grid"; + +import "antd/es/input/style"; +import Input from "antd/es/input"; + +import { ShoppingCartOutlined } from '@ant-design/icons'; + +import * as productGroups from "../data/productGroups.json"; + + +configure({ enforceActions: 'always' }); + + +interface ProductGroup { + name: String, + subgroups: String[] +} + +const PRODUCTGROUPS: ProductGroup[] = productGroups; // from GET productgroups class AppState { - @observable timer = 0; + @observable productCardsOnDisplay: Array; - constructor() { - setInterval(() => { - this.timer += 1; - }, 1000); + @action + setProductCardsOnDisplay(cards: Array) { + this.productCardsOnDisplay = cards; } - resetTimer() { - this.timer = 0; + async fetchProductCards() { + try { + const res = await fetch("http://localhost:8000/productCards"); + const cards = await res.json(); + this.setProductCardsOnDisplay(cards) + } catch (error) { + throw error; + } + } + + + constructor() { + this.setProductCardsOnDisplay([]); + this.fetchProductCards(); } } +interface ProductCard { + name: string, + thumbnail: string, + display_price: string +} + @observer -class TimerView extends React.Component<{appState: AppState}, {}> { +class MainView extends React.Component<{ appState: AppState }, {}> { + productRows(products: ProductCard[]) { + const cardWidth = 180; + let ret: Array = []; + + // TODO: there's probably thousand better ways than the initial copy paste rinse and repeat model below to form some rows .. PRs are welcomed + + for (let index = 0; index < products.length; index += 4) { + let cols: Array = [ + + }> + + + + ]; + if (index + 1 < products.length) { + cols.push( + + }> + + + ); + } + if (index + 2 < products.length) { + cols.push( + + }> + + + ); + } + if (index + 3 < products.length) { + cols.push( + + }> + + + ); + } + ret.push( + + {cols} + + ); + } + return ret; + } + render() { return ( -
- -
- ); - } + + + + logo + + + {PRODUCTGROUPS.map((group, groupindex) => + + {group.subgroups.map((subgroup, subgroupindex) => + {subgroup} + )} + + )} + + Yhteystiedot + Aukioloajat + + + + + + + {this.productRows(this.props.appState.productCardsOnDisplay)} + + + + + + + +

Foobar

+ + + + + ); + } - onReset = () => { - this.props.appState.resetTimer(); - } }; const appState = new AppState(); -ReactDOM.render(, document.getElementById('root')); + +ReactDOM.render(, document.getElementById('root')); diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..a10b46f Binary files /dev/null and b/static/logo.png differ diff --git a/static/prod/karhunkieli.jpg b/static/prod/karhunkieli.jpg new file mode 100644 index 0000000..afbf1e9 Binary files /dev/null and b/static/prod/karhunkieli.jpg differ diff --git a/static/prod/mokka.jpg b/static/prod/mokka.jpg new file mode 100644 index 0000000..909d656 Binary files /dev/null and b/static/prod/mokka.jpg differ diff --git a/static/prod/oatly.jpg b/static/prod/oatly.jpg new file mode 100644 index 0000000..33c6425 Binary files /dev/null and b/static/prod/oatly.jpg differ diff --git a/static/prod/reko.jpg b/static/prod/reko.jpg new file mode 100644 index 0000000..ef73024 Binary files /dev/null and b/static/prod/reko.jpg differ diff --git a/static/prod/suopa.jpg b/static/prod/suopa.jpg new file mode 100644 index 0000000..4144960 Binary files /dev/null and b/static/prod/suopa.jpg differ diff --git a/static/prod/t_karhunkieli.jpg b/static/prod/t_karhunkieli.jpg new file mode 100644 index 0000000..20f41c0 Binary files /dev/null and b/static/prod/t_karhunkieli.jpg differ diff --git a/static/prod/t_mokka.jpg b/static/prod/t_mokka.jpg new file mode 100644 index 0000000..0c244c4 Binary files /dev/null and b/static/prod/t_mokka.jpg differ diff --git a/static/prod/t_oatly.jpg b/static/prod/t_oatly.jpg new file mode 100644 index 0000000..27c974d Binary files /dev/null and b/static/prod/t_oatly.jpg differ diff --git a/static/prod/t_reko.jpg b/static/prod/t_reko.jpg new file mode 100644 index 0000000..6bb7f60 Binary files /dev/null and b/static/prod/t_reko.jpg differ diff --git a/static/prod/t_suopa.jpg b/static/prod/t_suopa.jpg new file mode 100644 index 0000000..826012d Binary files /dev/null and b/static/prod/t_suopa.jpg differ diff --git a/static/prod/turkey-180-240.jpg b/static/prod/turkey-180-240.jpg new file mode 100644 index 0000000..4d37406 Binary files /dev/null and b/static/prod/turkey-180-240.jpg differ