diff --git a/plugins/dashboard/frontend/src/app/components/FPC.tsx b/plugins/dashboard/frontend/src/app/components/FPC.tsx index 4359d2bc1ae9e16afbd1e036c31bf4b573435956..b6e095f83cd13add70064191bc93489b908327c5 100644 --- a/plugins/dashboard/frontend/src/app/components/FPC.tsx +++ b/plugins/dashboard/frontend/src/app/components/FPC.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import NodeStore from "app/stores/NodeStore"; import {inject, observer} from "mobx-react"; -import {FPCStore, LightenDarkenColor, Node} from "app/stores/FPCStore"; +import {FPCStore} from "app/stores/FPCStore"; import Row from "react-bootstrap/Row"; import Container from "react-bootstrap/Container"; -import Col from "react-bootstrap/Col"; interface Props { nodeStore?: NodeStore; @@ -16,23 +15,11 @@ interface Props { @observer export default class FPC extends React.Component<Props, any> { render() { - let {nodes} = this.props.fpcStore; - let nodeSquares = []; - nodes.forEach((node: Node, id: number, obj: Map<number, Node>) => { - nodeSquares.push( - <Col xs={1} key={id.toString()} style={{ - height: 50, - width: 50, - background: LightenDarkenColor("#707070", node.opinion), - }}> - {node.opinion} - </Col> - ) - }) + let {nodeGrid} = this.props.fpcStore; return ( <Container> <Row> - {nodeSquares} + {nodeGrid} </Row> </Container> ); diff --git a/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx b/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx index dac9df9421a4c027b660afc22390498af80b01fd..4df80a351d3ecbf30921127f884b5e8152d6f6b7 100644 --- a/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx +++ b/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx @@ -1,5 +1,7 @@ import {RouterStore} from "mobx-react-router"; -import {action, observable, ObservableMap} from "mobx"; +import {action, computed, observable, ObservableMap} from "mobx"; +import Col from "react-bootstrap/Col"; +import * as React from "react"; export class Node { id: number; @@ -48,6 +50,23 @@ export class FPCStore { } } + @computed + get nodeGrid(){ + let nodeSquares = []; + this.nodes.forEach((node: Node, id: number, obj: Map<number, Node>) => { + nodeSquares.push( + <Col xs={1} key={id.toString()} style={{ + height: 50, + width: 50, + background: LightenDarkenColor("#707070", node.opinion), + }}> + {node.opinion} + </Col> + ) + }) + return nodeSquares; + } + }