begin date picker

src/App.ts

@@ -1,7 +1,8 @@
 import Chart from 'chart.js/auto';
-import { elementOpen, elementClose, elementVoid, text } from 'incremental-dom';
+import { elementOpen as o, elementClose as c, elementVoid as h, text, patch } from 'incremental-dom';
 import Header from './Header';
 
+//const o = elementOpen, c=elementClose, h=elementVoid;
 const data = [
   { year: 2010, count: 10 },
   { year: 2011, count: 20 },
@@ -12,18 +13,40 @@ const data = [
   { year: 2016, count: 28 },
 ];
 
+function Dates(datesP:Promise<Array<string>>){
+  const el =
+  o('div');
+    text('Loading');
+  c('div');
+  datesP.then(dates=>{
+    patch(el, ()=>{
+      o('select');
+      for(const date of dates){
+        o('option', date);
+        text(date);
+        c('option');
+      }
+      c('select');
+    })
+  });
+}
+
 function App({ ticks=[0,1,2,3,4,5] }) {
   Header();
-  elementOpen('div', '', ['class', "chart"]);
+  Dates(fetch('http://127.0.0.1:8234/option_quotes/AAPL/quote_dates').then(x=>x.json()));
+  /*
+  o('div', '', ['class', "chart"]);
     ticks.forEach((tick)=>{
-      elementOpen('label'); text(`T_${tick}`); elementClose('label');
-      elementVoid('input', tick, ['type',"range",'min',"0",'max',"100"]);
+      o('label'); text(`T_${tick}`); c('label');
+      h('input', tick, ['type',"range",'min',"0",'max',"100"]);
     });
-  elementClose('div');
-  elementOpen('div', 'barChartContainer', ['style', 'width:800px;']);
-    elementOpen('canvas', 'barChart', ['id', 'barChart']);
-    elementClose('canvas');
-  elementClose('div');
+  c('div');
+  */
+  /*
+  o('div', 'barChartContainer', ['style', 'width:800px;']);
+    o('canvas', 'barChart', ['id', 'barChart']);
+    c('canvas');
+  c('div');
 
   new Chart(//@ts-ignore
     document.getElementById('barChart'),
@@ -40,6 +63,7 @@ function App({ ticks=[0,1,2,3,4,5] }) {
       }
     }
   );
+  */
 }
 
 export default App;