embedding applets

1 files changed, 57 insertions, 35 deletions

diff --git a/client/index.js b/client/index.js
index 03015988..bc57f548 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,56 +2,78 @@ 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 App from './app'
-
+import { toArray } from './util'
+import Applet from './applet'
 import { store } from './store'
 
-// const container = document.createElement('div')
-// document.body.appendChild(container)
-
-toArray(document.querySelectorAll('.applet')).forEach(el => {
-  try {
-    const payload = JSON.parse(el.dataSet.getItem('payload'))
-  } catch(e) {
-    return
-  }
-  switch (payload.command) {
-    case 'load file':
-      append_tabulator(el, payload)
-      break
-    default:
-      append_react_applet(el, payload)
-      break
-  }
-})
-
-function append_react_applet(el, payload) {
+function appendReactApplet(el, payload) {
   ReactDOM.render(
     <AppContainer>
       <Provider store={store}>
-        <App command={payload} />
+        <Applet command={payload} />
       </Provider>
     </AppContainer>, el
   )
 }
-function append_tabulator(el, payload) {
+
+function appendTabulator(el, payload) {
   const table = new Tabulator(el, {
-    height:"311px",
-    layout:"fitColumns",
-    placeholder:"No Data Set",
-    columns:[
-      // {title:"Name", field:"name", sorter:"string", width:200},
-      // {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
-      // {title:"Gender", field:"gender", sorter:"string"},
+    height: '311px',
+    layout: 'fitColumns',
+    placeholder: 'No Data Set',
+    columns: [
+      // {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"},
     ],
   })
-  const columns = payload.fields.split(', ')
+  let path = payload.opt
+  let columns = payload.fields.split(',').map(s => s.trim())
   console.log(columns)
-  if ()
-  table.setData(path)
-}
\ No newline at end of file
+  if (path[0] !== '/') {
+    console.log(path)
+  }
+  // table.setData(path)
+}
+
+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()