From d9a9f99d27dcfd960db19d9d39bca21d8910faae Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Thu, 27 Jul 2017 21:44:30 +0100
Subject: [PATCH] vuetify 0.14.7

---
 README.md                                     |  22 +
 src/vue-poc/components/core.js                |  48 +-
 .../{my-component.vue => qd-link.vue}         |   7 +-
 .../{nav-list.vue => qd-navlist.vue}          |  11 +-
 src/vue-poc/components/vis-time-line.vue      |  22 +
 src/vue-poc/expath-pkg.xml                    |   5 +-
 src/vue-poc/features/about.vue                |   4 +-
 src/vue-poc/features/adminlog/logs.vue        |  85 ++
 src/vue-poc/features/adminlog/logs.xqm        |  45 +
 src/vue-poc/features/collection/files.vue     | 127 +--
 src/vue-poc/features/collection/history.xml   |   1 +
 src/vue-poc/features/edit/edit.vue            |   3 +-
 src/vue-poc/features/eval/eval.vue            |   2 +-
 src/vue-poc/features/home.vue                 |   4 +-
 src/vue-poc/features/images/image.vue         |  15 +
 src/vue-poc/features/images/images.vue        |  10 +-
 src/vue-poc/features/job/jobs.vue             |   2 +-
 src/vue-poc/features/logs.vue                 |  18 -
 src/vue-poc/features/people.vue               |  70 --
 src/vue-poc/features/ping/ping.vue            |  25 +-
 src/vue-poc/features/select.vue               |  28 +-
 src/vue-poc/features/session.vue              |  69 ++
 src/vue-poc/features/settings.vue             |  33 +-
 .../{ => tasks}/model.build/entity-gen.xqm    |   0
 .../{ => tasks}/model.build/model.vue         |   5 +-
 .../{ => tasks}/model.build/rxq-model.xqm     |   0
 src/vue-poc/features/{ => tasks}/tasks.vue    |  12 +-
 .../features/tasks/xqdoc/html-module.xsl      | 459 ++++++++++
 .../features/tasks/xqdoc/rxq-xqdoc.xqm        |  57 ++
 src/vue-poc/features/tasks/xqdoc/xqdoc.vue    |  88 ++
 src/vue-poc/features/timeline.vue             |  43 +
 src/vue-poc/lib/dice.xqm                      |   2 +-
 src/vue-poc/lib/file.xqm                      |   4 +-
 src/vue-poc/lib/mimetype.xqm                  |   2 +-
 src/vue-poc/lib/webutils.xqm                  | 137 +++
 src/vue-poc/models.gen.xqm                    |  50 +-
 src/vue-poc/models/adminlog.xml               |  34 +
 src/vue-poc/static/app-gen.js                 | 821 ++++++++++++------
 src/vue-poc/static/app.html                   |  15 +-
 src/vue-poc/static/resources/ark/ark.sch      |  12 +
 src/vue-poc/static/resources/ark/ark.xml      |  59 ++
 src/vue-poc/static/resources/ark/ark.xsd      |  74 ++
 src/vue-poc/tasks/createimage.xq              |   5 +-
 src/vue-poc/tasks/createwadl.xq               |  29 +
 44 files changed, 2054 insertions(+), 510 deletions(-)
 rename src/vue-poc/components/{my-component.vue => qd-link.vue} (64%)
 rename src/vue-poc/components/{nav-list.vue => qd-navlist.vue} (94%)
 create mode 100644 src/vue-poc/components/vis-time-line.vue
 create mode 100644 src/vue-poc/features/adminlog/logs.vue
 create mode 100644 src/vue-poc/features/adminlog/logs.xqm
 create mode 100644 src/vue-poc/features/images/image.vue
 delete mode 100644 src/vue-poc/features/logs.vue
 delete mode 100644 src/vue-poc/features/people.vue
 create mode 100644 src/vue-poc/features/session.vue
 rename src/vue-poc/features/{ => tasks}/model.build/entity-gen.xqm (100%)
 rename src/vue-poc/features/{ => tasks}/model.build/model.vue (93%)
 rename src/vue-poc/features/{ => tasks}/model.build/rxq-model.xqm (100%)
 rename src/vue-poc/features/{ => tasks}/tasks.vue (70%)
 create mode 100644 src/vue-poc/features/tasks/xqdoc/html-module.xsl
 create mode 100644 src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm
 create mode 100644 src/vue-poc/features/tasks/xqdoc/xqdoc.vue
 create mode 100644 src/vue-poc/features/timeline.vue
 create mode 100644 src/vue-poc/lib/webutils.xqm
 create mode 100644 src/vue-poc/models/adminlog.xml
 create mode 100644 src/vue-poc/static/resources/ark/ark.sch
 create mode 100644 src/vue-poc/static/resources/ark/ark.xml
 create mode 100644 src/vue-poc/static/resources/ark/ark.xsd
 create mode 100644 src/vue-poc/tasks/createwadl.xq

diff --git a/README.md b/README.md
index 77933d5..4074acd 100644
--- a/README.md
+++ b/README.md
@@ -4,3 +4,25 @@ A test of using `vue.js` as UI
 Includes:
 * material design (using `vuetify`)
 * ace editor
+* localforage for persistence
+
+
+## Settings
+Global `settings` provides `getItem(name)` and `setItem(name.value)`
+Example usage
+```
+ created: function () {
+    settings.getItem('settings/ace')
+    .then((v)=>{
+      this.ace=v
+    })
+
+  },
+  watch: {"ace":{
+    handler:function(v){
+      settings.setItem('settings/ace',this.ace)
+      },
+    deep:true
+  } 
+
+```
\ No newline at end of file
diff --git a/src/vue-poc/components/core.js b/src/vue-poc/components/core.js
index 0d69a52..b59c66c 100644
--- a/src/vue-poc/components/core.js
+++ b/src/vue-poc/components/core.js
@@ -20,6 +20,38 @@ const Auth={
       })  }
 };
 Vue.use(Auth);
+
+// https://vuejs.org/v2/guide/state-management.html
+var settings = {
+    debug: true,
+    getItem (key) {
+      if (this.debug) console.log('getItem',key);
+      return new Promise((resolve, reject) => {
+        localforage.getItem(key)
+        .then((value) => {
+          console.log('GET setting', key,value);
+          resolve(value)
+        }).catch((err) => {
+          console.log('GET failed');
+          reject(err)
+      });
+      });
+    },
+    setItem (key,value,callback) {
+      if (this.debug) console.log('setItem',key,value);
+      return new Promise((resolve, reject) => {
+      localforage.setItem(key, value) 
+      .then((value) => {
+        console.log('SET ',key, value);
+        return new Promise((resolve, reject) => {resolve(value);})
+      }).catch((err) => {
+        console.log('set failed');
+        return new Promise((resolve, reject) => {reject(err);})
+      });
+    })
+    }
+  };
+
 Vue.config.errorHandler = function (err, vm, info) {
   // handle error
   // `info` is a Vue-specific error info, e.g. which lifecycle hook
@@ -37,8 +69,9 @@ const router = new VueRouter({
   mode: 'history',
   routes: [
     { path: '/', component: Home,meta:{title:"Home"} },
-    { path: '/people', component: People ,meta:{title:"People"}},
+    { path: '/session', component: Session ,meta:{title:"Session"}},
     { path: '/images', component: Images,meta:{title:"Images"} },
+    { path: '/images/:id', name:"image",component: Image, props: true,meta:{title:"Image details"}},
     { path: '/select', component: Select,meta:{title:"Select"} },
     { path: '/search', component: Search,meta:{title:"Search"} },
     { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@@ -55,7 +88,9 @@ const router = new VueRouter({
     { path: '/logs', component: Log,meta:{title:"Server logs"} },
     { path: '/tasks', component: Task,meta:{title:"Runnable tasks"} },
     { path: '/tasks/model', component: Model,meta:{title:"build model"} },
+    { path: '/tasks/xqdoc', component: Xqdoc,meta:{title:"build xqdoc"} },
     { path: '/jobs', component: Job,meta:{title:"Jobs"} },
+    { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
 });
@@ -98,8 +133,7 @@ const app = new Vue({
        {href: '/database', text: 'Databases',icon: 'account_balance' },
        {href: '/files', text: 'File system',icon: 'folder' },
       {href: '/edit',text: 'edit',icon: 'mode_edit'},
-      {href: '/history',text: 'history',icon: 'history'},
-      {href: '/logs',text: 'Server logs',icon: 'dns'}
+      {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
         icon: 'directions_run',
@@ -110,17 +144,19 @@ const app = new Vue({
       {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
       {href: '/tasks',text: 'Tasks',icon: 'history'}
       ]},
+      {href: '/logs',text: 'Server logs',icon: 'dns'},
       {
         icon: 'more_horiz',
         text: 'More' ,
         model: false,
         children: [
-      {href: '/people',text: 'People',icon: 'person'}, 
+      {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'}, 
       {href: '/images',text: 'Images',icon: 'camera_roll'}, 
       {href: '/tabs',text: 'tabs',icon: 'switch_camera'}, 
       {href: '/ping',text: 'ping',icon: 'update'},
+      {href: '/timeline',text: 'time line',icon: 'timelapse'},
       {href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'}
       ]},
       {href: '/settings',text: 'settings',icon: 'settings'  }
@@ -128,7 +164,9 @@ const app = new Vue({
 
   }},
   methods: {
-      
+      session(){
+        this.$router.push({path: '/session'})
+      },
       search(){
         this.$router.push({path: '/search',query: { q: this.q }})
       },
diff --git a/src/vue-poc/components/my-component.vue b/src/vue-poc/components/qd-link.vue
similarity index 64%
rename from src/vue-poc/components/my-component.vue
rename to src/vue-poc/components/qd-link.vue
index 60dd53f..322683d 100644
--- a/src/vue-poc/components/my-component.vue
+++ b/src/vue-poc/components/qd-link.vue
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
-<template id="my-component">
+<!-- 
+ simple link test component
+ -->
+<template id="qd-link">
  <a :href="href" :target="href" > {{href}}<v-icon>link</v-icon></a>
 </template>
 
 <script>{
   props: ['href'],
   created:function(){
-      console.log("my-component");
+      console.log("qd-link");
     }
 }
 </script>
diff --git a/src/vue-poc/components/nav-list.vue b/src/vue-poc/components/qd-navlist.vue
similarity index 94%
rename from src/vue-poc/components/nav-list.vue
rename to src/vue-poc/components/qd-navlist.vue
index a049fd9..06ca721 100644
--- a/src/vue-poc/components/nav-list.vue
+++ b/src/vue-poc/components/qd-navlist.vue
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
-<template id="nav-list">
+<!-- 
+for nav drawer
+ -->
+<template id="qd-navlist">
  <v-list dense>
 <template v-for="(item, i) in items">
   <v-layout
@@ -62,10 +65,6 @@
 </template>
 
 <script>{
-  props: ['items'],
- 
-   created:function(){
-      console.log("nav-lst");
-    }
+  props: ['items']
 }
 </script>
diff --git a/src/vue-poc/components/vis-time-line.vue b/src/vue-poc/components/vis-time-line.vue
new file mode 100644
index 0000000..0c2cd8f
--- /dev/null
+++ b/src/vue-poc/components/vis-time-line.vue
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- 
+for vis-time-line
+ -->
+<template id="vis-time-line">
+  <div></div>
+</template>
+<script>{ 
+  props: ['items', 'groups', 'options'],
+  methods:{
+    select(properties){
+      //alert('selected items: ' + properties.items);
+    }
+  },
+  mounted: function () {
+    var items = new vis.DataSet(this.items);
+    var options = this.options;
+    var groups = this.groups;
+    var timeline = new vis.Timeline(this.$el, items, groups, options);
+    timeline.on('select', this.select);
+  }
+}</script>
diff --git a/src/vue-poc/expath-pkg.xml b/src/vue-poc/expath-pkg.xml
index e35b7fb..d3c584d 100644
--- a/src/vue-poc/expath-pkg.xml
+++ b/src/vue-poc/expath-pkg.xml
@@ -1,8 +1,8 @@
 <package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
-	abbrev="vue-poc" version="0.0.3" spec="1.0">
+	abbrev="vue-poc" version="0.0.4" spec="1.0">
 	<title>vue-poc test of vue.js.</title>
 	<dependency name="ace" version="1.2.7" />
-	<dependency name="vuetify" version="0.14.2" />
+	<dependency name="vuetify" version="0.14.7" />
 	<dependency name="vue" version="2.4.1" />
 	<dependency name="vue-router" version="2.5.3" />
 	<dependency name="google-material" version="0.0.0" />
@@ -10,7 +10,6 @@
 	<dependency name="axios" version="0.16.1" />
 	<dependency name="qs" version="6.4.0" />
 	<dependency name="vue-multiselect" version="2.0.0-beta.14" />
-	<dependency name="lodash" version="4.13.1" />
 	<dependency name="localforage" version="1.5.0" />
 	<dependency name="moment.js" version="2.18.1" />
 	<dependency name="file-walker" version="0.5.2" />
diff --git a/src/vue-poc/features/about.vue b/src/vue-poc/features/about.vue
index 31ef99f..60486e4 100644
--- a/src/vue-poc/features/about.vue
+++ b/src/vue-poc/features/about.vue
@@ -20,8 +20,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
 	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
 	<li><a href="/dba" target="new">DBA app</a></li>
 </ul>
-</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component
-	href="/dba">REPLACED</my-component> </v-layout> </template>
+</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link
+	href="/dba">REPLACED</qd-link> </v-layout> </template>
 <script>
   {
   }
diff --git a/src/vue-poc/features/adminlog/logs.vue b/src/vue-poc/features/adminlog/logs.vue
new file mode 100644
index 0000000..bfa4c89
--- /dev/null
+++ b/src/vue-poc/features/adminlog/logs.vue
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<template id="log">
+ <v-container fluid>
+  <v-card >
+   <v-toolbar class="green white--text">
+       <v-btn
+      light icon
+      :loading="loading"
+      @click="getItems()"
+      :disabled="loading"
+    >
+    <v-icon>refresh</v-icon>
+    </v-btn>   
+      <v-spacer></v-spacer>
+      <v-text-field
+        append-icon="search"
+        label="Filter logs"
+        single-line
+        hide-details
+        v-model="search"
+      ></v-text-field>
+     
+    </v-toolbar>
+  <v-data-table
+      :headers="headers"
+      :items="items"
+      :search="search"
+      class="elevation-1"
+      no-data-text="No logs found"
+      v-bind:pagination.sync="pagination"
+    >
+    <template slot="items" scope="props">
+      <td class="text-xs-right">{{ props.item.time }}</td>
+      <td class="text-xs-right">{{ props.item.address }}</td>
+      <td class="text-xs-right">{{ props.item.user }}</td>
+      <td class="text-xs-right">{{ props.item.type }}</td>
+      <td class="text-xs-right">{{ props.item.ms }}</td>
+       <td ><code>{{ props.item.text }}</code></td>
+    </template>
+  </v-data-table>
+ </v-card>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      message: 'Hello Vue.js!',
+      q:this.$route.query.q,
+      headers: [
+        {
+          text: 'time',
+          left: true,
+          value: 'time'
+        },
+        { text: 'address', value: 'address' },
+        { text: 'user', value: 'user' },
+        { text: 'Type', value: 'type' },
+        { text: 'ms', value: 'ms' },
+        { text: 'text', value: 'text' }
+      ],
+      items:[],
+      pagination:{sortBy: 'time',descending:true,rowsPerPage:25},
+      selected:[],
+      search:"",
+      loading:false
+      }
+  },
+  methods:{
+    getItems(){
+      this.loading=true
+      HTTP.get("log",{params:this.q})
+      .then(r=>{
+        this.loading=false
+        //console.log(r.data)
+        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
+        this.items=r.data.items
+        setTimeout(()=>{ this.getItems() }, 5000);
+        }) 
+    }
+  },
+  created:function(){
+    this.getItems()
+  }
+}
+</script>
diff --git a/src/vue-poc/features/adminlog/logs.xqm b/src/vue-poc/features/adminlog/logs.xqm
new file mode 100644
index 0000000..186fa8b
--- /dev/null
+++ b/src/vue-poc/features/adminlog/logs.xqm
@@ -0,0 +1,45 @@
+module namespace j = 'quodatum.test.logs';
+import module namespace entity = 'quodatum.models.generated' at "../../models.gen.xqm";
+import module namespace dice = 'quodatum.web.dice/v4' at "../../lib/dice.xqm";
+import module namespace web = 'quodatum.web.utils4' at "../../lib/webutils.xqm";
+(:~
+ :  job list
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/log")
+%output:method("json")   
+function j:list()
+as element(json)
+{
+  let $entity:=$entity:list("basexlog")
+ let $items:=$entity("data")()
+ let $items:=$items[. ne "[GET] http://localhost:8984/vue-poc/api/log"]
+ (: let $_:=admin:write-log("hello admin:write-log") :)
+ return dice:response($items,$entity,web:dice())
+};
+
+(:~
+ :  job info
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/log/{$log}")
+%output:method("json")   
+function j:log($log)
+as element(json)
+{
+ let $j:=jobs:list-details($log)
+ return <json type="object">
+         {j:job-json($j)}
+        </json>
+};
+
+declare function j:job-json($j) 
+as element(*)*
+{
+     <id>{$j/@id/string()}</id>
+     ,<type>{$j/@type/string()}</type>
+     ,<state>{$j/@state/string()}</state>
+     ,<user>{$j/@user/string()}</user>
+     ,<duration>{$j/@duration/string()}</duration>
+     ,<text>{$j/string()}</text>
+};
\ No newline at end of file
diff --git a/src/vue-poc/features/collection/files.vue b/src/vue-poc/features/collection/files.vue
index 0328749..ba5a5ba 100644
--- a/src/vue-poc/features/collection/files.vue
+++ b/src/vue-poc/features/collection/files.vue
@@ -3,6 +3,7 @@
  <v-container fluid>
  
 <v-card>
+
 <v-toolbar light>
       <v-menu bottom right>
            <v-btn  icon  slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
@@ -17,56 +18,65 @@
     <v-spacer></v-spacer>
       <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
    hide-details single-line  @keyup.native.enter="filter"></v-text-field>
+    <v-btn icon ripple @click="showInfo=!showInfo">
+            <v-icon >info</v-icon>
+          </v-btn>
+     <v-btn icon @click="alert('todo')">     
     <v-icon>view_module</v-icon>
+    </v-btn>
  </v-toolbar>
-
+ 
+  
   
   <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
-  <v-list v-if="!busy" two-line subheader>
-    <v-subheader inset>Folders</v-subheader>
-      <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar >
-        <v-list-tile-avatar  >
-          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
-        </v-list-tile-avatar>
-        <v-list-tile-content  @click="folder(item.name)">
-          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
-          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
-          <v-btn icon ripple @click.native.stop="info(item.name)">
-            <v-icon class="grey--text text--lighten-1">info</v-icon>
-          </v-btn>
-        </v-list-tile-action>
-      </v-list-tile>
-    
-    <v-divider inset></v-divider>
-    <v-subheader inset>Files</v-subheader> 
-      <v-list-tile v-for="item in files" v-bind:key="item.name" >
-        <v-list-tile-avatar>
-          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
-        </v-list-tile-avatar>
-        <v-list-tile-content @click="file(item.name)">
-          <v-list-tile-title >{{ item.name }}</v-list-tile-title>
-           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
-          <v-btn icon ripple @click.native.stop="info(item.name)">
-            <v-icon class="grey--text text--lighten-1">info</v-icon>
-          </v-btn>
-        </v-list-tile-action>
-      </v-list-tile>
-
-  </v-list>
-    <v-navigation-drawer right light temporary v-model="showInfo">
-     <v-card> 
-       <v-toolbar class="green white--text">
-      <v-toolbar-title >{{selected}}</v-toolbar-title>
+  <v-layout>
+	  <v-flex>
+	  <v-list v-if="!busy" two-line subheader>
+	    <v-subheader inset>Folders</v-subheader>
+	      <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item)" avatar >
+	        <v-list-tile-avatar  >
+	          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
+	        </v-list-tile-avatar>
+	        <v-list-tile-content  >
+	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
+	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
+	        </v-list-tile-content>
+	        <v-list-tile-action>
+	          <v-btn icon ripple @click.native.stop="info(item.name)">
+	            <v-icon class="grey--text text--lighten-1">info</v-icon>
+	          </v-btn>
+	        </v-list-tile-action>
+	      </v-list-tile>
+	    
+	    <v-divider inset></v-divider>
+	    <v-subheader inset>Files</v-subheader> 
+	      <v-list-tile v-for="item in files" v-bind:key="item.name" >
+	        <v-list-tile-avatar>
+	          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
+	        </v-list-tile-avatar>
+	        <v-list-tile-content @click="file(item.name)">
+	          <v-list-tile-title >{{ item.name }}</v-list-tile-title>
+	           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
+	        </v-list-tile-content>
+	        <v-list-tile-action>
+	          <v-btn icon ripple @click.native.stop="info(item)">
+	            <v-icon class="grey--text text--lighten-1">info</v-icon>
+	          </v-btn>
+	        </v-list-tile-action>
+	      </v-list-tile>
+	  </v-list>
+	  </v-flex>
+	   <v-flex v-if="showInfo" xs4 grey lighten-3>
+   <v-card flat tile> 
+       <v-card-actions >
+      <v-card-title >test</v-card-title>
       <v-spacer></v-spacer>    
        <v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
-    </v-toolbar>
-    <v-card-text> blah blah protocol: {{protocol}} </v-card-text> 
-</v-card>
-      </v-navigation-drawer>
+    </v-card-actions>
+    <v-card-text> blah blah protocol:  </v-card-text> 
+    </v-card>
+   </v-flex>
+  </v-layout>
 </v-card>
  </v-container>
 </template>
@@ -76,14 +86,14 @@
   props:["protocol"],
   data:  function(){
     return { 
-            crumbs:[],
+            url:"", 
             folders:[],
             files:[],
             items:["root"],
             q:"",
             busy:false,
             showInfo:false,
-            selected:""
+            selected:null
     }
   },
   methods:{
@@ -91,8 +101,8 @@
    // with query, resulting in /register?plan=private
       router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol  }})
     },
-    folder (val) {
-      this.crumbs.push(val )
+    folder (item) {
+      this.url=this.url+item.name+"/"
     },
     load(url){
       this.busy=true
@@ -110,30 +120,24 @@
       
     },
     root(){
-      this.crumbs=[]
       this.$router.push({  query: { url: this.url }})
     },
     filter(){
-      console.log("TODO")
+      console.log("TODO",this.q)
+      this.$router.push({  query: {url:this.url,q:this.q }})
     },
-    info(sel){
-      this.selected=sel
+    info(item){
+      this.selected=item
       this.showInfo=true
     }
   
   },
   computed: {
-    url:  {
-      get: function () {
-      return  '/'+ this.crumbs.join("/") ;  
-    },
-    set: function(newValue){
-     // alert("set"+newValue)
-     this.crumbs=newValue.split("/").filter((a)=>a.length>0)
-    }
-      },
    icon(){
         return (this.protocol=="basexdb")?"account_balance":"folder"
+      },
+   crumbs(){
+        return this.url.split("/").filter((a)=>a.length>0) 
       }
   },
   watch:{
@@ -149,6 +153,7 @@
   created:function(){
     var url=this.$route.query.url
     this.url=url?url:"/";
+    this.q=this.$route.query.q || this.q
     this.load(this.url)
   }
 }
diff --git a/src/vue-poc/features/collection/history.xml b/src/vue-poc/features/collection/history.xml
index 5e33b52..6bd91bb 100644
--- a/src/vue-poc/features/collection/history.xml
+++ b/src/vue-poc/features/collection/history.xml
@@ -8,6 +8,7 @@
 	<entry mode="webfile" url='/vue-poc/static/resources/sparql.rq' />
 	<entry mode="webfile" url='/vue-poc/static/resources/turtle.ttl' />
 	<entry mode="webfile" url='/vue-poc/static/resources/task.xsd' />
+	 <entry mode="webfile" url='/vue-poc/static/resources/ark/ark.sch' />
 	<entry mode="basexdb" url='/abide/abide.xml' />
 	<entry mode="basexdb" url='/vue-poc' />
 </history>
\ No newline at end of file
diff --git a/src/vue-poc/features/edit/edit.vue b/src/vue-poc/features/edit/edit.vue
index 5c92705..4e6af33 100644
--- a/src/vue-poc/features/edit/edit.vue
+++ b/src/vue-poc/features/edit/edit.vue
@@ -239,7 +239,7 @@ v-on:annotation="annotation"></vue-ace>
     },
     annotation(counts){
       this.annotations=counts
-      console.log("annotations: ",counts)
+      //console.log("annotations: ",counts)
     },
     acetype(mime){
       var r=this.mimemap[mime]
@@ -262,7 +262,6 @@ v-on:annotation="annotation"></vue-ace>
     document.addEventListener('beforeunload', this.leaving);
   this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
     var url=this.$route.query.url
-    console.log("Edit: ",url)
     if(url) this.fetch(url)
   },
   beforeRouteLeave (to, from, next) {
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
index ddf4b66..f5ade46 100644
--- a/src/vue-poc/features/eval/eval.vue
+++ b/src/vue-poc/features/eval/eval.vue
@@ -18,7 +18,7 @@
             <v-icon >arrow_drop_down</v-icon>
           </v-toolbar-title>
           <v-list>
-            <v-list-tile v-for="item in dropdown_font" :key="item">
+            <v-list-tile v-for="item in dropdown_font" :key="item.text">
               <v-list-tile-title v-text="item.text" @click="font=item.text"></v-list-tile-title>
             </v-list-tile>
           </v-list>
diff --git a/src/vue-poc/features/home.vue b/src/vue-poc/features/home.vue
index 4c6d0fe..d38b8db 100644
--- a/src/vue-poc/features/home.vue
+++ b/src/vue-poc/features/home.vue
@@ -20,8 +20,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
 	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
 	<li><a href="/dba" target="new">DBA app</a></li>
 </ul>
-</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component
-	href="/dba">REPLACED</my-component> </v-layout> </template>
+</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link
+	href="/dba">REPLACED</qd-link> </v-layout> </template>
 <script>
   {
   }
diff --git a/src/vue-poc/features/images/image.vue b/src/vue-poc/features/images/image.vue
new file mode 100644
index 0000000..507a872
--- /dev/null
+++ b/src/vue-poc/features/images/image.vue
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- 
+ image  ui
+ 
+ -->
+<template id="image">
+ <v-container fluid>
+ Image: {{id}}
+ </v-container>
+</template>
+
+<script>{  
+  props:["id"]
+    }
+</script>
diff --git a/src/vue-poc/features/images/images.vue b/src/vue-poc/features/images/images.vue
index 0fb214b..31252ba 100644
--- a/src/vue-poc/features/images/images.vue
+++ b/src/vue-poc/features/images/images.vue
@@ -49,8 +49,9 @@
               v-for="image in images"
               :key="image.name"
             >
-              <v-card   @click="selected(image)" class="grey lighten-2 pt-1">
-                <v-card-media :src="src(image)"  height="80px" :contain="true"></v-card-media>
+              <v-card   class="grey lighten-2 pt-1">
+                <v-card-media :src="src(image)"  @click="go(image)" 
+                height="80px" :contain="true"></v-card-media>
                  <v-card-actions  v-tooltip:top="{ html: image.id + ' '+image.name }">
               
                 <v-btn icon small>
@@ -60,7 +61,7 @@
                 <v-btn icon  small>
                   <v-icon>bookmark</v-icon>
                 </v-btn>
-                <v-btn icon  small>
+                <v-btn icon  small @click="selected(image)">
                   <v-icon>share</v-icon>
                 </v-btn>
               </v-card-actions>
@@ -112,6 +113,9 @@
     selected(image){
       this.selitem=image;
       this.showInfo=true;
+    },
+    go(image){
+      this.$router.push({ name: 'image', params: { id: image.id }})
     }
    
   },
diff --git a/src/vue-poc/features/job/jobs.vue b/src/vue-poc/features/job/jobs.vue
index 6ffd002..93b54ce 100644
--- a/src/vue-poc/features/job/jobs.vue
+++ b/src/vue-poc/features/job/jobs.vue
@@ -19,7 +19,7 @@
       <v-spacer></v-spacer>
       <v-text-field
         append-icon="search"
-        label="Search"
+        label="Filter jobs"
         single-line
         hide-details
         v-model="search"
diff --git a/src/vue-poc/features/logs.vue b/src/vue-poc/features/logs.vue
deleted file mode 100644
index 76b6cff..0000000
--- a/src/vue-poc/features/logs.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<template id="log">
- <v-container fluid>
-  <h1>LOGS</h1>
-</template>
-
-<script>{
-  data:  function(){
-    return {
-      message: 'Hello Vue.js!',
-      q:this.$route.query.q
-      }
-  },
-  created:function(){
-    console.log("Serch",this.$route.query.q)
-  }
-}
-</script>
diff --git a/src/vue-poc/features/people.vue b/src/vue-poc/features/people.vue
deleted file mode 100644
index 1136896..0000000
--- a/src/vue-poc/features/people.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<template id="people">
- <v-container fluid>
-  <v-layout >Look at all the people who work here!
-  <v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn>
-  <p>{{ message }}</p>
-   <v-btn light default v-on:click.native="logout">logout</v-btn>
-   <!-- 
-    <v-autocomplete :items="list" 
-    v-model="fieldValue" 
-    :search.sync="search"
-     label="Suburb" item-text="suburb" 
-    item-value="suburb" 
-    @selected="handleSelected"
-     strict="Unknown">
-<template slot="item" scope="data">
-      <v-list-tile-content>
-        <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
-        <template v-if="!data.item.generatedItem">
-          <v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
-        </template>
-      </v-list-tile-content>
-    </template>
-</v-autocomplete>
- -->
-  </v-layout>
-  <v-card>
-  <v-layout >
-  <v-flex  xs5>created:{{$auth.created}}</v-flex>
-   <v-flex  xs5>session:{{$auth.session}}</v-flex>
-  </v-layout>
-  </v-card>
-  <v-layout>
-  <v-flex xs5>
-   <v-card-media src="resources/music.jpg" height="300px"></v-card-media>
-  </v-flex>
-  <v-flex xs1>
-  <v-card-media :src="img" height="60px"></v-card-media>
-  </v-flex>
-  </v-layout>
-  
- 
- </v-container>
-</template>
-
-<script>{
-  data:  function(){
-    return {
-      message: 'Hello Vue.js!',
-      fieldValue:"",
-      list:[],
-      search:"",
-      data:[],
-      img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
-    }
-  },
-  methods: {
-    reverseMessage() {
-      this.message = this.message.split('').reverse().join('')
-    },
-    logout(){
-      alert("TODU")
-    },
-    handleSelected(){
-      
-    }
-  }
-}
-
-</script>
diff --git a/src/vue-poc/features/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
index 74f8141..a907591 100644
--- a/src/vue-poc/features/ping/ping.vue
+++ b/src/vue-poc/features/ping/ping.vue
@@ -10,12 +10,10 @@
           <th >Repeat</th>
           <th >Last</th>
           <th >Count</th>
-         
           <th >Avg</th>
-          
           <th >min</th>
           <th >max</th>
-           <th >Median</th>
+          <th>Median</th>
         </tr>
       </thead>
       <tbody>
@@ -23,10 +21,10 @@
       
           <tr>
               <td>
-                   <v-btn dark    @click.native="get()" >Get count</v-btn>
+                   <v-btn     @click.native="get()" >Get count</v-btn>
                </td>
                <td>
-     <v-checkbox  v-model="repeat.get" dark></v-checkbox>
+     <v-checkbox  v-model="repeat.get" ></v-checkbox>
         </td>    
               <td>
                   <span >{{getValues.last}}</span>
@@ -49,13 +47,14 @@
                   <span >{{getValues.median}}</span>
               </td>
           </tr>
+          
             <tr>
           <td>
-             <v-btn dark   @click.native="update()" >Update count</v-btn>
+             <v-btn    @click.native="update()" >Update count</v-btn>
           </td>
           
           <td>
-           <v-checkbox  v-model="repeat.post" dark></v-checkbox>
+           <v-checkbox  v-model="repeat.post" ></v-checkbox>
           </td>
            <td class="col-md-1">
                         <span >{{postValues.last}}</span>
@@ -63,9 +62,7 @@
           <td class="col-md-1">
             <span >{{postValues.count}}</span>
           </td >
-          <td class="col-md-1">
-                        <span >{{postValues.median}}</span>
-           </td>
+        
            
           <td class="col-md-1">
             <span >{{postValues.avg | round(2)}}</span>
@@ -78,9 +75,13 @@
           <td class="col-md-1">
               <span >{{postValues.max}}</span>
           </td>
+            <td class="col-md-1">
+                        <span >{{postValues.median}}</span>
+           </td>
         </tr>
       </tbody>
     </table>
+    <v-btn @click="reset()">Reset</v-btn>
  </v-container>
 </template>
 
@@ -119,6 +120,10 @@
           this.get(); //does this leak??
         }
      })
+    },
+    reset(){
+      this.getValues.clear();
+      this.postValues.clear();
     }
   },
   computed: {
diff --git a/src/vue-poc/features/select.vue b/src/vue-poc/features/select.vue
index 34e2528..3ea1a55 100644
--- a/src/vue-poc/features/select.vue
+++ b/src/vue-poc/features/select.vue
@@ -2,12 +2,15 @@
 <template id="select">
  <v-container fluid>
 <v-card>
-
-    <v-card-title class="green darken-1">
-      <span class="white--text">Selection</span>
-      
+    <v-toolbar class="green darken-1">
+    <v-card-title >
+      <span class="white--text">Selection</span>     
     </v-card-title>
-  <v-card-text>
+    <v-spacer></v-spacer>    
+       <v-btn  flat icon @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
+  </v-toolbar>
+  <v-layout>
+    <v-flex>
     <v-layout>
      
     <v-flex xs6>
@@ -24,6 +27,18 @@
     <pre>{{$data.value2 }}</pre>
     </v-flex>
    </v-layout>
+   </v-flex>
+   <v-flex v-if="showInfo" xs4>
+   <v-card flat> 
+       <v-card-actions >
+      <v-toolbar-title >test</v-toolbar-title>
+      <v-spacer></v-spacer>    
+       <v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+    </v-card-actions>
+    <v-card-text> blah blah protocol:  </v-card-text> 
+    </v-card>
+   </v-flex>
+   </v-layout>
 </v-card-text>
 <v-card>
  </v-container>
@@ -36,7 +51,8 @@
           value: null,
           value2: null,
           options: [],
-          isLoading: false
+          isLoading: false,
+          showInfo:true
       }
     },
     created:function(){
diff --git a/src/vue-poc/features/session.vue b/src/vue-poc/features/session.vue
new file mode 100644
index 0000000..14a82c0
--- /dev/null
+++ b/src/vue-poc/features/session.vue
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<template id="session">
+ <v-container fluid>
+  <v-layout >
+   <v-btn   v-on:click="redraw">this.$forceUpdate()</v-btn>
+    <v-btn  v-on:click="logout">logout</v-btn>
+   <!-- 
+    <v-autocomplete :items="list" 
+    v-model="fieldValue" 
+    :search.sync="search"
+     label="Suburb" item-text="suburb" 
+    item-value="suburb" 
+    @selected="handleSelected"
+     strict="Unknown">
+<template slot="item" scope="data">
+      <v-list-tile-content>
+        <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
+        <template v-if="!data.item.generatedItem">
+          <v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
+        </template>
+      </v-list-tile-content>
+    </template>
+</v-autocomplete>
+ -->
+  </v-layout>
+   <table class="table">
+      <thead> 
+        <tr>
+          <th>Name</th>
+          <th >value</th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr>
+        <td>created</td><td>{{$auth.created}}</td>
+        </tr>
+        <tr>
+        <td>session</td><td>{{$auth.session}}</td>
+        </tr>
+        <tr>
+        <td>permision</td><td>{{$auth.permission}}</td>
+        </tr>
+        </tbody>
+        </table>
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      fieldValue:"",
+      list:[],
+      search:"",
+      data:[]    }
+  },
+  methods: {
+    logout(){
+      alert("TODO")
+    },
+    redraw(){
+      this.$forceUpdate()
+    },
+    handleSelected(){
+      
+    }
+  }
+}
+
+</script>
diff --git a/src/vue-poc/features/settings.vue b/src/vue-poc/features/settings.vue
index b99d3b8..71627c8 100644
--- a/src/vue-poc/features/settings.vue
+++ b/src/vue-poc/features/settings.vue
@@ -54,29 +54,20 @@
     }
   },
   created: function () {
-    // `this` points to the vm instance
-    console.log('created: ')
-    localforage.getItem('settings/ace').then((value) => {
-      console.log('oh say can you see, ' + value);
-      this.ace=value || this.ace
-    }).catch((err) => {
-      console.log('the rockets red glare has blinded me');
-    });
+    settings.getItem('settings/ace')
+    .then((v)=>{
+      console.log("AAAA",v)
+      this.ace=v
+    })
+
   },
-  updated: function () {
-    // `this` points to the vm instance
-    console.log('updated: ')
-    localforage.setItem('settings/ace', this.ace).then((value) => {
-      console.log('woot! we saved ' + value);
-    }).catch((err) => {
-      console.log('he\'s dead, jim!');
-    });
-  },
-  methods: {
-    reverseMessage: function () {
-      alert("unused")
-    }
+  watch: {"ace":{
+    handler:function(v){
+      settings.setItem('settings/ace',this.ace)
+      },
+    deep:true
   }
 }
+}
 
 </script>
diff --git a/src/vue-poc/features/model.build/entity-gen.xqm b/src/vue-poc/features/tasks/model.build/entity-gen.xqm
similarity index 100%
rename from src/vue-poc/features/model.build/entity-gen.xqm
rename to src/vue-poc/features/tasks/model.build/entity-gen.xqm
diff --git a/src/vue-poc/features/model.build/model.vue b/src/vue-poc/features/tasks/model.build/model.vue
similarity index 93%
rename from src/vue-poc/features/model.build/model.vue
rename to src/vue-poc/features/tasks/model.build/model.vue
index 4cd4d50..f5b3475 100644
--- a/src/vue-poc/features/model.build/model.vue
+++ b/src/vue-poc/features/tasks/model.build/model.vue
@@ -2,9 +2,12 @@
 <template id="model">
  <v-container fluid>
     <v-card >
-     <v-card-title class="blue accent-4">
+    <v-toolbar class="orange darken-1">
+     <v-btn icon to="/tasks"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title >
       <span class="white--text">Generate <code>model.gen.xqm</code></span>      
     </v-card-title>
+    </v-toolbar>
     <v-card-text>
       <v-container fluid>
         <v-layout row wrap>
diff --git a/src/vue-poc/features/model.build/rxq-model.xqm b/src/vue-poc/features/tasks/model.build/rxq-model.xqm
similarity index 100%
rename from src/vue-poc/features/model.build/rxq-model.xqm
rename to src/vue-poc/features/tasks/model.build/rxq-model.xqm
diff --git a/src/vue-poc/features/tasks.vue b/src/vue-poc/features/tasks/tasks.vue
similarity index 70%
rename from src/vue-poc/features/tasks.vue
rename to src/vue-poc/features/tasks/tasks.vue
index ffff5d6..3ef3a1f 100644
--- a/src/vue-poc/features/tasks.vue
+++ b/src/vue-poc/features/tasks/tasks.vue
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
 <template id="task">
  <v-container fluid>
-  <h1>Tasks</h1>
+  <h3>Tasks</h3>
+  <ul>
+  <li>
   <router-link to="tasks/model">model</router-link>
+  </li>
+  <li>
+  <router-link to="tasks/xqdoc">xqdoc</router-link>
+  </li>
+  </ul>
  </v-container>
 </template>
 
@@ -12,9 +19,6 @@
       message: 'Hello Vue.js!',
       q:this.$route.query.q
       }
-  },
-  created:function(){
-    console.log("Serch",this.$route.query.q)
   }
 }
 </script>
diff --git a/src/vue-poc/features/tasks/xqdoc/html-module.xsl b/src/vue-poc/features/tasks/xqdoc/html-module.xsl
new file mode 100644
index 0000000..a034f3f
--- /dev/null
+++ b/src/vue-poc/features/tasks/xqdoc/html-module.xsl
@@ -0,0 +1,459 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:doc="http://www.xqdoc.org/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
+	exclude-result-prefixes="xs doc fn" version="2.0">
+	<!-- Standalone xqdoc:xqdoc transform -->
+	<xsl:param name="project" as="xs:string" />
+	<xsl:param name="source" as="xs:string" />
+	<xsl:param name="show-private" as="xs:boolean" select="false()" />
+
+	<xsl:variable name="css" select="'../resources/base.css'" />
+	<xsl:variable name="vars"
+		select="//doc:variable[$show-private or not(doc:annotations/doc:annotation/@name='private')]" />
+	<xsl:variable name="funs"
+		select="//doc:function[$show-private or not(doc:annotations/doc:annotation/@name='private')]" />
+	<xsl:variable name="docuri"
+		select="//doc:xqdoc/doc:module/doc:uri/string()" />
+	<!-- generate module html // -->
+	<xsl:template match="//doc:xqdoc">
+		<html>
+			<head>
+				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+				<meta http-equiv="Generator"
+					content="xquerydoc - https://github.com/xquery/xquerydoc" />
+
+				<title>
+					<xsl:value-of select="$docuri" />
+					- xqDoc
+				</title>
+				<link rel="stylesheet" type="text/css" href="../resources/page.css" />
+				<link rel="stylesheet" type="text/css" href="../resources/query.css" />
+				<link rel="stylesheet" type="text/css" href="{$css}" />
+
+				<link rel="stylesheet" type="text/css" href="../resources/prettify.css" />
+
+				<script src="../resources/prettify.js" type="text/javascript">&#160;</script>
+				<script src="../resources/lang-xq.js" type="text/javascript">&#160;</script>
+			</head>
+			<body class="home" id="top">
+				<div id="main">
+					<xsl:apply-templates select="doc:module" />
+					<xsl:call-template name="toc" />
+					<xsl:apply-templates select="doc:variables" />
+					<xsl:apply-templates select="doc:functions" />
+
+					<xsl:apply-templates select="doc:namespaces" />
+					<div>
+						<h3>Original Source Code</h3>
+						<pre class="prettyprint lang-xq">
+							<xsl:value-of select="$source" />
+						</pre>
+					</div>
+					<br />
+
+					<div class="footer">
+						<p style="text-align:right">
+							<i>
+								<xsl:value-of select="()" />
+							</i>
+							|
+							generated at
+							<xsl:value-of select="current-dateTime()" />
+						</p>
+					</div>
+				</div>
+
+				<script type="application/javascript">
+					window.onload = function(){ prettyPrint(); }
+				</script>
+			</body>
+		</html>
+	</xsl:template>
+
+	<xsl:template match="doc:module">
+		<h1>
+			<span class="namespace">
+				<xsl:value-of select="doc:uri" />
+			</span>
+			&#160;
+			<xsl:value-of select="@type" />
+			module
+		</h1>
+		<dl>
+			<xsl:apply-templates select="doc:comment/doc:description" />
+			<dt>Tags</dt>
+			<dd>
+				<xsl:apply-templates
+					select="doc:comment/* except doc:comment/doc:description" />
+			</dd>
+		</dl>
+	</xsl:template>
+
+	<xsl:template match="doc:namespaces[doc:namespace]">
+		<div id="namespaces">
+			<h3>
+				<a href="#namespaces">Namespaces</a>
+			</h3>
+			<p>The following namespaces are defined:</p>
+			<table style="float:none">
+				<thead>
+					<tr>
+						<th>Prefix</th>
+						<th>Uri</th>
+					</tr>
+				</thead>
+				<tbody>
+					<xsl:for-each select="doc:namespace">
+						<xsl:sort select="lower-case(@prefix)" />
+						<tr>
+							<td>
+								<xsl:value-of select="string(@prefix)" />
+							</td>
+							<td>
+								<xsl:value-of select="string(@uri)" />
+							</td>
+						</tr>
+					</xsl:for-each>
+				</tbody>
+			</table>
+		</div>
+	</xsl:template>
+
+	<xsl:template match="doc:variables[doc:variable]">
+		<div id="variables">
+			<h3>
+				<a href="#variables">Variables</a>
+			</h3>
+			<xsl:for-each select="$vars">
+				<xsl:sort select="lower-case(doc:name)" />
+				<xsl:apply-templates select="." />
+			</xsl:for-each>
+		</div>
+	</xsl:template>
+
+
+	<xsl:template match="doc:variable">
+		<xsl:variable name="id" select="concat('$',doc:name)" />
+		<div id="{ $id }">
+			<h4>
+				<a href="#{$id}">
+					<xsl:value-of select="$id" />
+				</a>
+			</h4>
+			<dl>
+				<xsl:apply-templates select="doc:comment/doc:description" />
+				<dt class="label">Type</dt>
+				<dd>
+					<xsl:value-of select="doc:type" />
+					<xsl:value-of select="doc:type/@occurrence" />
+				</dd>
+			</dl>
+
+		</div>
+	</xsl:template>
+
+	<xsl:template match="doc:uri">
+		<xsl:value-of select="." />
+	</xsl:template>
+
+	<xsl:template match="doc:functions[doc:function]">
+		<div id="functions">
+			<h3>
+				<a href="#functions">Functions</a>
+			</h3>
+			<xsl:for-each-group select="$funs" group-by="doc:name">
+				<xsl:sort select="lower-case(doc:name)" />
+
+				<xsl:call-template name="function">
+					<xsl:with-param name="fun" select="current-group()" />
+				</xsl:call-template>
+
+			</xsl:for-each-group>
+			<!-- <xsl:apply-templates select="doc:function" /> -->
+
+		</div>
+	</xsl:template>
+
+	<!-- o/p details for function $fun has all defined arities -->
+	<xsl:template name="function">
+		<xsl:param name="fun" as="element(doc:function)*" />
+		<xsl:variable name="id" select="$fun[1]/doc:name" />
+		<xsl:variable name="funs">
+			<xsl:for-each select="fun">
+				<xsl:sort select="@arity" data-type="number" />
+				<xsl:copy-of select="." />
+			</xsl:for-each>
+		</xsl:variable>
+
+		<div id="{$id}">
+			<h4>
+				<a href="#{$id}">
+					<xsl:value-of select="$id" />
+				</a>
+			</h4>
+
+			<xsl:apply-templates select="$fun[1]/doc:comment/doc:description" />
+			<dt class="label">Signature</dt>
+			<dd>
+				<xsl:apply-templates select="$fun" mode="signature" />
+			</dd>
+			<xsl:apply-templates select="$fun[1]/doc:parameters" />
+			<xsl:apply-templates select="$fun[1]/doc:return" />
+			<xsl:apply-templates select="$fun[1]/doc:comment/doc:error" />
+			<xsl:apply-templates select="$fun[1]/doc:annotations" />
+		</div>
+	</xsl:template>
+
+	<xsl:template match="doc:function" mode="signature">
+		<div class="proto">
+			<code class="function">
+				<xsl:value-of select="doc:name" />
+			</code>
+			<xsl:text>( </xsl:text>
+			<xsl:for-each select="doc:parameters/doc:parameter">
+				<code class="arg">
+					<xsl:value-of select="doc:name" />
+				</code>
+				<code class="as">&#160;as&#160;</code>
+				<code class="type">
+					<xsl:value-of select="doc:type" />
+					<xsl:value-of select="doc:type/@occurrence/string()" />
+				</code>
+				<xsl:if test="position() != last()">
+					<xsl:text>, </xsl:text>
+				</xsl:if>
+			</xsl:for-each>
+			<xsl:text> )</xsl:text>
+			<code class="as">&#160;as&#160;</code>
+			<code class="return-type">
+				<xsl:value-of select="doc:return/doc:type" />
+				<xsl:value-of select="doc:return/doc:type/@occurrence/string()" />
+			</code>
+		</div>
+	</xsl:template>
+
+	<xsl:template match="doc:parameters">
+		<dt class="label">Parameters</dt>
+		<dd>
+			<ul>
+				<xsl:apply-templates select="doc:parameter" />
+			</ul>
+		</dd>
+	</xsl:template>
+
+	<xsl:template match="doc:parameter">
+		<li>
+			<xsl:value-of select="doc:name" />
+			as
+			<xsl:value-of select="doc:type" />
+			<xsl:value-of select="doc:type/@occurrence" />
+			<xsl:variable name="name" select="string(doc:name)" />
+			<xsl:for-each
+				select="../../doc:comment/doc:param[starts-with(normalize-space(.), $name) or starts-with(normalize-space(.), concat('$',$name))]">
+				<xsl:value-of select="substring-after(normalize-space(.), $name)" />
+			</xsl:for-each>
+		</li>
+	</xsl:template>
+
+	<xsl:template match="doc:return">
+		<dt class="label">Return</dt>
+		<dd>
+			<ul>
+				<li>
+					<xsl:value-of select="doc:type" />
+					<xsl:value-of select="doc:type/@occurrence" />
+					<xsl:for-each select="../doc:comment/doc:return">
+						<xsl:text>: </xsl:text>
+						<xsl:copy-of select="node()|text()" />
+					</xsl:for-each>
+				</li>
+			</ul>
+		</dd>
+	</xsl:template>
+
+
+
+	<xsl:template match="doc:error">
+		<dt class="label">Error</dt>
+		<dd>
+			<xsl:copy-of select="node()|text()" />
+		</dd>
+	</xsl:template>
+
+	<xsl:template match="doc:annotations">
+		<h4>Annotations</h4>
+		<table>
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Type</th>
+					<th>Value</th>
+				</tr>
+			</thead>
+			<tbody>
+				<xsl:for-each select="doc:annotation">
+					<tr>
+						<td>
+							<xsl:value-of select="@name" />
+						</td>
+						<td>
+							<xsl:value-of select="doc:literal/@type" />
+						</td>
+						<td>
+							<xsl:value-of select="doc:literal" />
+						</td>
+					</tr>
+				</xsl:for-each>
+			</tbody>
+		</table>
+	</xsl:template>
+
+	<xsl:template match="doc:comment">
+		<xsl:apply-templates />
+	</xsl:template>
+
+	<xsl:template match="doc:description">
+		<dt class="label">Summary</dt>
+		<dd>
+			<xsl:copy-of select="node()|text()" />
+		</dd>
+	</xsl:template>
+
+	<xsl:template match="doc:author">
+		<p>
+			Author:
+			<xsl:value-of select="." />
+		</p>
+	</xsl:template>
+
+	<xsl:template match="doc:version">
+		<p>
+			Version:
+			<xsl:value-of select="." />
+		</p>
+	</xsl:template>
+
+	<xsl:template match="doc:custom">
+		<p>
+			<xsl:value-of select="@tag" />
+			:
+			<xsl:value-of select="." />
+		</p>
+	</xsl:template>
+	<xsl:template match="doc:see">
+		See also:
+		<xsl:for-each select="tokenize(.,'[ \t\r\n,]+')[. ne '']">
+			<xsl:if test="position() ne 1">
+				<xsl:text>, </xsl:text>
+			</xsl:if>
+			<xsl:choose>
+				<xsl:when test="contains(.,'#')">
+					<a
+						href="#{ concat('func_', replace(substring-before(.,'#'), ':', '_'),
+            '_', substring-after(.,'#')) }">
+						<xsl:value-of select="." />
+					</a>
+				</xsl:when>
+				<xsl:when test="starts-with(.,'$')">
+					<a href="#{ concat('var_', replace(substring-after(.,'$'), ':', '_')) }">
+						<xsl:value-of select="." />
+					</a>
+				</xsl:when>
+				<xsl:otherwise>
+					<xsl:value-of select="." />
+				</xsl:otherwise>
+			</xsl:choose>
+		</xsl:for-each>
+	</xsl:template>
+
+	<xsl:template match="doc:control" />
+
+	<xsl:template match="text()" mode="custom #default">
+		<xsl:value-of select="normalize-space(.)" />
+	</xsl:template>
+
+	<xsl:template name="toc">
+		<nav id="toc">
+			<div>
+				<a href="../#{$project}">&#8624;</a>
+				<span class="namespace">
+					<xsl:value-of select="$docuri" />
+				</span>
+			</div>
+			<h2>
+				<a id="contents"></a>
+				Table of Contents
+			</h2>
+			<ol class="toc">
+				<li>
+					<a href="#main">
+						<span class="secno">1 </span>
+						<span class="content">Introduction</span>
+					</a>
+				</li>
+				<li>
+					<ol class="toc">
+						<li>
+							<a href="#variables">
+								<span class="secno">2 </span>
+								<span class="content">Variables</span>
+							</a>
+							<ol class="toc">
+								<xsl:for-each select="$vars">
+									<xsl:sort select="doc:name" />
+									<xsl:variable name="id" select="concat('$',doc:name)" />
+									<li>
+										<a href="#{$id}">
+											<span class="secno">
+												2.
+												<xsl:value-of select="position()" />
+											</span>
+											<span class="content">
+												<xsl:value-of select="$id" />
+											</span>
+										</a>
+									</li>
+								</xsl:for-each>
+							</ol>
+						</li>
+					</ol>
+				</li>
+				<li>
+					<ol class="toc">
+						<li>
+							<a href="#functions">
+								<span class="secno">3 </span>
+								<span class="content">Functions</span>
+							</a>
+							<ol class="toc">
+								<xsl:for-each-group select="$funs" group-by="doc:name">
+									<xsl:sort select="lower-case(doc:name)" />
+									<xsl:variable name="id" select="current-grouping-key()" />
+									<li>
+										<a href="#{$id}">
+											<span class="secno">
+												3.
+												<xsl:value-of select="position()" />
+											</span>
+											<span class="content">
+												<xsl:value-of select="$id" />
+											</span>
+										</a>
+									</li>
+								</xsl:for-each-group>
+							</ol>
+						</li>
+					</ol>
+
+				</li>
+				<li>
+					<a href="#namespaces">
+						<span class="secno">4 </span>
+						<span class="content">Namespaces</span>
+					</a>
+				</li>
+			</ol>
+		</nav>
+	</xsl:template>
+</xsl:stylesheet>
diff --git a/src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm b/src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm
new file mode 100644
index 0000000..9f8f999
--- /dev/null
+++ b/src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm
@@ -0,0 +1,57 @@
+(:~
+ : Update `generated/models.xqm` from files in `data/models`
+ : using file:///C:/Users/andy/workspace/app-doc/src/doc/data/doc/models
+ : $efolder:="file:///C:/Users/andy/workspace/app-doc/src/doc/data/doc/models"
+ : $target:="file:///C:/Users/andy/workspace/app-doc/src/doc/generated/models.xqm"
+ :)
+module namespace vue-api = 'quodatum:vue.api';
+import module namespace fw="quodatum:file.walker";
+declare namespace c="http://www.w3.org/ns/xproc-step";
+
+declare variable $vue-api:HTML5:=map{"method": "html","version":"5.0"};
+declare variable $vue-api:mod-xslt external :="html-module.xsl";
+(:~
+ : Returns a file content.
+ :)
+declare
+%rest:POST %rest:path("/vue-poc/api/tasks/xqdoc")
+%rest:form-param("efolder", "{$efolder}")
+%rest:form-param("target", "{$target}")
+%rest:produces("application/json")
+%output:method("json")
+%updating   
+function vue-api:model($efolder ,$target )   
+{(
+  let $files:= fw:directory-list($efolder,map{"include-filter":".*\.xqm"})//c:file
+  let $op:=vue-api:save-xq($files,$target)
+  return db:output(<json type="object"><msg> {$target}, {count($files)} files written.</msg></json>)
+)};
+  
+
+declare function vue-api:save-xq($files,$target)
+  {
+  let $params:=map{
+                    "project":"BCH",
+                    "source":"Not available",
+                    "cache":true() }
+  return for $f in $files
+   let $ip:=$f/@name/resolve-uri(.,base-uri(.))
+   let $op:=$f/ancestor-or-self::*/@name=>string-join("/")
+   let $xq:=inspect:xqdoc(trace($ip,"iiii"))
+   let $dest:=file:resolve-path($op,$target)
+   return (
+   vue-api:write2($xq,$dest || ".xml",map{}),
+   vue-api:write2($xq=>xslt:transform($vue-api:mod-xslt,$params),$dest || ".html",$vue-api:HTML5)
+   )
+  };   
+  
+ declare function vue-api:write2($data,$url as xs:string,$opts as map(*))
+  {  
+   let $p:=file:parent($url)
+   return (
+           if(file:is-dir($p)) then () else file:create-dir($p),
+           file:write($url,$data)
+           )
+  };
+     
+     
diff --git a/src/vue-poc/features/tasks/xqdoc/xqdoc.vue b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
new file mode 100644
index 0000000..6ffd9c2
--- /dev/null
+++ b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<template id="xqdoc">
+ <v-container fluid>
+    <v-card >
+     <v-toolbar  class="orange darken-1">
+     <v-btn icon to="/tasks"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title >
+      <span class="white--text">Task: Generate <code>xqdoc</code></span>      
+    </v-card-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-container fluid>
+        <v-layout row wrap>
+          
+          <v-flex xs6>
+            <v-text-field    v-model="params.efolder"
+              label="Root Folder containing xq files"
+            ></v-text-field>
+          </v-flex>
+        
+          <v-flex xs6>
+            <v-text-field v-model="params.target"
+              label="Path for xqdoc files"  
+            ></v-text-field>
+          </v-flex>
+        
+        </v-layout>
+  
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn primary @click.native="submit()"   :loading="waiting"
+      :disabled="waiting">
+      <v-icon>play_circle_outline</v-icon>
+      Run</v-btn>
+     </v-card-actions>
+     
+    <v-alert success v-model="alert.success">
+    {{alert.msg}}
+    </v-alert>
+     <v-alert error v-model="alert.error">
+    <code>{{alert.msg}}</code>
+    </v-alert>
+  </v-card>
+  <code>{{code}}</code>
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      params:{
+			      efolder:"C:/Users/andy/git/graphxq/src",
+			      target:"C:/tmp/xqdoc/"
+			 },
+			waiting:false,
+			alert:{msg:"",success:false,error:false},
+    }
+  },
+  methods:{
+    submit(){
+      this.waiting=true
+      HTTP.post("tasks/xqdoc",Qs.stringify(this.params))
+      .then(r=>{
+        this.waiting=false      
+        this.alert={msg:r.data.msg,success:true,error:false}
+        console.log(r.data)
+         settings.setItem('tasks/xqdoc',this.params)
+      })
+      .catch(error=>{
+        this.waiting=false
+        this.alert={msg:error.response.data,success:false,error:true}
+        console.log(error);
+      });
+   }
+  },
+  created: function () {
+    settings.getItem('tasks/xqdoc')
+    .then((v)=>{
+      if(v)this.params=v
+    })
+  },
+  
+  computed:{
+    code(){return 'generate xqdoc'}
+  }
+}
+</script>
diff --git a/src/vue-poc/features/timeline.vue b/src/vue-poc/features/timeline.vue
new file mode 100644
index 0000000..799a36e
--- /dev/null
+++ b/src/vue-poc/features/timeline.vue
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<template id="timeline">
+ <v-container fluid>
+ <v-card>
+	 <v-card-title class="lime darken-1">Line 1</v-card-title>
+	 <v-card-text>
+	   <vis-time-line :items="vueState.data1"></vis-time-line>
+	 </v-card-text>
+ </v-card>
+ 
+ <v-card>
+   <v-card-title class="deep-orange">Line 2</v-card-title>
+   <v-card-text>
+<vis-time-line :items="vueState.data2"></vis-time-line>
+</v-card-text>
+</v-card>
+ </v-container>
+</template>
+
+<script>{
+  data(){
+    return {
+      vueState: {
+
+      data1: [
+        { id: 1, content: 'item 1', start: '2013-04-20' },
+	      { id: 2, content: 'item 2', start: '2013-04-14' },
+	      { id: 3, content: 'item 3', start: '2013-04-18' },
+	      { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
+	      { id: 5, content: 'item 5', start: '2013-04-25' },
+	      { id: 6, content: 'item 6', start: '2013-04-27' }],
+
+      data2: [
+        { id: 1, content: 'item 11', start: '2017-04-20' },
+	      { id: 2, content: 'item 12', start: '2017-04-14' },
+	      { id: 3, content: 'item 13', start: '2017-04-18' },
+	      { id: 4, content: 'item 14', start: '2017-04-16', end: '2017-04-19' },
+	      { id: 5, content: 'item 15', start: '2017-04-25' },
+	      { id: 6, content: 'item 16', start: '2017-04-27' }]
+    }
+}
+}
+}</script>
diff --git a/src/vue-poc/lib/dice.xqm b/src/vue-poc/lib/dice.xqm
index 4070b8c..f06478f 100644
--- a/src/vue-poc/lib/dice.xqm
+++ b/src/vue-poc/lib/dice.xqm
@@ -26,7 +26,7 @@ declare function sort($items as item()*
                      ,$fmap as map(*)
                      ,$sort as xs:string?)
 as item()*{
-  let $sort:=fn:normalize-space($sort)=>fn:trace("dice:sort")
+  let $sort:=fn:normalize-space($sort)
   let $ascending:=fn:not(fn:starts-with($sort,"-"))
   let $fld:=fn:substring($sort,if(fn:substring($sort,1,1)=("+","-")) then 2 else 1)
   return if(fn:not(map:contains($fmap, $fld))) then
diff --git a/src/vue-poc/lib/file.xqm b/src/vue-poc/lib/file.xqm
index dcb1126..0603188 100644
--- a/src/vue-poc/lib/file.xqm
+++ b/src/vue-poc/lib/file.xqm
@@ -59,14 +59,14 @@ as element(c:directory)
 declare function ufile:collection-next($url as xs:string)
 as map(*)
 {
- if(not(starts-with($url,"/")) or ends-with($url,"/")) then
+ if(not(starts-with($url,"/") and ends-with($url,"/"))) then
   error(xs:QName('ufile:badcollection'),$url)
  else 
  fold-left(
     uri-collection($url ),
     map{},
     function($acc,$this){
-      let $s:=substring-after($this ,$url || "/")
+      let $s:=substring-after($this ,$url )
       let $isDir:=contains($s,"/") 
       let $s:=if($isDir)then substring-before($s,"/")  else $s
       return map:merge((map:entry($s,if($isDir)then "directory" else "file"),$acc))
diff --git a/src/vue-poc/lib/mimetype.xqm b/src/vue-poc/lib/mimetype.xqm
index a27ed5d..db827af 100644
--- a/src/vue-poc/lib/mimetype.xqm
+++ b/src/vue-poc/lib/mimetype.xqm
@@ -43,7 +43,7 @@ let $type:= if($a="application/sparql-query") then
 declare function mt:base-ext($filepath as xs:string)
 {
   let $ext:=file:name($filepath)=>substring-after(".")
-  let $types:=map{"vue":".html"}
+  let $types:=map{"vue":".html","sch":".xml"}
   return if($types($ext)) then $types($ext) else $ext
 };
 
diff --git a/src/vue-poc/lib/webutils.xqm b/src/vue-poc/lib/webutils.xqm
new file mode 100644
index 0000000..4b62751
--- /dev/null
+++ b/src/vue-poc/lib/webutils.xqm
@@ -0,0 +1,137 @@
+(:~ 
+: web utils
+: @author andy bunce
+: @since oct 2012
+:)
+
+module namespace qweb = 'quodatum.web.utils4';
+declare default function namespace 'quodatum.web.utils4'; 
+import module namespace request = "http://exquery.org/ns/request";
+declare namespace rest = 'http://exquery.org/ns/restxq';
+
+(:~ map of available dice parameters :)
+declare function dice(){
+    let $fld:=function($n){
+                        request:parameter($n)!map:entry($n,request:parameter($n))
+                           }
+    return map:merge(("start","limit","sort","fields")!$fld(.))
+};
+
+declare function status($code,$reason){
+   <rest:response>            
+       <http:response status="{$code}" reason="{$reason}"/>
+   </rest:response>
+};
+
+(:~
+: REST created http://restpatterns.org/HTTP_Status_Codes/401_-_Unauthorized
+:)
+declare function http-auth($auth-scheme,$response){
+   (
+   <rest:response>            
+       <http:response status="401" >
+	       <http:header name="WWW-Authenticate" value="{$auth-scheme}"/>
+	   </http:response>
+   </rest:response>,
+   $response
+   )
+};
+
+(:~
+: REST created http://restpatterns.org/HTTP_Status_Codes/201_-_Created
+:)
+declare function http-created($location,$response){
+   (
+   <rest:response>            
+       <http:response status="201" >
+	       <http:header name="Location" value="{$location}"/>
+	   </http:response>
+   </rest:response>,
+   $response
+   )
+};
+
+
+(:~ CORS header with download option :) 
+declare function headers($attachment,$response){
+(<restxq:response>
+    <http:response>
+        <http:header name="Access-Control-Allow-Origin" value="*"/>
+    {if($attachment)
+    then <http:header name="Content-Disposition" value='attachment;filename="{$attachment}"'/>
+    else ()}
+    </http:response>
+</restxq:response>, $response)
+};
+
+(:~ download as zip file :) 
+declare function zip-download($zipname,$data){
+    (download-response("raw",$zipname), $data)
+};
+
+(:~ headers for download  :) 
+declare function method($method as xs:string){
+<restxq:response>
+    <output:serialization-parameters>
+        <output:method value="{$method}"/>
+    </output:serialization-parameters>
+</restxq:response>
+};
+
+(:~ headers for download  :) 
+declare function download-response($method,$filename){
+
+<restxq:response>
+    <output:serialization-parameters>
+        <output:method value="{$method}"/>
+    </output:serialization-parameters>
+   <http:response>
+       <http:header name="Content-Disposition" value='attachment;filename="{$filename}"'/> 
+    </http:response>
+</restxq:response>
+};
+
+(:~
+ : transform xml to json serialable xml driven by @type="array" and convention.
+ : all namespaces are removed
+ :)
+declare function fixup($n){fixup($n,"object")}; 
+declare function fixup($n,$type)
+{
+let $n:=strip-ns($n)
+let $a:=<json type="{$type}">{$n/*}</json>
+return copy $c := $a
+modify (
+            (: for nodes with no @type and have children set @type="object" :)
+            for $type in $c//*[fn:not(@type)and *]
+            return insert node attribute {'type'}{'object'} into $type,
+            (: for node with @type="array" and children rename children to "_" :)
+            for $n in $c//*[@type="array"]/*
+            return rename node $n as "_"
+        )
+return $c
+};
+
+declare function strip-ns($n as node()) as node() {
+  if($n instance of element()) then (
+    element { fn:local-name($n) } {
+      $n/@*,
+      $n/node()/strip-ns(.)
+    }
+  ) else if($n instance of document-node()) then (
+    document { $n/node() }
+  ) else (
+    $n
+  )
+};
+
+(:~ todo use basex mime :)
+declare function svg-response(){
+    web:response-header(map { 'media-type': "image/svg+xml",
+                              'method':"xml"})
+};
+ 
+declare function json-response(){
+    web:response-header(map { 'media-type': "application/json",
+                              'method':"json"})
+};
\ No newline at end of file
diff --git a/src/vue-poc/models.gen.xqm b/src/vue-poc/models.gen.xqm
index 8bdcc51..a4ddae6 100644
--- a/src/vue-poc/models.gen.xqm
+++ b/src/vue-poc/models.gen.xqm
@@ -1,11 +1,59 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2017-07-17T17:47:26.588+01:00 
+ : auto generated from xml files in entities folder at: 2017-07-27T13:03:06.371+01:00 
  :)
 
 module namespace entity = 'quodatum.models.generated';
 declare namespace c='http://www.w3.org/ns/xproc-step';
           
 declare variable $entity:list:=map { 
+  "basexlog": map{
+     "name": "basexlog",
+     "description": "BaseX log entry ",
+     "access": map{ 
+       "address": function($_ as element()) as xs:string {$_/@address },
+       "ms": function($_ as element()) as xs:integer {$_/@ms },
+       "text": function($_ as element()) as xs:string {$_/. },
+       "time": function($_ as element()) as xs:string {$_/@time },
+       "type": function($_ as element()) as xs:string {$_/@type },
+       "user": function($_ as element()) as xs:string {$_/@user } },
+    
+     "filter": function($item,$q) as xs:boolean{ 
+         some $e in ( ) satisfies
+         fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
+      },
+       "json":   map{ 
+           "address": function($_ as element()) as element(address)? {
+            (: xs:string :)
+                        fn:data($_/@address)!element address {  .} 
+                 },
+           "ms": function($_ as element()) as element(ms)? {
+            (: xs:integer :)
+                        fn:data($_/@ms)!element ms { attribute type {'number'}, .} 
+                 },
+           "text": function($_ as element()) as element(text)? {
+            (: xs:string :)
+                        fn:data($_/.)!element text {  .} 
+                 },
+           "time": function($_ as element()) as element(time)? {
+            (: xs:string :)
+                        fn:data($_/@time)!element time {  .} 
+                 },
+           "type": function($_ as element()) as element(type)? {
+            (: xs:string :)
+                        fn:data($_/@type)!element type {  .} 
+                 },
+           "user": function($_ as element()) as element(user)? {
+            (: xs:string :)
+                        fn:data($_/@user)!element user {  .} 
+                 } },
+       
+      "data": function() as element(entry)*
+       { hof:top-k-by(admin:logs(), hof:id#1, 2)/string()!reverse(admin:logs(.,true())) },
+       
+       "views": map{ 
+       
+       }
+   },
   "thumbnail": map{
      "name": "thumbnail",
      "description": "an image.",
diff --git a/src/vue-poc/models/adminlog.xml b/src/vue-poc/models/adminlog.xml
new file mode 100644
index 0000000..01b0c78
--- /dev/null
+++ b/src/vue-poc/models/adminlog.xml
@@ -0,0 +1,34 @@
+<entity name="basexlog" xmlns="https://github.com/Quodatum/app-doc/entity">  
+  <description>BaseX log entry </description>
+  
+  <fields>
+    <field name="time" type="xs:string">
+      <description>time of event</description>
+      <xpath>@time</xpath>
+    </field>
+    <field name="address" type="xs:string">
+      <description>ip address</description>
+      <xpath>@address</xpath>
+    </field>
+    <field name="user" type="xs:string">
+      <description>user name</description>
+      <xpath>@user</xpath>
+    </field>
+    <field name="type" type="xs:string">
+      <description>type of log msg</description>
+      <xpath>@type</xpath>
+    </field>
+     <field name="ms" type="xs:integer">
+      <description>time ms)</description>
+      <xpath>@ms</xpath>
+    </field>
+      <field name="text" type="xs:string">
+            <description>log message</description>
+            <xpath>.</xpath>
+        </field>
+  </fields>
+  <views>
+    </views>
+  <iconclass>fa fa-calendar</iconclass>
+  <data type="element(entry)">hof:top-k-by(admin:logs(), hof:id#1, 2)/string()!reverse(admin:logs(.,true()))</data>
+</entity>
\ No newline at end of file
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 2b9024a..5541d19 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,16 +1,16 @@
-// generated 2017-07-17T17:49:54.864+01:00
-
Vue.component('my-component',{template:` 
+// generated 2017-07-27T21:30:55.726+01:00
+
Vue.component('qd-link',{template:` 
  <a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
  `,
       
   props: ['href'],
   created:function(){
-      console.log("my-component");
+      console.log("qd-link");
     }
 }
 
       );
-      Vue.component('nav-list',{template:` 
+      Vue.component('qd-navlist',{template:` 
  <v-list dense="">
 <template v-for="(item, i) in items">
   <v-layout row="" v-if="item.heading" align-center="" :key="i"> 
@@ -67,13 +67,28 @@
 </v-list>
  `,
       
-  props: ['items'],
- 
-   created:function(){
-      console.log("nav-lst");
-    }
+  props: ['items']
 }
 
+      );
+      Vue.component('vis-time-line',{template:` 
+  <div></div>
+ `,
+       
+  props: ['items', 'groups', 'options'],
+  methods:{
+    select(properties){
+      //alert('selected items: ' + properties.items);
+    }
+  },
+  mounted: function () {
+    var items = new vis.DataSet(this.items);
+    var options = this.options;
+    var groups = this.groups;
+    var timeline = new vis.Timeline(this.$el, items, groups, options);
+    timeline.on('select', this.select);
+  }
+}
       );
       /**
  * vue filters
@@ -146,15 +161,82 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
 	<li><a href="/dba" target="new">DBA app</a></li>
 </ul>
-</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component href="/dba">REPLACED</my-component> </v-layout>  `,
+</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link href="/dba">REPLACED</qd-link> </v-layout>  `,
       
   }
 
+      );
+      const Log=Vue.extend({template:` 
+ <v-container fluid="">
+  <v-card>
+   <v-toolbar class="green white--text">
+       <v-btn light="" icon="" :loading="loading" @click="getItems()" :disabled="loading">
+    <v-icon>refresh</v-icon>
+    </v-btn>   
+      <v-spacer></v-spacer>
+      <v-text-field append-icon="search" label="Filter logs" single-line="" hide-details="" v-model="search"></v-text-field>
+     
+    </v-toolbar>
+  <v-data-table :headers="headers" :items="items" :search="search" class="elevation-1" no-data-text="No logs found" v-bind:pagination.sync="pagination">
+    <template slot="items" scope="props">
+      <td class="text-xs-right">{{ props.item.time }}</td>
+      <td class="text-xs-right">{{ props.item.address }}</td>
+      <td class="text-xs-right">{{ props.item.user }}</td>
+      <td class="text-xs-right">{{ props.item.type }}</td>
+      <td class="text-xs-right">{{ props.item.ms }}</td>
+       <td><code>{{ props.item.text }}</code></td>
+    </template>
+  </v-data-table>
+ </v-card>
+</v-container> `,
+      
+  data:  function(){
+    return {
+      message: 'Hello Vue.js!',
+      q:this.$route.query.q,
+      headers: [
+        {
+          text: 'time',
+          left: true,
+          value: 'time'
+        },
+        { text: 'address', value: 'address' },
+        { text: 'user', value: 'user' },
+        { text: 'Type', value: 'type' },
+        { text: 'ms', value: 'ms' },
+        { text: 'text', value: 'text' }
+      ],
+      items:[],
+      pagination:{sortBy: 'time',descending:true,rowsPerPage:25},
+      selected:[],
+      search:"",
+      loading:false
+      }
+  },
+  methods:{
+    getItems(){
+      this.loading=true
+      HTTP.get("log",{params:this.q})
+      .then(r=>{
+        this.loading=false
+        //console.log(r.data)
+        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
+        this.items=r.data.items
+        setTimeout(()=>{ this.getItems() }, 5000);
+        }) 
+    }
+  },
+  created:function(){
+    this.getItems()
+  }
+}
+
       );
       const Files=Vue.extend({template:` 
  <v-container fluid="">
  
 <v-card>
+
 <v-toolbar light="">
       <v-menu bottom="" right="">
            <v-btn icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
@@ -168,56 +250,65 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
    
     <v-spacer></v-spacer>
       <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.native.enter="filter"></v-text-field>
+    <v-btn icon="" ripple="" @click="showInfo=!showInfo">
+            <v-icon>info</v-icon>
+          </v-btn>
+     <v-btn icon="" @click="alert('todo')">     
     <v-icon>view_module</v-icon>
+    </v-btn>
  </v-toolbar>
-
+ 
+  
   
   <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
-  <v-list v-if="!busy" two-line="" subheader="">
-    <v-subheader inset="">Folders</v-subheader>
-      <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar="">
-        <v-list-tile-avatar>
-          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
-        </v-list-tile-avatar>
-        <v-list-tile-content @click="folder(item.name)">
-          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
-          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
-          <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
-            <v-icon class="grey--text text--lighten-1">info</v-icon>
-          </v-btn>
-        </v-list-tile-action>
-      </v-list-tile>
-    
-    <v-divider inset=""></v-divider>
-    <v-subheader inset="">Files</v-subheader> 
-      <v-list-tile v-for="item in files" v-bind:key="item.name">
-        <v-list-tile-avatar>
-          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
-        </v-list-tile-avatar>
-        <v-list-tile-content @click="file(item.name)">
-          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
-           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
-          <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
-            <v-icon class="grey--text text--lighten-1">info</v-icon>
-          </v-btn>
-        </v-list-tile-action>
-      </v-list-tile>
-
-  </v-list>
-    <v-navigation-drawer right="" light="" temporary="" v-model="showInfo">
-     <v-card> 
-       <v-toolbar class="green white--text">
-      <v-toolbar-title>{{selected}}</v-toolbar-title>
+  <v-layout>
+	  <v-flex>
+	  <v-list v-if="!busy" two-line="" subheader="">
+	    <v-subheader inset="">Folders</v-subheader>
+	      <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item)" avatar="">
+	        <v-list-tile-avatar>
+	          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
+	        </v-list-tile-avatar>
+	        <v-list-tile-content>
+	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
+	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
+	        </v-list-tile-content>
+	        <v-list-tile-action>
+	          <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
+	            <v-icon class="grey--text text--lighten-1">info</v-icon>
+	          </v-btn>
+	        </v-list-tile-action>
+	      </v-list-tile>
+	    
+	    <v-divider inset=""></v-divider>
+	    <v-subheader inset="">Files</v-subheader> 
+	      <v-list-tile v-for="item in files" v-bind:key="item.name">
+	        <v-list-tile-avatar>
+	          <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
+	        </v-list-tile-avatar>
+	        <v-list-tile-content @click="file(item.name)">
+	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
+	           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
+	        </v-list-tile-content>
+	        <v-list-tile-action>
+	          <v-btn icon="" ripple="" @click.native.stop="info(item)">
+	            <v-icon class="grey--text text--lighten-1">info</v-icon>
+	          </v-btn>
+	        </v-list-tile-action>
+	      </v-list-tile>
+	  </v-list>
+	  </v-flex>
+	   <v-flex v-if="showInfo" xs4="" grey="" lighten-3="">
+   <v-card flat="" tile=""> 
+       <v-card-actions>
+      <v-card-title>test</v-card-title>
       <v-spacer></v-spacer>    
        <v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
-    </v-toolbar>
-    <v-card-text> blah blah protocol: {{protocol}} </v-card-text> 
-</v-card>
-      </v-navigation-drawer>
+    </v-card-actions>
+    <v-card-text> blah blah protocol:  </v-card-text> 
+    </v-card>
+   </v-flex>
+  </v-layout>
 </v-card>
  </v-container>
  `,
@@ -226,14 +317,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   props:["protocol"],
   data:  function(){
     return { 
-            crumbs:[],
+            url:"", 
             folders:[],
             files:[],
             items:["root"],
             q:"",
             busy:false,
             showInfo:false,
-            selected:""
+            selected:null
     }
   },
   methods:{
@@ -241,8 +332,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
    // with query, resulting in /register?plan=private
       router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol  }})
     },
-    folder (val) {
-      this.crumbs.push(val )
+    folder (item) {
+      this.url=this.url+item.name+"/"
     },
     load(url){
       this.busy=true
@@ -260,30 +351,24 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       
     },
     root(){
-      this.crumbs=[]
       this.$router.push({  query: { url: this.url }})
     },
     filter(){
-      console.log("TODO")
+      console.log("TODO",this.q)
+      this.$router.push({  query: {url:this.url,q:this.q }})
     },
-    info(sel){
-      this.selected=sel
+    info(item){
+      this.selected=item
       this.showInfo=true
     }
   
   },
   computed: {
-    url:  {
-      get: function () {
-      return  '/'+ this.crumbs.join("/") ;  
-    },
-    set: function(newValue){
-     // alert("set"+newValue)
-     this.crumbs=newValue.split("/").filter((a)=>a.length>0)
-    }
-      },
    icon(){
         return (this.protocol=="basexdb")?"account_balance":"folder"
+      },
+   crumbs(){
+        return this.url.split("/").filter((a)=>a.length>0) 
       }
   },
   watch:{
@@ -299,6 +384,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   created:function(){
     var url=this.$route.query.url
     this.url=url?url:"/";
+    this.q=this.$route.query.q || this.q
     this.load(this.url)
   }
 }
@@ -580,7 +666,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     },
     annotation(counts){
       this.annotations=counts
-      console.log("annotations: ",counts)
+      //console.log("annotations: ",counts)
     },
     acetype(mime){
       var r=this.mimemap[mime]
@@ -603,7 +689,6 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     document.addEventListener('beforeunload', this.leaving);
   this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
     var url=this.$route.query.url
-    console.log("Edit: ",url)
     if(url) this.fetch(url)
   },
   beforeRouteLeave (to, from, next) {
@@ -635,7 +720,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
             <v-icon>arrow_drop_down</v-icon>
           </v-toolbar-title>
           <v-list>
-            <v-list-tile v-for="item in dropdown_font" :key="item">
+            <v-list-tile v-for="item in dropdown_font" :key="item.text">
               <v-list-tile-title v-text="item.text" @click="font=item.text"></v-list-tile-title>
             </v-list-tile>
           </v-list>
@@ -783,10 +868,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 	<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
 	<li><a href="/dba" target="new">DBA app</a></li>
 </ul>
-</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component href="/dba">REPLACED</my-component> </v-layout>  `,
+</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link href="/dba">REPLACED</qd-link> </v-layout>  `,
       
   }
 
+      );
+      const Image=Vue.extend({template:` 
+ <v-container fluid="">
+ Image: {{id}}
+ </v-container>
+ `,
+        
+  props:["id"]
+    }
+
       );
       const Images=Vue.extend({template:` 
 
@@ -814,8 +909,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
         <v-container fluid="" grid-list-md="">
           <v-layout row="" wrap="">
             <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
-              <v-card @click="selected(image)" class="grey lighten-2 pt-1">
-                <v-card-media :src="src(image)" height="80px" :contain="true"></v-card-media>
+              <v-card class="grey lighten-2 pt-1">
+                <v-card-media :src="src(image)" @click="go(image)" height="80px" :contain="true"></v-card-media>
                  <v-card-actions v-tooltip:top="{ html: image.id + ' '+image.name }">
               
                 <v-btn icon="" small="">
@@ -825,7 +920,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
                 <v-btn icon="" small="">
                   <v-icon>bookmark</v-icon>
                 </v-btn>
-                <v-btn icon="" small="">
+                <v-btn icon="" small="" @click="selected(image)">
                   <v-icon>share</v-icon>
                 </v-btn>
               </v-card-actions>
@@ -876,6 +971,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     selected(image){
       this.selitem=image;
       this.showInfo=true;
+    },
+    go(image){
+      this.$router.push({ name: 'image', params: { id: image.id }})
     }
    
   },
@@ -913,7 +1011,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
      <v-btn @click.native="stop()" :disabled="noSelection">Stop</v-btn>
     
       <v-spacer></v-spacer>
-      <v-text-field append-icon="search" label="Search" single-line="" hide-details="" v-model="search"></v-text-field>
+      <v-text-field append-icon="search" label="Filter jobs" single-line="" hide-details="" v-model="search"></v-text-field>
      
     </v-toolbar>
   <v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No Jobs currently running">
@@ -1046,161 +1144,6 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   }
 }
 
-      );
-      const Log=Vue.extend({template:` 
- <v-container fluid="">
-  <h1>LOGS</h1>
-</v-container> `,
-      
-  data:  function(){
-    return {
-      message: 'Hello Vue.js!',
-      q:this.$route.query.q
-      }
-  },
-  created:function(){
-    console.log("Serch",this.$route.query.q)
-  }
-}
-
-      );
-      const Model=Vue.extend({template:` 
- <v-container fluid="">
-    <v-card>
-     <v-card-title class="blue accent-4">
-      <span class="white--text">Generate <code>model.gen.xqm</code></span>      
-    </v-card-title>
-    <v-card-text>
-      <v-container fluid="">
-        <v-layout row="" wrap="">
-          
-          <v-flex xs6="">
-            <v-text-field v-model="params.efolder" label="Folder containing model  definitions as xml"></v-text-field>
-          </v-flex>
-        
-          <v-flex xs6="">
-            <v-text-field v-model="params.target" label="Path to xqm file to generate"></v-text-field>
-          </v-flex>
-           <v-flex xs12="">
-            <code>{{code}}</code>
-          </v-flex>
-        </v-layout>
-  
-      </v-container>
-    </v-card-text>
-    <v-card-actions>
-      <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
-      <v-icon>play_circle_outline</v-icon>
-      Run</v-btn>
-     </v-card-actions>
-      <v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
-      {{ snackbar.msg }}
-      <v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
-    </v-snackbar>
-  </v-card>
- </v-container>
- `,
-      
-  data:  function(){
-    return {
-      params:{
-			      efolder:"C:/Users/andy/git/vue-poc/src/vue-poc/models",
-			      target:"C:/Users/andy/git/vue-poc/src/vue-poc/models.gen.xqm"
-			 },
-			waiting:false,
-			snackbar:{show:false,msg:"",context:"success"},
-    }
-  },
-  methods:{
-    submit(){
-      this.waiting=true
-      HTTP.post("tasks/model",Qs.stringify(this.params))
-      .then(r=>{
-        this.waiting=false      
-        this.snackbar={show:true,msg:r.data.msg,context:"success"}
-        console.log(r.data)
-      })
-      .catch(error=>{
-        this.waiting=false
-        this.snackbar={show:true,msg:"Problem",context:"error"}
-        console.log(error);
-      });
-   }
-  },
-  computed:{
-    code(){return 'import module namespace entity = "quodatum.models.generated" at "'+this.params.target+'";'}
-  }
-}
-
-      );
-      const People=Vue.extend({template:` 
- <v-container fluid="">
-  <v-layout>Look at all the people who work here!
-  <v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
-  <p>{{ message }}</p>
-   <v-btn light="" default="" v-on:click.native="logout">logout</v-btn>
-   <!-- 
-    <v-autocomplete :items="list" 
-    v-model="fieldValue" 
-    :search.sync="search"
-     label="Suburb" item-text="suburb" 
-    item-value="suburb" 
-    @selected="handleSelected"
-     strict="Unknown">
-<template slot="item" scope="data">
-      <v-list-tile-content>
-        <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
-        <template v-if="!data.item.generatedItem">
-          <v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
-        </template>
-      </v-list-tile-content>
-    </template>
-</v-autocomplete>
- -->
-  </v-layout>
-  <v-card>
-  <v-layout>
-  <v-flex xs5="">created:{{$auth.created}}</v-flex>
-   <v-flex xs5="">session:{{$auth.session}}</v-flex>
-  </v-layout>
-  </v-card>
-  <v-layout>
-  <v-flex xs5="">
-   <v-card-media src="resources/music.jpg" height="300px"></v-card-media>
-  </v-flex>
-  <v-flex xs1="">
-  <v-card-media :src="img" height="60px"></v-card-media>
-  </v-flex>
-  </v-layout>
-  
- 
- </v-container>
- `,
-      
-  data:  function(){
-    return {
-      message: 'Hello Vue.js!',
-      fieldValue:"",
-      list:[],
-      search:"",
-      data:[],
-      img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
-    }
-  },
-  methods: {
-    reverseMessage() {
-      this.message = this.message.split('').reverse().join('')
-    },
-    logout(){
-      alert("TODU")
-    },
-    handleSelected(){
-      
-    }
-  }
-}
-
-
       );
       const Ping=Vue.extend({template:` 
  <v-container fluid="">
@@ -1213,12 +1156,10 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           <th>Repeat</th>
           <th>Last</th>
           <th>Count</th>
-         
           <th>Avg</th>
-          
           <th>min</th>
           <th>max</th>
-           <th>Median</th>
+          <th>Median</th>
         </tr>
       </thead>
       <tbody>
@@ -1226,10 +1167,10 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       
           <tr>
               <td>
-                   <v-btn dark="" @click.native="get()">Get count</v-btn>
+                   <v-btn @click.native="get()">Get count</v-btn>
                </td>
                <td>
-     <v-checkbox v-model="repeat.get" dark=""></v-checkbox>
+     <v-checkbox v-model="repeat.get"></v-checkbox>
         </td>    
               <td>
                   <span>{{getValues.last}}</span>
@@ -1252,13 +1193,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
                   <span>{{getValues.median}}</span>
               </td>
           </tr>
+          
             <tr>
           <td>
-             <v-btn dark="" @click.native="update()">Update count</v-btn>
+             <v-btn @click.native="update()">Update count</v-btn>
           </td>
           
           <td>
-           <v-checkbox v-model="repeat.post" dark=""></v-checkbox>
+           <v-checkbox v-model="repeat.post"></v-checkbox>
           </td>
            <td class="col-md-1">
                         <span>{{postValues.last}}</span>
@@ -1266,9 +1208,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           <td class="col-md-1">
             <span>{{postValues.count}}</span>
           </td>
-          <td class="col-md-1">
-                        <span>{{postValues.median}}</span>
-           </td>
+        
            
           <td class="col-md-1">
             <span>{{postValues.avg | round(2)}}</span>
@@ -1281,9 +1221,13 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           <td class="col-md-1">
               <span>{{postValues.max}}</span>
           </td>
+            <td class="col-md-1">
+                        <span>{{postValues.median}}</span>
+           </td>
         </tr>
       </tbody>
     </table>
+    <v-btn @click="reset()">Reset</v-btn>
  </v-container>
  `,
       
@@ -1321,6 +1265,10 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           this.get(); //does this leak??
         }
      })
+    },
+    reset(){
+      this.getValues.clear();
+      this.postValues.clear();
     }
   },
   computed: {
@@ -1428,12 +1376,15 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       const Select=Vue.extend({template:` 
  <v-container fluid="">
 <v-card>
-
-    <v-card-title class="green darken-1">
-      <span class="white--text">Selection</span>
-      
+    <v-toolbar class="green darken-1">
+    <v-card-title>
+      <span class="white--text">Selection</span>     
     </v-card-title>
-  <v-card-text>
+    <v-spacer></v-spacer>    
+       <v-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
+  </v-toolbar>
+  <v-layout>
+    <v-flex>
     <v-layout>
      
     <v-flex xs6="">
@@ -1448,7 +1399,19 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     <pre>{{$data.value2 }}</pre>
     </v-flex>
    </v-layout>
-</v-card-text>
+   </v-flex>
+   <v-flex v-if="showInfo" xs4="">
+   <v-card flat=""> 
+       <v-card-actions>
+      <v-toolbar-title>test</v-toolbar-title>
+      <v-spacer></v-spacer>    
+       <v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+    </v-card-actions>
+    <v-card-text> blah blah protocol:  </v-card-text> 
+    </v-card>
+   </v-flex>
+   </v-layout>
+
 <v-card>
  </v-card></v-card></v-container>
  `,
@@ -1459,7 +1422,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           value: null,
           value2: null,
           options: [],
-          isLoading: false
+          isLoading: false,
+          showInfo:true
       }
     },
     created:function(){
@@ -1484,6 +1448,74 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 }
 
 
+      );
+      const Session=Vue.extend({template:` 
+ <v-container fluid="">
+  <v-layout>
+   <v-btn v-on:click="redraw">this.$forceUpdate()</v-btn>
+    <v-btn v-on:click="logout">logout</v-btn>
+   <!-- 
+    <v-autocomplete :items="list" 
+    v-model="fieldValue" 
+    :search.sync="search"
+     label="Suburb" item-text="suburb" 
+    item-value="suburb" 
+    @selected="handleSelected"
+     strict="Unknown">
+<template slot="item" scope="data">
+      <v-list-tile-content>
+        <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
+        <template v-if="!data.item.generatedItem">
+          <v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
+        </template>
+      </v-list-tile-content>
+    </template>
+</v-autocomplete>
+ -->
+  </v-layout>
+   <table class="table">
+      <thead> 
+        <tr>
+          <th>Name</th>
+          <th>value</th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr>
+        <td>created</td><td>{{$auth.created}}</td>
+        </tr>
+        <tr>
+        <td>session</td><td>{{$auth.session}}</td>
+        </tr>
+        <tr>
+        <td>permision</td><td>{{$auth.permission}}</td>
+        </tr>
+        </tbody>
+        </table>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      fieldValue:"",
+      list:[],
+      search:"",
+      data:[]    }
+  },
+  methods: {
+    logout(){
+      alert("TODO")
+    },
+    redraw(){
+      this.$forceUpdate()
+    },
+    handleSelected(){
+      
+    }
+  }
+}
+
+
       );
       const Settings=Vue.extend({template:` 
   <v-layout row="">
@@ -1539,30 +1571,21 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     }
   },
   created: function () {
-    // `this` points to the vm instance
-    console.log('created: ')
-    localforage.getItem('settings/ace').then((value) => {
-      console.log('oh say can you see, ' + value);
-      this.ace=value || this.ace
-    }).catch((err) => {
-      console.log('the rockets red glare has blinded me');
-    });
+    settings.getItem('settings/ace')
+    .then((v)=>{
+      console.log("AAAA",v)
+      this.ace=v
+    })
+
   },
-  updated: function () {
-    // `this` points to the vm instance
-    console.log('updated: ')
-    localforage.setItem('settings/ace', this.ace).then((value) => {
-      console.log('woot! we saved ' + value);
-    }).catch((err) => {
-      console.log('he\'s dead, jim!');
-    });
-  },
-  methods: {
-    reverseMessage: function () {
-      alert("unused")
-    }
+  watch: {"ace":{
+    handler:function(v){
+      settings.setItem('settings/ace',this.ace)
+      },
+    deep:true
   }
 }
+}
 
 
       );
@@ -1606,11 +1629,90 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     }
   }
 
+      );
+      const Model=Vue.extend({template:` 
+ <v-container fluid="">
+    <v-card>
+    <v-toolbar>
+     <v-btn icon="" to="/tasks"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title class="blue accent-4">
+      <span class="white--text">Generate <code>model.gen.xqm</code></span>      
+    </v-card-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-container fluid="">
+        <v-layout row="" wrap="">
+          
+          <v-flex xs6="">
+            <v-text-field v-model="params.efolder" label="Folder containing model  definitions as xml"></v-text-field>
+          </v-flex>
+        
+          <v-flex xs6="">
+            <v-text-field v-model="params.target" label="Path to xqm file to generate"></v-text-field>
+          </v-flex>
+           <v-flex xs12="">
+            <code>{{code}}</code>
+          </v-flex>
+        </v-layout>
+  
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
+      <v-icon>play_circle_outline</v-icon>
+      Run</v-btn>
+     </v-card-actions>
+      <v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
+      {{ snackbar.msg }}
+      <v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
+    </v-snackbar>
+  </v-card>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      params:{
+			      efolder:"C:/Users/andy/git/vue-poc/src/vue-poc/models",
+			      target:"C:/Users/andy/git/vue-poc/src/vue-poc/models.gen.xqm"
+			 },
+			waiting:false,
+			snackbar:{show:false,msg:"",context:"success"},
+    }
+  },
+  methods:{
+    submit(){
+      this.waiting=true
+      HTTP.post("tasks/model",Qs.stringify(this.params))
+      .then(r=>{
+        this.waiting=false      
+        this.snackbar={show:true,msg:r.data.msg,context:"success"}
+        console.log(r.data)
+      })
+      .catch(error=>{
+        this.waiting=false
+        this.snackbar={show:true,msg:"Problem",context:"error"}
+        console.log(error);
+      });
+   }
+  },
+  computed:{
+    code(){return 'import module namespace entity = "quodatum.models.generated" at "'+this.params.target+'";'}
+  }
+}
+
       );
       const Task=Vue.extend({template:` 
  <v-container fluid="">
-  <h1>Tasks</h1>
+  <h3>Tasks</h3>
+  <ul>
+  <li>
   <router-link to="tasks/model">model</router-link>
+  </li>
+  <li>
+  <router-link to="tasks/xqdoc">xqdoc</router-link>
+  </li>
+  </ul>
  </v-container>
  `,
       
@@ -1619,9 +1721,88 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       message: 'Hello Vue.js!',
       q:this.$route.query.q
       }
+  }
+}
+
+      );
+      const Xqdoc=Vue.extend({template:` 
+ <v-container fluid="">
+    <v-card>
+     <v-toolbar class="orange darken-1">
+     <v-btn icon="" to="/tasks"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title>
+      <span class="white--text">Task: Generate <code>xqdoc</code></span>      
+    </v-card-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-container fluid="">
+        <v-layout row="" wrap="">
+          
+          <v-flex xs6="">
+            <v-text-field v-model="params.efolder" label="Root Folder containing xq files"></v-text-field>
+          </v-flex>
+        
+          <v-flex xs6="">
+            <v-text-field v-model="params.target" label="Path for xqdoc files"></v-text-field>
+          </v-flex>
+        
+        </v-layout>
+  
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
+      <v-icon>play_circle_outline</v-icon>
+      Run</v-btn>
+     </v-card-actions>
+     
+    <v-alert success="" v-model="alert.success">
+    {{alert.msg}}
+    </v-alert>
+     <v-alert error="" v-model="alert.error">
+    <code>{{alert.msg}}</code>
+    </v-alert>
+  </v-card>
+  <code>{{code}}</code>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      params:{
+			      efolder:"C:/Users/andy/git/graphxq/src",
+			      target:"C:/tmp/xqdoc/"
+			 },
+			waiting:false,
+			alert:{msg:"",success:false,error:false},
+    }
   },
-  created:function(){
-    console.log("Serch",this.$route.query.q)
+  methods:{
+    submit(){
+      this.waiting=true
+      HTTP.post("tasks/xqdoc",Qs.stringify(this.params))
+      .then(r=>{
+        this.waiting=false      
+        this.alert={msg:r.data.msg,success:true,error:false}
+        console.log(r.data)
+         settings.setItem('tasks/xqdoc',this.params)
+      })
+      .catch(error=>{
+        this.waiting=false
+        this.alert={msg:error.response.data,success:false,error:true}
+        console.log(error);
+      });
+   }
+  },
+  created: function () {
+    settings.getItem('tasks/xqdoc')
+    .then((v)=>{
+      if(v)this.params=v
+    })
+  },
+  
+  computed:{
+    code(){return 'generate xqdoc'}
   }
 }
 
@@ -1694,6 +1875,48 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 
 }
 
+      );
+      const Timeline=Vue.extend({template:` 
+ <v-container fluid="">
+ <v-card>
+	 <v-card-title class="lime darken-1">Line 1</v-card-title>
+	 <v-card-text>
+	   <vis-time-line :items="vueState.data1"></vis-time-line>
+	 </v-card-text>
+ </v-card>
+ 
+ <v-card>
+   <v-card-title class="deep-orange">Line 2</v-card-title>
+   <v-card-text>
+<vis-time-line :items="vueState.data2"></vis-time-line>
+</v-card-text>
+</v-card>
+ </v-container>
+ `,
+      
+  data(){
+    return {
+      vueState: {
+
+      data1: [
+        { id: 1, content: 'item 1', start: '2013-04-20' },
+	      { id: 2, content: 'item 2', start: '2013-04-14' },
+	      { id: 3, content: 'item 3', start: '2013-04-18' },
+	      { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
+	      { id: 5, content: 'item 5', start: '2013-04-25' },
+	      { id: 6, content: 'item 6', start: '2013-04-27' }],
+
+      data2: [
+        { id: 1, content: 'item 11', start: '2017-04-20' },
+	      { id: 2, content: 'item 12', start: '2017-04-14' },
+	      { id: 3, content: 'item 13', start: '2017-04-18' },
+	      { id: 4, content: 'item 14', start: '2017-04-16', end: '2017-04-19' },
+	      { id: 5, content: 'item 15', start: '2017-04-25' },
+	      { id: 6, content: 'item 16', start: '2017-04-27' }]
+    }
+}
+}
+}
       );
       // base -----------------------
 localforage.config({
@@ -1717,6 +1940,38 @@ const Auth={
       })  }
 };
 Vue.use(Auth);
+
+// https://vuejs.org/v2/guide/state-management.html
+var settings = {
+    debug: true,
+    getItem (key) {
+      if (this.debug) console.log('getItem',key);
+      return new Promise((resolve, reject) => {
+        localforage.getItem(key)
+        .then((value) => {
+          console.log('GET setting', key,value);
+          resolve(value)
+        }).catch((err) => {
+          console.log('GET failed');
+          reject(err)
+      });
+      });
+    },
+    setItem (key,value,callback) {
+      if (this.debug) console.log('setItem',key,value);
+      return new Promise((resolve, reject) => {
+      localforage.setItem(key, value) 
+      .then((value) => {
+        console.log('SET ',key, value);
+        return new Promise((resolve, reject) => {resolve(value);})
+      }).catch((err) => {
+        console.log('set failed');
+        return new Promise((resolve, reject) => {reject(err);})
+      });
+    })
+    }
+  };
+
 Vue.config.errorHandler = function (err, vm, info) {
   // handle error
   // `info` is a Vue-specific error info, e.g. which lifecycle hook
@@ -1734,8 +1989,9 @@ const router = new VueRouter({
   mode: 'history',
   routes: [
     { path: '/', component: Home,meta:{title:"Home"} },
-    { path: '/people', component: People ,meta:{title:"People"}},
+    { path: '/session', component: Session ,meta:{title:"Session"}},
     { path: '/images', component: Images,meta:{title:"Images"} },
+    { path: '/images/:id', name:"image",component: Image, props: true,meta:{title:"Image details"}},
     { path: '/select', component: Select,meta:{title:"Select"} },
     { path: '/search', component: Search,meta:{title:"Search"} },
     { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@@ -1752,7 +2008,9 @@ const router = new VueRouter({
     { path: '/logs', component: Log,meta:{title:"Server logs"} },
     { path: '/tasks', component: Task,meta:{title:"Runnable tasks"} },
     { path: '/tasks/model', component: Model,meta:{title:"build model"} },
+    { path: '/tasks/xqdoc', component: Xqdoc,meta:{title:"build xqdoc"} },
     { path: '/jobs', component: Job,meta:{title:"Jobs"} },
+    { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
 });
@@ -1795,8 +2053,7 @@ const app = new Vue({
        {href: '/database', text: 'Databases',icon: 'account_balance' },
        {href: '/files', text: 'File system',icon: 'folder' },
       {href: '/edit',text: 'edit',icon: 'mode_edit'},
-      {href: '/history',text: 'history',icon: 'history'},
-      {href: '/logs',text: 'Server logs',icon: 'dns'}
+      {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
         icon: 'directions_run',
@@ -1807,17 +2064,19 @@ const app = new Vue({
       {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
       {href: '/tasks',text: 'Tasks',icon: 'history'}
       ]},
+      {href: '/logs',text: 'Server logs',icon: 'dns'},
       {
         icon: 'more_horiz',
         text: 'More' ,
         model: false,
         children: [
-      {href: '/people',text: 'People',icon: 'person'}, 
+      {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'}, 
       {href: '/images',text: 'Images',icon: 'camera_roll'}, 
       {href: '/tabs',text: 'tabs',icon: 'switch_camera'}, 
       {href: '/ping',text: 'ping',icon: 'update'},
+      {href: '/timeline',text: 'time line',icon: 'timelapse'},
       {href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'}
       ]},
       {href: '/settings',text: 'settings',icon: 'settings'  }
@@ -1825,7 +2084,9 @@ const app = new Vue({
 
   }},
   methods: {
-      
+      session(){
+        this.$router.push({path: '/session'})
+      },
       search(){
         this.$router.push({path: '/search',query: { q: this.q }})
       },
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 3b5990b..de79500 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -9,7 +9,7 @@
 <title>Vue Router Test</title>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-<link href="https://unpkg.com/vuetify@0.14.2/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.14.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
 <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css"  rel="stylesheet" type="text/css">
 
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@@ -19,7 +19,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@0.14.2/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.14.7/dist/vuetify.min.js"></script>
 <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
@@ -29,19 +29,22 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.5.0/localforage.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
-<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
 
 <script src="/vue-poc/ui/perf-stat.js"></script>
 <script src="/vue-poc/ui/vue-ace.js"></script>
 </head>
 <body>
 <v-app id="app" >
- <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer"    class="grey lighten-4 pb-0">
+ <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer"  height="100%"  class="grey lighten-4 pb-0">
   <v-list class="pa-0">
 
           <v-list-tile avatar tag="div">
-            <v-list-tile-avatar>
+            <v-list-tile-avatar >
+              <v-btn icon @click="session">
               <img src="/vue-poc/ui/quodatum.gif" />
+              </v-btn>
             </v-list-tile-avatar>
             <v-list-tile-content>
               <v-list-tile-title>Vue PoC</v-list-tile-title>
@@ -54,7 +57,7 @@
           </v-list-tile>
 
       </v-list>
-    <nav-list  :items="items"></nav-list>
+    <qd-navlist  :items="items"></qd-navlist>
  </v-navigation-drawer>
  
  <v-toolbar class="green lighten-1" >
diff --git a/src/vue-poc/static/resources/ark/ark.sch b/src/vue-poc/static/resources/ark/ark.sch
new file mode 100644
index 0000000..28d28e3
--- /dev/null
+++ b/src/vue-poc/static/resources/ark/ark.sch
@@ -0,0 +1,12 @@
+
+<schema xmlns="http://purl.oclc.org/dsdl/schematron">
+  <ns uri="http://www.schematron.info/ark" prefix="ark"/>
+  <pattern>
+    <rule context="ark:animal[@carnivore='yes']">
+      <report test="parent::*/ark:animal[@carnivore='no']">
+      There are carnivores and herbivores in one accommodation. 
+      The animals are not a food source!
+      </report>
+    </rule>
+  </pattern>
+</schema>
diff --git a/src/vue-poc/static/resources/ark/ark.xml b/src/vue-poc/static/resources/ark/ark.xml
new file mode 100644
index 0000000..2ea2e78
--- /dev/null
+++ b/src/vue-poc/static/resources/ark/ark.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ark xmlns="http://www.schematron.info/ark" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.schematron.info/ark ark.xsd">
+  <load>
+    <room>
+      <animal sex="female" carnivore="no">
+        <species>zebra</species>
+        <weight>200</weight>
+        <age>12</age>
+      </animal>
+      <animal sex="male" carnivore="no">
+        <species>zebra</species>
+        <weight>250</weight>
+        <age>13</age>
+      </animal>
+    </room>
+    <room>
+      <animal sex="female" carnivore="yes">
+        <species>lion</species>
+        <weight>200</weight>
+        <age>23</age>
+      </animal>
+      <animal sex="male" carnivore="yes">
+        <species>lion</species>
+        <weight>180</weight>
+        <age>30</age>
+      </animal>
+    </room>
+    <room>
+      <animal sex="female" carnivore="no">
+        <species>elephant</species>
+        <weight>10000</weight>
+        <age>20</age>
+      </animal>
+      <animal sex="male" carnivore="no">
+        <species>elephant</species>
+        <weight>15000</weight>
+        <age>40</age>
+      </animal>
+    </room>
+  </load>
+  <maxReproductionAge>
+    <animal_species>
+      <name>elephant</name>
+      <male>80</male>
+      <female>30</female>
+    </animal_species>
+    <animal_species>
+      <name>lion</name>
+      <male>30</male>
+      <female>15</female>
+    </animal_species>
+    <animal_species>
+      <name>zebra</name>
+      <male>30</male>
+      <female>20</female>
+    </animal_species>
+  </maxReproductionAge>
+  <loadingCapacity>44000</loadingCapacity>
+</ark>
diff --git a/src/vue-poc/static/resources/ark/ark.xsd b/src/vue-poc/static/resources/ark/ark.xsd
new file mode 100644
index 0000000..581c94a
--- /dev/null
+++ b/src/vue-poc/static/resources/ark/ark.xsd
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.schematron.info/ark" xmlns="http://www.schematron.info/ark" elementFormDefault="qualified">
+  <xs:element name="age" type="xs:positiveInteger"/>
+  <xs:element name="ark">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="load"/>
+        <xs:element ref="maxReproductionAge"/>
+        <xs:element ref="loadingCapacity"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="species" type="xs:string"/>
+  <xs:element name="weight" type="xs:positiveInteger"/>
+  <xs:element name="load">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="room" maxOccurs="unbounded"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="maxReproductionAge">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="animal_species" maxOccurs="unbounded"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="male" type="xs:positiveInteger"/>
+  <xs:element name="name" type="xs:string"/>
+  <xs:element name="loadingCapacity" type="xs:positiveInteger"/>
+  <xs:element name="animal">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="species"/>
+        <xs:element ref="weight"/>
+        <xs:element ref="age"/>
+      </xs:sequence>
+      <xs:attribute name="sex" use="required">
+        <xs:simpleType>
+          <xs:restriction base="xs:string">
+            <xs:enumeration value="male"/>
+            <xs:enumeration value="female"/>
+          </xs:restriction>
+        </xs:simpleType>
+      </xs:attribute>
+      <xs:attribute name="carnivore" use="required">
+        <xs:simpleType>
+          <xs:restriction base="xs:string">
+            <xs:enumeration value="yes"/>
+            <xs:enumeration value="no"/>
+          </xs:restriction>
+        </xs:simpleType>
+      </xs:attribute>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="animal_species">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="name"/>
+        <xs:element ref="male"/>
+        <xs:element ref="female"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="room">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element ref="animal" maxOccurs="unbounded"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="female" type="xs:positiveInteger"/>
+</xs:schema>
diff --git a/src/vue-poc/tasks/createimage.xq b/src/vue-poc/tasks/createimage.xq
index bdafb9a..9a9ecef 100644
--- a/src/vue-poc/tasks/createimage.xq
+++ b/src/vue-poc/tasks/createimage.xq
@@ -1,4 +1,7 @@
-(:~ generate image docs from meta docs 52 sec  :)
+(:~ 
+ : generate image docs from meta docs 52 sec 
+ : <metadata/> -> <image/> 
+ :)
 import module namespace metadata = 'expkg-zone58:image.metadata';
 
 for $meta in collection("/vue-poc/Pictures")/metadata
diff --git a/src/vue-poc/tasks/createwadl.xq b/src/vue-poc/tasks/createwadl.xq
new file mode 100644
index 0000000..c4b30c6
--- /dev/null
+++ b/src/vue-poc/tasks/createwadl.xq
@@ -0,0 +1,29 @@
+(:~ wadl:)
+declare namespace xqdoc="http://www.xqdoc.org/1.0";
+declare namespace wadl="http://wadl.dev.java.net/2009/02";
+declare variable $src:="C:\tmp\xqdoc\src\graphxq\graphxq.xqm";
+
+declare function local:get($fun as element(xqdoc:function)*,$path as xs:string)
+as element(wadl:resource)
+{
+ <wadl:resource path="{$path}">
+<wadl:method name="GET">
+        <wadl:doc xmlns="http://www.w3.org/1999/xhtml">about page for app</wadl:doc>
+        <wadl:request/>
+        <wadl:response>
+          <wadl:representation mediaType="image/svg+xml"/>
+        </wadl:response>
+
+      </wadl:method>
+</wadl:resource> 
+};
+let $xq:=doc($src)
+let $prefix:=$xq//xqdoc:namespace[@uri="http://exquery.org/ns/restxq"]/@prefix/string()
+let $paths:=$xq//xqdoc:functions/xqdoc:function/xqdoc:annotations/xqdoc:annotation[@name=$prefix || ":path"]
+let $funs:=$xq//xqdoc:functions/xqdoc:function[xqdoc:annotations/xqdoc:annotation/@name=$prefix || ":path"]
+let $p2:=$paths=>distinct-values()=>sort()
+return <wadl:application>
+<wadl:resources base="http://localhost:8984/doc/app//graphxq/view/wadl">
+{for  $p in  $p2 return  local:get((),$p)}
+</wadl:resources>
+</wadl:application>
\ No newline at end of file