[WIP] Configuration View

src/client/components/app/style.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500');
 
+* {
+	box-sizing: border-box;
+}
+
 html,
 body {
 	margin: 0;

src/client/components/configuration/style.css

@@ -0,0 +1,48 @@
+.configuration {
+  flex-grow: 1;
+  flex-shrink: 1;
+  display: flex;
+  flex-direction: column;
+  font-weight: normal;
+}
+
+.configuration__header {
+  height: 61px;
+  border-bottom: 1px solid #DDD;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  flex-shrink: 0;
+}
+
+.configuration__headerTitle {
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+}
+
+.configuration__body {
+  flex-grow: 1;
+  display: flex;
+}
+
+.configuration__sidebar {
+  width: 256px;
+  border-right: 1px solid #DDD;
+}
+
+.configuration__sidebarHeader {
+  background-color: #EEE;
+  padding: 4px 8px;
+  border-bottom: 1px solid #DDD;
+  font-weight: bold;
+}
+
+.configuration__content {
+  flex-grow: 1;
+}
+
+.configuration__contentPlaceholder {
+  padding-top: 32px;
+  text-align: center;
+}

src/client/components/configuration/tree/style.css

@@ -0,0 +1,49 @@
+.treenode {
+  display: flex;
+  flex-direction: column;
+}
+
+.treenode__header {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 4px 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.treenode__header:hover {
+  background-color: #EEE;
+  color: #1976D2;
+}
+
+.treenode__icon {
+  margin-right: 4px;
+}
+
+.treenode__icon svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.treenode__label {
+  flex-grow: 1;
+}
+
+.treenode__children {
+  display: none;
+}
+
+.treenode--expanded > .treenode__children {
+  display: block;
+}
+
+.treenode--selected > .treenode__header {
+  color: white;
+  background-color: #2196F3;
+}
+
+.treenode--selected > .treenode__header svg {
+  fill: rgba(255, 255, 255, 0.75);
+}

src/client/components/configuration/tree/tree.tsx

@@ -0,0 +1,66 @@
+import * as classnames from 'classnames'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import FileIcon from './file.svg'
+import FolderIconOpen from './folder-open.svg'
+import FolderIcon from './folder.svg'
+import * as style from './style.css'
+
+export interface Node {
+  label: string
+  expanded: boolean
+  leaf: boolean
+  selected: boolean
+  children?: Node[]
+}
+
+export interface TreeProps {
+  data: Node
+  level?: number
+  onClick(node: Node): void
+}
+
+@observer
+export class Tree extends React.Component<TreeProps, any> {
+  constructor(props: any, context: any) {
+    super(props, context)
+    this.onClick = this.onClick.bind(this)
+  }
+
+  public render(): JSX.Element {
+    const children = this.props.data.children || []
+    const hasChildren = children.length > 0
+    const level = this.props.level || 0
+    const classes = classnames(
+      style.treenode,
+      { [style['treenode--expanded']]: this.props.data.expanded },
+      { [style['treenode--selected']]: this.props.data.selected },
+    )
+    const headerInlineStyle = { paddingLeft: 8 + (level * 22) + 'px' }
+
+    return (
+      <div className={classes}>
+        <div className={style.treenode__header} onClick={this.onClick} style={headerInlineStyle}>
+          <div className={style.treenode__icon}>
+            {
+              hasChildren ?
+                (this.props.data.expanded ? <FolderIconOpen /> : <FolderIcon />) :
+                <FileIcon />
+            }
+          </div>
+
+          <div className={style.treenode__label}>{ this.props.data.label }</div>
+        </div>
+
+        <div className={style.treenode__children}>
+          { children.map((child, i) => <Tree key={i} data={child} level={level + 1} onClick={this.props.onClick} />) }
+        </div>
+      </div>
+    )
+  }
+
+  private onClick = (e: any) => {
+    this.props.onClick(this.props.data)
+  }
+}

src/client/components/configuration/tree_store.tsx

@@ -0,0 +1,39 @@
+import { action, observable } from 'mobx'
+import { Node } from './tree/tree'
+
+export class TreeStore {
+  @observable
+  public data: Node
+
+  @observable
+  public selectedNode: Node
+
+  constructor(data: Node) {
+    this.data = data
+    this.onNodeClick = this.onNodeClick.bind(this)
+  }
+
+  @action
+  public onNodeClick(node: Node): void {
+    if (node.leaf) {
+      this.selectNode(node)
+    } else {
+      this.toggleExpansion(node)
+    }
+  }
+
+  @action
+  public toggleExpansion(node: Node) {
+    node.expanded = !node.expanded
+  }
+
+  @action
+  public selectNode(node: Node) {
+    if (this.selectedNode) {
+      this.selectedNode.selected = false
+    }
+
+    node.selected = true
+    this.selectedNode = node
+  }
+}

src/client/components/configuration/view.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import * as style from './style.css'
+import { Node, Tree } from './tree/tree'
+import { TreeStore } from './tree_store'
+
+const store = new TreeStore({
+    label: 'root',
+    expanded: true,
+    leaf: false,
+    selected: false,
+    children: [
+        {
+            label: 'parent',
+            expanded: false,
+            leaf: false,
+            selected: false,
+            children: [
+                { label: 'child1', expanded: false, leaf: true, selected: false },
+                { label: 'child2', expanded: false, leaf: true, selected: false },
+            ],
+        },
+        {
+            label: 'parent',
+            expanded: false,
+            leaf: false,
+            selected: false,
+            children: [
+                {
+                    label: 'nested parent',
+                    expanded: false,
+                    leaf: false,
+                    selected: false,
+                    children: [
+                        { label: 'nested child 1', expanded: false, leaf: true, selected: false },
+                        { label: 'nested child 2', expanded: false, leaf: true, selected: false },
+                    ],
+                },
+            ],
+        },
+        {
+            label: 'Some file here',
+            expanded: true,
+            leaf: true,
+            selected: false,
+            children: [] as Node[],
+        },
+    ],
+})
+
+export const Configuration = () => (
+  <div className={style.configuration}>
+    <div className={style.configuration__header}>
+      <h1 className={style.configuration__headerTitle}>Configuration</h1>
+    </div>
+
+    <div className={style.configuration__body}>
+      <div className={style.configuration__sidebar}>
+        <div className={style.configuration__sidebarHeader}>Files</div>
+        <Tree onClick={store.onNodeClick} data={store.data} />
+      </div>
+
+      <div className={style.configuration__content}>
+        <div className={style.configuration__contentPlaceholder}>
+          Select a file to edit
+        </div>
+      </div>
+    </div>
+  </div>
+)

src/client/components/navigation/view.tsx

@@ -43,6 +43,7 @@ export const NavigationView = () => (
         <NavigationItemView url='/classifier' Icon={CubeIcon}>Classifier</NavigationItemView>
         <NavigationItemView url='/subsumption' Icon={OrderingIcon}>Subsumption</NavigationItemView>
         <NavigationItemView url='/gamestate' Icon={ControllerIcon}>GameState</NavigationItemView>
+        <NavigationItemView url='/configuration' Icon={ControllerIcon}>Configuration</NavigationItemView>
       </ul>
     </header>
 )

src/client/index.tsx

@@ -8,6 +8,7 @@ import * as io from 'socket.io-client'
 import { AppView } from './components/app/view'
 import { Chart } from './components/chart/view'
 import { Classifier } from './components/classifier/view'
+import { Configuration } from './components/configuration/view'
 import { Dashboard } from './components/dashboard/view'
 import { GameState } from './components/game_state/view'
 import { RobotModel } from './components/localisation/darwin_robot/model'
@@ -96,6 +97,7 @@ ReactDOM.render(
           <Route path='/classifier' component={Classifier}/>
           <Route path='/subsumption' component={Subsumption}/>
           <Route path='/gamestate' component={GameState}/>
+          <Route path='/configuration' component={Configuration}/>
         </Route>
       </Router>
     </Provider >,