From 8d841ad7cba075c21f9fca273193e38c1bd6ab1f Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Wed, 5 Jul 2017 23:05:34 +0100
Subject: [PATCH] vuetify 0.13.0

---
 .settings/de.loskutov.FileSync.prefs          |    2 +-
 src/vue-poc/{static => components}/core.js    |   28 +-
 src/vue-poc/{static => components}/filters.js |    0
 src/vue-poc/components/my-component.vue       |   12 +
 src/vue-poc/components/nav-list.vue           |   76 ++
 src/vue-poc/expath-pkg.xml                    |    2 +-
 src/vue-poc/{templates => features}/404.vue   |    0
 .../features/collection/collections.xqm       |   85 ++
 .../collection}/files.vue                     |   34 +-
 .../collection}/history.vue                   |   11 +-
 .../{templates => features/edit}/edit.vue     |   46 +-
 src/vue-poc/features/edit/edit.xqm            |   62 +
 src/vue-poc/features/eval/eval.vue            |  139 +++
 .../{templates => features}/eval/eval.xqm     |   25 +
 src/vue-poc/features/home.vue                 |   28 +
 src/vue-poc/features/job/jobs.vue             |  107 ++
 src/vue-poc/features/job/jobs.xqm             |   46 +
 .../{templates => features/login}/login.vue   |   16 +-
 src/vue-poc/{ => features/login}/login.xqm    |    0
 src/vue-poc/{templates => features}/logs.vue  |    0
 .../{templates => features}/options.vue       |   10 +-
 .../{templates => features}/people.vue        |    4 +-
 .../{templates => features}/ping/ping.vue     |    0
 .../{templates => features}/ping/ping.xqm     |    0
 .../{templates => features}/puzzle.vue        |    0
 .../{templates => features}/search.vue        |    0
 .../{templates => features}/select.vue        |    5 +-
 .../{templates => features}/settings.vue      |    9 +-
 src/vue-poc/{templates => features}/tabs.vue  |    6 +-
 src/vue-poc/{templates => features}/tasks.vue |    0
 .../thumbnail/thumbnail.vue                   |    0
 .../thumbnail/thumbnail.xqm                   |    0
 src/vue-poc/lib/file.xqm                      |   23 +
 src/vue-poc/lib/util.xqm                      |   15 +-
 src/vue-poc/static/app-gen.js                 | 1097 +++++++++--------
 src/vue-poc/static/app.html                   |   13 +-
 src/vue-poc/tasks/createthumbs.xq             |    1 +
 src/vue-poc/tasks/primes.xq                   |    2 +
 src/vue-poc/tasks/scanpics.xq                 |    8 +
 src/vue-poc/templates/eval/eval.vue           |  109 --
 src/vue-poc/templates/home.vue                |   31 -
 src/vue-poc/templates/job/jobs.vue            |   26 -
 src/vue-poc/templates/job/jobs.xqm            |   25 -
 src/vue-poc/vue-api2.xqm                      |  136 +-
 tools/compile.xq                              |   55 +-
 45 files changed, 1317 insertions(+), 977 deletions(-)
 rename src/vue-poc/{static => components}/core.js (92%)
 rename src/vue-poc/{static => components}/filters.js (100%)
 create mode 100644 src/vue-poc/components/my-component.vue
 create mode 100644 src/vue-poc/components/nav-list.vue
 rename src/vue-poc/{templates => features}/404.vue (100%)
 create mode 100644 src/vue-poc/features/collection/collections.xqm
 rename src/vue-poc/{templates => features/collection}/files.vue (86%)
 rename src/vue-poc/{templates => features/collection}/history.vue (77%)
 rename src/vue-poc/{templates => features/edit}/edit.vue (90%)
 create mode 100644 src/vue-poc/features/edit/edit.xqm
 create mode 100644 src/vue-poc/features/eval/eval.vue
 rename src/vue-poc/{templates => features}/eval/eval.xqm (64%)
 create mode 100644 src/vue-poc/features/home.vue
 create mode 100644 src/vue-poc/features/job/jobs.vue
 create mode 100644 src/vue-poc/features/job/jobs.xqm
 rename src/vue-poc/{templates => features/login}/login.vue (89%)
 rename src/vue-poc/{ => features/login}/login.xqm (100%)
 rename src/vue-poc/{templates => features}/logs.vue (100%)
 rename src/vue-poc/{templates => features}/options.vue (87%)
 rename src/vue-poc/{templates => features}/people.vue (88%)
 rename src/vue-poc/{templates => features}/ping/ping.vue (100%)
 rename src/vue-poc/{templates => features}/ping/ping.xqm (100%)
 rename src/vue-poc/{templates => features}/puzzle.vue (100%)
 rename src/vue-poc/{templates => features}/search.vue (100%)
 rename src/vue-poc/{templates => features}/select.vue (95%)
 rename src/vue-poc/{templates => features}/settings.vue (94%)
 rename src/vue-poc/{templates => features}/tabs.vue (94%)
 rename src/vue-poc/{templates => features}/tasks.vue (100%)
 rename src/vue-poc/{templates => features}/thumbnail/thumbnail.vue (100%)
 rename src/vue-poc/{templates => features}/thumbnail/thumbnail.xqm (100%)
 create mode 100644 src/vue-poc/lib/file.xqm
 create mode 100644 src/vue-poc/tasks/createthumbs.xq
 create mode 100644 src/vue-poc/tasks/primes.xq
 create mode 100644 src/vue-poc/tasks/scanpics.xq
 delete mode 100644 src/vue-poc/templates/eval/eval.vue
 delete mode 100644 src/vue-poc/templates/home.vue
 delete mode 100644 src/vue-poc/templates/job/jobs.vue
 delete mode 100644 src/vue-poc/templates/job/jobs.xqm

diff --git a/.settings/de.loskutov.FileSync.prefs b/.settings/de.loskutov.FileSync.prefs
index 14dc75c..6500af3 100644
--- a/.settings/de.loskutov.FileSync.prefs
+++ b/.settings/de.loskutov.FileSync.prefs
@@ -1,5 +1,5 @@
 WARNING=DO NOT MODIFY THIS FILE IF YOU DON'T UNDERSTAND
-defaultDestination=C\:/Program Files (x86)/basex/webapp
+defaultDestination=C\:/Users/andy/Desktop/basex.865b/webapp
 defaultVariables=
 eclipse.preferences.version=1
 includeTeamPrivateFiles=false
diff --git a/src/vue-poc/static/core.js b/src/vue-poc/components/core.js
similarity index 92%
rename from src/vue-poc/static/core.js
rename to src/vue-poc/components/core.js
index 4e299e3..b07943d 100644
--- a/src/vue-poc/static/core.js
+++ b/src/vue-poc/components/core.js
@@ -58,8 +58,8 @@ Vue.component('nav-list', {
     </v-flex>
   </v-layout>
   <v-list-group v-else-if="item.children" v-model="item.model" no-action>
-    <v-list-item slot="item">
-      <v-list-tile :href="item.href" router ripple>
+
+      <v-list-tile slot="item" :href="item.href" router ripple>
        <v-list-tile-action>
           <v-icon>{{ item.icon }}</v-icon>
         </v-list-tile-action>
@@ -74,12 +74,9 @@ Vue.component('nav-list', {
         
         </v-list-tile-content>
       </v-list-tile>
-    </v-list-item>
-    <v-list-item
-      v-for="(child, i) in item.children"
-      :key="i"
-    >
-      <v-list-tile :href="child.href" router ripple>
+      
+    <template  v-for="(child, i) in item.children">
+      <v-list-tile  :key="i" :href="child.href" router ripple>
         <v-list-tile-action v-if="child.icon">
           <v-icon>{{ child.icon }}</v-icon>
         </v-list-tile-action>
@@ -89,10 +86,10 @@ Vue.component('nav-list', {
           </v-list-tile-title>
         </v-list-tile-content>
       </v-list-tile>
-    </v-list-item>
+    </template>
   </v-list-group>
-  <v-list-item v-else>
-    <v-list-tile :href="item.href" router ripple>
+
+    <v-list-tile v-else :href="item.href" router ripple>
       <v-list-tile-action>
         <v-icon>{{ item.icon }}</v-icon>
       </v-list-tile-action>
@@ -102,7 +99,6 @@ Vue.component('nav-list', {
         </v-list-tile-title>
       </v-list-tile-content>
     </v-list-tile>
-  </v-list-item>
 </template>
 </v-list>`,
    created:function(){
@@ -178,16 +174,16 @@ const app = new Vue({
       {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'}
       ]},
       {
         icon: 'directions_run',
         text: 'Actions' ,
         model: false,
         children: [
-      {href: 'eval',text: 'Evaluate',icon: 'cake'},      
-      {href: 'tasks',text: 'Tasks',icon: 'build'}, 
-      {href: 'jobs',text: 'Jobs',icon: 'print'},
-      {href: 'logs',text: 'Server logs',icon: 'dns'}
+      {href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'},      
+      {href: 'jobs',text: 'Jobs',icon: 'dashboard'},
+      {href: 'tasks',text: 'Tasks',icon: 'history'}, 
       ]},
       {
         icon: 'more_horiz',
diff --git a/src/vue-poc/static/filters.js b/src/vue-poc/components/filters.js
similarity index 100%
rename from src/vue-poc/static/filters.js
rename to src/vue-poc/components/filters.js
diff --git a/src/vue-poc/components/my-component.vue b/src/vue-poc/components/my-component.vue
new file mode 100644
index 0000000..60dd53f
--- /dev/null
+++ b/src/vue-poc/components/my-component.vue
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<template id="my-component">
+ <a :href="href" :target="href" > {{href}}<v-icon>link</v-icon></a>
+</template>
+
+<script>{
+  props: ['href'],
+  created:function(){
+      console.log("my-component");
+    }
+}
+</script>
diff --git a/src/vue-poc/components/nav-list.vue b/src/vue-poc/components/nav-list.vue
new file mode 100644
index 0000000..5361d1a
--- /dev/null
+++ b/src/vue-poc/components/nav-list.vue
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<template id="nav-list">
+ <v-list dense>
+<template v-for="(item, i) in items">
+  <v-layout
+    row
+    v-if="item.heading"
+    align-center
+    :key="i"
+  > 
+    <v-flex xs6>
+      <v-subheader v-if="item.heading">
+        {{ item.heading }}
+      </v-subheader>
+    </v-flex>
+    <v-flex xs6 class="text-xs-center">
+      <a href="#!" class="body-2 black--text">EDIT</a>
+    </v-flex>
+  </v-layout>
+  <v-list-group v-else-if="item.children" v-model="item.model" no-action>
+
+      <v-list-tile :href="item.href" router ripple slot="item">
+       <v-list-tile-action>
+          <v-icon>{{ item.icon }}</v-icon>
+        </v-list-tile-action>
+          <v-list-tile-title>
+            {{ item.text }}
+          </v-list-tile-title>
+          <v-spacer></v-spacer>
+        <v-list-tile-action>
+          <v-icon>{{ item.model ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+        
+        </v-list-tile-content>
+      </v-list-tile>
+    <template
+      v-for="(child, i) in item.children"
+      :key="i"
+    >
+      <v-list-tile :href="child.href" router ripple>
+        <v-list-tile-action v-if="child.icon">
+          <v-icon>{{ child.icon }}</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>
+            {{ child.text }}
+          </v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </template>
+  </v-list-group>
+ 
+    <v-list-tile v-else :href="item.href" router ripple>
+      <v-list-tile-action>
+        <v-icon>{{ item.icon }}</v-icon>
+      </v-list-tile-action>
+      <v-list-tile-content>
+        <v-list-tile-title>
+          {{ item.text }}
+        </v-list-tile-title>
+      </v-list-tile-content>
+    </v-list-tile>
+
+</template>
+</v-list>
+</template>
+
+<script>{
+  props: ['items'],
+ 
+   created:function(){
+      console.log("nav-lst");
+    }
+}
+</script>
diff --git a/src/vue-poc/expath-pkg.xml b/src/vue-poc/expath-pkg.xml
index c6c567d..78e4fde 100644
--- a/src/vue-poc/expath-pkg.xml
+++ b/src/vue-poc/expath-pkg.xml
@@ -2,7 +2,7 @@
 	abbrev="vue-poc" version="0.0.3" spec="1.0">
 	<title>vue-poc test of vue.js.</title>
 	<dependency name="ace" version="1.2.7" />
-	<dependency name="vuetify" version="0.12.5" />
+	<dependency name="vuetify" version="0.13.0" />
 	<dependency name="vue" version="2.3.4" />
 	<dependency name="vue-router" version="2.5.3" />
 	<dependency name="google-material" version="0.0.0" />
diff --git a/src/vue-poc/templates/404.vue b/src/vue-poc/features/404.vue
similarity index 100%
rename from src/vue-poc/templates/404.vue
rename to src/vue-poc/features/404.vue
diff --git a/src/vue-poc/features/collection/collections.xqm b/src/vue-poc/features/collection/collections.xqm
new file mode 100644
index 0000000..f61e534
--- /dev/null
+++ b/src/vue-poc/features/collection/collections.xqm
@@ -0,0 +1,85 @@
+(:~
+ : vue-poc collection api.
+ :
+ : @author Andy Bunce july-2017
+ :)
+module namespace vue-api = 'quodatum:vue.api.collection';
+import module namespace rest = "http://exquery.org/ns/restxq";
+import module namespace fw="quodatum:file.walker";
+import module namespace ufile = 'vue-poc/file' at "../../lib/file.xqm";
+declare namespace c="http://www.w3.org/ns/xproc-step";
+
+
+(:~
+ : history list 
+ :)
+declare
+%rest:GET %rest:path("/vue-poc/api/history")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:history( )   
+{
+ let $h:=(
+ '/vue-poc/vue-poc.xqm',
+ '/vue-poc/data/vue-poc/ch4d1.xml',
+ '/vue-poc/static/app-gen.js',
+ '/vue-poc/static/app.html',
+ '/vue-poc/static/app.css',
+ '/vue-poc/logo.svg',
+ '/vue-poc/static/resources/sparql.rq',
+  '/vue-poc/static/resources/turtle.ttl'
+ )
+
+ return <json   type="object" >
+            <items type="array">
+            {$h!(<_ type="object"><url>{.}</url></_>)}              
+            </items>
+  </json>
+};
+
+
+(:~
+ : Returns folder info.
+ :)
+declare
+%rest:path("/vue-poc/api/file")
+%rest:query-param("url", "{$url}")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:file($url as xs:string)   
+{
+   let $path := ufile:web( $url)=>trace("vue-api:web ")
+   return if( file:exists($path))then 
+             let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()})
+
+             return <json type="object" >
+                        <folders type="array">
+                        {for $f in $items/c:directory
+                        order by $f/@name/lower-case(.)
+                        return <_ type="object">
+                         {vue-api:details($f,"folder")}
+                        </_>
+                        }
+                        </folders>
+                         <files type="array">
+                        {for $f in $items/c:file
+                        order by $f/@name/lower-case(.)
+                        return <_ type="object">
+                        {vue-api:details($f,"insert_drive_file")}
+                        </_>
+                        }
+                        </files>
+                     </json>
+          else 
+            error(xs:QName('vue-api:raw'),$path)
+};
+
+declare function vue-api:details($f as element(*),$icon as xs:string)
+as element(*)*
+{
+ <name>{$f/@name/string()}</name>
+ ,<icon>{$icon}</icon>
+ ,<modified>{$f/@last-modified/string()}</modified>
+ ,<size type="number">{$f/@size/string()}</size>
+ ,<mime>unknown</mime>
+};
diff --git a/src/vue-poc/templates/files.vue b/src/vue-poc/features/collection/files.vue
similarity index 86%
rename from src/vue-poc/templates/files.vue
rename to src/vue-poc/features/collection/files.vue
index a084cc9..f711ac2 100644
--- a/src/vue-poc/templates/files.vue
+++ b/src/vue-poc/features/collection/files.vue
@@ -1,34 +1,33 @@
 <!DOCTYPE html>
 <template id="files">
  <v-container fluid>
-
+ 
 <v-card>
-<v-card-row class="green white--text">
-          <v-menu bottom right>
+<v-toolbar>
+      <v-menu bottom right>
            <v-btn  icon dark slot="activator"><v-icon >folder</v-icon></v-btn>
       <v-list>
-        <v-list-item v-for="item in crumbs" :key="item">
-          <v-list-tile>
+        <template v-for="item in crumbs">
+          <v-list-tile  :key="item">
             <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
           </v-list-tile>
-        </v-list-item>
+        </template>
       </v-list>
     </v-menu>
-  
-	
     <v-toolbar-title>{{ url }}</v-toolbar-title>
    
     <v-spacer></v-spacer>
       <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
    hide-details single-line dark @keyup.native.enter="filter"></v-text-field>
     <v-icon>view_module</v-icon>
-  </v-card-row>
+ </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-item v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)">
-      <v-list-tile avatar >
+    <template v-for="item in folders">  
+      <v-list-tile 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>
@@ -42,11 +41,12 @@
           </v-btn>
         </v-list-tile-action>
       </v-list-tile>
-    </v-list-item>
+    </template>
+    
     <v-divider inset></v-divider>
     <v-subheader inset>Files</v-subheader>
-    <v-list-item v-for="item in files" v-bind:key="item.name" @click="file(item.name)">
-      <v-list-tile>
+     <template v-for="item in folders">  
+      <v-list-tile v-bind:key="item.name" @click="file(item.name)">
         <v-list-tile-avatar>
           <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
         </v-list-tile-avatar>
@@ -60,10 +60,12 @@
           </v-btn>
         </v-list-tile-action>
       </v-list-tile>
-    </v-list-item>
+    </template>
   </v-list>
     <v-navigation-drawer right light temporary v-model="infodraw"
-      >Some info here {{selected}}</v-navigation-drawer>
+      > <v-card> <v-card-title class="green white--text">
+Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card>
+      </v-navigation-drawer>
 </v-card>
  </v-container>
 </template>
diff --git a/src/vue-poc/templates/history.vue b/src/vue-poc/features/collection/history.vue
similarity index 77%
rename from src/vue-poc/templates/history.vue
rename to src/vue-poc/features/collection/history.vue
index 76bc513..64fd4d1 100644
--- a/src/vue-poc/templates/history.vue
+++ b/src/vue-poc/features/collection/history.vue
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <template id="history">
  <v-container fluid>
- <v-list>
-          <v-list-item v-for="item in items" v-bind:key="item.title"
-          @click="doEdit(item.url)">
-            <v-list-tile avatar>
+    <v-list>
+            <v-list-tile  v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)" avatar>
               <v-list-tile-action>
                 <v-icon v-if="item.icon" class="pink--text">star</v-icon>
               </v-list-tile-action>
               <v-list-tile-content>
-                <v-list-tile-title v-text="item.url"></v-list-tile-title>
+                <v-list-tile-title @click="doEdit(item.url)" v-text="item.url"></v-list-tile-title>
               </v-list-tile-content>
               <v-list-tile-avatar>
                 <img v-bind:src="item.avatar"/>
               </v-list-tile-avatar>
             </v-list-tile>
-          </v-list-item>
-        </v-list>
+   </v-list>
  </v-container>
 </template>
 
diff --git a/src/vue-poc/templates/edit.vue b/src/vue-poc/features/edit/edit.vue
similarity index 90%
rename from src/vue-poc/templates/edit.vue
rename to src/vue-poc/features/edit/edit.vue
index 5667cdd..51eac84 100644
--- a/src/vue-poc/templates/edit.vue
+++ b/src/vue-poc/features/edit/edit.vue
@@ -7,15 +7,13 @@
     </v-snackbar>
 <v-card>
 
- <v-app-bar>
-<v-menu offset-y>
+<v-toolbar class="grey lighten-2 black--text">
+<v-menu >
   <v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >folder</v-icon></v-btn>
   <v-list>
-    <v-list-item v-for="item in path" :key="item">
-      <v-list-tile>
-        <v-list-tile-title @click="showfiles()">{{ item }}</v-list-tile-title>
+      <v-list-tile  v-for="item in path" :key="item" @click="showfiles()">
+        <v-list-tile-title >{{ item }}</v-list-tile-title>
       </v-list-tile>
-    </v-list-item>
   </v-list>
 </v-menu>
 
@@ -66,23 +64,19 @@
           <v-icon>help</v-icon>
         </v-btn>     
         <v-list>
-          <v-list-item @click="acecmd('showSettingsMenu')">
-            <v-list-tile avatar >
+            <v-list-tile @click="acecmd('showSettingsMenu')" avatar >
                <v-list-tile-avatar>
               <v-icon >settings</v-icon>
             </v-list-tile-avatar>
               <v-list-tile-title >Show settings</v-list-tile-title>
             </v-list-tile>
-          </v-list-item>
-          
-          <v-list-item  @click="acecmd('showKeyboardShortcuts')">            
-            <v-list-tile avatar>
+                      
+            <v-list-tile @click="acecmd('showKeyboardShortcuts')" avatar>
               <v-list-tile-avatar>
               <v-icon >keyboard</v-icon>
             </v-list-tile-avatar>
               <v-list-tile-title  >Show keyboard commands</v-list-tile-title>
             </v-list-tile>
-          </v-list-item>
           </v-list>
        </v-menu>
     <v-menu left  transition="v-fade-transition">
@@ -91,40 +85,34 @@
       </v-btn>
      
           <v-list>
-            <v-list-item >
               <v-list-tile>
                 <v-list-tile-title >unused</v-list-tile-title>
-              </v-list-tile>
-            </v-list-item>
-            
+              </v-list-tile>           
           </v-list>
+          
       </v-menu>
     </v-toolbar-items>
      <v-dialog v-model="clearDialog" >
        <v-card>
-		    <v-card-row>
 		      <v-card-title>Clear?</v-card-title>
-		    </v-card-row>
-		    <v-card-row>
 		      <v-card-text>clear text.</v-card-text>
-		    </v-card-row>
-		    <v-card-row actions>
+		    <v-card-actions>
 		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
 		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
-		    </v-card-row>
+		    </v-card-actions>
 		    </v-card>
 		</v-dialog>
- </v-app-bar>
+ </v-toolbar>
    <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
 
-
-<v-flex xs12 style="height:70vh" v-if="!busy" fill-height>
+<v-card-text v-if="!busy">
+<v-flex xs12 style="height:70vh"  fill-height>
   
     <vue-ace  :content="contentA" :mode="mode" :wrap="wrap"
 v-on:change-content="changeContentA" 
 v-on:annotation="annotation"></vue-ace>
  </v-flex> 
-
+</v-card-text>
 </v-card>
   
  </v-container>
@@ -156,7 +144,8 @@ v-on:annotation="annotation"></vue-ace>
           "application/sparql-query":"sparql",
           "text/html":"html",
           "text/turtle":"turtle",
-          "text/css":"css"
+          "text/css":"css",
+          "image/svg+xml":"svg"
       }
     }
   },
@@ -225,6 +214,7 @@ v-on:annotation="annotation"></vue-ace>
       var a=this.contentA
       switch(this.mode) {
       case "html":
+      case "svg":  
       case "xml":  
           a=html_beautify(a, { indent_size: 3 ,indent_inner_html:true})
           break;
diff --git a/src/vue-poc/features/edit/edit.xqm b/src/vue-poc/features/edit/edit.xqm
new file mode 100644
index 0000000..afebec6
--- /dev/null
+++ b/src/vue-poc/features/edit/edit.xqm
@@ -0,0 +1,62 @@
+(:~
+ : vue-poc api.
+ :
+ : @author Andy Bunce may-2017
+ :)
+module namespace vue-api = 'quodatum:vue.api';
+import module namespace rest = "http://exquery.org/ns/restxq";
+import module namespace session = "http://basex.org/modules/session";
+import module namespace ufile = 'vue-poc/file' at "../../lib/file.xqm";
+
+import module namespace mt = 'quodatum.data.mimetype' at "../../lib/mimetype.xqm";
+declare namespace c="http://www.w3.org/ns/xproc-step";
+
+
+(:~
+ : Returns a file content.
+ :)
+declare
+%rest:GET %rest:path("/vue-poc/api/edit")
+%rest:query-param("url", "{$url}")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:edit-get($url as xs:string)   
+{
+  let $path := ufile:web( $url)=>trace("path ")
+   return if( file:exists($path))then 
+             let $type:=mt:type($path)
+             let $fetch:=mt:fetch-fn($type("treat-as"))
+             return <json type="object" >
+                        <url>{$url}</url>
+                        <mimetype>{$type?type}</mimetype>
+                        <data>{$fetch($path)}</data> 
+                     </json>
+          else 
+            error(xs:QName('vue-api:raw'),$path)
+};
+
+(:~
+ : Update a file content. @TODO
+ :)
+declare
+%rest:POST %rest:path("/vue-poc/api/edit")
+%rest:form-param("url", "{$url}")
+%rest:form-param("data", "{$data}")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:edit-post($url as xs:string,$data)   
+{
+  let $path := ufile:web( $url)=>trace("path ")
+  let $data:=trace($data)
+   return if( file:exists($path))then 
+             let $type:=mt:type($path)
+             let $fetch:=mt:fetch-fn($type("treat-as"))
+             return <json type="object" >
+                        <url>{$url}</url>
+                        <mimetype>{$type?type}</mimetype>
+                        <data>{$fetch($path)}</data> 
+                     </json>
+          else 
+            error(xs:QName('vue-api:raw'),$path)
+};
+
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
new file mode 100644
index 0000000..9446ea5
--- /dev/null
+++ b/src/vue-poc/features/eval/eval.vue
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<template id="eval">
+ <v-container fluid>
+  <v-card class="grey lighten-1 z-depth-1 mb-5">
+  
+
+ 
+     <v-app-bar>
+      <v-btn @click.native="run()">Run</v-btn>
+    <v-btn @click.native="submit()">
+    <v-icon>play_circle_outline</v-icon>
+    Submit</v-btn>
+    <v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow></v-btn-dropdown>
+   </v-app-bar>
+
+  
+  <v-card-text   >
+  <v-flex xs12 style="height:200px"  fill-height>
+  <vue-ace  :content="xq" mode="xquery" wrap="true"
+    v-on:change-content="onChange" 
+    ></vue-ace>
+    </v-flex>
+   </v-card-text>
+    <v-alert error v-bind:value="showError">
+      {{result}}
+    </v-alert>
+     <v-card-actions v-if="show" >
+       
+        JobId:
+      <v-chip class="green white--text">{{jobId}}</v-chip>
+       <v-progress-circular v-if="waiting" indeterminate class="primary--text"></v-progress-circular>
+         Elapsed:
+         <v-chip class="green white--text">{{elapsed}}</v-chip>
+        <v-spacer></v-spacer>
+      <v-btn flat class="green--text darken-1">@TODO</v-btn>
+    </v-card-actions>
+     <v-card-text v-if="show">
+     <v-flex xs12 style="height:200px"  fill-height>
+        <vue-ace  :content="result" mode="text" wrap="true" read-only="true"
+        ></vue-ace>
+        </v-flex> 
+       </v-card-text>
+    </v-card>
+
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      xq: '(: type your XQuery :)\n',
+      result:'',
+      elapsed:null,
+      show:false,
+      showError:false,
+      jobId:null,
+      waiting:false,
+      start:null,
+      dropdown_font: [
+        { text: 'Arial' },
+        { text: 'Calibri' },
+        { text: 'Courier' },
+        { text: 'Verdana' }
+      ]
+      }
+  },
+  methods:{
+    onChange(val){
+      if (this.xq !== val) {
+        this.xq = val
+      }
+    },
+    
+    run(){
+      var data={xq:this.xq}
+      this.showError=this.show=false
+      this.start = performance.now();
+      HTTP.post("eval/execute",Qs.stringify(data))
+      .then(r=>{
+        this.elapsed=Math.floor(performance.now() - this.start);
+        this.result=r.data.result
+        this.jobId=null
+        this.show=true
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.result=r.response.data
+        this.showError=true;
+
+      });
+      localforage.setItem('eval/xq', this.xq)
+    },
+    submit(){
+      var data={xq:this.xq}
+      this.showError=this.show=false
+      this.start = performance.now();
+      HTTP.post("eval/submit",Qs.stringify(data))
+      .then(r=>{
+        this.elapsed=Math.floor(performance.now() - this.start);
+        this.result=this.jobId=r.data.job
+        this.show=true
+        this.pollState()
+        
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.jobId=r.response.job
+        this.showError=true;
+
+      });
+    },
+    pollState(){
+      this.waiting=true;
+      HTTP.get("job/"+this.jobId)
+      .then(r=>{
+        this.waiting=r.data.state!="cached";
+        this.elapsed=Math.floor(performance.now() - this.start);
+         if(this.waiting) {
+           setTimeout(()=>{ this.pollState() }, 5000);
+         }else{
+           this.getResult()
+         }
+      })
+    },
+    getResult(){
+       HTTP.post("eval/result/"+this.jobId)
+       .then(r=>{
+         this.result=r.data.result
+         this.jobId=null
+         this.show=true
+       })
+    }
+  },
+  
+  created:function(){
+      localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq});
+  }
+}
+</script>
diff --git a/src/vue-poc/templates/eval/eval.xqm b/src/vue-poc/features/eval/eval.xqm
similarity index 64%
rename from src/vue-poc/templates/eval/eval.xqm
rename to src/vue-poc/features/eval/eval.xqm
index eada6e3..423643a 100644
--- a/src/vue-poc/templates/eval/eval.xqm
+++ b/src/vue-poc/features/eval/eval.xqm
@@ -41,3 +41,28 @@ function vue-api:submit($xq )
             <job>{$r}</job>
   </json>
 };
+
+(:~
+ : imports
+ :)
+declare
+%rest:GET %rest:path("/vue-poc/api/eval/imports")
+%output:method("json")   
+function vue-api:imports( )   
+{
+let $n:='import module namespace fw="quodatum:file.walker";'
+ return <json   type="array" >
+            <_>{$n}</_>
+  </json>
+};
+
+declare 
+%rest:POST %rest:path('/vue-poc/api/eval/result/{$id}') 
+%output:method("json") 
+function vue-api:result($id) 
+{
+  let $r:=jobs:result($id)
+   return <json   type="object" >
+            <result>{util:display($r)}</result>
+  </json>
+};
\ No newline at end of file
diff --git a/src/vue-poc/features/home.vue b/src/vue-poc/features/home.vue
new file mode 100644
index 0000000..31ef99f
--- /dev/null
+++ b/src/vue-poc/features/home.vue
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<template id="home"> <v-layout class="ma-5"> <v-flex
+	xs4> <v-card hover raised> <v-card-title
+	height="200px" class="pa-5 green lighten-1">
+<div class="display-1 white--text text-xs-center">VUE-POC</div>
+v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
+<p>
+	This is a experiment in using
+	<code>vue.js</code>
+	.
+</p>
+<ul>
+	<li><a href="https://vuetifyjs.com/vuetify/quick-start"
+		target="new">vuetifyjs</a></li>
+	<li><a href="https://github.com/monterail/vue-multiselect"
+		target="new">vue-multiselect</a></li>
+	<li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
+	<li><a href="https://github.com/beautify-web/js-beautify"
+		target="new">js-beautify</a></li>
+	<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>
+<script>
+  {
+  }
+</script>
diff --git a/src/vue-poc/features/job/jobs.vue b/src/vue-poc/features/job/jobs.vue
new file mode 100644
index 0000000..6ffd002
--- /dev/null
+++ b/src/vue-poc/features/job/jobs.vue
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<template id="job">
+  <v-card >
+   <v-toolbar class="green white--text">
+       <v-btn
+      light icon
+      :loading="loading"
+      @click.native="getJobs()"
+      :disabled="loading"
+    >
+    <v-icon>refresh</v-icon>
+    </v-btn>
+    
+     <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-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"
+    >
+    <template slot="items" scope="props">
+    <td>
+        <v-checkbox
+          primary
+          hide-details
+          v-model="props.selected"
+        ></v-checkbox>
+      </td>
+      <td>{{ props.item.id }}</td>
+      <td class="text-xs-right">{{ props.item.state }}</td>
+      <td class="text-xs-right">{{ props.item.duration }}</td>
+      <td class="text-xs-right">{{ props.item.type }}</td>
+      <td class="text-xs-right">{{ props.item.user }}</td>
+       <td ><code>{{ props.item.text }}</code></td>
+    </template>
+  </v-data-table>
+ </v-card>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      headers: [
+        {
+          text: 'Job id',
+          left: true,
+          value: 'id'
+        },
+        { text: 'State', value: 'state' },
+        { text: 'Duration', value: 'duration' },
+        { text: 'Type', value: 'type' },
+        { text: 'User', value: 'user' },
+        { text: 'Query', value: 'text' }
+      ],
+      items:[        
+      ],
+      selected:[],
+      search:"",
+      loading:false
+      }
+  },
+  methods:{
+    getJobs(){
+      this.loading=true;
+	    HTTP.get("job")
+	    .then(r=>{
+	       this.loading=false
+	       this.items=r.data
+	       setTimeout(()=>{ this.getJobs() }, 10000);
+	    })
+	   
+    },
+    stop(){
+      var s=this.selected.map((j)=>{return j.id}).join(",")
+      console.log("AAA",this.selected)
+      alert(s)
+    }
+  },
+  computed: {
+    // a computed getter
+    noSelection: function () {
+      // `this` points to the vm instance
+      return this.selected.length==0
+    }
+  },
+  created(){
+    this.getJobs()
+  }
+}
+</script>
diff --git a/src/vue-poc/features/job/jobs.xqm b/src/vue-poc/features/job/jobs.xqm
new file mode 100644
index 0000000..03bcb73
--- /dev/null
+++ b/src/vue-poc/features/job/jobs.xqm
@@ -0,0 +1,46 @@
+module namespace j = 'quodatum.test.jobs';
+
+
+(:~
+ :  job list
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/job")
+%output:method("json")   
+function j:list()
+as element(json)
+{
+ let $jlist:=jobs:list()[. != jobs:current()] !jobs:list-details(.)
+ return <json type="array">
+ {for $j in reverse($jlist)
+ return <_ type="object">
+   {j:job-json($j)}
+ </_>
+ }</json>
+};
+
+(:~
+ :  job info
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/job/{$job}")
+%output:method("json")   
+function j:job($job)
+as element(json)
+{
+ let $j:=jobs:list-details($job)
+ 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/templates/login.vue b/src/vue-poc/features/login/login.vue
similarity index 89%
rename from src/vue-poc/templates/login.vue
rename to src/vue-poc/features/login/login.vue
index 9f80b9c..dfa85e5 100644
--- a/src/vue-poc/templates/login.vue
+++ b/src/vue-poc/features/login/login.vue
@@ -2,15 +2,13 @@
 <template id="login">
 <v-card class="grey lighten-4 elevation-0">
 
-    <v-card-row class="green darken-1">
-      <v-card-title>
+      <v-card-title class="green darken-1">
         <span class="white--text">Login</span>
       </v-card-title>
-    </v-card-row>
     <v-alert error v-bind:value="showMessage">
       {{message}}
     </v-alert>
-     <v-card-row>
+     <v-card-actions>
       <v-text-field
               name="input-name"
               label="Enter your name"
@@ -18,9 +16,9 @@
               v-model="name"
               required
              ></v-text-field>
-     </v-card-row>
+     </v-card-actions>
   
-    <v-card-row>    
+    <v-card-actions>    
          <v-text-field
               name="input-password"
               label="Enter your password"
@@ -31,13 +29,13 @@
               :type="hidepass ? 'password' : 'text'"
               required
             ></v-text-field>      
-    </v-card-row>
+    </v-card-actions>
         
     <v-divider></v-divider>
-    <v-card-row actions class="blue-grey darken-1 mt-0">
+    <v-card-actions class="blue-grey darken-1 mt-0">
        <v-btn primary @click.native="go()">Continue</v-btn>
        <v-spacer></v-spacer>
-    </v-card-row>
+    </v-card-actions>
 </v-card>
 </template>
 
diff --git a/src/vue-poc/login.xqm b/src/vue-poc/features/login/login.xqm
similarity index 100%
rename from src/vue-poc/login.xqm
rename to src/vue-poc/features/login/login.xqm
diff --git a/src/vue-poc/templates/logs.vue b/src/vue-poc/features/logs.vue
similarity index 100%
rename from src/vue-poc/templates/logs.vue
rename to src/vue-poc/features/logs.vue
diff --git a/src/vue-poc/templates/options.vue b/src/vue-poc/features/options.vue
similarity index 87%
rename from src/vue-poc/templates/options.vue
rename to src/vue-poc/features/options.vue
index a362ff4..20273dd 100644
--- a/src/vue-poc/templates/options.vue
+++ b/src/vue-poc/features/options.vue
@@ -3,20 +3,18 @@
 <v-layout >
 <v-flex xs2>
 <v-card class="blue darken-4 white--text">
-  <v-card-row height="200px">
-    <v-card-title>
+    <v-card-title height="200px">
       Featured Event: <br>
       May 24, 2016 <br>
       7-11pm
     </v-card-title>
-  </v-card-row>
- <v-card-row actions>
+ <v-card-actions>
     <v-btn flat class="white--text" @click.native="snackbar = true" >Add to <br>Calendar</v-btn>
     <v-spacer></v-spacer>
     <v-btn icon dark @click.native="snackbar = true" >
       <v-icon>event</v-icon>
     </v-btn>
-  </v-card-row>
+  </v-card-actions>
 </v-card>
 </v-flex>
 
@@ -28,7 +26,7 @@
 </v-flex>
 
 <v-flex xs4>
-   <v-card-row img="music.jpg" height="300px"></v-card-row>
+   <v-card-media img="music.jpg" height="300px"></v-card-media>
   <v-btn block primary @click.native="snackbar = true" dark>Show Snackbar</v-btn>
  <v-btn class="white--text"  @click.native="snackbar = true">Snackbar?</v-btn>
 </v-flex>
diff --git a/src/vue-poc/templates/people.vue b/src/vue-poc/features/people.vue
similarity index 88%
rename from src/vue-poc/templates/people.vue
rename to src/vue-poc/features/people.vue
index 4a6e284..0eef1cc 100644
--- a/src/vue-poc/templates/people.vue
+++ b/src/vue-poc/features/people.vue
@@ -14,10 +14,10 @@
   </v-card>
   <v-layout>
   <v-flex xs5>
-   <v-card-row img="resources/music.jpg" height="300px"></v-card-row>
+   <v-card-media src="resources/music.jpg" height="300px"></v-card-media>
   </v-flex>
   <v-flex xs1>
-  <v-card-row :img="img" height="60px"></v-card-row>
+  <v-card-media :src="img" height="60px"></v-card-media>
   </v-flex>
   </v-layout>
  </v-container>
diff --git a/src/vue-poc/templates/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
similarity index 100%
rename from src/vue-poc/templates/ping/ping.vue
rename to src/vue-poc/features/ping/ping.vue
diff --git a/src/vue-poc/templates/ping/ping.xqm b/src/vue-poc/features/ping/ping.xqm
similarity index 100%
rename from src/vue-poc/templates/ping/ping.xqm
rename to src/vue-poc/features/ping/ping.xqm
diff --git a/src/vue-poc/templates/puzzle.vue b/src/vue-poc/features/puzzle.vue
similarity index 100%
rename from src/vue-poc/templates/puzzle.vue
rename to src/vue-poc/features/puzzle.vue
diff --git a/src/vue-poc/templates/search.vue b/src/vue-poc/features/search.vue
similarity index 100%
rename from src/vue-poc/templates/search.vue
rename to src/vue-poc/features/search.vue
diff --git a/src/vue-poc/templates/select.vue b/src/vue-poc/features/select.vue
similarity index 95%
rename from src/vue-poc/templates/select.vue
rename to src/vue-poc/features/select.vue
index 6466e8b..34e2528 100644
--- a/src/vue-poc/templates/select.vue
+++ b/src/vue-poc/features/select.vue
@@ -2,12 +2,11 @@
 <template id="select">
  <v-container fluid>
 <v-card>
-  <v-card-row class="green darken-1">
-    <v-card-title>
+
+    <v-card-title class="green darken-1">
       <span class="white--text">Selection</span>
       
     </v-card-title>
-  </v-card-row>
   <v-card-text>
     <v-layout>
      
diff --git a/src/vue-poc/templates/settings.vue b/src/vue-poc/features/settings.vue
similarity index 94%
rename from src/vue-poc/templates/settings.vue
rename to src/vue-poc/features/settings.vue
index ef8a989..b99d3b8 100644
--- a/src/vue-poc/templates/settings.vue
+++ b/src/vue-poc/features/settings.vue
@@ -6,7 +6,7 @@
 
         <v-list two-line subheader>
           <v-subheader>Ace editor settings</v-subheader>
-          <v-list-item>
+   
             <v-list-tile avatar>
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableSnippets"></v-checkbox>
@@ -16,8 +16,7 @@
                 <v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
-          <v-list-item>
+    
             <v-list-tile avatar>
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableBasicAutocompletion"></v-checkbox>
@@ -27,8 +26,7 @@
                 <v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
-          <v-list-item>
+         
             <v-list-tile avatar>
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableLiveAutocompletion"></v-checkbox>
@@ -38,7 +36,6 @@
                 <v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
  
         </v-list>
       </v-card>
diff --git a/src/vue-poc/templates/tabs.vue b/src/vue-poc/features/tabs.vue
similarity index 94%
rename from src/vue-poc/templates/tabs.vue
rename to src/vue-poc/features/tabs.vue
index 805ed82..6a7e02c 100644
--- a/src/vue-poc/templates/tabs.vue
+++ b/src/vue-poc/features/tabs.vue
@@ -2,8 +2,7 @@
 <template id="tabs">
   <v-tabs id="mobile-tabs-6" scroll-bars light>
     <v-card class="primary white--text">
-      <v-card-text>
-        <v-card-row>
+      <v-card-actions>
           <v-btn icon light>
             <v-icon>menu</v-icon>
           </v-btn>
@@ -14,8 +13,7 @@
           <v-btn icon light>
             <v-icon>more_vert</v-icon>
           </v-btn>
-        </v-card-row>
-      </v-card-text>
+        </v-card-actions>
     </v-card>
     <v-tabs-bar slot="activators">
       <v-tabs-slider></v-tabs-slider>
diff --git a/src/vue-poc/templates/tasks.vue b/src/vue-poc/features/tasks.vue
similarity index 100%
rename from src/vue-poc/templates/tasks.vue
rename to src/vue-poc/features/tasks.vue
diff --git a/src/vue-poc/templates/thumbnail/thumbnail.vue b/src/vue-poc/features/thumbnail/thumbnail.vue
similarity index 100%
rename from src/vue-poc/templates/thumbnail/thumbnail.vue
rename to src/vue-poc/features/thumbnail/thumbnail.vue
diff --git a/src/vue-poc/templates/thumbnail/thumbnail.xqm b/src/vue-poc/features/thumbnail/thumbnail.xqm
similarity index 100%
rename from src/vue-poc/templates/thumbnail/thumbnail.xqm
rename to src/vue-poc/features/thumbnail/thumbnail.xqm
diff --git a/src/vue-poc/lib/file.xqm b/src/vue-poc/lib/file.xqm
new file mode 100644
index 0000000..1b75a4c
--- /dev/null
+++ b/src/vue-poc/lib/file.xqm
@@ -0,0 +1,23 @@
+(:~
+ : file Utility functions.
+ :
+ : @author Andy Bunce, 2017
+ :)
+module namespace ufile = 'vue-poc/file';
+
+(:~
+ : resolve path relative to basex webpath
+ : file("/fred")=>C:\Program Files (x86)\BaseX\webapp\fred
+ :)
+declare function ufile:web($file as xs:string)
+as xs:string
+{
+  let $file:=if(starts-with($file,"/")) then 
+                substring($file,2) 
+            else 
+                error(xs:QName('vue-api:badpath'),"leading slash")
+                 
+  let $webroot:=db:system()/globaloptions/webpath/concat(.,"/")
+  return file:resolve-path($file,$webroot)
+};
+
diff --git a/src/vue-poc/lib/util.xqm b/src/vue-poc/lib/util.xqm
index 3808c70..29f750a 100644
--- a/src/vue-poc/lib/util.xqm
+++ b/src/vue-poc/lib/util.xqm
@@ -15,14 +15,21 @@ import module namespace cons = 'vue-poc/cons' at 'cons.xqm';
  :)
 declare function util:query(
   $query    as xs:string?,
-  $context  as item()*
-) as xs:string {
-  let $limit := $cons:OPTION($cons:K-MAXCHARS)
+  $context  as item()*) 
+as xs:string {
   let $result := xquery:eval($query, map { '': $context }, util:query-options())
   (: serialize more characters than requested, because limit represents number of bytes :)
+  return util:display($result)
+};
+
+declare function util:display(
+  $result as item()*)
+as xs:string 
+{
+  let $limit := $cons:OPTION($cons:K-MAXCHARS)
+  (: serialize more characters than requested, because limit represents number of bytes :)
   return util:chop(serialize($result, map { 'limit': $limit * 2 + 1, 'method': 'basex' }), $limit)
 };
-
 (:~
  : Runs an updating query.
  : @param  $query  query string
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 4de9775..8108e78 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-06-26T17:16:36.47+01:00
+// generated 2017-07-05T23:03:36.134+01:00
 
/**
  * vue filters
  */
@@ -42,7 +42,7 @@ Vue.filter('round', function(value, decimals) {
  Not found
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       message: 'bad route!'
@@ -53,410 +53,35 @@ Vue.filter('round', function(value, decimals) {
   }
 }
 
-);
-const Edit=Vue.extend({template:` 
-<v-container fluid="">
-      <v-snackbar top="" error="" v-model="snackbar">
-      {{ message }}
-      <v-btn flat="" @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
-    </v-snackbar>
-<v-card>
-
- <v-app-bar>
-<v-menu offset-y="">
-  <v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn>
-  <v-list>
-    <v-list-item v-for="item in path" :key="item">
-      <v-list-tile>
-        <v-list-tile-title @click="showfiles()">{{ item }}</v-list-tile-title>
-      </v-list-tile>
-    </v-list-item>
-  </v-list>
-</v-menu>
-
-  <v-toolbar-title>
-      <span>{{ name }}</span>
-  </v-toolbar-title>
-  <v-toolbar-items>
-  <span v-tooltip:top="{ html: 'Changed?' }">
-  <v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
-<v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
-</span>
- <v-chip small="" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
-     <v-chip @click.native="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
-          <v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
-          <v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>        
-          <v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>    
-           <v-avatar>
-              <v-icon black="">navigate_next</v-icon>
-           </v-avatar>
-          </v-chip>
-   <v-btn dark="" icon="" @click.native="acecmd('outline')">
-      <v-icon>star</v-icon>
-    </v-btn>
-
-  
-   <v-btn dark="" icon="" @click.native="acecmd('foldall')">
-      <v-icon>vertical_align_center</v-icon>
-    </v-btn>
-    
-    <v-btn dark="" icon="" @click.native="wrap=!wrap">
-      <v-icon>wrap_text</v-icon>
-    </v-btn>
-    
-   <v-btn dark="" icon="" @click.native="save()">
-      <v-icon>file_upload</v-icon>
-    </v-btn>
-    
-    <v-btn dark="" icon="" @click.native="beautify()">
-      <v-icon>format_align_center</v-icon>
-    </v-btn>
-    <v-btn dark="" icon="" @click.native="clearDialog = true">
-      <v-icon>delete</v-icon>
-    </v-btn>
-        <v-menu left="" transition="v-fade-transition">
-        <v-btn dark="" icon="" slot="activator">
-          <v-icon>help</v-icon>
-        </v-btn>     
-        <v-list>
-          <v-list-item @click="acecmd('showSettingsMenu')">
-            <v-list-tile avatar="">
-               <v-list-tile-avatar>
-              <v-icon>settings</v-icon>
-            </v-list-tile-avatar>
-              <v-list-tile-title>Show settings</v-list-tile-title>
-            </v-list-tile>
-          </v-list-item>
-          
-          <v-list-item @click="acecmd('showKeyboardShortcuts')">            
-            <v-list-tile avatar="">
-              <v-list-tile-avatar>
-              <v-icon>keyboard</v-icon>
-            </v-list-tile-avatar>
-              <v-list-tile-title>Show keyboard commands</v-list-tile-title>
-            </v-list-tile>
-          </v-list-item>
-          </v-list>
-       </v-menu>
-    <v-menu left="" transition="v-fade-transition">
-      <v-btn dark="" icon="" slot="activator">
-        <v-icon>more_vert</v-icon>
-      </v-btn>
-     
-          <v-list>
-            <v-list-item>
-              <v-list-tile>
-                <v-list-tile-title>unused</v-list-tile-title>
-              </v-list-tile>
-            </v-list-item>
-            
-          </v-list>
-      </v-menu>
-    </v-toolbar-items>
-     <v-dialog v-model="clearDialog">
-       <v-card>
-		    <v-card-row>
-		      <v-card-title>Clear?</v-card-title>
-		    </v-card-row>
-		    <v-card-row>
-		      <v-card-text>clear text.</v-card-text>
-		    </v-card-row>
-		    <v-card-row actions="">
-		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
-		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
-		    </v-card-row>
-		    </v-card>
-		</v-dialog>
- </v-app-bar>
-   <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
-
-
-<v-flex xs12="" style="height:70vh" v-if="!busy" fill-height="">
-  
-    <vue-ace :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
- </v-flex> 
-
-</v-card>
-  
- </v-container>
- `,
-
-  data () {
-    return {
-      contentA: `declare function local:query($q as xs:string)
-{ <json type="object"/> 
-};`,
-      mode:'xquery',
-      url:'',
-      name:'',
-      path:[],
-      mimetype:"",
-      wrap:false,
-      busy:false,
-      clearDialog:false,
-      annotations:null,
-      dirty:false,
-      snackbar:false,
-      message:"Cant do that",
-      mimemap:{
-          "text/xml":"xml",
-          "application/xml":"xml",
-          "application/xquery":"xquery",
-          "text/ecmascript":"javascript",
-          "application/sparql-query":"sparql",
-          "text/html":"html",
-          "text/turtle":"turtle",
-          "text/css":"css"
-      }
-    }
-  },
-  methods: {
-    reset (ok) {
-        if(ok){
-          this.contentA = 'reset content for Editor A'
-          this.dirty=false
-        }
-        this.clearDialog=false
-    },
-    changeContentA (val) {
-        if (this.contentA !== val) {
-        this.contentA = val
-        this.dirty=true
-      }
-    },
-    // load from url
-    fetch(url){
-      this.busy=true
-      HTTP.get("edit?url="+url,axios_json)
-      .then(r=>{
-        //console.log(r)
-        this.mimetype=r.data.mimetype
-        this.mode=this.acetype(r.data.mimetype)
-        this.contentA=r.data.data
-        var a=url.split("/")
-        this.url=url
-        this.name=a.pop()
-        this.path=a
-        this.busy=false
-        this.dirty=false
-        //alert(mode)
-        })
-        .catch(error=> {
-          console.log(error);
-          this.busy=false
-          alert("Get query error:\n"+url)
-        });
-      
-    },
-    acecmd(cmd){
-      Events.$emit('eventFired',cmd);
-    },
-    fold(){
-      Events.$emit('eventFired',"foldall");
-    },
-    save(){
-      alert("TODO save: "+this.url);
-      var data=Qs.stringify(
-          {
-            url: this.url, //gave the values directly for testing
-            data: this.contentA
-            })
-      HTTP.post("edit", data,{
-  headers: { "Content-Type": "application/x-www-form-urlencoded"}
-      }).then(r=>{
-        alert("AAA")
-      })
-    },
-    showfiles(){
-           router.push({ path: 'files', query: { url: this.path.join("/") }})
-    },
-    beautify(){
-      this.busy=true
-      var a=this.contentA
-      switch(this.mode) {
-      case "html":
-      case "xml":  
-          a=html_beautify(a, { indent_size: 3 ,indent_inner_html:true})
-          break;
-      case "javascript":
-           a=js_beautify(a, { indent_size: 2 })
-          break;
-      case "css":
-         a=css_beautify(a, { indent_size: 2 })
-         break;     
-      default:
-        this.message="No beautify yet for "+this.mode
-        this.snackbar=true
-     } 
-      this.contentA=a
-      this.busy=false
-    },
-    annotation(counts){
-      this.annotations=counts
-      console.log("annotations: ",counts)
-    },
-    acetype(mime){
-      var r=this.mimemap[mime]
-      return r?r:"text"
-    },
-    leaving(event) {
-      event.returnValue = "event seems to need to be set";
-      //debugger;
-      console.log("Leaving...");
-      if(this.dirty)event.preventDefault();
-  }
-  },
-  created(){
-    //https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
-    document.addEventListener('beforeunload', this.leaving);
-    var url=this.$route.query.url
-    console.log("Edit: ",url)
-    if(url) this.fetch(url)
-  },
-  beforeRouteLeave (to, from, next) {
-    // called when the route that renders this component is about to
-    // be navigated away from.
-    // has access to `this` component instance.
-    if(this.dirty && confirm("unsaved changes will be lost"))this.dirty=false;
-    next(!this.dirty);
-  }
-}
-
-);
-const Eval=Vue.extend({template:` 
+      );
+      const Files=Vue.extend({template:` 
  <v-container fluid="">
-  <v-card class="grey lighten-1 z-depth-1 mb-5">
-  
-  <v-card-row>
-  <v-btn @click.native="run()">Run</v-btn>
-    <v-btn @click.native="submit()">Submit</v-btn>
-  </v-card-row>
-  
-  <v-card-row height="200px">
-  <vue-ace :content="xq" mode="xquery" wrap="true" v-on:change-content="onChange"></vue-ace>
-   </v-card-row>
-   
-    </v-card>
-    
-   <v-alert error="" v-bind:value="showError">
-      {{result}}
-    </v-alert>
-    
-     <v-card v-if="show" class="grey lighten-1 z-depth-1 mb-5">
-      
-      <v-card-row height="200px">
-        <vue-ace :content="result" mode="text" wrap="true" read-only="true"></vue-ace> 
-       </v-card-row>
-        <v-card-row actions="">
-        
-         <v-chip class="green white--text">
-        <v-avatar class="green darken-4">{{elapsed}}</v-avatar>
-         Elapsed:
-      </v-chip>
-      
-      <v-chip class="green white--text">  
-        <v-avatar class="green darken-4">{{jobId}}</v-avatar>
-         JobId:
-      </v-chip>
-      
-        <v-spacer></v-spacer>
-      <v-btn flat="" class="green--text darken-1">@TODO</v-btn>
-    </v-card-row>
-           
-     </v-card>
- </v-container>
- `,
-
-  data:  function(){
-    return {
-      xq: '(: type your XQuery :)\n',
-      result:'',
-      elapsed:null,
-      show:false,
-      showError:false,
-      jobId:null
-      }
-  },
-  methods:{
-    onChange(val){
-      if (this.xq !== val) {
-        this.xq = val
-      }
-    },
-    
-    run(){
-      var data={xq:this.xq}
-      this.showError=this.show=false
-      var _start = performance.now();
-      HTTP.post("eval/execute",Qs.stringify(data))
-      .then(r=>{
-        this.elapsed=Math.floor(performance.now() - _start);
-        this.result=r.data.result
-        this.jobId=null
-        this.show=true
-      })
-      .catch(r=> {
-        console.log("error",r)
-        this.result=r.response.data
-        this.showError=true;
-
-      });
-      localforage.setItem('eval/xq', this.xq)
-    },
-    submit(){
-      var data={xq:this.xq}
-      this.showError=this.show=false
-      var _start = performance.now();
-      HTTP.post("eval/submit",Qs.stringify(data))
-      .then(r=>{
-        this.elapsed=Math.floor(performance.now() - _start);
-        this.result=this.jobId=r.data.job
-        this.show=true
-      })
-      .catch(r=> {
-        console.log("error",r)
-        this.jobId=r.response.job
-        this.showError=true;
-
-      });
-    }
-  },
-  
-  created:function(){
-      localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq});
-  }
-}
-
-);
-const Files=Vue.extend({template:` 
- <v-container fluid="">
-
+ 
 <v-card>
-<v-card-row class="green white--text">
-          <v-menu bottom="" right="">
+<v-toolbar>
+      <v-menu bottom="" right="">
            <v-btn icon="" dark="" slot="activator"><v-icon>folder</v-icon></v-btn>
       <v-list>
-        <v-list-item v-for="item in crumbs" :key="item">
-          <v-list-tile>
+        <template v-for="item in crumbs">
+          <v-list-tile :key="item">
             <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
           </v-list-tile>
-        </v-list-item>
+        </template>
       </v-list>
     </v-menu>
-  
-	
     <v-toolbar-title>{{ url }}</v-toolbar-title>
    
     <v-spacer></v-spacer>
       <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" dark="" @keyup.native.enter="filter"></v-text-field>
     <v-icon>view_module</v-icon>
-  </v-card-row>
+ </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-item v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)">
-      <v-list-tile avatar="">
+    <template v-for="item in folders">  
+      <v-list-tile 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>
@@ -470,11 +95,12 @@ const Files=Vue.extend({template:`
           </v-btn>
         </v-list-tile-action>
       </v-list-tile>
-    </v-list-item>
+    </template>
+    
     <v-divider inset=""></v-divider>
     <v-subheader inset="">Files</v-subheader>
-    <v-list-item v-for="item in files" v-bind:key="item.name" @click="file(item.name)">
-      <v-list-tile>
+     <template v-for="item in folders">  
+      <v-list-tile v-bind:key="item.name" @click="file(item.name)">
         <v-list-tile-avatar>
           <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
         </v-list-tile-avatar>
@@ -488,13 +114,15 @@ const Files=Vue.extend({template:`
           </v-btn>
         </v-list-tile-action>
       </v-list-tile>
-    </v-list-item>
+    </template>
   </v-list>
-    <v-navigation-drawer right="" light="" temporary="" v-model="infodraw">Some info here {{selected}}</v-navigation-drawer>
+    <v-navigation-drawer right="" light="" temporary="" v-model="infodraw"> <v-card> <v-card-title class="green white--text">
+Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card>
+      </v-navigation-drawer>
 </v-card>
  </v-container>
  `,
-
+      
   data:  function(){
     return { 
             crumbs:[],
@@ -572,27 +200,25 @@ const Files=Vue.extend({template:`
   }
 }
 
-);
-const History=Vue.extend({template:` 
+      );
+      const History=Vue.extend({template:` 
  <v-container fluid="">
- <v-list>
-          <v-list-item v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)">
-            <v-list-tile avatar="">
+    <v-list>
+            <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)" avatar="">
               <v-list-tile-action>
                 <v-icon v-if="item.icon" class="pink--text">star</v-icon>
               </v-list-tile-action>
               <v-list-tile-content>
-                <v-list-tile-title v-text="item.url"></v-list-tile-title>
+                <v-list-tile-title @click="doEdit(item.url)" v-text="item.url"></v-list-tile-title>
               </v-list-tile-content>
               <v-list-tile-avatar>
                 <img v-bind:src="item.avatar">
               </v-list-tile-avatar>
             </v-list-tile>
-          </v-list-item>
-        </v-list>
+   </v-list>
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       message: 'Hello Vue.js!',
@@ -618,55 +244,494 @@ const History=Vue.extend({template:`
   }
 }
 
-);
-const Home=Vue.extend({template:` 
-<v-layout class="ma-5">
-<v-flex xs4="">
-<v-card hover="" raised="">
-  <v-card-row height="200px" class="pa-5 green lighten-1">
-    <div class="display-1 white--text text-xs-center">VUE-POC</div>
-    v0.0.2
-  </v-card-row>
-</v-card>
-</v-flex>
-<v-flex xs4="">
-  <p>This is a experiment in using <code>vue.js</code>.</p>
-  <ul>
-  <li><a href="https://vuetifyjs.com/vuetify/quick-start" target="new">vuetifyjs</a></li>
-  <li><a href="https://github.com/monterail/vue-multiselect" target="new">vue-multiselect</a></li>
-<li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
-<li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</a></li>
-<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>
- `,
+      );
+      const Edit=Vue.extend({template:` 
+<v-container fluid="">
+      <v-snackbar top="" error="" v-model="snackbar">
+      {{ message }}
+      <v-btn flat="" @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
+    </v-snackbar>
+<v-card>
 
+<v-toolbar class="grey lighten-2 black--text">
+<v-menu>
+  <v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn>
+  <v-list>
+      <v-list-tile v-for="item in path" :key="item" @click="showfiles()">
+        <v-list-tile-title>{{ item }}</v-list-tile-title>
+      </v-list-tile>
+  </v-list>
+</v-menu>
+
+  <v-toolbar-title>
+      <span>{{ name }}</span>
+  </v-toolbar-title>
+  <v-toolbar-items>
+  <span v-tooltip:top="{ html: 'Changed?' }">
+  <v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
+<v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
+</span>
+ <v-chip small="" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
+     <v-chip @click.native="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
+          <v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
+          <v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>        
+          <v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>    
+           <v-avatar>
+              <v-icon black="">navigate_next</v-icon>
+           </v-avatar>
+          </v-chip>
+   <v-btn dark="" icon="" @click.native="acecmd('outline')">
+      <v-icon>star</v-icon>
+    </v-btn>
+
+  
+   <v-btn dark="" icon="" @click.native="acecmd('foldall')">
+      <v-icon>vertical_align_center</v-icon>
+    </v-btn>
+    
+    <v-btn dark="" icon="" @click.native="wrap=!wrap">
+      <v-icon>wrap_text</v-icon>
+    </v-btn>
+    
+   <v-btn dark="" icon="" @click.native="save()">
+      <v-icon>file_upload</v-icon>
+    </v-btn>
+    
+    <v-btn dark="" icon="" @click.native="beautify()">
+      <v-icon>format_align_center</v-icon>
+    </v-btn>
+    <v-btn dark="" icon="" @click.native="clearDialog = true">
+      <v-icon>delete</v-icon>
+    </v-btn>
+        <v-menu left="" transition="v-fade-transition">
+        <v-btn dark="" icon="" slot="activator">
+          <v-icon>help</v-icon>
+        </v-btn>     
+        <v-list>
+            <v-list-tile @click="acecmd('showSettingsMenu')" avatar="">
+               <v-list-tile-avatar>
+              <v-icon>settings</v-icon>
+            </v-list-tile-avatar>
+              <v-list-tile-title>Show settings</v-list-tile-title>
+            </v-list-tile>
+                      
+            <v-list-tile @click="acecmd('showKeyboardShortcuts')" avatar="">
+              <v-list-tile-avatar>
+              <v-icon>keyboard</v-icon>
+            </v-list-tile-avatar>
+              <v-list-tile-title>Show keyboard commands</v-list-tile-title>
+            </v-list-tile>
+          </v-list>
+       </v-menu>
+    <v-menu left="" transition="v-fade-transition">
+      <v-btn dark="" icon="" slot="activator">
+        <v-icon>more_vert</v-icon>
+      </v-btn>
+     
+          <v-list>
+              <v-list-tile>
+                <v-list-tile-title>unused</v-list-tile-title>
+              </v-list-tile>           
+          </v-list>
+          
+      </v-menu>
+    </v-toolbar-items>
+     <v-dialog v-model="clearDialog">
+       <v-card>
+		      <v-card-title>Clear?</v-card-title>
+		      <v-card-text>clear text.</v-card-text>
+		    <v-card-actions>
+		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
+		      <v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
+		    </v-card-actions>
+		    </v-card>
+		</v-dialog>
+ </v-toolbar>
+   <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
+
+<v-card-text v-if="!busy">
+<v-flex xs12="" style="height:70vh" fill-height="">
+  
+    <vue-ace :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
+ </v-flex> 
+</v-card-text>
+</v-card>
+  
+ </v-container>
+ `,
+      
+  data () {
+    return {
+      contentA: `declare function local:query($q as xs:string)
+{ <json type="object"/> 
+};`,
+      mode:'xquery',
+      url:'',
+      name:'',
+      path:[],
+      mimetype:"",
+      wrap:false,
+      busy:false,
+      clearDialog:false,
+      annotations:null,
+      dirty:false,
+      snackbar:false,
+      message:"Cant do that",
+      mimemap:{
+          "text/xml":"xml",
+          "application/xml":"xml",
+          "application/xquery":"xquery",
+          "text/ecmascript":"javascript",
+          "application/sparql-query":"sparql",
+          "text/html":"html",
+          "text/turtle":"turtle",
+          "text/css":"css",
+          "image/svg+xml":"svg"
+      }
+    }
+  },
+  methods: {
+    reset (ok) {
+        if(ok){
+          this.contentA = 'reset content for Editor A'
+          this.dirty=false
+        }
+        this.clearDialog=false
+    },
+    changeContentA (val) {
+        if (this.contentA !== val) {
+        this.contentA = val
+        this.dirty=true
+      }
+    },
+    // load from url
+    fetch(url){
+      this.busy=true
+      HTTP.get("edit?url="+url,axios_json)
+      .then(r=>{
+        //console.log(r)
+        this.mimetype=r.data.mimetype
+        this.mode=this.acetype(r.data.mimetype)
+        this.contentA=r.data.data
+        var a=url.split("/")
+        this.url=url
+        this.name=a.pop()
+        this.path=a
+        this.busy=false
+        this.dirty=false
+        //alert(mode)
+        })
+        .catch(error=> {
+          console.log(error);
+          this.busy=false
+          alert("Get query error:\n"+url)
+        });
+      
+    },
+    acecmd(cmd){
+      Events.$emit('eventFired',cmd);
+    },
+    fold(){
+      Events.$emit('eventFired',"foldall");
+    },
+    save(){
+      alert("TODO save: "+this.url);
+      var data=Qs.stringify(
+          {
+            url: this.url, //gave the values directly for testing
+            data: this.contentA
+            })
+      HTTP.post("edit", data,{
+  headers: { "Content-Type": "application/x-www-form-urlencoded"}
+      }).then(r=>{
+        alert("AAA")
+      })
+    },
+    showfiles(){
+           router.push({ path: 'files', query: { url: this.path.join("/") }})
+    },
+    beautify(){
+      this.busy=true
+      var a=this.contentA
+      switch(this.mode) {
+      case "html":
+      case "svg":  
+      case "xml":  
+          a=html_beautify(a, { indent_size: 3 ,indent_inner_html:true})
+          break;
+      case "javascript":
+           a=js_beautify(a, { indent_size: 2 })
+          break;
+      case "css":
+         a=css_beautify(a, { indent_size: 2 })
+         break;     
+      default:
+        this.message="No beautify yet for "+this.mode
+        this.snackbar=true
+     } 
+      this.contentA=a
+      this.busy=false
+    },
+    annotation(counts){
+      this.annotations=counts
+      console.log("annotations: ",counts)
+    },
+    acetype(mime){
+      var r=this.mimemap[mime]
+      return r?r:"text"
+    },
+    leaving(event) {
+      event.returnValue = "event seems to need to be set";
+      //debugger;
+      console.log("Leaving...");
+      if(this.dirty)event.preventDefault();
+  }
+  },
+  created(){
+    //https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
+    document.addEventListener('beforeunload', this.leaving);
+    var url=this.$route.query.url
+    console.log("Edit: ",url)
+    if(url) this.fetch(url)
+  },
+  beforeRouteLeave (to, from, next) {
+    // called when the route that renders this component is about to
+    // be navigated away from.
+    // has access to `this` component instance.
+    if(this.dirty && confirm("unsaved changes will be lost"))this.dirty=false;
+    next(!this.dirty);
+  }
 }
 
-);
-const Job=Vue.extend({template:` 
+      );
+      const Eval=Vue.extend({template:` 
  <v-container fluid="">
- <h1>JOBS</h1>
+  <v-card class="grey lighten-1 z-depth-1 mb-5">
+  
+
+ 
+     <v-app-bar>
+      <v-btn @click.native="run()">Run</v-btn>
+    <v-btn @click.native="submit()">
+    <v-icon>play_circle_outline</v-icon>
+    Submit</v-btn>
+    <v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow=""></v-btn-dropdown>
+   </v-app-bar>
+
+  
+  <v-card-text>
+  <v-flex xs12="" style="height:200px" fill-height="">
+  <vue-ace :content="xq" mode="xquery" wrap="true" v-on:change-content="onChange"></vue-ace>
+    </v-flex>
+   </v-card-text>
+    <v-alert error="" v-bind:value="showError">
+      {{result}}
+    </v-alert>
+     <v-card-actions v-if="show">
+       
+        JobId:
+      <v-chip class="green white--text">{{jobId}}</v-chip>
+       <v-progress-circular v-if="waiting" indeterminate="" class="primary--text"></v-progress-circular>
+         Elapsed:
+         <v-chip class="green white--text">{{elapsed}}</v-chip>
+        <v-spacer></v-spacer>
+      <v-btn flat="" class="green--text darken-1">@TODO</v-btn>
+    </v-card-actions>
+     <v-card-text v-if="show">
+     <v-flex xs12="" style="height:200px" fill-height="">
+        <vue-ace :content="result" mode="text" wrap="true" read-only="true"></vue-ace>
+        </v-flex> 
+       </v-card-text>
+    </v-card>
 
  </v-container>
  `,
-
+      
   data:  function(){
     return {
-      message: 'Hello Vue.js!',
-      jobs:[]
+      xq: '(: type your XQuery :)\n',
+      result:'',
+      elapsed:null,
+      show:false,
+      showError:false,
+      jobId:null,
+      waiting:false,
+      start:null,
+      dropdown_font: [
+        { text: 'Arial' },
+        { text: 'Calibri' },
+        { text: 'Courier' },
+        { text: 'Verdana' }
+      ]
+      }
+  },
+  methods:{
+    onChange(val){
+      if (this.xq !== val) {
+        this.xq = val
+      }
+    },
+    
+    run(){
+      var data={xq:this.xq}
+      this.showError=this.show=false
+      this.start = performance.now();
+      HTTP.post("eval/execute",Qs.stringify(data))
+      .then(r=>{
+        this.elapsed=Math.floor(performance.now() - this.start);
+        this.result=r.data.result
+        this.jobId=null
+        this.show=true
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.result=r.response.data
+        this.showError=true;
+
+      });
+      localforage.setItem('eval/xq', this.xq)
+    },
+    submit(){
+      var data={xq:this.xq}
+      this.showError=this.show=false
+      this.start = performance.now();
+      HTTP.post("eval/submit",Qs.stringify(data))
+      .then(r=>{
+        this.elapsed=Math.floor(performance.now() - this.start);
+        this.result=this.jobId=r.data.job
+        this.show=true
+        this.pollState()
+        
+      })
+      .catch(r=> {
+        console.log("error",r)
+        this.jobId=r.response.job
+        this.showError=true;
+
+      });
+    },
+    pollState(){
+      this.waiting=true;
+      HTTP.get("job/"+this.jobId)
+      .then(r=>{
+        this.waiting=r.data.state!="cached";
+        this.elapsed=Math.floor(performance.now() - this.start);
+         if(this.waiting) {
+           setTimeout(()=>{ this.pollState() }, 5000);
+         }else{
+           this.getResult()
+         }
+      })
+    },
+    getResult(){
+       HTTP.post("eval/result/"+this.jobId)
+       .then(r=>{
+         this.result=r.data.result
+         this.jobId=null
+         this.show=true
+       })
+    }
+  },
+  
+  created:function(){
+      localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq});
+  }
+}
+
+      );
+      const Home=Vue.extend({template:`  <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 green lighten-1">
+<div class="display-1 white--text text-xs-center">VUE-POC</div>
+v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
+<p>
+	This is a experiment in using
+	<code>vue.js</code>
+	.
+</p>
+<ul>
+	<li><a href="https://vuetifyjs.com/vuetify/quick-start" target="new">vuetifyjs</a></li>
+	<li><a href="https://github.com/monterail/vue-multiselect" target="new">vue-multiselect</a></li>
+	<li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
+	<li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</a></li>
+	<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>  `,
       
+  }
+
+      );
+      const Job=Vue.extend({template:` 
+  <v-card>
+   <v-toolbar class="green white--text">
+       <v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading">
+    <v-icon>refresh</v-icon>
+    </v-btn>
+    
+     <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-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">
+    <template slot="items" scope="props">
+    <td>
+        <v-checkbox primary="" hide-details="" v-model="props.selected"></v-checkbox>
+      </td>
+      <td>{{ props.item.id }}</td>
+      <td class="text-xs-right">{{ props.item.state }}</td>
+      <td class="text-xs-right">{{ props.item.duration }}</td>
+      <td class="text-xs-right">{{ props.item.type }}</td>
+      <td class="text-xs-right">{{ props.item.user }}</td>
+       <td><code>{{ props.item.text }}</code></td>
+    </template>
+  </v-data-table>
+ </v-card>
+ `,
+      
+  data:  function(){
+    return {
+      headers: [
+        {
+          text: 'Job id',
+          left: true,
+          value: 'id'
+        },
+        { text: 'State', value: 'state' },
+        { text: 'Duration', value: 'duration' },
+        { text: 'Type', value: 'type' },
+        { text: 'User', value: 'user' },
+        { text: 'Query', value: 'text' }
+      ],
+      items:[        
+      ],
+      selected:[],
+      search:"",
+      loading:false
       }
   },
   methods:{
     getJobs(){
-    alert("get jobs")
+      this.loading=true;
+	    HTTP.get("job")
+	    .then(r=>{
+	       this.loading=false
+	       this.items=r.data
+	       setTimeout(()=>{ this.getJobs() }, 10000);
+	    })
+	   
+    },
+    stop(){
+      var s=this.selected.map((j)=>{return j.id}).join(",")
+      console.log("AAA",this.selected)
+      alert(s)
+    }
+  },
+  computed: {
+    // a computed getter
+    noSelection: function () {
+      // `this` points to the vm instance
+      return this.selected.length==0
     }
   },
   created(){
@@ -674,34 +739,32 @@ const Job=Vue.extend({template:`
   }
 }
 
-);
-const Login=Vue.extend({template:` 
+      );
+      const Login=Vue.extend({template:` 
 <v-card class="grey lighten-4 elevation-0">
 
-    <v-card-row class="green darken-1">
-      <v-card-title>
+      <v-card-title class="green darken-1">
         <span class="white--text">Login</span>
       </v-card-title>
-    </v-card-row>
     <v-alert error="" v-bind:value="showMessage">
       {{message}}
     </v-alert>
-     <v-card-row>
+     <v-card-actions>
       <v-text-field name="input-name" label="Enter your name" hint="name??" v-model="name" required=""></v-text-field>
-     </v-card-row>
+     </v-card-actions>
   
-    <v-card-row>    
+    <v-card-actions>    
          <v-text-field name="input-password" label="Enter your password" hint="Enter your password" v-model="password" :append-icon="hidepass ? 'visibility' : 'visibility_off'" :append-icon-cb="() => (hidepass = !hidepass)" :type="hidepass ? 'password' : 'text'" required=""></v-text-field>      
-    </v-card-row>
+    </v-card-actions>
         
     <v-divider></v-divider>
-    <v-card-row actions="" class="blue-grey darken-1 mt-0">
+    <v-card-actions class="blue-grey darken-1 mt-0">
        <v-btn primary="" @click.native="go()">Continue</v-btn>
        <v-spacer></v-spacer>
-    </v-card-row>
+    </v-card-actions>
 </v-card>
  `,
-
+      
     data () {
       return {
         hidepass: true,
@@ -740,12 +803,12 @@ const Login=Vue.extend({template:`
   }
 }
 
-);
-const Log=Vue.extend({template:` 
+      );
+      const Log=Vue.extend({template:` 
  <v-container fluid="">
   <h1>LOGS</h1>
 </v-container> `,
-
+      
   data:  function(){
     return {
       message: 'Hello Vue.js!',
@@ -757,25 +820,23 @@ const Log=Vue.extend({template:`
   }
 }
 
-);
-const Options=Vue.extend({template:` 
+      );
+      const Options=Vue.extend({template:` 
 <v-layout>
 <v-flex xs2="">
 <v-card class="blue darken-4 white--text">
-  <v-card-row height="200px">
-    <v-card-title>
+    <v-card-title height="200px">
       Featured Event: <br>
       May 24, 2016 <br>
       7-11pm
     </v-card-title>
-  </v-card-row>
- <v-card-row actions="">
+ <v-card-actions>
     <v-btn flat="" class="white--text" @click.native="snackbar = true">Add to <br>Calendar</v-btn>
     <v-spacer></v-spacer>
     <v-btn icon="" dark="" @click.native="snackbar = true">
       <v-icon>event</v-icon>
     </v-btn>
-  </v-card-row>
+  </v-card-actions>
 </v-card>
 </v-flex>
 
@@ -784,7 +845,7 @@ const Options=Vue.extend({template:`
 </v-flex>
 
 <v-flex xs4="">
-   <v-card-row img="music.jpg" height="300px"></v-card-row>
+   <v-card-media img="music.jpg" height="300px"></v-card-media>
   <v-btn block="" primary="" @click.native="snackbar = true" dark="">Show Snackbar</v-btn>
  <v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
 </v-flex>
@@ -796,7 +857,7 @@ const Options=Vue.extend({template:`
   </v-snackbar>
   </v-layout>
  `,
-  
+        
   data: function(){
     return {
         snackbar:false
@@ -804,8 +865,8 @@ const Options=Vue.extend({template:`
   }
     }
 
-);
-const People=Vue.extend({template:` 
+      );
+      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>
@@ -820,15 +881,15 @@ const People=Vue.extend({template:`
   </v-card>
   <v-layout>
   <v-flex xs5="">
-   <v-card-row img="resources/music.jpg" height="300px"></v-card-row>
+   <v-card-media src="resources/music.jpg" height="300px"></v-card-media>
   </v-flex>
   <v-flex xs1="">
-  <v-card-row :img="img" height="60px"></v-card-row>
+  <v-card-media :src="img" height="60px"></v-card-media>
   </v-flex>
   </v-layout>
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       message: 'Hello Vue.js!',
@@ -846,8 +907,8 @@ const People=Vue.extend({template:`
 }
 
 
-);
-const Ping=Vue.extend({template:` 
+      );
+      const Ping=Vue.extend({template:` 
  <v-container fluid="">
  <p>Simple performance measure. Read or increment a database value.</p>
   <h2>Counter:{{counter}}</h2>
@@ -931,7 +992,7 @@ const Ping=Vue.extend({template:`
     </table>
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       getValues: new perfStat(),
@@ -973,8 +1034,8 @@ const Ping=Vue.extend({template:`
   }
 }
 
-);
-const Puzzle=Vue.extend({template:` 
+      );
+      const Puzzle=Vue.extend({template:` 
  <v-container fluid="">
   <a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
   <v-layout>
@@ -999,7 +1060,7 @@ const Puzzle=Vue.extend({template:`
   </v-layout>
  </v-container>
  `,
-
+      
   data:  function(){
     return {grid: [
       [1,5,8,12],
@@ -1051,13 +1112,13 @@ const Puzzle=Vue.extend({template:`
 }
 
 
-);
-const Search=Vue.extend({template:` 
+      );
+      const Search=Vue.extend({template:` 
  <v-container fluid="">
  <v-text-field label="Search..." v-model="q"></v-text-field>
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       message: 'Hello Vue.js!',
@@ -1069,16 +1130,15 @@ const Search=Vue.extend({template:`
   }
 }
 
-);
-const Select=Vue.extend({template:` 
+      );
+      const Select=Vue.extend({template:` 
  <v-container fluid="">
 <v-card>
-  <v-card-row class="green darken-1">
-    <v-card-title>
+
+    <v-card-title class="green darken-1">
       <span class="white--text">Selection</span>
       
     </v-card-title>
-  </v-card-row>
   <v-card-text>
     <v-layout>
      
@@ -1098,7 +1158,7 @@ const Select=Vue.extend({template:`
 <v-card>
  </v-card></v-card></v-container>
  `,
-
+      
   components: { multiselect: VueMultiselect.Multiselect}, 
   data: function(){
       return {
@@ -1130,15 +1190,15 @@ const Select=Vue.extend({template:`
 }
 
 
-);
-const Settings=Vue.extend({template:` 
+      );
+      const Settings=Vue.extend({template:` 
   <v-layout row="">
     <v-flex xs12="" sm6="" offset-sm3="">
       <v-card>
 
         <v-list two-line="" subheader="">
           <v-subheader>Ace editor settings</v-subheader>
-          <v-list-item>
+   
             <v-list-tile avatar="">
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableSnippets"></v-checkbox>
@@ -1148,8 +1208,7 @@ const Settings=Vue.extend({template:`
                 <v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
-          <v-list-item>
+    
             <v-list-tile avatar="">
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableBasicAutocompletion"></v-checkbox>
@@ -1159,8 +1218,7 @@ const Settings=Vue.extend({template:`
                 <v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
-          <v-list-item>
+         
             <v-list-tile avatar="">
               <v-list-tile-action>
                 <v-checkbox v-model="ace.enableLiveAutocompletion"></v-checkbox>
@@ -1170,14 +1228,13 @@ const Settings=Vue.extend({template:`
                 <v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
-          </v-list-item>
  
         </v-list>
       </v-card>
     </v-flex>
   </v-layout>
  `,
-
+      
   data () {
     return {
       ace: {
@@ -1214,12 +1271,11 @@ const Settings=Vue.extend({template:`
 }
 
 
-);
-const Tabs=Vue.extend({template:` 
+      );
+      const Tabs=Vue.extend({template:` 
   <v-tabs id="mobile-tabs-6" scroll-bars="" light="">
     <v-card class="primary white--text">
-      <v-card-text>
-        <v-card-row>
+      <v-card-actions>
           <v-btn icon="" light="">
             <v-icon>menu</v-icon>
           </v-btn>
@@ -1230,8 +1286,7 @@ const Tabs=Vue.extend({template:`
           <v-btn icon="" light="">
             <v-icon>more_vert</v-icon>
           </v-btn>
-        </v-card-row>
-      </v-card-text>
+        </v-card-actions>
     </v-card>
     <v-tabs-bar slot="activators">
       <v-tabs-slider></v-tabs-slider>
@@ -1249,7 +1304,7 @@ const Tabs=Vue.extend({template:`
     </v-tabs-content>
 </v-tabs>
  `,
-
+      
     data () {
       return {
         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
@@ -1257,13 +1312,13 @@ const Tabs=Vue.extend({template:`
     }
   }
 
-);
-const Task=Vue.extend({template:` 
+      );
+      const Task=Vue.extend({template:` 
  <v-container fluid="">
   <h1>Tasks</h1>
  </v-container>
  `,
-
+      
   data:  function(){
     return {
       message: 'Hello Vue.js!',
@@ -1275,8 +1330,8 @@ const Task=Vue.extend({template:`
   }
 }
 
-);
-const Thumbnail=Vue.extend({template:` 
+      );
+      const Thumbnail=Vue.extend({template:` 
  <v-container fluid="">
  <v-stepper v-model="step" non-linear="">
   <v-stepper-header>
@@ -1315,7 +1370,7 @@ const Thumbnail=Vue.extend({template:`
 </v-stepper>
  </v-container>
  `,
-
+      
   data(){
     return {
       image:"http://images.metmuseum.org/CRDImages/ep/original/DT46.jpg",
@@ -1344,8 +1399,8 @@ const Thumbnail=Vue.extend({template:`
 
 }
 
-);
-// base -----------------------
+      );
+      // base -----------------------
 localforage.config({
   name: 'vuepoc'
 });
@@ -1405,8 +1460,8 @@ Vue.component('nav-list', {
     </v-flex>
   </v-layout>
   <v-list-group v-else-if="item.children" v-model="item.model" no-action>
-    <v-list-item slot="item">
-      <v-list-tile :href="item.href" router ripple>
+
+      <v-list-tile slot="item" :href="item.href" router ripple>
        <v-list-tile-action>
           <v-icon>{{ item.icon }}</v-icon>
         </v-list-tile-action>
@@ -1421,12 +1476,9 @@ Vue.component('nav-list', {
         
         </v-list-tile-content>
       </v-list-tile>
-    </v-list-item>
-    <v-list-item
-      v-for="(child, i) in item.children"
-      :key="i"
-    >
-      <v-list-tile :href="child.href" router ripple>
+      
+    <template  v-for="(child, i) in item.children">
+      <v-list-tile  :key="i" :href="child.href" router ripple>
         <v-list-tile-action v-if="child.icon">
           <v-icon>{{ child.icon }}</v-icon>
         </v-list-tile-action>
@@ -1436,10 +1488,10 @@ Vue.component('nav-list', {
           </v-list-tile-title>
         </v-list-tile-content>
       </v-list-tile>
-    </v-list-item>
+    </template>
   </v-list-group>
-  <v-list-item v-else>
-    <v-list-tile :href="item.href" router ripple>
+
+    <v-list-tile v-else :href="item.href" router ripple>
       <v-list-tile-action>
         <v-icon>{{ item.icon }}</v-icon>
       </v-list-tile-action>
@@ -1449,7 +1501,6 @@ Vue.component('nav-list', {
         </v-list-tile-title>
       </v-list-tile-content>
     </v-list-tile>
-  </v-list-item>
 </template>
 </v-list>`,
    created:function(){
@@ -1525,16 +1576,16 @@ const app = new Vue({
       {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'}
       ]},
       {
         icon: 'directions_run',
         text: 'Actions' ,
         model: false,
         children: [
-      {href: 'eval',text: 'Evaluate',icon: 'cake'},      
-      {href: 'tasks',text: 'Tasks',icon: 'build'}, 
-      {href: 'jobs',text: 'Jobs',icon: 'print'},
-      {href: 'logs',text: 'Server logs',icon: 'dns'}
+      {href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'},      
+      {href: 'jobs',text: 'Jobs',icon: 'dashboard'},
+      {href: 'tasks',text: 'Tasks',icon: 'history'}, 
       ]},
       {
         icon: 'more_horiz',
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index c8cedf4..2ad3afc 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.12.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.13.0/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.12.7/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.13.0/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>
@@ -38,7 +38,7 @@
 <v-app id="app" >
  <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer"    class="grey lighten-4 pb-0">
   <v-list class="pa-0">
-        <v-list-item>
+
           <v-list-tile avatar tag="div">
             <v-list-tile-avatar>
               <img src="/vue-poc/ui/quodatum.gif" />
@@ -52,7 +52,7 @@
               </v-btn>
             </v-list-tile-action>
           </v-list-tile>
-        </v-list-item>
+
       </v-list>
     <nav-list  :items="items"></nav-list>
  </v-navigation-drawer>
@@ -69,14 +69,13 @@
       </v-btn>
      
           <v-list>
-            <v-list-item @click="logout()">
-              <v-list-tile>
+        
+              <v-list-tile @click="logout()">
                 <v-list-tile-title >logout</v-list-tile-title>
               </v-list-tile>
                <v-list-tile>
                 <v-list-tile-title >permission: {{$auth.permission}}</v-list-tile-title>
               </v-list-tile>
-            </v-list-item>
             
           </v-list>
       </v-menu>
diff --git a/src/vue-poc/tasks/createthumbs.xq b/src/vue-poc/tasks/createthumbs.xq
new file mode 100644
index 0000000..f70d7bb
--- /dev/null
+++ b/src/vue-poc/tasks/createthumbs.xq
@@ -0,0 +1 @@
+42
\ No newline at end of file
diff --git a/src/vue-poc/tasks/primes.xq b/src/vue-poc/tasks/primes.xq
new file mode 100644
index 0000000..fca9a77
--- /dev/null
+++ b/src/vue-poc/tasks/primes.xq
@@ -0,0 +1,2 @@
+declare variable $MAX:=100000;
+for $i in (2 to $MAX) return if (every $j in (2 to $i - 1) satisfies $i mod $j ne 0) then $i else ()
\ No newline at end of file
diff --git a/src/vue-poc/tasks/scanpics.xq b/src/vue-poc/tasks/scanpics.xq
new file mode 100644
index 0000000..03e0e60
--- /dev/null
+++ b/src/vue-poc/tasks/scanpics.xq
@@ -0,0 +1,8 @@
+(:~ create xml file list
+:)
+import module namespace fw="quodatum:file.walker";
+declare namespace c="http://www.w3.org/ns/xproc-step";
+let $opt:=map{"include-filter":".*\.xsd",
+              "max-depth":-1,
+              "include-info":true()}
+return fw:directory-list("/",$opt)
\ No newline at end of file
diff --git a/src/vue-poc/templates/eval/eval.vue b/src/vue-poc/templates/eval/eval.vue
deleted file mode 100644
index 02c283b..0000000
--- a/src/vue-poc/templates/eval/eval.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<template id="eval">
- <v-container fluid>
-  <v-card class="grey lighten-1 z-depth-1 mb-5">
-  
-  <v-card-row>
-  <v-btn @click.native="run()">Run</v-btn>
-    <v-btn @click.native="submit()">Submit</v-btn>
-  </v-card-row>
-  
-  <v-card-row  height="200px" >
-  <vue-ace  :content="xq" mode="xquery" wrap="true"
-    v-on:change-content="onChange" 
-    ></vue-ace>
-   </v-card-row>
-   
-    </v-card>
-    
-   <v-alert error v-bind:value="showError">
-      {{result}}
-    </v-alert>
-    
-     <v-card v-if="show" class="grey lighten-1 z-depth-1 mb-5">
-      
-      <v-card-row height="200px">
-        <vue-ace  :content="result" mode="text" wrap="true" read-only="true"
-        ></vue-ace> 
-       </v-card-row>
-        <v-card-row actions>
-        
-         <v-chip class="green white--text">
-        <v-avatar class="green darken-4">{{elapsed}}</v-avatar>
-         Elapsed:
-      </v-chip>
-      
-      <v-chip class="green white--text">  
-        <v-avatar class="green darken-4">{{jobId}}</v-avatar>
-         JobId:
-      </v-chip>
-      
-        <v-spacer></v-spacer>
-      <v-btn flat class="green--text darken-1">@TODO</v-btn>
-    </v-card-row>
-           
-     </v-card>
- </v-container>
-</template>
-
-<script>{
-  data:  function(){
-    return {
-      xq: '(: type your XQuery :)\n',
-      result:'',
-      elapsed:null,
-      show:false,
-      showError:false,
-      jobId:null
-      }
-  },
-  methods:{
-    onChange(val){
-      if (this.xq !== val) {
-        this.xq = val
-      }
-    },
-    
-    run(){
-      var data={xq:this.xq}
-      this.showError=this.show=false
-      var _start = performance.now();
-      HTTP.post("eval/execute",Qs.stringify(data))
-      .then(r=>{
-        this.elapsed=Math.floor(performance.now() - _start);
-        this.result=r.data.result
-        this.jobId=null
-        this.show=true
-      })
-      .catch(r=> {
-        console.log("error",r)
-        this.result=r.response.data
-        this.showError=true;
-
-      });
-      localforage.setItem('eval/xq', this.xq)
-    },
-    submit(){
-      var data={xq:this.xq}
-      this.showError=this.show=false
-      var _start = performance.now();
-      HTTP.post("eval/submit",Qs.stringify(data))
-      .then(r=>{
-        this.elapsed=Math.floor(performance.now() - _start);
-        this.result=this.jobId=r.data.job
-        this.show=true
-      })
-      .catch(r=> {
-        console.log("error",r)
-        this.jobId=r.response.job
-        this.showError=true;
-
-      });
-    }
-  },
-  
-  created:function(){
-      localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq});
-  }
-}
-</script>
diff --git a/src/vue-poc/templates/home.vue b/src/vue-poc/templates/home.vue
deleted file mode 100644
index 2bc33ea..0000000
--- a/src/vue-poc/templates/home.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<template id="home">
-<v-layout class="ma-5">
-<v-flex xs4>
-<v-card hover raised>
-  <v-card-row height="200px" class="pa-5 green lighten-1">
-    <div class="display-1 white--text text-xs-center">VUE-POC</div>
-    v0.0.2
-  </v-card-row>
-</v-card>
-</v-flex>
-<v-flex xs4>
-  <p>This is a experiment in using <code>vue.js</code>.</p>
-  <ul>
-  <li><a href="https://vuetifyjs.com/vuetify/quick-start" target="new">vuetifyjs</a></li>
-  <li><a href="https://github.com/monterail/vue-multiselect" target="new">vue-multiselect</a></li>
-<li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
-<li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</a></li>
-<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>
-<script>{
-}
-</script>
diff --git a/src/vue-poc/templates/job/jobs.vue b/src/vue-poc/templates/job/jobs.vue
deleted file mode 100644
index 1ad3a65..0000000
--- a/src/vue-poc/templates/job/jobs.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<template id="job">
- <v-container fluid>
- <h1>JOBS</h1>
-
- </v-container>
-</template>
-
-<script>{
-  data:  function(){
-    return {
-      message: 'Hello Vue.js!',
-      jobs:[]
-      
-      }
-  },
-  methods:{
-    getJobs(){
-    alert("get jobs")
-    }
-  },
-  created(){
-    this.getJobs()
-  }
-}
-</script>
diff --git a/src/vue-poc/templates/job/jobs.xqm b/src/vue-poc/templates/job/jobs.xqm
deleted file mode 100644
index 8050746..0000000
--- a/src/vue-poc/templates/job/jobs.xqm
+++ /dev/null
@@ -1,25 +0,0 @@
-module namespace j = 'quodatum.test.jobs';
-
-
-(:~
- :  job list
- :)
-declare  
-%rest:GET %rest:path("/vue-poc/api/job")
-%output:method("json")   
-function j:list()
-as element(json)
-{
- let $jlist:=jobs:list()[. != jobs:current()] !jobs:list-details(.)
- return <json type="array">
- {for $j in $jlist
- return <_ type="object">
- <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>
- </_>
- }</json>
-};
-
diff --git a/src/vue-poc/vue-api2.xqm b/src/vue-poc/vue-api2.xqm
index 3685173..7071d5a 100644
--- a/src/vue-poc/vue-api2.xqm
+++ b/src/vue-poc/vue-api2.xqm
@@ -6,8 +6,8 @@
 module namespace vue-api = 'quodatum:vue.api';
 import module namespace rest = "http://exquery.org/ns/restxq";
 import module namespace session = "http://basex.org/modules/session";
-import module namespace fw="quodatum:file.walker";
-import module namespace mt = 'quodatum.data.mimetype' at "lib/mimetype.xqm";
+
+
 declare namespace c="http://www.w3.org/ns/xproc-step";
 
 declare namespace wadl="http://wadl.dev.java.net/2009/02";
@@ -51,32 +51,6 @@ return  <json   type="object" >
 };
 
 
-(:~
- : history list 
- :)
-declare
-%rest:GET %rest:path("/vue-poc/api/history")
-%rest:produces("application/json")
-%output:method("json")   
-function vue-api:history( )   
-{
- let $h:=(
- '/vue-poc/vue-poc.xqm',
- '/vue-poc/data/vue-poc/ch4d1.xml',
- '/vue-poc/static/app-gen.js',
- '/vue-poc/static/app.html',
- '/vue-poc/static/app.css',
- '/vue-poc/logo.svg',
- '/vue-poc/static/resources/sparql.rq',
-  '/vue-poc/static/resources/turtle.ttl'
- )
-
- return <json   type="object" >
-            <items type="array">
-            {$h!(<_ type="object"><url>{.}</url></_>)}              
-            </items>
-  </json>
-};
 
 (:~
  : Returns wadl.
@@ -88,109 +62,3 @@ function vue-api:wadl()
  rest:wadl()
 };
 
-(:~
- : Returns a file content.
- :)
-declare
-%rest:GET %rest:path("/vue-poc/api/edit")
-%rest:query-param("url", "{$url}")
-%rest:produces("application/json")
-%output:method("json")   
-function vue-api:edit-get($url as xs:string)   
-{
-  let $path := vue-api:web( $url)=>trace("path ")
-   return if( file:exists($path))then 
-             let $type:=mt:type($path)
-             let $fetch:=mt:fetch-fn($type("treat-as"))
-             return <json type="object" >
-                        <url>{$url}</url>
-                        <mimetype>{$type?type}</mimetype>
-                        <data>{$fetch($path)}</data> 
-                     </json>
-          else 
-            error(xs:QName('vue-api:raw'),$path)
-};
-
-(:~
- : Update a file content. @TODO
- :)
-declare
-%rest:POST %rest:path("/vue-poc/api/edit")
-%rest:form-param("url", "{$url}")
-%rest:form-param("data", "{$data}")
-%rest:produces("application/json")
-%output:method("json")   
-function vue-api:edit-post($url as xs:string,$data)   
-{
-  let $path := vue-api:web( $url)=>trace("path ")
-  let $data:=trace($data)
-   return if( file:exists($path))then 
-             let $type:=mt:type($path)
-             let $fetch:=mt:fetch-fn($type("treat-as"))
-             return <json type="object" >
-                        <url>{$url}</url>
-                        <mimetype>{$type?type}</mimetype>
-                        <data>{$fetch($path)}</data> 
-                     </json>
-          else 
-            error(xs:QName('vue-api:raw'),$path)
-};
-
-(:~
- : Returns folder info.
- :)
-declare
-%rest:path("/vue-poc/api/file")
-%rest:query-param("url", "{$url}")
-%rest:produces("application/json")
-%output:method("json")   
-function vue-api:file($url as xs:string)   
-{
-   let $path := vue-api:web( $url)=>trace("vue-api:web ")
-   return if( file:exists($path))then 
-             let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()})
-
-             return <json type="object" >
-                        <folders type="array">
-                        {for $f in $items/c:directory
-                        order by $f/@name/lower-case(.)
-                        return <_ type="object">
-                        <name>{$f/@name/string()}</name>
-                        <icon>folder</icon>
-                         <modified>{$f/@last-modified/string()}</modified>
-                         <size type="number">{$f/@size/string()}</size>
-                        </_>
-                        }
-                        </folders>
-                         <files type="array">
-                        {for $f in $items/c:file
-                        order by $f/@name/lower-case(.)
-                        return <_ type="object">
-                        <name>{$f/@name/string()}</name>
-                         <icon>insert_drive_file</icon>
-                          <modified>{$f/@last-modified/string()}</modified>
-                         <size type="number">{$f/@size/string()}</size>
-                        </_>
-                        }
-                        </files>
-                     </json>
-          else 
-            error(xs:QName('vue-api:raw'),$path)
-};
-
-(:~
- : resolve path relative to basex webpath
- : file("/fred")=>C:\Program Files (x86)\BaseX\webapp\fred
- :)
-declare function vue-api:web($file as xs:string)
-as xs:string
-{
-  let $file:=if(starts-with($file,"/")) then 
-                substring($file,2) 
-            else 
-                error(xs:QName('vue-api:badpath'),"leading slash")
-                 
-  let $webroot:=db:system()/globaloptions/webpath/concat(.,"/")
-  return file:resolve-path($file,$webroot)
-};
-
diff --git a/tools/compile.xq b/tools/compile.xq
index c4b9ab9..6155126 100644
--- a/tools/compile.xq
+++ b/tools/compile.xq
@@ -9,28 +9,40 @@ declare namespace Element="java:ch.digitalfondue.jfiveparse.Element";
 declare namespace Node="java:ch.digitalfondue.jfiveparse.Node";
 
 declare namespace functx = "http://www.functx.com";
-declare variable $SRC:="C:/Users/andy/git/vue-poc/src/vue-poc/templates/";
-declare variable $CORE:="C:/Users/andy/git/vue-poc/src/vue-poc/static/core.js";
-declare variable $FILTERS:="C:/Users/andy/git/vue-poc/src/vue-poc/static/filters.js";
-declare variable $DEST:="C:/Users/andy/git/vue-poc/src/vue-poc/static/app-gen.js";
+declare variable $PROJ:="C:/Users/andy/git/vue-poc/src/vue-poc/";
+declare variable $FEATURES:="features/"=>file:resolve-path($PROJ);
+declare variable $COMPONENTS:="components/"=>file:resolve-path($PROJ);
+declare variable $CORE:="components/core.js"=>file:resolve-path($PROJ);
+declare variable $FILTERS:="components/filters.js"=>file:resolve-path($PROJ);
+declare variable $DEST:="static/app-gen.js"=>file:resolve-path($PROJ);
 
 (:~ 
  : generate javascript vue call from vue files in source folder and core.js
  :)
-declare function local:process($doc)
+declare function local:feature($doc,$isComp as xs:boolean)
 {
-let $tempNode:= html5:getElementFirstByTagName($doc,"template")
-let $template:= Node:getInnerHTML($tempNode)
-let $id  := Element:getAttribute($tempNode,"id")
-let $name:=functx:capitalize-first($id)=>trace("ID")
+let $p:=local:vue-parse($doc)
+let $script:= $p?script=>substring-after("{")
 
-let $script:= html5:getElementFirstByTagName($doc,"script")
-let $script:= Node:getInnerHTML($script)=>substring-after("{")
-let $js:= ``[const `{$name}`=Vue.extend({template:` `{$template}` `,
-`{$script}`
-);
-]``
-return if(empty($id)) then () else $js
+return if(empty($p?id)) then 
+           () 
+       else 
+             ``[const `{functx:capitalize-first($p?id)}`=Vue.extend({template:` `{$p?template}` `,
+      `{$script}`
+      );
+      ]``
+};
+
+declare function local:vue-parse($doc)
+as map(*)
+{
+  let $tempNode:= html5:getElementFirstByTagName($doc,"template")
+  let $template:= Node:getInnerHTML($tempNode)
+  let $id  := Element:getAttribute($tempNode,"id")=>trace("ID")
+
+  let $script:= html5:getElementFirstByTagName($doc,"script")
+  let $script:= Node:getInnerHTML($script)
+  return map{"id":$id,"template":$template,"script":$script}
 };
 
 declare function functx:capitalize-first
@@ -39,11 +51,16 @@ declare function functx:capitalize-first
    concat(upper-case(substring($arg,1,1)), substring($arg,2))
 };
 
-let $files:= fw:directory-list($SRC,map{"include-filter":".*\.vue"})
+let $files:= fw:directory-list($FEATURES,map{"include-filter":".*\.vue"})
              //c:file/@name/resolve-uri(.,base-uri(.))
-let $docs:=$files!(fetch:text(.)=>html5:doc()=>local:process())
+let $feats:=$files!(fetch:text(.)=>html5:doc()=>local:feature(false()))
+
+let $files:= fw:directory-list($COMPONENTS,map{"include-filter":".*\.vue"})
+             //c:file/@name/resolve-uri(.,base-uri(.))
+let $comps:=$files!(fetch:text(.)=>html5:doc()=>local:feature(true()))
+
 let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;"
 return file:write-text($DEST,string-join(($comment,
                                          fetch:text($FILTERS),
-                                         $docs,
+                                         $feats,
                                          fetch:text($CORE))))
\ No newline at end of file