From a6332894cd066b083575a28470ffcc781dc88e76 Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Thu, 21 Dec 2017 09:52:19 +0000
Subject: [PATCH] ace add update ns

---
 src/vue-poc/components/vp-job.vue             |  69 ++++++
 src/vue-poc/components/vue-ace.vue            |  17 +-
 src/vue-poc/features/brutusin.vue             | 109 +++++++++
 src/vue-poc/features/edit/edit.vue            |   2 +-
 src/vue-poc/features/eval/eval.vue            |  28 ++-
 src/vue-poc/features/eval/eval.xqm            |  13 +-
 src/vue-poc/router.js                         |   1 +
 .../static/ace-workers/worker-xquery.js       |  15 +-
 src/vue-poc/static/app-gen.js                 | 217 ++++++++++++++++--
 src/vue-poc/static/app.html                   |   9 +-
 src/vue-poc/vue-poc.vue                       |   3 +-
 11 files changed, 441 insertions(+), 42 deletions(-)
 create mode 100644 src/vue-poc/components/vp-job.vue
 create mode 100644 src/vue-poc/features/brutusin.vue
diff --git a/src/vue-poc/components/vp-job.vue b/src/vue-poc/components/vp-job.vue
new file mode 100644
index 0000000..568a5c6
--- /dev/null
+++ b/src/vue-poc/components/vp-job.vue
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- 
+ job component
+ job:{id:
+      job:
+ -->
+<template id="vp-job">
+ <v-card  >
+     <v-toolbar dense>
+     <v-card-title>Details:</v-card-title>
+       <v-chip class="primary white--text">{{job.id}}</v-chip>
+         <v-spacer></v-spacer>
+           <v-chip class="primary white--text">{{job.job}}</v-chip>
+      
+           <v-chip label class="grey white--text"> 
+           <v-avatar class="red">  <v-icon>lock</v-icon>W</v-avatar>
+           {{ jobState.writes }}</v-chip>
+           
+            <v-chip label class="grey white--text"> 
+              <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
+              {{ jobState.reads }}</v-chip>
+ 
+      
+          <v-chip>{{ jobState.state }}</v-chip>
+         <v-chip class="primary white--text">
+          <v-avatar >  <v-icon>timer</v-icon></v-avatar>
+         {{elapsed}}ms</v-chip>
+    </v-toolbar>
+    <v-card-text   >
+  <v-flex xs12 style="height:60px;"  fill-height>
+  <vue-ace  :content="query" mode="xquery" wrap="true" read-only="true"
+     
+    ></vue-ace>
+    </v-flex>
+   </v-card-text>
+   <!-- result -->
+    <v-card-text   >
+  <v-flex  xs12 style="height:200px;"  fill-height>
+  <vue-ace  :content="aresult" mode="xquery" wrap="true" read-only="true" ></vue-ace>
+    </v-flex>
+   </v-card-text>
+   </v-card>
+   
+</template>
+
+<script>{
+  props: ['job',
+          'result',
+          'jobState',
+          'elapsed'],
+  data:function(){
+    return {
+      query:    "(:to do:)",
+      error:    null
+    }
+  },
+  watch:{
+    result:function(a){
+      console.log("result");
+    }
+  },
+  computed:{
+    aresult:function(){return this.result || "none"}
+  },
+  created:function(){
+      console.log("vp-job");
+    }
+}
+</script>
diff --git a/src/vue-poc/components/vue-ace.vue b/src/vue-poc/components/vue-ace.vue
index d1dec4f..4b9517a 100644
--- a/src/vue-poc/components/vue-ace.vue
+++ b/src/vue-poc/components/vue-ace.vue
@@ -2,6 +2,8 @@
 <!-- 
 ace editor for vue.js
 //https://jsfiddle.net/bc_rikko/gbpw2q9x/3/
+events:
+event fired cmd outline
  --> 
 <template id="vue-ace">
 <div  style="width: 100%; height: 100%;"></div>
@@ -31,6 +33,7 @@ ace editor for vue.js
         } 
       }
   },
+  
   watch: {
     'content' (value) {
         if (this.beforeContent !== value) {
@@ -62,6 +65,14 @@ ace editor for vue.js
      cm.exec(cmd, this.editor)
     },
     
+    outline(){
+      var row = this.editor.selection.getCursor().row
+      var toks=this.editor.session.getTokens(row).filter(function(t) {
+          return true
+      })
+      console.log("tokens: ",toks);
+    },
+    
     testAnnotations(){
     this.editor.getSession().setAnnotations([{
       row: 1,
@@ -129,11 +140,7 @@ ace editor for vue.js
     if(this.events){
       this.events.$on('eventFired', (cmd) => {
       if(cmd=="outline"){
-        var row = this.editor.selection.getCursor().row
-        var toks=this.editor.session.getTokens(row).filter(function(t) {
-            return true
-        })
-        console.log(toks);
+       this.outline();
       }else this.command(cmd);
     });
     }
diff --git a/src/vue-poc/features/brutusin.vue b/src/vue-poc/features/brutusin.vue
new file mode 100644
index 0000000..0c602ad
--- /dev/null
+++ b/src/vue-poc/features/brutusin.vue
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<template id="brutusin">
+ <v-container fluid>
+     <v-card>
+       <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+    </v-card>
+ </v-container>
+</template>
+
+<script>{
+  components: {
+    "vue-form-generator": VueFormGenerator.component
+   },
+   data() {
+     return {
+       model: {
+           id: 1,
+           name: "John Doe",
+           password: "J0hnD03!x4",
+           age: 35,
+           skills: ["Javascript", "VueJS"],
+           email: "john.doe@gmail.com",
+           status: true
+       },
+       schema: {
+           fields: [{
+               type: "input",
+               inputType: "text",
+               label: "ID",
+               model: "id",
+               readonly: true,
+               featured: false,
+               disabled: true
+           }, {
+               type: "input",
+               inputType: "text",
+               label: "Name",
+               model: "name",
+               readonly: false,
+               featured: true,
+               required: true,
+               disabled: false,
+               placeholder: "User's name",
+               validator: VueFormGenerator.validators.string
+           }, {
+               type: "input",
+               inputType: "password",
+               label: "Password",
+               model: "password",
+               min: 6,
+               required: true,
+               hint: "Minimum 6 characters",
+               validator: VueFormGenerator.validators.string
+           }, {
+               type: "input",
+               inputType: "number",
+               label: "Age",
+               model: "age",
+               min: 18,
+               validator: VueFormGenerator.validators.number
+           }, {
+               type: "input",
+               inputType: "email",
+               label: "E-mail",
+               model: "email",
+               placeholder: "User's e-mail address",
+               validator: VueFormGenerator.validators.email
+           }, {
+               type: "checklist",
+               label: "Skills",
+               model: "skills",
+               multi: true,
+               required: true,
+               multiSelect: true,
+               values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
+           }, {
+              type: "switch",
+               label: "Status",
+               model: "status",
+               multi: true,
+               readonly: false,
+               featured: false,
+               disabled: false,
+               default: true,
+               textOn: "Active",
+               textOff: "Inactive"
+           }]
+       },
+
+       formOptions: {
+           validateAfterLoad: true,
+           validateAfterChanged: true
+       }
+     };
+   },
+  methods:{
+    onResize(){
+      var el=this.$refs["page"]
+      console.log("top",el.offsetTop)
+      var h=Math.max(1,window.innerHeight - el.offsetTop)-60
+       console.log("h",h)
+      el.style.height=h +"px"
+    }
+  },
+  created:function(){
+    console.log("form")
+  }
+}
+</script>
diff --git a/src/vue-poc/features/edit/edit.vue b/src/vue-poc/features/edit/edit.vue
index a32ae0f..d3b51cb 100644
--- a/src/vue-poc/features/edit/edit.vue
+++ b/src/vue-poc/features/edit/edit.vue
@@ -13,7 +13,7 @@
 
   <v-btn color="primary" icon  slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
   <v-list>
-      <v-list-tile  v-for="item in path" :key="item">
+      <v-list-tile  v-for="(item,index) in path" :key="index">
         <v-list-tile-content @click="showfiles()">
         <v-list-tile-title >{{ item }}</v-list-tile-title>
         </v-list-tile-content>
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
index 3f6133a..f888807 100644
--- a/src/vue-poc/features/eval/eval.vue
+++ b/src/vue-poc/features/eval/eval.vue
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="eval">
  <v-container fluid>
-  <v-card >
+  <v-card  @keyup.ctrl.enter="submit">
      <v-toolbar dense>
      
      <v-menu offset-x>
@@ -27,7 +27,7 @@
     </v-card>
     </v-menu>
       <v-spacer></v-spacer>
-    <v-btn  @click="submit">
+    <v-btn  @click="submit" >
       <v-icon>play_circle_outline</v-icon>jobs:run
       </v-btn>
     <v-menu offset-y>
@@ -66,15 +66,16 @@
    </v-card-text>
    
      <v-card-actions v-if="show" >
-
-      <v-chip class="primary white--text">{{job.result}}</v-chip>
+       <v-chip class="primary white--text">{{job.id}}</v-chip>
+           <v-chip class="primary white--text">{{job.job}}</v-chip>
       
            <v-chip label class="grey white--text"> 
            <v-avatar class="red">  <v-icon>lock</v-icon>W</v-avatar>
            {{ jobState.writes }}</v-chip>
+           
             <v-chip label class="grey white--text"> 
-            <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
-            {{ jobState.reads }}</v-chip>
+	            <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
+	            {{ jobState.reads }}</v-chip>
  
         <v-spacer></v-spacer>
           <v-progress-circular v-if="waiting" indeterminate class="primary--text"></v-progress-circular>
@@ -93,21 +94,26 @@
         ></vue-ace>
         </v-flex> 
        </v-card-text>
+       <v-card-text>
+       BEFORE<vp-job :job="job" :result:="result" 
+       :job-state="jobState" :elapsed="elapsed">IN</vp-job>AFTER
+       </v-card-text>
     </v-card>
 
  </v-container>
 </template>
 
 <script>{
+
   data:  function(){
     return {
       xq: '(: type your XQuery :)\n',
-      result:'',
+      result: null,
       elapsed: null,
       show: false,
       showError: false, 
       showResult: false, //
-      job: {}, // {id:"12",result:"job13"}
+      job: {}, // {id:"12",job:"job13", dateTime:""}
       waiting: false,
       destroyed: false,
       start: null,
@@ -161,7 +167,7 @@
     pollState(){
       if(this.destroyed)return;
       this.waiting=true;
-      HTTP.get("job/"+this.job.result)
+      HTTP.get("job/"+this.job.job)
       .then(r=>{
         this.jobState=r.data
         this.waiting=r.data.state!="cached";
@@ -175,7 +181,7 @@
     },
     getResult(){
       this.awaitResult(true)
-       HTTPNE.post("eval/result/"+this.job.result)
+       HTTPNE.post("eval/result/"+this.job.job)
        .then(r=>{
          this.result=r.data.result+" "
        }).catch(r=> {
@@ -218,6 +224,8 @@
       this.showResult=true
     }
   },
+  computed: { 
+  },
   beforeRouteEnter (to, from, next) {
     settings.getItem('settings/ace')
     .then( v =>{
diff --git a/src/vue-poc/features/eval/eval.xqm b/src/vue-poc/features/eval/eval.xqm
index 96369e6..2802115 100644
--- a/src/vue-poc/features/eval/eval.xqm
+++ b/src/vue-poc/features/eval/eval.xqm
@@ -22,7 +22,7 @@ declare
 function vue-api:eval($xq )   
 {
  let $r:=util:query($xq,())
- return vue-api:response($r)
+ return vue-api:response($r,$xq)
 };
 
 (:~
@@ -30,15 +30,20 @@ function vue-api:eval($xq )
  :)
 declare
 %updating 
-function vue-api:response($r)
+function vue-api:response($r,$query)
 {
  let $id:=$vue-api:id + 1
  let $out:= <json   type="object" >
               <id>{ $id }</id>
-              <result>{$r}</result>
+              <job>{ $r }</job>
+              <dateTime>{ current-dateTime() }</dateTime>
             </json>
+ let $task:=<task id="{$id}">{ $out }
+              <query>{$query}</query>
+            </task>
   return (
            replace value of node $vue-api:id with $id,
+           db:replace($vue-api:db,"/tasks/" || $id || ".xml",$task),
            db:output($out)
           )          
 };
@@ -56,7 +61,7 @@ function vue-api:submit($xq )
  let $bindings:=map{}
  let $opts:=map{"cache":true()}
  let $r:=jobs:eval($xq,$bindings,$opts)
- return vue-api:response($r)
+ return vue-api:response($r,$xq)
 };
 
 
diff --git a/src/vue-poc/router.js b/src/vue-poc/router.js
index 470a957..1260b39 100644
--- a/src/vue-poc/router.js
+++ b/src/vue-poc/router.js
@@ -55,6 +55,7 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/map', component: Map,meta:{title:"map"} },
+    { path: '/form', component: Brutusin,meta:{title:"Form demo"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
diff --git a/src/vue-poc/static/ace-workers/worker-xquery.js b/src/vue-poc/static/ace-workers/worker-xquery.js
index e652bac..ef4f0c8 100644
--- a/src/vue-poc/static/ace-workers/worker-xquery.js
+++ b/src/vue-poc/static/ace-workers/worker-xquery.js
@@ -6269,6 +6269,12 @@ exports.StaticContext = function (parent, pos) {
             type: 'module',
             override: true
         };
+        namespaces['http://basex.org/modules/update'] = {
+            prefixes: ['update'],
+            pos: emptyPos,
+            type: 'module',
+            override: true
+        };
         namespaces['http://basex.org/modules/prof'] = {
             prefixes: ['prof'],
             pos: emptyPos,
@@ -6319,7 +6325,14 @@ exports.StaticContext = function (parent, pos) {
             type: 'module',
             override: true
         };
-        namespaces['http://basex.org/modules/web'] = {
+        
+          namespaces['http://basex.org/modules/json'] = {
+            prefixes: ['json'],
+            pos: emptyPos,
+            type: 'module',
+            override: true
+        };  
+          namespaces['http://basex.org/modules/web'] = {
             prefixes: ['web'],
             pos: emptyPos,
             type: 'module',
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 9e49a26..362b970 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-12-03T22:15:08.778Z
+// generated 2017-12-19T21:14:02.131Z
 Vue.component('qd-confirm',{template:` 
   <v-dialog v-model="value">
        <v-card>
@@ -218,6 +218,67 @@
     }
   }
 }
+      );
+      Vue.component('vp-job',{template:` 
+ <v-card>
+     <v-toolbar dense="">
+     <v-card-title>Details:</v-card-title>
+       <v-chip class="primary white--text">{{job.id}}</v-chip>
+         <v-spacer></v-spacer>
+           <v-chip class="primary white--text">{{job.job}}</v-chip>
+      
+           <v-chip label="" class="grey white--text"> 
+           <v-avatar class="red">  <v-icon>lock</v-icon>W</v-avatar>
+           {{ jobState.writes }}</v-chip>
+           
+            <v-chip label="" class="grey white--text"> 
+              <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
+              {{ jobState.reads }}</v-chip>
+ 
+      
+          <v-chip>{{ jobState.state }}</v-chip>
+         <v-chip class="primary white--text">
+          <v-avatar>  <v-icon>timer</v-icon></v-avatar>
+         {{elapsed}}ms</v-chip>
+    </v-toolbar>
+    <v-card-text>
+  <v-flex xs12="" style="height:60px;" fill-height="">
+  <vue-ace :content="query" mode="xquery" wrap="true" read-only="true"></vue-ace>
+    </v-flex>
+   </v-card-text>
+   <!-- result -->
+    <v-card-text>
+  <v-flex xs12="" style="height:200px;" fill-height="">
+  <vue-ace :content="aresult" mode="xquery" wrap="true" read-only="true"></vue-ace>
+    </v-flex>
+   </v-card-text>
+   </v-card>
+   
+ `,
+      
+  props: ['job',
+          'result',
+          'jobState',
+          'elapsed'],
+  data:function(){
+    return {
+      query:    "(:to do:)",
+      error:    null
+    }
+  },
+  watch:{
+    result:function(a){
+      console.log("result");
+    }
+  },
+  computed:{
+    aresult:function(){return this.result || "none"}
+  },
+  created:function(){
+      console.log("vp-job");
+    }
+}
+
       );
       Vue.component('vue-ace',{template:` 
 <div style="width: 100%; height: 100%;"></div>
@@ -247,6 +308,7 @@
         } 
       }
   },
+  
   watch: {
     'content' (value) {
         if (this.beforeContent !== value) {
@@ -278,6 +340,14 @@
      cm.exec(cmd, this.editor)
     },
     
+    outline(){
+      var row = this.editor.selection.getCursor().row
+      var toks=this.editor.session.getTokens(row).filter(function(t) {
+          return true
+      })
+      console.log("tokens: ",toks);
+    },
+    
     testAnnotations(){
     this.editor.getSession().setAnnotations([{
       row: 1,
@@ -345,11 +415,7 @@
     if(this.events){
       this.events.$on('eventFired', (cmd) => {
       if(cmd=="outline"){
-        var row = this.editor.selection.getCursor().row
-        var toks=this.editor.session.getTokens(row).filter(function(t) {
-            return true
-        })
-        console.log(toks);
+       this.outline();
       }else this.command(cmd);
     });
     }
@@ -507,6 +573,114 @@ Vue.filter('round', function(value, decimals) {
   }
 }
 
+      );
+      const Brutusin=Vue.extend({template:` 
+ <v-container fluid="">
+     <v-card>
+       <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+    </v-card>
+ </v-container>
+ `,
+      
+  components: {
+    "vue-form-generator": VueFormGenerator.component
+   },
+   data() {
+     return {
+       model: {
+           id: 1,
+           name: "John Doe",
+           password: "J0hnD03!x4",
+           age: 35,
+           skills: ["Javascript", "VueJS"],
+           email: "john.doe@gmail.com",
+           status: true
+       },
+       schema: {
+           fields: [{
+               type: "input",
+               inputType: "text",
+               label: "ID",
+               model: "id",
+               readonly: true,
+               featured: false,
+               disabled: true
+           }, {
+               type: "input",
+               inputType: "text",
+               label: "Name",
+               model: "name",
+               readonly: false,
+               featured: true,
+               required: true,
+               disabled: false,
+               placeholder: "User's name",
+               validator: VueFormGenerator.validators.string
+           }, {
+               type: "input",
+               inputType: "password",
+               label: "Password",
+               model: "password",
+               min: 6,
+               required: true,
+               hint: "Minimum 6 characters",
+               validator: VueFormGenerator.validators.string
+           }, {
+               type: "input",
+               inputType: "number",
+               label: "Age",
+               model: "age",
+               min: 18,
+               validator: VueFormGenerator.validators.number
+           }, {
+               type: "input",
+               inputType: "email",
+               label: "E-mail",
+               model: "email",
+               placeholder: "User's e-mail address",
+               validator: VueFormGenerator.validators.email
+           }, {
+               type: "checklist",
+               label: "Skills",
+               model: "skills",
+               multi: true,
+               required: true,
+               multiSelect: true,
+               values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
+           }, {
+              type: "switch",
+               label: "Status",
+               model: "status",
+               multi: true,
+               readonly: false,
+               featured: false,
+               disabled: false,
+               default: true,
+               textOn: "Active",
+               textOff: "Inactive"
+           }]
+       },
+
+       formOptions: {
+           validateAfterLoad: true,
+           validateAfterChanged: true
+       }
+     };
+   },
+  methods:{
+    onResize(){
+      var el=this.$refs["page"]
+      console.log("top",el.offsetTop)
+      var h=Math.max(1,window.innerHeight - el.offsetTop)-60
+       console.log("h",h)
+      el.style.height=h +"px"
+    }
+  },
+  created:function(){
+    console.log("form")
+  }
+}
+
       );
       const Files=Vue.extend({template:` 
  <v-container fluid="">
@@ -838,7 +1012,7 @@ Vue.filter('round', function(value, decimals) {
 
   <v-btn color="primary" icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
   <v-list>
-      <v-list-tile v-for="item in path" :key="item">
+      <v-list-tile v-for="(item,index) in path" :key="index">
         <v-list-tile-content @click="showfiles()">
         <v-list-tile-title>{{ item }}</v-list-tile-title>
         </v-list-tile-content>
@@ -1117,7 +1291,7 @@ Entities
       );
       const Eval=Vue.extend({template:` 
  <v-container fluid="">
-  <v-card>
+  <v-card @keyup.ctrl.enter="submit">
      <v-toolbar dense="">
      
      <v-menu offset-x="">
@@ -1180,15 +1354,16 @@ Entities
    </v-card-text>
    
      <v-card-actions v-if="show">
-
-      <v-chip class="primary white--text">{{job.result}}</v-chip>
+       <v-chip class="primary white--text">{{job.id}}</v-chip>
+           <v-chip class="primary white--text">{{job.job}}</v-chip>
       
            <v-chip label="" class="grey white--text"> 
            <v-avatar class="red">  <v-icon>lock</v-icon>W</v-avatar>
            {{ jobState.writes }}</v-chip>
+           
             <v-chip label="" class="grey white--text"> 
-            <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
-            {{ jobState.reads }}</v-chip>
+	            <v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
+	            {{ jobState.reads }}</v-chip>
  
         <v-spacer></v-spacer>
           <v-progress-circular v-if="waiting" indeterminate="" class="primary--text"></v-progress-circular>
@@ -1206,20 +1381,24 @@ Entities
         <vue-ace :content="result" mode="text" wrap="false" read-only="true" :settings="aceSettings"></vue-ace>
         </v-flex> 
        </v-card-text>
+       <v-card-text>
+       BEFORE<vp-job :job="job" :result:="result" :job-state="jobState" :elapsed="elapsed">IN</vp-job>AFTER
+       </v-card-text>
     </v-card>
 
  </v-container>
  `,
       
+
   data:  function(){
     return {
       xq: '(: type your XQuery :)\n',
-      result:'',
+      result: null,
       elapsed: null,
       show: false,
       showError: false, 
       showResult: false, //
-      job: {}, // {id:"12",result:"job13"}
+      job: {}, // {id:"12",job:"job13", dateTime:""}
       waiting: false,
       destroyed: false,
       start: null,
@@ -1273,7 +1452,7 @@ Entities
     pollState(){
       if(this.destroyed)return;
       this.waiting=true;
-      HTTP.get("job/"+this.job.result)
+      HTTP.get("job/"+this.job.job)
       .then(r=>{
         this.jobState=r.data
         this.waiting=r.data.state!="cached";
@@ -1287,7 +1466,7 @@ Entities
     },
     getResult(){
       this.awaitResult(true)
-       HTTPNE.post("eval/result/"+this.job.result)
+       HTTPNE.post("eval/result/"+this.job.job)
        .then(r=>{
          this.result=r.data.result+" "
        }).catch(r=> {
@@ -1330,6 +1509,8 @@ Entities
       this.showResult=true
     }
   },
+  computed: { 
+  },
   beforeRouteEnter (to, from, next) {
     settings.getItem('settings/ace')
     .then( v =>{
@@ -3643,6 +3824,7 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/map', component: Map,meta:{title:"map"} },
+    { path: '/form', component: Brutusin,meta:{title:"Form demo"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
@@ -3851,7 +4033,8 @@ router.beforeEach((to, from, next) => {
       {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
-      {href: '/svg',text: 'SVG',icon: 'extension'}, 
+      {href: '/svg',text: 'SVG',icon: 'extension'},
+      {href: '/form',text: 'Forms',icon: 'format_list_bulleted'  },
       {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
       ]},
       
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index fbc2f7f..6e49305 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -14,6 +14,7 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
+<link rel="stylesheet" href="https://unpkg.com/vue-form-generator@2.1.0/dist/vfg.css"/>
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
 <link href="/vue-poc/ui/svg-pan-zoom.css" rel="stylesheet" type="text/css"/>
 <link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
@@ -34,7 +35,7 @@
 </div>
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
@@ -49,11 +50,13 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/brutusin/json-forms@1.6.3/dist/js/brutusin-json-forms.js"></script>
+
+<script src="https://unpkg.com/vue-form-generator@2.1.1/dist/vfg.js"></script>
 <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" 
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
-<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script> 
+<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script>
+ 
 <script src="/vue-poc/ui/svg-pan-zoom.js"></script>
 <script src="/vue-poc/ui/perf-stat.js"></script>
 <script src="/vue-poc/ui/app-gen.js"></script>
diff --git a/src/vue-poc/vue-poc.vue b/src/vue-poc/vue-poc.vue
index 43d1e80..abb8c65 100644
--- a/src/vue-poc/vue-poc.vue
+++ b/src/vue-poc/vue-poc.vue
@@ -205,7 +205,8 @@
       {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
-      {href: '/svg',text: 'SVG',icon: 'extension'}, 
+      {href: '/svg',text: 'SVG',icon: 'extension'},
+      {href: '/form',text: 'Forms',icon: 'format_list_bulleted'  },
       {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
       ]},
       
