From 25848c5cd32750b90e1b7af87680ba5062b63460 Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Sun, 13 Aug 2017 12:12:48 +0100
Subject: [PATCH] image collection

---
 src/vue-poc/components/core.js                |  17 ++-
 src/vue-poc/expath-pkg.xml                    |   2 +-
 src/vue-poc/features/about.vue                |   2 +-
 src/vue-poc/features/adminlog/logs.vue        |   2 +-
 src/vue-poc/features/eval/eval.vue            |   3 +-
 src/vue-poc/features/home.vue                 |   2 +-
 src/vue-poc/features/images/image.vue         |  16 ++-
 src/vue-poc/features/images/images.vue        |  93 ++++++++++---
 src/vue-poc/features/images/images.xqm        |  41 ++++--
 src/vue-poc/features/job/jobs.vue             |   2 +-
 src/vue-poc/features/ping/ping.vue            |  15 +-
 src/vue-poc/lib/vue-compile/vue-compile.xqm   |   2 +-
 src/vue-poc/models.gen.xqm                    |   2 +-
 src/vue-poc/static/app-gen.js                 | 131 +++++++++++++-----
 src/vue-poc/static/app.html                   |   4 +-
 src/vue-poc/tasks/createthumbs.xq             |  15 --
 ...scanpics.xq => pics-01-store-directory.xq} |   3 +-
 src/vue-poc/tasks/pics-02-store-meta.xq       |  22 +++
 ...{createimage.xq => pics-03-store-image.xq} |   0
 src/vue-poc/tasks/pics-04-store-thumbs.xq     |  46 ++++++
 src/vue-poc/tasks/vue-compile.xq              |   5 +
 21 files changed, 325 insertions(+), 100 deletions(-)
 delete mode 100644 src/vue-poc/tasks/createthumbs.xq
 rename src/vue-poc/tasks/{scanpics.xq => pics-01-store-directory.xq} (86%)
 create mode 100644 src/vue-poc/tasks/pics-02-store-meta.xq
 rename src/vue-poc/tasks/{createimage.xq => pics-03-store-image.xq} (100%)
 create mode 100644 src/vue-poc/tasks/pics-04-store-thumbs.xq
 create mode 100644 src/vue-poc/tasks/vue-compile.xq

diff --git a/src/vue-poc/components/core.js b/src/vue-poc/components/core.js
index 6be0fbe..cc7d3c0 100644
--- a/src/vue-poc/components/core.js
+++ b/src/vue-poc/components/core.js
@@ -93,6 +93,7 @@ const router = new VueRouter({
     { path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} },
     { path: '/jobs', component: Job,meta:{title:"Jobs"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
 });
@@ -135,7 +136,7 @@ const app = new Vue({
         children: [
        {href: '/database', text: 'Databases',icon: 'account_balance' },
        {href: '/files', text: 'File system',icon: 'folder' },
-      {href: '/edit',text: 'edit',icon: 'mode_edit'},
+      {href: '/edit',text: 'Edit',icon: 'mode_edit'},
       {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
@@ -153,7 +154,7 @@ const app = new Vue({
         children: [
           {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},   
           {href: '/logs',text: 'Server logs',icon: 'dns'},
-          {href: '/ping',text: 'ping',icon: 'update'}
+          {href: '/ping',text: 'Ping',icon: 'update'}
       ]},
       {
         icon: 'camera_roll',
@@ -161,7 +162,7 @@ const app = new Vue({
         model: false,
         children: [
           {href: '/images',text: 'Collection',icon: 'photo_camera'},
-          {href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'}
+          {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}
           ]},
       {
         icon: 'more_horiz',
@@ -169,12 +170,14 @@ const app = new Vue({
         model: false,
         children: [
       {href: '/session',text: 'Session',icon: 'person'}, 
-      {href: '/select',text: 'select',icon: 'extension'},
+      {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},       
-      {href: '/tabs',text: 'tabs',icon: 'switch_camera'}, 
-      {href: '/timeline',text: 'time line',icon: 'timelapse'}
+      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, 
+      {href: '/timeline',text: 'Time line',icon: 'timelapse'}
       ]},
-      {href: '/settings',text: 'settings',icon: 'settings'  }
+      
+      {href: '/settings',text: 'Settings',icon: 'settings'  },
+      {href: '/about',text: 'About', icon: 'help'    }, 
     ]
 
   }},
diff --git a/src/vue-poc/expath-pkg.xml b/src/vue-poc/expath-pkg.xml
index d3c584d..0a53225 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.4" spec="1.0">
 	<title>vue-poc test of vue.js.</title>
 	<dependency name="ace" version="1.2.7" />
-	<dependency name="vuetify" version="0.14.7" />
+	<dependency name="vuetify" version="0.14.8" />
 	<dependency name="vue" version="2.4.1" />
 	<dependency name="vue-router" version="2.5.3" />
 	<dependency name="google-material" version="0.0.0" />
diff --git a/src/vue-poc/features/about.vue b/src/vue-poc/features/about.vue
index 6bef888..8b83cbd 100644
--- a/src/vue-poc/features/about.vue
+++ b/src/vue-poc/features/about.vue
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="about"> <v-layout class="ma-5"> <v-flex
 	xs4> <v-card hover raised> <v-card-title
-	height="200px" class="pa-5 green lighten-1">
+	height="200px" class="pa-5 indigo accent-3">
 <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>
diff --git a/src/vue-poc/features/adminlog/logs.vue b/src/vue-poc/features/adminlog/logs.vue
index 8e31209..591315b 100644
--- a/src/vue-poc/features/adminlog/logs.vue
+++ b/src/vue-poc/features/adminlog/logs.vue
@@ -2,7 +2,7 @@
 <template id="log">
  <v-container fluid>
   <v-card >
-   <v-toolbar class="green white--text">
+   <v-toolbar light>
        <v-btn
       light icon
       :loading="loading"
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
index f5ade46..8c9a0ef 100644
--- a/src/vue-poc/features/eval/eval.vue
+++ b/src/vue-poc/features/eval/eval.vue
@@ -85,10 +85,9 @@
     },
     
     run(){
-      var data={xq:this.xq}
       this.showError=this.show=false
       this.start = performance.now();
-      HTTP.post("eval/execute",Qs.stringify(data))
+      HTTP.post("eval/execute",Qs.stringify({xq:this.xq}))
       .then(r=>{
         this.elapsed=Math.floor(performance.now() - this.start);
         this.result=r.data.result
diff --git a/src/vue-poc/features/home.vue b/src/vue-poc/features/home.vue
index 089e422..802987e 100644
--- a/src/vue-poc/features/home.vue
+++ b/src/vue-poc/features/home.vue
@@ -1,7 +1,7 @@
 <!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">
+	height="200px" class="pa-5 indigo">
 <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>
diff --git a/src/vue-poc/features/images/image.vue b/src/vue-poc/features/images/image.vue
index 507a872..1bbefac 100644
--- a/src/vue-poc/features/images/image.vue
+++ b/src/vue-poc/features/images/image.vue
@@ -5,11 +5,23 @@
  -->
 <template id="image">
  <v-container fluid>
- Image: {{id}}
+ Image: {{ id }}
+ doc <pre>{{ image && image.doc }}</pre>
  </v-container>
 </template>
 
 <script>{  
-  props:["id"]
+  props:["id"],
+  data: ()=>( {
+    image:null
+  }),
+  created:function(){
+   var id=this._props.id
+   HTTP.get("images/list/"+id)
+   .then(r=>{
+     console.log(r.data)
+     this.image=r.data
+     })
+  }
     }
 </script>
diff --git a/src/vue-poc/features/images/images.vue b/src/vue-poc/features/images/images.vue
index 31252ba..1ebd533 100644
--- a/src/vue-poc/features/images/images.vue
+++ b/src/vue-poc/features/images/images.vue
@@ -6,42 +6,90 @@
 <template id="images">
 
       <v-card>
-        <v-card-actions>
-        
-          <v-select
+        <v-toolbar light>
+    
+          <v-menu
+          :close-on-content-click="false"
+          v-model="showFilter"
+          transition="scale-transition"
+          offset-y
+          full-width
+         
+        >
+         <v-text-field
+           slot="activator"
+              name="input-1-3" style="width:30em;"
+              label="Filter images"
+              single-line
+              prepend-icon="search"
+              readonly
+            :value="qtext"   ></v-text-field>
+         <v-card>
+         <v-card-title>
+          Set filter...
+          <v-spacer></v-spacer>
+          <v-btn  @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
+          </v-card-title>
+        <v-card-text>
+    
+         <v-select
               v-bind:items="keywords"
               v-model="query.keyword"
               label="Keyword"
               autocomplete
             ></v-select>
-            <v-dialog
-          persistent
-          v-model="modal"
+              <v-menu
           lazy
+          :close-on-content-click="false"
+          v-model="menu2"
+          transition="scale-transition"
+          offset-y
           full-width
+          :nudge-left="40"
+          max-width="290px"
         >
-          <v-text-field
+             <v-text-field
             slot="activator"
             label="Earliest date"
             v-model="query.from"
             prepend-icon="event"
             readonly
           ></v-text-field>
+         
           <v-date-picker v-model="query.from" scrollable actions>
             <template scope="{ save, cancel }">
               <v-card-actions>
-                <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
-                <v-btn flat primary @click.native="save()">Save</v-btn>
+                <v-btn flat primary @click="cancel()">Cancel</v-btn>
+                <v-btn flat primary @click="save()">Save</v-btn>
               </v-card-actions>
             </template>
           </v-date-picker>
-        </v-dialog>
-        <v-btn @click.native="clear()">Clear</v-btn>
-           <v-spacer></v-spacer>
-            <v-btn @click.native="query.page+=1">next</v-btn>
-         {{query.page}}
-          <v-btn @click.native="query.page-=1">back</v-btn>
+          </v-menu>
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn  @click="showFilter = false" primary>Apply</v-btn>
         </v-card-actions>
+      </v-card>
+            </v-menu>
+        <v-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
+        :disabled="!(query.keyword || query.from)">
+            <v-icon>clear</v-icon>
+           </v-btn>
+            <v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
+  
+           <v-spacer></v-spacer>
+            Page:{{ query.page+1 }}
+          <v-btn @click="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary>
+           <v-icon>arrow_back</v-icon>
+           </v-btn>
+           <v-btn @click="query.page+=1" icon primary>
+            <v-icon>arrow_forward</v-icon>
+           </v-btn>
+        </v-toolbar>
+
         <v-container fluid grid-list-md>
           <v-layout row wrap>
             <v-flex height="80px"
@@ -74,7 +122,7 @@
 					       <v-toolbar class="green white--text">
 					      <v-toolbar-title >{{selitem.name}}</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-toolbar>
 					    <v-card-text> blah blah  </v-card-text> 
 					   </v-card>
@@ -91,7 +139,9 @@
            keyword:null
     }, 
     modal:false, // showing datepicker
-    
+    showFilter:false,
+    busy:false,
+    menu2:false,
     keywords:[],
     showInfo:false,
     selitem:"TODO"
@@ -101,14 +151,17 @@
         return "data:image/jpeg;base64,"+item.data
     },
     getImages(){
+      this.busy=true
       HTTP.get("images/list",{params:this.query})
       .then(r=>{
+        this.busy=false
         this.images=r.data.items
         }) 
     },
     clear(){
       this.query.from=null;
       this.query.keyword=null;
+      this.query.page=0;
     },
     selected(image){
       this.selitem=image;
@@ -119,6 +172,12 @@
     }
    
   },
+  computed:{
+    qtext(){
+          var k=this.query.keyword,f=this.query.from
+          return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")
+    }
+  },
   watch:{
       "query":{
         handler:function(v){
diff --git a/src/vue-poc/features/images/images.xqm b/src/vue-poc/features/images/images.xqm
index d184afb..8e1037c 100644
--- a/src/vue-poc/features/images/images.xqm
+++ b/src/vue-poc/features/images/images.xqm
@@ -8,8 +8,29 @@ import module namespace fw="quodatum:file.walker";
 import module namespace entity = 'quodatum.models.generated' at "../../models.gen.xqm";
 declare namespace c="http://www.w3.org/ns/xproc-step";
 
-declare variable $vue-api:PICS:="c:\tmp\";
+declare variable $vue-api:IMAGEDIR:="P:/pictures/";
+declare variable $vue-api:THUMBDIR:="C:/tmp/";
 
+(:
+declare variable $vue-api:IMAGEDIR:="/mnt/sda1/pictures/";
+declare variable $vue-api:THUMBDIR:="/mnt/sda1/pictures/thumbs/";
+:)
+declare variable $vue-api:entity:=$entity:list("thumbnail");
+(:~
+ : do a thumbnail
+ :)
+declare
+%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)   
+{
+ let $image:=db:open-id("vue-poc",$id)
+ return <json type="object" >
+    <doc>{ serialize($image) }</doc>
+     { vue-api:get-image($image) }
+  </json>
+};
 (:~
  : do a thumbnail
  :)
@@ -27,8 +48,7 @@ $keyword
 {
  let $a:=trace(($from,$keyword),"----------")
  let $rowsPerPage:=24
- let $entity:=$entity:list("thumbnail")
- let $images:=$entity("data")()
+ let $images:=$vue-api:entity("data")()
  let $images:=if($from)then  $images[datetaken ge $from] else $images
  let $images:=if($keyword)then  $images[keywords/keyword = $keyword] else $images
  let $images:=subsequence($images,1+$rowsPerPage*$page,$rowsPerPage)
@@ -37,7 +57,7 @@ $keyword
             <items type="array">{
             for $f in $images
             return <_ type="object">
-            {vue-api:get-image($f,$entity)} 
+            {vue-api:get-image($f)} 
             </_>
             }</items>
   </json>
@@ -63,14 +83,15 @@ return <json   type="object" >
   </json>
 };
 
-declare function vue-api:get-image($image as element(image),$entity)
+(:~ fields for image for json :)
+declare function vue-api:get-image($image as element(image))
 as element(*)*
 {
-let $id:=$entity?access?id($image)
-let $path:=$entity?access?path($image)
-let $name:=$entity?access?name($image)
-let $thumb:= $vue-api:PICS || $path
-let $thumb:=if(file:exists($thumb)) then $thumb else "C:\tmp\art.jpg"
+let $id:=$vue-api:entity?access?id($image)
+let $path:=$vue-api:entity?access?path($image)
+let $name:=$vue-api:entity?access?name($image)
+let $thumb:= $vue-api:THUMBDIR || $path
+let $thumb:=if(file:exists($thumb)) then $thumb else $vue-api:THUMBDIR || "missing.jpg"
 return   ( <id>{$id}</id>
           ,<name>{$name}</name>
          ,<data>{fetch:binary($thumb)}</data>
diff --git a/src/vue-poc/features/job/jobs.vue b/src/vue-poc/features/job/jobs.vue
index 93b54ce..c9d0805 100644
--- a/src/vue-poc/features/job/jobs.vue
+++ b/src/vue-poc/features/job/jobs.vue
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="job">
   <v-card >
-   <v-toolbar class="green white--text">
+   <v-toolbar light>
        <v-btn
       light icon
       :loading="loading"
diff --git a/src/vue-poc/features/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
index a907591..b37029e 100644
--- a/src/vue-poc/features/ping/ping.vue
+++ b/src/vue-poc/features/ping/ping.vue
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
 <template id="ping">
  <v-container fluid>
- <p>Simple performance measure. Read or increment a database value.</p>
-  <h2>Counter:{{counter}}</h2>
+ <v-card>
+ <v-toolbar light>
+ <v-toolbar-title>Simple performance measure</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-btn @click="reset()">Reset</v-btn>
+ </v-toolbar>
+ <v-card-text>
+  <p>Read or increment a database value.</p>
+  <p>Counter:{{counter}}</p>
   <table class="table">
       <thead> 
         <tr>
@@ -81,7 +88,9 @@
         </tr>
       </tbody>
     </table>
-    <v-btn @click="reset()">Reset</v-btn>
+    </v-card-text>
+    </v-card>
+    
  </v-container>
 </template>
 
diff --git a/src/vue-poc/lib/vue-compile/vue-compile.xqm b/src/vue-poc/lib/vue-compile/vue-compile.xqm
index 5eb854c..e410ee9 100644
--- a/src/vue-poc/lib/vue-compile/vue-compile.xqm
+++ b/src/vue-poc/lib/vue-compile/vue-compile.xqm
@@ -70,7 +70,7 @@ declare function vue:capitalize-first
  :)
 declare function vue:compile($proj as xs:string)
 {
-let $FEATURES:="features/"=>file:resolve-path($proj)
+let $FEATURES:="features/"=>file:resolve-path($proj=>trace("proj:"))
 let $COMPONENTS:="components/"=>file:resolve-path($proj)
 let $CORE:="components/core.js"=>file:resolve-path($proj)
 let $FILTERS:="components/filters.js"=>file:resolve-path($proj)
diff --git a/src/vue-poc/models.gen.xqm b/src/vue-poc/models.gen.xqm
index 9d0bc2f..6583be9 100644
--- a/src/vue-poc/models.gen.xqm
+++ b/src/vue-poc/models.gen.xqm
@@ -1,5 +1,5 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2017-08-09T10:36:00.509+01:00 
+ : auto generated from xml files in entities folder at: 2017-08-09T12:18:41.183+01:00 
  :)
 
 module namespace entity = 'quodatum.models.generated';
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 79b60ff..aba6293 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2017-08-09T10:37:44.029+01:00
+// generated 2017-08-13T11:45:59.085+01:00
 
Vue.component('qd-link',{template:` 
  <a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
  `,
@@ -145,7 +145,7 @@ Vue.filter('round', function(value, decimals) {
 }
 
       );
-      const About=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">
+      const About=Vue.extend({template:`  <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 indigo accent-3">
 <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>
@@ -170,7 +170,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       const Log=Vue.extend({template:` 
  <v-container fluid="">
   <v-card>
-   <v-toolbar class="green white--text">
+   <v-toolbar light="">
        <v-btn light="" icon="" :loading="loading" @click="getItems()" :disabled="loading">
     <v-icon>refresh</v-icon>
     </v-btn>   
@@ -788,10 +788,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     },
     
     run(){
-      var data={xq:this.xq}
       this.showError=this.show=false
       this.start = performance.now();
-      HTTP.post("eval/execute",Qs.stringify(data))
+      HTTP.post("eval/execute",Qs.stringify({xq:this.xq}))
       .then(r=>{
         this.elapsed=Math.floor(performance.now() - this.start);
         this.result=r.data.result
@@ -857,7 +856,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 }
 
       );
-      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">
+      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 indigo">
 <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>
@@ -881,37 +880,78 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       );
       const Image=Vue.extend({template:` 
  <v-container fluid="">
- Image: {{id}}
+ Image: {{ id }}
+ doc <pre>{{ image &amp;&amp; image.doc }}</pre>
  </v-container>
  `,
         
-  props:["id"]
+  props:["id"],
+  data: ()=>( {
+    image:null
+  }),
+  created:function(){
+   var id=this._props.id
+   HTTP.get("images/list/"+id)
+   .then(r=>{
+     console.log(r.data)
+     this.image=r.data
+     })
+  }
     }
 
       );
       const Images=Vue.extend({template:` 
 
       <v-card>
-        <v-card-actions>
-        
-          <v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" autocomplete=""></v-select>
-            <v-dialog persistent="" v-model="modal" lazy="" full-width="">
-          <v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly=""></v-text-field>
+        <v-toolbar light="">
+    
+          <v-menu :close-on-content-click="false" v-model="showFilter" transition="scale-transition" offset-y="" full-width="">
+         <v-text-field slot="activator" name="input-1-3" style="width:30em;" label="Filter images" single-line="" prepend-icon="search" readonly="" :value="qtext"></v-text-field>
+         <v-card>
+         <v-card-title>
+          Set filter...
+          <v-spacer></v-spacer>
+          <v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
+          </v-card-title>
+        <v-card-text>
+    
+         <v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" autocomplete=""></v-select>
+              <v-menu lazy="" :close-on-content-click="false" v-model="menu2" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
+             <v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly=""></v-text-field>
+         
           <v-date-picker v-model="query.from" scrollable="" actions="">
             <template scope="{ save, cancel }">
               <v-card-actions>
-                <v-btn flat="" primary="" @click.native="cancel()">Cancel</v-btn>
-                <v-btn flat="" primary="" @click.native="save()">Save</v-btn>
+                <v-btn flat="" primary="" @click="cancel()">Cancel</v-btn>
+                <v-btn flat="" primary="" @click="save()">Save</v-btn>
               </v-card-actions>
             </template>
           </v-date-picker>
-        </v-dialog>
-        <v-btn @click.native="clear()">Clear</v-btn>
-           <v-spacer></v-spacer>
-            <v-btn @click.native="query.page+=1">next</v-btn>
-         {{query.page}}
-          <v-btn @click.native="query.page-=1">back</v-btn>
+          </v-menu>
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn @click="showFilter = false" primary="">Apply</v-btn>
         </v-card-actions>
+      </v-card>
+            </v-menu>
+        <v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" :disabled="!(query.keyword || query.from)">
+            <v-icon>clear</v-icon>
+           </v-btn>
+            <v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
+  
+           <v-spacer></v-spacer>
+            Page:{{ query.page+1 }}
+          <v-btn @click="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary="">
+           <v-icon>arrow_back</v-icon>
+           </v-btn>
+           <v-btn @click="query.page+=1" icon="" primary="">
+            <v-icon>arrow_forward</v-icon>
+           </v-btn>
+        </v-toolbar>
+
         <v-container fluid="" grid-list-md="">
           <v-layout row="" wrap="">
             <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
@@ -939,7 +979,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
 					       <v-toolbar class="green white--text">
 					      <v-toolbar-title>{{selitem.name}}</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-toolbar>
 					    <v-card-text> blah blah  </v-card-text> 
 					   </v-card>
@@ -955,7 +995,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
            keyword:null
     }, 
     modal:false, // showing datepicker
-    
+    showFilter:false,
+    busy:false,
+    menu2:false,
     keywords:[],
     showInfo:false,
     selitem:"TODO"
@@ -965,14 +1007,17 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
         return "data:image/jpeg;base64,"+item.data
     },
     getImages(){
+      this.busy=true
       HTTP.get("images/list",{params:this.query})
       .then(r=>{
+        this.busy=false
         this.images=r.data.items
         }) 
     },
     clear(){
       this.query.from=null;
       this.query.keyword=null;
+      this.query.page=0;
     },
     selected(image){
       this.selitem=image;
@@ -983,6 +1028,12 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
     }
    
   },
+  computed:{
+    qtext(){
+          var k=this.query.keyword,f=this.query.from
+          return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")
+    }
+  },
   watch:{
       "query":{
         handler:function(v){
@@ -1009,7 +1060,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       );
       const Job=Vue.extend({template:` 
   <v-card>
-   <v-toolbar class="green white--text">
+   <v-toolbar light="">
        <v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading">
     <v-icon>refresh</v-icon>
     </v-btn>
@@ -1153,8 +1204,15 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
       );
       const Ping=Vue.extend({template:` 
  <v-container fluid="">
- <p>Simple performance measure. Read or increment a database value.</p>
-  <h2>Counter:{{counter}}</h2>
+ <v-card>
+ <v-toolbar light="">
+ <v-toolbar-title>Simple performance measure</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-btn @click="reset()">Reset</v-btn>
+ </v-toolbar>
+ <v-card-text>
+  <p>Read or increment a database value.</p>
+  <p>Counter:{{counter}}</p>
   <table class="table">
       <thead> 
         <tr>
@@ -1233,7 +1291,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
         </tr>
       </tbody>
     </table>
-    <v-btn @click="reset()">Reset</v-btn>
+    </v-card-text>
+    </v-card>
+    
  </v-container>
  `,
       
@@ -2091,6 +2151,7 @@ const router = new VueRouter({
     { path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} },
     { path: '/jobs', component: Job,meta:{title:"Jobs"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
 });
@@ -2133,7 +2194,7 @@ const app = new Vue({
         children: [
        {href: '/database', text: 'Databases',icon: 'account_balance' },
        {href: '/files', text: 'File system',icon: 'folder' },
-      {href: '/edit',text: 'edit',icon: 'mode_edit'},
+      {href: '/edit',text: 'Edit',icon: 'mode_edit'},
       {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
@@ -2151,7 +2212,7 @@ const app = new Vue({
         children: [
           {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},   
           {href: '/logs',text: 'Server logs',icon: 'dns'},
-          {href: '/ping',text: 'ping',icon: 'update'}
+          {href: '/ping',text: 'Ping',icon: 'update'}
       ]},
       {
         icon: 'camera_roll',
@@ -2159,7 +2220,7 @@ const app = new Vue({
         model: false,
         children: [
           {href: '/images',text: 'Collection',icon: 'photo_camera'},
-          {href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'}
+          {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}
           ]},
       {
         icon: 'more_horiz',
@@ -2167,12 +2228,14 @@ const app = new Vue({
         model: false,
         children: [
       {href: '/session',text: 'Session',icon: 'person'}, 
-      {href: '/select',text: 'select',icon: 'extension'},
+      {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},       
-      {href: '/tabs',text: 'tabs',icon: 'switch_camera'}, 
-      {href: '/timeline',text: 'time line',icon: 'timelapse'}
+      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, 
+      {href: '/timeline',text: 'Time line',icon: 'timelapse'}
       ]},
-      {href: '/settings',text: 'settings',icon: 'settings'  }
+      
+      {href: '/settings',text: 'Settings',icon: 'settings'  },
+      {href: '/about',text: 'About', icon: 'help'    }, 
     ]
 
   }},
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index bca1fbf..f2a9b07 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -60,9 +60,9 @@
     <qd-navlist  :items="items"></qd-navlist>
  </v-navigation-drawer>
   
- <v-toolbar class="green lighten-1" >
+ <v-toolbar class="indigo" dark >
   <v-toolbar-side-icon @click.native.stop="drawer = !drawer"  ></v-toolbar-side-icon>  
-  <v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
+  <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>
diff --git a/src/vue-poc/tasks/createthumbs.xq b/src/vue-poc/tasks/createthumbs.xq
deleted file mode 100644
index e79ade4..0000000
--- a/src/vue-poc/tasks/createthumbs.xq
+++ /dev/null
@@ -1,15 +0,0 @@
-(:~ update image meta data docs :)
-import module namespace imgmeta = "expkg-zone58:image.metadata" ;
-declare namespace c="http://www.w3.org/ns/xproc-step";
-declare variable $DB:="vue-poc";
-let $done:=uri-collection("vue-poc/Pictures")
-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 $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
-return ((for $f in subsequence($todo,1, 1000)
-let $spath:="P:/pictures/" || $f
-let $dbpath:=$f || "/meta.xml"
-let $meta:=imgmeta:read($spath)
-return  db:replace($DB,$dbpath,$meta)),db:output($todo=>count()))
\ No newline at end of file
diff --git a/src/vue-poc/tasks/scanpics.xq b/src/vue-poc/tasks/pics-01-store-directory.xq
similarity index 86%
rename from src/vue-poc/tasks/scanpics.xq
rename to src/vue-poc/tasks/pics-01-store-directory.xq
index 62762ff..0420f06 100644
--- a/src/vue-poc/tasks/scanpics.xq
+++ b/src/vue-poc/tasks/pics-01-store-directory.xq
@@ -1,4 +1,5 @@
-(:~ create xml file list
+(:~ 
+: create xml file list by scanning $SRC and write to vue-poc 
 :)
 import module namespace fw="quodatum:file.walker";
 declare namespace c="http://www.w3.org/ns/xproc-step";
diff --git a/src/vue-poc/tasks/pics-02-store-meta.xq b/src/vue-poc/tasks/pics-02-store-meta.xq
new file mode 100644
index 0000000..3947281
--- /dev/null
+++ b/src/vue-poc/tasks/pics-02-store-meta.xq
@@ -0,0 +1,22 @@
+(:~
+ : store meta.xml document for all jpgs referenced in doc("/vue-poc/pics.xml")
+ : done in batches of 1000
+ : @return initial number of missing docs  
+:)
+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")] 
+
+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 $dbpath:=$f || "/meta.xml"
+        let $meta:=imgmeta:read($spath)
+        return  db:replace($DB,$dbpath,$meta),
+        db:output($todo=>count()))
\ No newline at end of file
diff --git a/src/vue-poc/tasks/createimage.xq b/src/vue-poc/tasks/pics-03-store-image.xq
similarity index 100%
rename from src/vue-poc/tasks/createimage.xq
rename to src/vue-poc/tasks/pics-03-store-image.xq
diff --git a/src/vue-poc/tasks/pics-04-store-thumbs.xq b/src/vue-poc/tasks/pics-04-store-thumbs.xq
new file mode 100644
index 0000000..ee47155
--- /dev/null
+++ b/src/vue-poc/tasks/pics-04-store-thumbs.xq
@@ -0,0 +1,46 @@
+(:~
+ : generate thumbs
+ : @return initial number of missing docs  
+:)
+import module namespace t="expkg-zone58:image.thumbnailator";
+
+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
+  return fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
+};
+(:~  create folder if missing) :)
+declare %updating function local:write-binary($data,$url as xs:string)
+{  
+   let $p:=file:parent($url)
+   return  (if(file:is-dir($p)) then 
+               () 
+           else 
+               file:create-dir($p),
+           file:write-binary($url,$data)
+         )
+};
+let $done:=uri-collection("vue-poc/Pictures")
+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) 
+                              })
+let $todo:= $relpath=>subsequence(1, 400)
+
+return (
+        $todo!local:store-thumb(.),
+        db:output($relpath=>count())
+      )
\ No newline at end of file
diff --git a/src/vue-poc/tasks/vue-compile.xq b/src/vue-poc/tasks/vue-compile.xq
new file mode 100644
index 0000000..4287f83
--- /dev/null
+++ b/src/vue-poc/tasks/vue-compile.xq
@@ -0,0 +1,5 @@
+import module namespace vue = 'quodatum:vue.compile' at "../lib/vue-compile/vue-compile.xqm";
+
+let $proj:="C:/Users/andy/git/vue-poc/src/vue-poc/"   
+
+return vue:compile($proj)
\ No newline at end of file