[ui] Init Vue and Axios without webpack #19

- just have one Vue instance, and I plan to use this instance for everything until it gets too big - use axios for ajax, vue does not recommend vue-resource anymore - firefox does not support the date and datetime control, but I don't want to add a datetime picker right now, so just use Chrome
xephonhq · May 13, 2017 · 6118f42 · 6118f42
1 parent 0fc4a0a
commit 6118f42
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 1 deletion.
diff --git a/doc/impl/storage-disk.md b/doc/impl/storage-disk.md
@@ -2,4 +2,8 @@
 
 ## Ref 
 
+mmap
+
 - https://github.com/google/codesearch/tree/master/index
+- http://beej.us/guide/bgipc/output/html/multipage/mmap.html
+- https://github.com/arpith/mmapd
diff --git a/pkg/server/http_server.go b/pkg/server/http_server.go
@@ -88,6 +88,8 @@ func (srv HTTPServer) Mux() *http.ServeMux {
 	mux.Handle("/w", writeHandler)
 	mux.Handle("/read", readHandler)
 	mux.Handle("/r", readHandler)
+	// TODO: allow config static content location
+	mux.Handle("/", http.FileServer(http.Dir(".")))
 	return mux
 }
 

diff --git a/web/README.md b/web/README.md
@@ -2,6 +2,19 @@
 
 A simple UI using echarts
 
+## Vue
+
+Share state
+
+- https://vuejs.org/v2/guide/state-management.html
+- https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
+- Vuex https://vuex.vuejs.org/en/getting-started.html
+
+Code editor
+
+- Ace fiddle https://jsfiddle.net/bc_rikko/gbpw2q9x/3/
+- CodeMirror https://surmon-china.github.io/vue-codemirror/
+
 ## Ref 
 
 - Line stack http://gallery.echartsjs.com/editor.html?c=line-stack

diff --git a/web/index.html b/web/index.html
@@ -3,9 +3,63 @@
 <head>
     <meta charset="UTF-8">
     <title>Xephon-K UI</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
+    <!-- TODO: favicon -->
+    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ">-->
 </head>
 <body>
+<div id="app">
+    <h1>Xephon-K UI</h1>
+    <p>Database Info</p>
+    <table>
+        <thead>
+        <tr>
+            <td>Key</td>
+            <td>Value</td>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(value, key) in info">
+            <td>{{ key }}</td>
+            <td>{{ value }}</td>
+        </tr>
+        </tbody>
+    </table>
+    Form
+    <!-- FireFox does not support Date at all -->
+    <!-- http://stackoverflow.com/questions/22983013/how-to-get-html-5-input-type-date-working-in-firefox-and-or-ie-10 -->
+    <input type="date" v-model="d1">
+    <!-- NOTE: datetime is not supported by Chrome -->
+    <input type="datetime">
+    <input type="datetime-local" v-model="dt">
+    <span>{{ d1 }}</span>
+    <span>{{ dt }}</span>
+</div>
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
+<script>
+    var app = new Vue({
+        el: '#app',
+        data: {
+            info: {},
+            d1: '2017-05-13',
+            dt: '2017-05-13T01:23'
+        },
+        // TODO: maybe move it to somewhere else
+        mounted: function () {
+            var self = this;
+            axios.get('/info')
+                .then(function (response) {
+                    // axios will parse JSON automatically
+                    self.info = response.data;
+                })
+                .catch(function (error) {
+                    console.error(error);
+                });
+        }
+    });
+
+</script>
 <div id="canvas" style="width: 600px;height:400px;"></div>
 <script type="text/javascript">
     var onlyChart = echarts.init(document.getElementById('canvas'));