From 4bc20b54398bfa66204fcb976cb1c8989e0a2a37 Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Thu, 17 Aug 2017 16:09:25 +0100
Subject: [PATCH] remove .native

---
 src/vue-poc/components/core.js                |   2 +-
 src/vue-poc/features/collection/files.vue     |  28 ++--
 src/vue-poc/features/edit/edit.vue            |  20 +--
 src/vue-poc/features/eval/eval.vue            |   6 +-
 src/vue-poc/features/images/config.xqm        |   1 +
 src/vue-poc/features/images/image.vue         |  33 +++-
 src/vue-poc/features/images/images.vue        |  25 ++-
 src/vue-poc/features/images/images.xqm        |  19 ++-
 .../images}/pics-01-store-directory.xq        |   6 +-
 .../images}/pics-02-store-meta.xq             |   4 +-
 .../images}/pics-03-store-image.xq            |   2 +-
 .../images}/pics-04-store-thumbs.xq           |  14 +-
 .../features/images/pics-05-set-original.xq   |   4 +
 src/vue-poc/features/job/jobs.vue             |   4 +-
 src/vue-poc/features/login/login.vue          |   2 +-
 src/vue-poc/features/ping/ping.vue            |   4 +-
 src/vue-poc/features/puzzle.vue               |   4 +-
 src/vue-poc/features/select.vue               |   4 +-
 .../features/tasks/model.build/model.vue      |   4 +-
 .../features/tasks/vue-compile/vuecompile.vue |   4 +-
 src/vue-poc/features/tasks/xqdoc/xqdoc.vue    |   2 +-
 src/vue-poc/features/thumbnail/thumbnail.vue  |  12 +-
 src/vue-poc/static/app-gen.js                 | 156 +++++++++++-------
 src/vue-poc/static/app.html                   |   8 +-
 24 files changed, 234 insertions(+), 134 deletions(-)
 rename src/vue-poc/{tasks => features/images}/pics-01-store-directory.xq (76%)
 rename src/vue-poc/{tasks => features/images}/pics-02-store-meta.xq (86%)
 rename src/vue-poc/{tasks => features/images}/pics-03-store-image.xq (88%)
 rename src/vue-poc/{tasks => features/images}/pics-04-store-thumbs.xq (74%)
 create mode 100644 src/vue-poc/features/images/pics-05-set-original.xq

diff --git a/src/vue-poc/components/core.js b/src/vue-poc/components/core.js
index cc7d3c0..acdbe58 100644
--- a/src/vue-poc/components/core.js
+++ b/src/vue-poc/components/core.js
@@ -194,7 +194,7 @@ const app = new Vue({
         }) 
       },
       showAlert(msg){
-        this.alert.msg=msg
+        this.alert.msg=moment().format("MMMM D, YYYY ")+msg
         this.alert.show=true
       }
   },
diff --git a/src/vue-poc/features/collection/files.vue b/src/vue-poc/features/collection/files.vue
index a7975d9..4d58443 100644
--- a/src/vue-poc/features/collection/files.vue
+++ b/src/vue-poc/features/collection/files.vue
@@ -5,19 +5,19 @@
 <v-card>
 
 <v-toolbar light>
-      <v-menu bottom right>
-           <v-btn  icon  slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
-      <v-list>
-          <v-list-tile v-for="item in crumbs" :key="item">
-            <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
-          </v-list-tile>
-      </v-list>
-    </v-menu>
-    <v-toolbar-title>{{ url }}</v-toolbar-title>
-   
+    <v-btn icon :to="{query: { url: '/' }}">
+     <v-icon >{{icon}}</v-icon>
+     </v-btn>  
+    <v-toolbar-title>
+    <v-breadcrumbs>
+      <v-breadcrumbs-item v-for="item in crumbs" :key="item" :to="{ query: { url: '/' + item + '/' }}">
+    {{ item }}
+    </v-breadcrumbs-item>
+    </v-breadcrumbs>
+    </v-toolbar-title>
     <v-spacer></v-spacer>
       <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
-   hide-details single-line  @keyup.native.enter="filter"></v-text-field>
+   hide-details single-line  @keyup.enter="filter"></v-text-field>
    
      <v-btn icon @click="alert('todo')">     
     <v-icon>view_module</v-icon>
@@ -40,7 +40,7 @@
 	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon ripple @click.native.stop="info(item)">
+	          <v-btn icon ripple @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -57,7 +57,7 @@
 	           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon ripple @click.native.stop="info(item)">
+	          <v-btn icon ripple @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -69,7 +69,7 @@
        <v-toolbar >
       <v-card-title >{{selected.name}}</v-card-title>
       <v-spacer></v-spacer>    
-       <v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+       <v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-toolbar>
     <v-card-text> Things to do with  </v-card-text>
     <v-card-actions> 
diff --git a/src/vue-poc/features/edit/edit.vue b/src/vue-poc/features/edit/edit.vue
index 4e6af33..da55982 100644
--- a/src/vue-poc/features/edit/edit.vue
+++ b/src/vue-poc/features/edit/edit.vue
@@ -3,7 +3,7 @@
 <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-btn flat  @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-snackbar>
 <v-card>
 
@@ -28,7 +28,7 @@
 <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-chip   @click="acecmd('goToNextError')"
           v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
            >
           <v-avatar  class="green ">{{annotations && annotations.info}}</v-avatar>
@@ -38,27 +38,27 @@
               <v-icon black >navigate_next</v-icon>
            </v-avatar>
           </v-chip>
-   <v-btn  icon @click.native="acecmd('outline')">
+   <v-btn  icon @click="acecmd('outline')">
       <v-icon>star</v-icon>
     </v-btn>
 
   
-   <v-btn  icon @click.native="acecmd('foldall')">
+   <v-btn  icon @click="acecmd('foldall')">
       <v-icon>vertical_align_center</v-icon>
     </v-btn>
     
-    <v-btn  icon @click.native="wrap=!wrap">
+    <v-btn  icon @click="wrap=!wrap">
       <v-icon>wrap_text</v-icon>
     </v-btn>
     
-   <v-btn  icon @click.native="save()">
+   <v-btn  icon @click="save()">
       <v-icon>file_upload</v-icon>
     </v-btn>
     
-    <v-btn  icon @click.native="beautify()">
+    <v-btn  icon @click="beautify()">
       <v-icon>format_align_center</v-icon>
     </v-btn>
-    <v-btn  icon @click.native="clearDialog = true">
+    <v-btn  icon @click="clearDialog = true">
       <v-icon>delete</v-icon>
     </v-btn>
         <v-menu left  transition="v-fade-transition">
@@ -99,8 +99,8 @@
 		      <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-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
+		      <v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
 		    </v-card-actions>
 		    </v-card>
 		</v-dialog>
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
index 8c9a0ef..9acb145 100644
--- a/src/vue-poc/features/eval/eval.vue
+++ b/src/vue-poc/features/eval/eval.vue
@@ -4,12 +4,12 @@
   <v-card >
 
      <v-toolbar>
-      <v-btn @click.native="run()">Run</v-btn>
-    <v-btn @click.native="submit()">
+      <v-btn @click="run()">Run</v-btn>
+    <v-btn @click="submit()">
     <v-icon>play_circle_outline</v-icon>
     Submit</v-btn>
     <v-spacer></v-spacer>
-     <v-btn @click.native="imports()">
+     <v-btn @click="imports()">
     <v-icon>play_circle_outline</v-icon>
     Imports</v-btn>
      <v-menu :nudge-width="100">
diff --git a/src/vue-poc/features/images/config.xqm b/src/vue-poc/features/images/config.xqm
index b4d61c7..f25f134 100644
--- a/src/vue-poc/features/images/config.xqm
+++ b/src/vue-poc/features/images/config.xqm
@@ -2,6 +2,7 @@ xquery version "3.1";
 (:~ data locations for image feature :)
 module namespace cfg = "quodatum:media.image.configure";
 
+declare variable $cfg:DB:="vue-poc";
 declare variable $cfg:IMAGEDIR:="P:/pictures/";
 declare variable $cfg:THUMBDIR:="C:/tmp/";
 
diff --git a/src/vue-poc/features/images/image.vue b/src/vue-poc/features/images/image.vue
index 1bbefac..582a928 100644
--- a/src/vue-poc/features/images/image.vue
+++ b/src/vue-poc/features/images/image.vue
@@ -5,22 +5,47 @@
  -->
 <template id="image">
  <v-container fluid>
- Image: {{ id }}
- doc <pre>{{ image && image.doc }}</pre>
+  <v-card >
+    <v-toolbar class="orange darken-1">
+     <v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title >
+      <span class="white--text">Image: {{ id }}</span>      
+    </v-card-title>
+    <v-spacer></v-spacer> 
+    <a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
+    </v-toolbar>
+    <v-card-text>
+ <v-layout>
+		 <v-flex xs5>
+		<pre style="overflow:auto;">{{ image.doc }}</pre>
+		 </v-flex>
+		 
+		 <v-flex xs7 >
+		 <iframe :src="path" style="border:0;width:100%;height:100%;min-height:400px;">image</iframe>
+		 </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
  </v-container>
 </template>
 
 <script>{  
   props:["id"],
   data: ()=>( {
-    image:null
+    image:{},
+    loaded:false
   }),
+  computed: {
+    path(){
+    return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null
+    }
+},
   created:function(){
    var id=this._props.id
    HTTP.get("images/list/"+id)
    .then(r=>{
-     console.log(r.data)
      this.image=r.data
+     this.loaded=true
      })
   }
     }
diff --git a/src/vue-poc/features/images/images.vue b/src/vue-poc/features/images/images.vue
index a941051..482fa3a 100644
--- a/src/vue-poc/features/images/images.vue
+++ b/src/vue-poc/features/images/images.vue
@@ -14,7 +14,9 @@
         v-if="query.keyword || query.from || query.until">
             <v-icon>clear</v-icon>
            </v-btn>
+           <v-chip class="primary white--text">{{ total }}</v-chip>
            <v-spacer></v-spacer>
+
            <v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
             Page:{{ query.page+1 }}
           <v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary>
@@ -56,7 +58,7 @@
  <v-navigation-drawer left persistent v-model="showFilter" :disable-route-watcher="true">
          <v-card>
           <v-toolbar class="green white--text">
-                <v-toolbar-title >Set filter...</v-toolbar-title>
+                <v-toolbar-title >Show images with...</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-btn  @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
           </v-toolbar>
@@ -159,7 +161,8 @@
            from:null,
            until:null,
            keyword:null
-    }, 
+    },
+    total:null,
     showFilter:false,
     busy:false,
     menu2:false,
@@ -174,10 +177,14 @@
     },
     getImages(){
       this.busy=true
+      var t0 = performance.now();
       HTTP.get("images/list",{params:this.query})
       .then(r=>{
         this.busy=false
+        this.total=r.data.total
         this.images=r.data.items
+        var t0 = performance.now()-t0;
+        console.log("Time: ",t0)
         }) 
     },
     clear(){
@@ -190,6 +197,12 @@
       this.selitem=image;
       this.showInfo=true;
     },
+    isChanged(vnew,vold){
+      if(vnew.keyword != vold.keyword) return true
+      if(vnew.from != vold.from) return true
+      if(vnew.until != vold.until) return true
+      return false
+    },
     go(image){
       this.$router.push({ name: 'image', params: { id: image.id }})
     }
@@ -198,12 +211,16 @@
   computed:{
     qtext(){
           var k=this.query.keyword,f=this.query.from, u=this.query.until
-          return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
+          var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
+          return t?t:"(All)"
     }
   },
   watch:{
       "query":{
-        handler:function(v){
+        handler:function(vnew,vold){
+          var b=this.isChanged(vnew,vold)
+          console.log("watch",b,vnew,vold)
+          if(b) this.query.page=0
           this.$router.push({  query: this.query })
           },
         deep:true
diff --git a/src/vue-poc/features/images/images.xqm b/src/vue-poc/features/images/images.xqm
index cb4b38e..bf43b8f 100644
--- a/src/vue-poc/features/images/images.xqm
+++ b/src/vue-poc/features/images/images.xqm
@@ -14,7 +14,7 @@ declare variable $vue-api:entity:=$entity:list("thumbnail");
  : do a thumbnail
  :)
 declare
-%rest:GET %rest:path("/vue-poc/api/images/list/{ $id }")
+%rest:GET %rest:path("/vue-poc/api/images/list/{$id}")
 %rest:produces("application/json")
 %output:method("json")   
 function vue-api:id( $id as xs:integer)   
@@ -43,12 +43,15 @@ $keyword
 {
  let $rowsPerPage:=24
  let $images:=$vue-api:entity("data")()
+ let $images:=$images[not(@original)]
  let $images:=if($from)then  $images[datetaken ge $from] else $images
  let $images:=if($until)then  $images[datetaken le $until] else $images
  let $images:=if($keyword)then  $images[keywords/keyword = $keyword] else $images
+ let $total:=count($images)
  let $images:=subsequence($images,1+$rowsPerPage*$page,$rowsPerPage)
  
  return <json   type="object" >
+            <total type="number">{ $total }</total>
             <items type="array">{
             for $f in $images
             return <_ type="object">
@@ -88,10 +91,22 @@ let $name:=$vue-api:entity?access?name($image)
 let $thumb:= $cfg:THUMBDIR || $path
 let $thumb:=if(file:exists($thumb)) then $thumb else $cfg:THUMBDIR || "missing.jpg"
 return   ( <id>{$id}</id>
-          ,<name>{$name}</name>
+         ,<name>{$name}</name>
+         ,<path>{$path}</path>
          ,<data>{fetch:binary($thumb)}</data>
          ,<mime>{fetch:content-type($thumb)}</mime>)
 };
 
+declare 
+%rest:GET %rest:path("/vue-poc/api/images/list/{ $id }/image")
+function vue-api:rawimage($id as xs:integer)
+{
+  let $image as element(image):=db:open-id("vue-poc",$id)
+  let $path:=$cfg:IMAGEDIR || $vue-api:entity?access?path($image)
+  return (
+    web:response-header(map { 'media-type': web:content-type($path) }),
+    file:read-binary($path)
+  )
+  };
 
 
diff --git a/src/vue-poc/tasks/pics-01-store-directory.xq b/src/vue-poc/features/images/pics-01-store-directory.xq
similarity index 76%
rename from src/vue-poc/tasks/pics-01-store-directory.xq
rename to src/vue-poc/features/images/pics-01-store-directory.xq
index 0420f06..7f0ba21 100644
--- a/src/vue-poc/tasks/pics-01-store-directory.xq
+++ b/src/vue-poc/features/images/pics-01-store-directory.xq
@@ -1,14 +1,16 @@
 (:~ 
 : create xml file list by scanning $SRC and write to vue-poc 
 :)
+import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
 import module namespace fw="quodatum:file.walker";
 declare namespace c="http://www.w3.org/ns/xproc-step";
-declare variable $SRC:="P:/pictures/Pictures/";
+
 (: declare variable $DEST:="c:\tmp\pics2.xml"; :)
 declare variable $DEST:="/pics.xml";
 declare %updating function local:put($data,$path){
 db:replace("vue-poc",$path,$data)
 };
+
 let $opt:=map{"include-info":true()}
-let $files:=fw:directory-list($SRC,$opt)
+let $files:=fw:directory-list($cfg:IMAGEDIR,$opt)
 return $files=>local:put($DEST)
\ No newline at end of file
diff --git a/src/vue-poc/tasks/pics-02-store-meta.xq b/src/vue-poc/features/images/pics-02-store-meta.xq
similarity index 86%
rename from src/vue-poc/tasks/pics-02-store-meta.xq
rename to src/vue-poc/features/images/pics-02-store-meta.xq
index 3947281..b3404e1 100644
--- a/src/vue-poc/tasks/pics-02-store-meta.xq
+++ b/src/vue-poc/features/images/pics-02-store-meta.xq
@@ -3,10 +3,10 @@
  : done in batches of 1000
  : @return initial number of missing docs  
 :)
+import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
 import module namespace imgmeta = "expkg-zone58:image.metadata" ;
 declare namespace c="http://www.w3.org/ns/xproc-step";
 declare variable $DB:="vue-poc";
-declare variable $IMAGEDIR:="P:/pictures/";
 
 let $done:=uri-collection("vue-poc/Pictures")
 let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")] 
@@ -15,7 +15,7 @@ let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
 
 let $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
 return (for $f in subsequence($todo,1, 1000)
-        let $spath:=$IMAGEDIR || $f
+        let $spath:=$cfg:IMAGEDIR || $f
         let $dbpath:=$f || "/meta.xml"
         let $meta:=imgmeta:read($spath)
         return  db:replace($DB,$dbpath,$meta),
diff --git a/src/vue-poc/tasks/pics-03-store-image.xq b/src/vue-poc/features/images/pics-03-store-image.xq
similarity index 88%
rename from src/vue-poc/tasks/pics-03-store-image.xq
rename to src/vue-poc/features/images/pics-03-store-image.xq
index 9a9ecef..6c940e6 100644
--- a/src/vue-poc/tasks/pics-03-store-image.xq
+++ b/src/vue-poc/features/images/pics-03-store-image.xq
@@ -3,7 +3,7 @@
  : <metadata/> -> <image/> 
  :)
 import module namespace metadata = 'expkg-zone58:image.metadata';
-
+import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
 for $meta in collection("/vue-poc/Pictures")/metadata
   let $loc:=db:path($meta)=>tokenize("/")
   let $name:=$loc[count($loc)-1]
diff --git a/src/vue-poc/tasks/pics-04-store-thumbs.xq b/src/vue-poc/features/images/pics-04-store-thumbs.xq
similarity index 74%
rename from src/vue-poc/tasks/pics-04-store-thumbs.xq
rename to src/vue-poc/features/images/pics-04-store-thumbs.xq
index ee47155..3c63c1d 100644
--- a/src/vue-poc/tasks/pics-04-store-thumbs.xq
+++ b/src/vue-poc/features/images/pics-04-store-thumbs.xq
@@ -3,21 +3,15 @@
  : @return initial number of missing docs  
 :)
 import module namespace t="expkg-zone58:image.thumbnailator";
-
+import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
 declare namespace c="http://www.w3.org/ns/xproc-step";
 declare variable $DB:="vue-poc";
-declare variable $IMAGEDIR:="P:/pictures/";
-declare variable $THUMBDIR:="C:/tmp/";
 
-(:
-declare variable $IMAGEDIR:="/mnt/sda1/pictures/";
-declare variable $THUMBDIR:="/mnt/sda1/pictures/thumbs/";
-:)
 
 declare %updating function local:store-thumb($f as xs:string)
 {
-  let $src:=$IMAGEDIR || trace($f)
-  let $trg:= $THUMBDIR || $f
+  let $src:=$cfg:IMAGEDIR || trace($f)
+  let $trg:= $cfg:THUMBDIR || $f
   return fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
 };
 (:~  create folder if missing) :)
@@ -36,7 +30,7 @@ let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg"
 
 let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
 let $relpath:=filter($relpath,function($f){ 
-                                not(file:exists($THUMBDIR || $f)) and file:exists($IMAGEDIR || $f) 
+                                not(file:exists($cfg:IMAGEDIR || $f)) and file:exists($cfg:IMAGEDIR || $f) 
                               })
 let $todo:= $relpath=>subsequence(1, 400)
 
diff --git a/src/vue-poc/features/images/pics-05-set-original.xq b/src/vue-poc/features/images/pics-05-set-original.xq
new file mode 100644
index 0000000..7819d52
--- /dev/null
+++ b/src/vue-poc/features/images/pics-05-set-original.xq
@@ -0,0 +1,4 @@
+(: set original:)
+for $i in collection("/vue-poc/Pictures")/image
+where $i[file/@path=>contains('original')]
+return  insert node attribute { 'original' } { true() } into $i
\ No newline at end of file
diff --git a/src/vue-poc/features/job/jobs.vue b/src/vue-poc/features/job/jobs.vue
index c9d0805..ee43b1c 100644
--- a/src/vue-poc/features/job/jobs.vue
+++ b/src/vue-poc/features/job/jobs.vue
@@ -5,14 +5,14 @@
        <v-btn
       light icon
       :loading="loading"
-      @click.native="getJobs()"
+      @click="getJobs()"
       :disabled="loading"
     >
     <v-icon>refresh</v-icon>
     </v-btn>
     
      <v-btn  
-      @click.native="stop()"
+      @click="stop()"
       :disabled="noSelection"
     >Stop</v-btn>
     
diff --git a/src/vue-poc/features/login/login.vue b/src/vue-poc/features/login/login.vue
index dfa85e5..f7b55e2 100644
--- a/src/vue-poc/features/login/login.vue
+++ b/src/vue-poc/features/login/login.vue
@@ -33,7 +33,7 @@
         
     <v-divider></v-divider>
     <v-card-actions class="blue-grey darken-1 mt-0">
-       <v-btn primary @click.native="go()">Continue</v-btn>
+       <v-btn primary @click="go()">Continue</v-btn>
        <v-spacer></v-spacer>
     </v-card-actions>
 </v-card>
diff --git a/src/vue-poc/features/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
index b37029e..dace44e 100644
--- a/src/vue-poc/features/ping/ping.vue
+++ b/src/vue-poc/features/ping/ping.vue
@@ -28,7 +28,7 @@
       
           <tr>
               <td>
-                   <v-btn     @click.native="get()" >Get count</v-btn>
+                   <v-btn     @click="get()" >Get count</v-btn>
                </td>
                <td>
      <v-checkbox  v-model="repeat.get" ></v-checkbox>
@@ -57,7 +57,7 @@
           
             <tr>
           <td>
-             <v-btn    @click.native="update()" >Update count</v-btn>
+             <v-btn    @click="update()" >Update count</v-btn>
           </td>
           
           <td>
diff --git a/src/vue-poc/features/puzzle.vue b/src/vue-poc/features/puzzle.vue
index 8557ccc..d52b677 100644
--- a/src/vue-poc/features/puzzle.vue
+++ b/src/vue-poc/features/puzzle.vue
@@ -6,7 +6,7 @@
   <table>
    <tr v-for="(item, row) in grid">
     <td v-for="(cell,col) in item" style="width:3em;" >
-    <v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
+    <v-btn @click="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
     </td>
    </tr>
   </table>
@@ -14,7 +14,7 @@
    <table>
    <tr v-for="(item, row) in grid">
     <td v-for="(cell,col) in item" style="width:50px;height:50px;" >
-    <v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">
+    <v-btn @click="click(row,col)" :disabled="disabled(row,col)">
     <img :src="src(row,col)" style="width:50px;height:50px;"/>
 </v-btn>
     </td>
diff --git a/src/vue-poc/features/select.vue b/src/vue-poc/features/select.vue
index 4f7a156..e1c8ed8 100644
--- a/src/vue-poc/features/select.vue
+++ b/src/vue-poc/features/select.vue
@@ -7,7 +7,7 @@
       <span class="white--text">Selection</span>     
     </v-card-title>
     <v-spacer></v-spacer>    
-       <v-btn  flat icon @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
+       <v-btn  flat icon @click="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
   </v-toolbar>
   <qd-panel :show="showInfo">
   
@@ -34,7 +34,7 @@
        <v-card-actions >
       <v-toolbar-title >test</v-toolbar-title>
       <v-spacer></v-spacer>    
-       <v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+       <v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-card-actions>
     <v-card-text> blah blah protocol:  </v-card-text> 
     </v-card>
diff --git a/src/vue-poc/features/tasks/model.build/model.vue b/src/vue-poc/features/tasks/model.build/model.vue
index 7efb8cb..76e0ef4 100644
--- a/src/vue-poc/features/tasks/model.build/model.vue
+++ b/src/vue-poc/features/tasks/model.build/model.vue
@@ -8,7 +8,7 @@
       <span class="white--text">Generate <code>model.gen.xqm</code></span>      
     </v-card-title>
     <v-spacer></v-spacer>
-     <v-btn primary @click.native="submit()"   :loading="waiting"
+     <v-btn primary @click="submit()"   :loading="waiting"
       :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
@@ -42,7 +42,7 @@
       :error="snackbar.context === 'error'"
     >
       {{ snackbar.msg }}
-      <v-btn dark flat @click.native="snackbar.show = false">Close</v-btn>
+      <v-btn dark flat @click="snackbar.show = false">Close</v-btn>
     </v-snackbar>
   </v-card>
  </v-container>
diff --git a/src/vue-poc/features/tasks/vue-compile/vuecompile.vue b/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
index 9909139..f0541e6 100644
--- a/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
+++ b/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
@@ -8,7 +8,7 @@
       <span class="white--text">compile</span>      
     </v-card-title>
       <v-spacer></v-spacer>
-     <v-btn primary @click.native="submit()"   :loading="waiting"
+     <v-btn primary @click="submit()"   :loading="waiting"
       :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
@@ -37,7 +37,7 @@
       :error="snackbar.context === 'error'"
     >
       {{ snackbar.msg }}
-      <v-btn dark flat @click.native="snackbar.show = false">Close</v-btn>
+      <v-btn dark flat @click="snackbar.show = false">Close</v-btn>
     </v-snackbar>
   </v-card>
  </v-container>
diff --git a/src/vue-poc/features/tasks/xqdoc/xqdoc.vue b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
index 3f6daf9..321b81d 100644
--- a/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
+++ b/src/vue-poc/features/tasks/xqdoc/xqdoc.vue
@@ -8,7 +8,7 @@
       <span class="white--text">Task: Generate <code>xqdoc</code></span>      
     </v-card-title>
       <v-spacer></v-spacer>
-     <v-btn primary @click.native="submit()"   :loading="waiting"
+     <v-btn primary @click="submit()"   :loading="waiting"
       :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
diff --git a/src/vue-poc/features/thumbnail/thumbnail.vue b/src/vue-poc/features/thumbnail/thumbnail.vue
index 84314bf..ed50a06 100644
--- a/src/vue-poc/features/thumbnail/thumbnail.vue
+++ b/src/vue-poc/features/thumbnail/thumbnail.vue
@@ -20,7 +20,7 @@
               required
              ></v-text-field>
     </v-card>
-        <v-btn primary @click.native="step = 2">Next</v-btn>
+        <v-btn primary @click="step = 2">Next</v-btn>
   </v-stepper-content>
   
   <v-stepper-content step="2" non-linear>
@@ -30,9 +30,9 @@
 		></vue-ace>
 		</v-card>
    
-    <v-btn flat @click.native="step -= 1">Back</v-btn>
-    <v-btn primary @click.native="validate()">Validate</v-btn>
-     <v-btn primary @click.native="step = 3">Next</v-btn>  
+    <v-btn flat @click="step -= 1">Back</v-btn>
+    <v-btn primary @click="validate()">Validate</v-btn>
+     <v-btn primary @click="step = 3">Next</v-btn>  
   </v-stepper-content>
 
   <v-stepper-content step="3" non-linear>
@@ -40,8 +40,8 @@
     output todo
     </v-card>
 
-     <v-btn flat @click.native="step -= 1">Back</v-btn>
-     <v-btn primary @click.native="go()">go</v-btn>
+     <v-btn flat @click="step -= 1">Back</v-btn>
+     <v-btn primary @click="go()">go</v-btn>
   </v-stepper-content>
 </v-stepper>
  </v-container>
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 5b517dc..af264af 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-08-15T22:45:31.814+01:00
+// generated 2017-08-17T16:08:17.382+01:00
 
Vue.component('qd-link',{template:` 
  <a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
  `,
@@ -258,18 +258,18 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 <v-card>
 
 <v-toolbar light="">
-      <v-menu bottom="" right="">
-           <v-btn icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
-      <v-list>
-          <v-list-tile v-for="item in crumbs" :key="item">
-            <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
-          </v-list-tile>
-      </v-list>
-    </v-menu>
-    <v-toolbar-title>{{ url }}</v-toolbar-title>
-   
+    <v-btn icon="" :to="{query: { url: '/' }}">
+     <v-icon>{{icon}}</v-icon>
+     </v-btn>  
+    <v-toolbar-title>
+    <v-breadcrumbs>
+      <v-breadcrumbs-item v-for="item in crumbs" :key="item" :to="{ query: { url: '/' + item + '/' }}">
+    {{ item }}
+    </v-breadcrumbs-item>
+    </v-breadcrumbs>
+    </v-toolbar-title>
     <v-spacer></v-spacer>
-      <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.native.enter="filter"></v-text-field>
+      <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="filter"></v-text-field>
    
      <v-btn icon="" @click="alert('todo')">     
     <v-icon>view_module</v-icon>
@@ -292,7 +292,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 	          <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon="" ripple="" @click.native.stop="info(item)">
+	          <v-btn icon="" ripple="" @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -309,7 +309,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 	           <v-list-tile-sub-title>modified:  {{item.modified | formatDate}} size:  {{item.size|readablizeBytes }}</v-list-tile-sub-title>
 	        </v-list-tile-content>
 	        <v-list-tile-action>
-	          <v-btn icon="" ripple="" @click.native.stop="info(item)">
+	          <v-btn icon="" ripple="" @click.stop="info(item)">
 	            <v-icon class="grey--text text--lighten-1">info</v-icon>
 	          </v-btn>
 	        </v-list-tile-action>
@@ -321,7 +321,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
        <v-toolbar>
       <v-card-title>{{selected.name}}</v-card-title>
       <v-spacer></v-spacer>    
-       <v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+       <v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-toolbar>
     <v-card-text> Things to do with  </v-card-text>
     <v-card-actions> 
@@ -459,7 +459,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 <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-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-snackbar>
 <v-card>
 
@@ -484,7 +484,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 <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-chip @click="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>    
@@ -492,27 +492,27 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
               <v-icon black="">navigate_next</v-icon>
            </v-avatar>
           </v-chip>
-   <v-btn icon="" @click.native="acecmd('outline')">
+   <v-btn icon="" @click="acecmd('outline')">
       <v-icon>star</v-icon>
     </v-btn>
 
   
-   <v-btn icon="" @click.native="acecmd('foldall')">
+   <v-btn icon="" @click="acecmd('foldall')">
       <v-icon>vertical_align_center</v-icon>
     </v-btn>
     
-    <v-btn icon="" @click.native="wrap=!wrap">
+    <v-btn icon="" @click="wrap=!wrap">
       <v-icon>wrap_text</v-icon>
     </v-btn>
     
-   <v-btn icon="" @click.native="save()">
+   <v-btn icon="" @click="save()">
       <v-icon>file_upload</v-icon>
     </v-btn>
     
-    <v-btn icon="" @click.native="beautify()">
+    <v-btn icon="" @click="beautify()">
       <v-icon>format_align_center</v-icon>
     </v-btn>
-    <v-btn icon="" @click.native="clearDialog = true">
+    <v-btn icon="" @click="clearDialog = true">
       <v-icon>delete</v-icon>
     </v-btn>
         <v-menu left="" transition="v-fade-transition">
@@ -553,8 +553,8 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 		      <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-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
+		      <v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
 		    </v-card-actions>
 		    </v-card>
 		</v-dialog>
@@ -730,12 +730,12 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   <v-card>
 
      <v-toolbar>
-      <v-btn @click.native="run()">Run</v-btn>
-    <v-btn @click.native="submit()">
+      <v-btn @click="run()">Run</v-btn>
+    <v-btn @click="submit()">
     <v-icon>play_circle_outline</v-icon>
     Submit</v-btn>
     <v-spacer></v-spacer>
-     <v-btn @click.native="imports()">
+     <v-btn @click="imports()">
     <v-icon>play_circle_outline</v-icon>
     Imports</v-btn>
      <v-menu :nudge-width="100">
@@ -899,21 +899,46 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       );
       const Image=Vue.extend({template:` 
  <v-container fluid="">
- Image: {{ id }}
- doc <pre>{{ image &amp;&amp; image.doc }}</pre>
+  <v-card>
+    <v-toolbar class="orange darken-1">
+     <v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title>
+      <span class="white--text">Image: {{ id }}</span>      
+    </v-card-title>
+    <v-spacer></v-spacer> 
+    <a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
+    </v-toolbar>
+    <v-card-text>
+ <v-layout>
+		 <v-flex xs5="">
+		<pre style="overflow:auto;">{{ image.doc }}</pre>
+		 </v-flex>
+		 
+		 <v-flex xs7="">
+		 <iframe :src="path" style="border:0;width:100%;height:100%;min-height:400px;">image</iframe>
+		 </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
  </v-container>
  `,
         
   props:["id"],
   data: ()=>( {
-    image:null
+    image:{},
+    loaded:false
   }),
+  computed: {
+    path(){
+    return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null
+    }
+},
   created:function(){
    var id=this._props.id
    HTTP.get("images/list/"+id)
    .then(r=>{
-     console.log(r.data)
      this.image=r.data
+     this.loaded=true
      })
   }
     }
@@ -929,7 +954,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
         <v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
             <v-icon>clear</v-icon>
            </v-btn>
+           <v-chip class="primary white--text">{{ total }}</v-chip>
            <v-spacer></v-spacer>
+
            <v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
             Page:{{ query.page+1 }}
           <v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary="">
@@ -966,7 +993,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
  <v-navigation-drawer left="" persistent="" v-model="showFilter" :disable-route-watcher="true">
          <v-card>
           <v-toolbar class="green white--text">
-                <v-toolbar-title>Set filter...</v-toolbar-title>
+                <v-toolbar-title>Show images with...</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
           </v-toolbar>
@@ -1033,7 +1060,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
            from:null,
            until:null,
            keyword:null
-    }, 
+    },
+    total:null,
     showFilter:false,
     busy:false,
     menu2:false,
@@ -1048,10 +1076,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     },
     getImages(){
       this.busy=true
+      var t0 = performance.now();
       HTTP.get("images/list",{params:this.query})
       .then(r=>{
         this.busy=false
+        this.total=r.data.total
         this.images=r.data.items
+        var t0 = performance.now()-t0;
+        console.log("Time: ",t0)
         }) 
     },
     clear(){
@@ -1064,6 +1096,12 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       this.selitem=image;
       this.showInfo=true;
     },
+    isChanged(vnew,vold){
+      if(vnew.keyword != vold.keyword) return true
+      if(vnew.from != vold.from) return true
+      if(vnew.until != vold.until) return true
+      return false
+    },
     go(image){
       this.$router.push({ name: 'image', params: { id: image.id }})
     }
@@ -1072,12 +1110,16 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   computed:{
     qtext(){
           var k=this.query.keyword,f=this.query.from, u=this.query.until
-          return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
+          var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
+          return t?t:"(All)"
     }
   },
   watch:{
       "query":{
-        handler:function(v){
+        handler:function(vnew,vold){
+          var b=this.isChanged(vnew,vold)
+          console.log("watch",b,vnew,vold)
+          if(b) this.query.page=0
           this.$router.push({  query: this.query })
           },
         deep:true
@@ -1108,11 +1150,11 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       const Job=Vue.extend({template:` 
   <v-card>
    <v-toolbar light="">
-       <v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading">
+       <v-btn light="" icon="" :loading="loading" @click="getJobs()" :disabled="loading">
     <v-icon>refresh</v-icon>
     </v-btn>
     
-     <v-btn @click.native="stop()" :disabled="noSelection">Stop</v-btn>
+     <v-btn @click="stop()" :disabled="noSelection">Stop</v-btn>
     
       <v-spacer></v-spacer>
       <v-text-field append-icon="search" label="Filter jobs" single-line="" hide-details="" v-model="search"></v-text-field>
@@ -1204,7 +1246,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
         
     <v-divider></v-divider>
     <v-card-actions class="blue-grey darken-1 mt-0">
-       <v-btn primary="" @click.native="go()">Continue</v-btn>
+       <v-btn primary="" @click="go()">Continue</v-btn>
        <v-spacer></v-spacer>
     </v-card-actions>
 </v-card>
@@ -1278,7 +1320,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       
           <tr>
               <td>
-                   <v-btn @click.native="get()">Get count</v-btn>
+                   <v-btn @click="get()">Get count</v-btn>
                </td>
                <td>
      <v-checkbox v-model="repeat.get"></v-checkbox>
@@ -1307,7 +1349,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
           
             <tr>
           <td>
-             <v-btn @click.native="update()">Update count</v-btn>
+             <v-btn @click="update()">Update count</v-btn>
           </td>
           
           <td>
@@ -1397,7 +1439,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
   <table>
    <tbody><tr v-for="(item, row) in grid">
     <td v-for="(cell,col) in item" style="width:3em;">
-    <v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
+    <v-btn @click="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
     </td>
    </tr>
   </tbody></table>
@@ -1405,7 +1447,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
    <table>
    <tbody><tr v-for="(item, row) in grid">
     <td v-for="(cell,col) in item" style="width:50px;height:50px;">
-    <v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">
+    <v-btn @click="click(row,col)" :disabled="disabled(row,col)">
     <img :src="src(row,col)" style="width:50px;height:50px;">
 </v-btn>
     </td>
@@ -1494,7 +1536,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       <span class="white--text">Selection</span>     
     </v-card-title>
     <v-spacer></v-spacer>    
-       <v-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
+       <v-btn flat="" icon="" @click="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
   </v-toolbar>
   <qd-panel :show="showInfo">
   
@@ -1519,7 +1561,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
        <v-card-actions>
       <v-toolbar-title>test</v-toolbar-title>
       <v-spacer></v-spacer>    
-       <v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
+       <v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-card-actions>
     <v-card-text> blah blah protocol:  </v-card-text> 
     </v-card>
@@ -1753,7 +1795,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       <span class="white--text">Generate <code>model.gen.xqm</code></span>      
     </v-card-title>
     <v-spacer></v-spacer>
-     <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
+     <v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
     </v-toolbar>
@@ -1778,7 +1820,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
  
       <v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
       {{ snackbar.msg }}
-      <v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
+      <v-btn dark="" flat="" @click="snackbar.show = false">Close</v-btn>
     </v-snackbar>
   </v-card>
  </v-container>
@@ -1851,7 +1893,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       <span class="white--text">compile</span>      
     </v-card-title>
       <v-spacer></v-spacer>
-     <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
+     <v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
     </v-toolbar>
@@ -1873,7 +1915,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
    
       <v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
       {{ snackbar.msg }}
-      <v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
+      <v-btn dark="" flat="" @click="snackbar.show = false">Close</v-btn>
     </v-snackbar>
   </v-card>
  </v-container>
@@ -1919,7 +1961,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       <span class="white--text">Task: Generate <code>xqdoc</code></span>      
     </v-card-title>
       <v-spacer></v-spacer>
-     <v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
+     <v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
       <v-icon>play_circle_outline</v-icon>
       Run</v-btn>
     </v-toolbar>
@@ -2008,7 +2050,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
     <v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required=""></v-text-field>
     </v-card>
-        <v-btn primary="" @click.native="step = 2">Next</v-btn>
+        <v-btn primary="" @click="step = 2">Next</v-btn>
   </v-stepper-content>
   
   <v-stepper-content step="2" non-linear="">
@@ -2016,9 +2058,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true" v-on:change-content="onChange"></vue-ace>
 		</v-card>
    
-    <v-btn flat="" @click.native="step -= 1">Back</v-btn>
-    <v-btn primary="" @click.native="validate()">Validate</v-btn>
-     <v-btn primary="" @click.native="step = 3">Next</v-btn>  
+    <v-btn flat="" @click="step -= 1">Back</v-btn>
+    <v-btn primary="" @click="validate()">Validate</v-btn>
+     <v-btn primary="" @click="step = 3">Next</v-btn>  
   </v-stepper-content>
 
   <v-stepper-content step="3" non-linear="">
@@ -2026,8 +2068,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     output todo
     </v-card>
 
-     <v-btn flat="" @click.native="step -= 1">Back</v-btn>
-     <v-btn primary="" @click.native="go()">go</v-btn>
+     <v-btn flat="" @click="step -= 1">Back</v-btn>
+     <v-btn primary="" @click="go()">go</v-btn>
   </v-stepper-content>
 </v-stepper>
  </v-container>
@@ -2300,7 +2342,7 @@ const app = new Vue({
         }) 
       },
       showAlert(msg){
-        this.alert.msg=msg
+        this.alert.msg=moment().format("MMMM D, YYYY ")+msg
         this.alert.show=true
       }
   },
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 3f7bb46..44cba1c 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -50,7 +50,7 @@
               <v-list-tile-title>Vue PoC</v-list-tile-title>
             </v-list-tile-content>
             <v-list-tile-action>
-              <v-btn icon @click.native.stop="mini = !mini">
+              <v-btn icon @click.stop="mini = !mini">
                 <v-icon>chevron_left</v-icon>
               </v-btn>
             </v-list-tile-action>
@@ -61,11 +61,11 @@
  </v-navigation-drawer>
   
  <v-toolbar class="indigo" dark >
-  <v-toolbar-side-icon @click.native.stop="drawer = !drawer"  ></v-toolbar-side-icon>  
+  <v-toolbar-side-icon @click.stop="drawer = !drawer"  ></v-toolbar-side-icon>  
   <v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q"
-   hide-details single-line dark @keyup.native.enter="search"></v-text-field>
+   hide-details single-line dark @keyup.enter="search"></v-text-field>
    <v-menu left  transition="v-fade-transition">
       <v-btn dark icon slot="activator">
         {{$auth.user}}
@@ -85,7 +85,7 @@
 </v-toolbar>
  <main> 
  <v-alert error value="true" dismissible v-model="alert.show">
-      <pre>{{ alert.msg }}</pre>
+      <pre style="overflow:auto;">{{ alert.msg }}</pre>
     </v-alert>   
       <transition name="fade" mode="out-in">
         <router-view class="view ma-3"></router-view>