1 files changed, 37 insertions, 0 deletions
diff --git a/app/client/common/augmentationGrid.component.js b/app/client/common/augmentationGrid.component.js
new file mode 100644
index 0000000..69bdc8a
--- /dev/null
+++ b/app/client/common/augmentationGrid.component.js
@@ -0,0 +1,37 @@
+import { h, Component } from 'preact'
+
+import Group from './group.component'
+import Param from './param.component'
+import Button from './button.component'
+import ButtonGrid from './buttonGrid.component'
+
+export default class AugmentationGrid extends Component {
+  state = {
+    x: 0, y: 0, sum: 0,
+  }
+  render() {
+    let rows = []
+    return (
+      <Group className='augmentationGrid'>
+        <ButtonGrid 
+          x={this.props.make}
+          y={this.props.take}
+          max={5000}
+          onHover={(x, y) => this.setState({ x, y })}
+          onClick={(x, y) => {
+            this.setState({ sum: this.state.sum + x * y })
+            this.props.onAugment(y, x)
+          }}
+        />
+        <Param title='Take'>{this.state.y}</Param>
+        <Param title='Make'>{this.state.x}</Param>
+        <Param title='Will add to dataset'>{this.state.x * this.state.y}</Param>
+        <Param title='Total added this epoch'>{this.state.sum}</Param>
+        <Button onClick={() => {
+          this.setState({ sum: 0 })
+          this.props.onTrain()
+        }}>Train</Button>
+      </Group>
+    )
+  }
+}