update mini-excel

michaelliao · michaelliao · commit 1ef684a192a2 · 2016-09-26T21:39:27.000+08:00
diff --git a/samples/node/web/vue/mini-excel/app.js b/samples/node/web/vue/mini-excel/app.js
@@ -1,7 +1,11 @@
 const Koa = require('koa');
 
+const bodyParser = require('koa-bodyparser');
+
 const controller = require('./controller');
 
+const rest = require('./rest');
+
 const app = new Koa();
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -21,11 +25,20 @@ app.use(async (ctx, next) => {
 let staticFiles = require('./static-files');
 app.use(staticFiles('/static/', __dirname + '/static'));
 
-// redirect to /static/index.html:
 app.use(async (ctx, next) => {
-    ctx.response.redirect('/static/index.html');
+    if (ctx.request.path === '/') {
+        ctx.response.redirect('/static/index.html');
+    } else {
+        await next();
+    }
 });
 
+// parse request body:
+app.use(bodyParser());
+
+// bind .rest() for ctx:
+app.use(rest.restify());
+
 // add controllers:
 app.use(controller());
 
diff --git a/samples/node/web/vue/mini-excel/controllers/api.js b/samples/node/web/vue/mini-excel/controllers/api.js
@@ -0,0 +1,44 @@
+
+const APIError = require('../rest').APIError;
+
+const path = require('path');
+
+const fs = require('mz/fs');
+
+const saved_dir = path.normalize(__dirname + path.sep + '..' + path.sep + 'saved-docs');
+
+console.log(`documents will be saved in ${saved_dir}.`);
+
+module.exports = {
+    'GET /api/sheets/:id': async (ctx, next) => {
+        var s, fp = path.join(saved_dir, '.' + ctx.params.id);
+        console.log(`load from file ${fp}...`);
+        s = await fs.readFile(fp, 'utf8');
+        ctx.rest(JSON.parse(s));
+    },
+    'PUT /api/sheets/:id': async (ctx, next) => {
+        var
+            fp = path.join(saved_dir, '.' + ctx.params.id),
+            title = ctx.request.body.title,
+            rows = ctx.request.body.rows,
+            data;
+        if (!title) {
+            throw new APIError('invalid_data', 'invalid title');
+        }
+        if (!Array.isArray(rows)){
+            throw new APIError('invalid_data', 'invalid rows');
+        }
+        data = {
+            title: title,
+            rows: rows
+        };
+        await fs.writeFile(fp, JSON.stringify({
+            title: title,
+            rows: rows
+        }), 'utf8');
+        console.log(`wrote to file ${fp}.`);
+        ctx.rest({
+            id: ctx.params.id
+        });
+    }
+}
diff --git a/samples/node/web/vue/mini-excel/saved-docs/README b/samples/node/web/vue/mini-excel/saved-docs/README
@@ -0,0 +1 @@
+# documents will be saved in this dir.
diff --git a/samples/node/web/vue/mini-excel/static/index.html b/samples/node/web/vue/mini-excel/static/index.html
@@ -10,6 +10,7 @@
     <script src="/static/js/jquery.min.js"></script>
     <script src="/static/js/bootstrap.min.js"></script>
     <script src="/static/js/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
     <script src="/static/js/excel.js"></script>
     <style>
 
@@ -45,6 +46,7 @@
     </style>
     <script>
 
+var ID = 'S-001';
 var COLUMNS = 10;
 
 function createHeader() {
@@ -102,6 +104,27 @@
             selectedColIndex: 0
         },
         methods: {
+            open: function () {
+                var that = this;
+                that.$resource('/api/sheets/' + ID).get().then(function (resp) {
+                    resp.json().then(function (result) {
+                        that.title = result.title;
+                        that.rows = result.rows;
+                    });
+                }, function (resp) {
+                    alert('Failed to load.');
+                });
+            },
+            save: function () {
+                this.$resource('/api/sheets/' + ID).update({
+                    title: this.title,
+                    rows: this.rows
+                }).then(function (resp) {
+                    console.log('saved ok.');
+                }, function (resp) {
+                    alert('failed to save.');
+                });
+            },
             focus: function (cell) {
                 this.selectedRowIndex = cell.row;
                 this.selectedColIndex = cell.col;
@@ -132,6 +155,14 @@
         }
     };
 
+    $('#cmd-open').click(function () {
+        vm.open();
+    });
+
+    $('#cmd-save').click(function () {
+        vm.save();
+    });
+
     $('#cmd-left').click(function () {
         setAlign('left');
     });
@@ -171,6 +202,7 @@
             </div>
             <nav id="toolbar" class="collapse navbar-collapse">
                 <div class="btn-group">
+                    <button id="cmd-open" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-folder-open"></i> Open</button>
                     <button id="cmd-save" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
                     <button id="cmd-download" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-save"></i> Download</button>
                 </div>
@@ -198,7 +230,7 @@
         </table>
     </div>
 
-    <footer class="navbar navbar-fixed-bottom" style="height:35px; min-height:35px; overflow:hidden;">
+    <footer class="navbar navbar-fixed-bottom" style="background-color:#e7e7e7; height:35px; min-height:35px; overflow:hidden;">
         <div class="container-fluid">
             <nav class="collapse navbar-collapse">
                 <p class="text-right" style="padding-top:5px">
