1 files changed, 98 insertions, 11 deletions
diff --git a/client/index.js b/client/index.js
index eddc5fb2..a8783522 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,18 +2,105 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import Tabulator from 'tabulator-tables'
+import csv from 'parse-csv'
+// import parse from 'csv-parse'
 
-import App from './app'
+import { toArray } from './util'
+import Applet from './applet'
+import { store } from './store'
 
-import { store, history } from './store'
+function appendReactApplet(el, payload) {
+  ReactDOM.render(
+    <AppContainer>
+      <Provider store={store}>
+        <Applet command={payload} />
+      </Provider>
+    </AppContainer>, el
+  )
+}
 
-const container = document.createElement('div')
-document.body.appendChild(container)
+function appendTabulator(el, payload) {
+  const table = new Tabulator(el, {
+    height: '311px',
+    layout: 'fitDataFill',
+    placeholder: 'No Data Set',
+    columns: payload.fields.split(', ').map(field => {
+      switch (field) {
+        default:
+          return { title: field, field: field.toLowerCase(), sorter: 'string' }
+      }
+    }),
+    // {title:'Name', field:'name', sorter:'string', width:200},
+    // {title:'Progress', field:'progress', sorter:'number', formatter:'progress'},
+    // {title:'Gender', field:'gender', sorter:"string"},
+    // {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
+    // {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
+    // {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
+    // {title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
+  })
+  let path = payload.opt
+  // let columns = payload.fields.split(',').map(s => s.trim())
+  // console.log(path, columns)
+  fetch('https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_names_gender_kg_min.csv', { mode: 'cors' })
+    .then(r => r.text())
+    .then(text => {
+      const data = csv.toJSON(text, { headers: { included: true } })
+      console.log(data)
+      table.setData(data)
+      // const parser = parse()
+      // console.log(parser)
+      // parser.on('readable', () => {
+      //   let record
+      //   let output = []
+      //   do {
+      //     record = parser.read()
+      //     if (record) output.push(record)
+      //   } while (record)
+      //   output.shift()
+      //   table.setData(output)
+      // })
+      // parser.on('error', err => {
+      //   console.error(err.message)
+      // })
+      // parser.write(data)
+      // parser.end()
+      // table.setData(path, null, xs{ method: 'get', mode: 'cors', cache: 'no-cache' })
+    })
+}
 
-ReactDOM.render(
-  <AppContainer>
-    <Provider store={store}>
-      <App history={history} />
-    </Provider>
-  </AppContainer>, container
-)
+function appendApplets() {
+  toArray(document.querySelectorAll('.applet')).forEach(el => {
+    console.log(el.dataset.payload)
+    let payload;
+    try {
+      payload = JSON.parse(el.dataset.payload)
+    } catch (e) {
+      return
+    }
+    console.log(payload)
+    switch (payload.command) {
+      case 'load file':
+        appendTabulator(el, payload)
+        break
+      default:
+        appendReactApplet(el, payload)
+        break
+    }
+  })
+}
+
+function main() {
+  const paras = document.querySelectorAll('section p')
+  if (paras.length) {
+    paras[0].classList.add('first_paragraph')
+  }
+  toArray(document.querySelectorAll('header .links a')).forEach(tag => {
+    if (window.location.href.match(tag.href)) {
+      tag.classList.add('active')
+    }
+  })
+  appendApplets()
+}
+
+main()