spreadsheet component draft

hicsail · Aug 28, 2018 · 48ac05f · 48ac05f
1 parent 708460d
commit 48ac05f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 55 deletions.
diff --git a/server/web/views/components/spreadsheet.jsx b/server/web/views/components/spreadsheet.jsx
@@ -1,29 +1,43 @@
 'use strict'
-
 const React = require('react')
-const Layout = require('../views/layout.jsx')
-
+const divStyle = {
+  height: '600px',
+  width: '500px'
+}
 
-class Spreadsheet extends React.Component {
-  constructor (props) {
-    super(props)
-    this.spreadsheet = this.spreadsheet.bind(this);
+const gridclassname = "ag-theme-balham"
+const columnDefs = [
+{headerName: "Make", field: "make"},
+{headerName: "Model", field: "model"},
+{headerName: "Price", field: "price"}
+];
+// specify the data
+const rowData = [
+{make: "Toyota", model: "Celica", price: 35000},
+{make: "Ford", model: "Mondeo", price: 32000},
+{make: "Porsche", model: "Boxter", price: 72000}
+];
+const gridOptions = {
+columnDefs: columnDefs,
+rowData: rowData
+};
+const gridOptionsString = JSON.stringify(gridOptions)
+function gridContents (idname) {
+    const idName ='"#' + idname +  '"';
+    const eGridDiv = `document.querySelector(${idName})`;
+    const objectGrid = 'new agGrid.Grid('+eGridDiv+','+ gridOptionsString +')';
+    return {__html: objectGrid};
   }
 
-  spreadsheet () {
-    const content = this.props.tabs.map((tab) =>
-     <div key={tab.id} >
-       <button type={tab.type} value={tab.name}> {tab.name} </button>
-     </div>
-   )
-   return (
-     <div> {content} </div>
-   )
- };
 
+class Spreadsheet extends React.Component {
   render () {
     return (
-        <div>{this.spreadsheet()}</div>
+      <div>
+        <div id={this.props.idName} style={this.props.divStyle} className={this.props.themeClass}></div>
+        <script type={"text/javascript"} charSet={"utf-8"} dangerouslySetInnerHTML={gridContents(this.props.idName)}/>
+      </div>
+
     )
   }
 

diff --git a/server/web/views/home.jsx b/server/web/views/home.jsx
@@ -4,6 +4,7 @@ const Layout = require('./layout.jsx');
 const ButtonColumn = require('./components/buttoncolumn')
 const ButtonRow = require('./components/buttonrow')
 const Forms = require('./components/forms')
+const Spreadsheet = require('./components/spreadsheet')
 const fields = [
   {id: 0, title: 'test', route:'/'},
   {id: 1, title: 'test2', route: '/break'},
@@ -15,6 +16,12 @@ const signup = [
   {id: 2, name: 'email', type: 'email'},
   {id: 3, name: 'name', type: 'text'}
 ]
+const gridDivStyle = {
+  height: '500px',
+  width: '600px'
+}
+const gridId = 'myGrid'
+const gridClassName = 'ag-theme-balham'
 
 class HomeView extends React.Component {
 
@@ -26,7 +33,8 @@ class HomeView extends React.Component {
                 <ButtonColumn tabs = {fields} />
                 <ButtonRow tabs = {fields} />
                 <Forms fields  = {signup} />
-
+                <Spreadsheet idName={gridId} divStyle={gridDivStyle} themeClass={gridClassName} />
+                <Spreadsheet idName= {'blah'} divStyle={gridDivStyle} themeClass={gridClassName} />
             </Layout>
 
         );

diff --git a/server/web/views/layout.jsx b/server/web/views/layout.jsx
@@ -1,39 +1,5 @@
 'use strict';
 const React = require('react');
-const divStyle = {
-  height: '600px',
-  width: '500px'
-}
-
-const columnDefs = [
-{headerName: "Make", field: "make"},
-{headerName: "Model", field: "model"},
-{headerName: "Price", field: "price"}
-];
-
-// specify the data
-const rowData = [
-{make: "Toyota", model: "Celica", price: 35000},
-{make: "Ford", model: "Mondeo", price: 32000},
-{make: "Porsche", model: "Boxter", price: 72000}
-];
-
-// let the grid know which columns and what data to use
-const gridOptions = {
-columnDefs: columnDefs,
-rowData: rowData
-};
-const gridOptionsString = JSON.stringify(gridOptions)
-console.log(JSON.parse(gridOptionsString))
-
-const griddiv = '"#myGrid"'
-const eGridDiv = `document.querySelector(${griddiv})`;
-const objectGrid = 'new agGrid.Grid('+eGridDiv+','+ gridOptionsString +')';
-console.log(objectGrid)
-
-function createMarkup() {
-  return {__html: objectGrid};
-}
 
 class LayoutView extends React.Component {
     render () {
@@ -51,8 +17,7 @@ class LayoutView extends React.Component {
                     <p>
                         <a href="/">Home</a> | <a href="/about">About Us</a>
                     </p>
-                    <div id="myGrid" style = {divStyle} className={"ag-theme-balham"}></div>
-                    <script type={"text/javascript"} charSet={"utf-8"} dangerouslySetInnerHTML={createMarkup()}/>
+
                 </body>
             </html>
         );