vuetify 1.1.13

src/vue-poc/app.vue

@@ -55,7 +55,9 @@
       </v-btn>
      
           <v-list>
-        
+              <v-list-tile to="/session"  avatar ripple>
+                <v-list-tile-title >Session</v-list-tile-title>
+              </v-list-tile>
               <v-list-tile @click="logout()">
                 <v-list-tile-title >logout</v-list-tile-title>
               </v-list-tile>
@@ -84,7 +86,7 @@
               </v-list-tile>
               <v-divider ></v-divider>
                <v-list-tile  >
-               <v-list-tile-title>Refresh:</v-list-tile-title> 
+               <v-list-tile-title>Server hot load:</v-list-tile-title> 
                 <v-list-tile-action ><v-btn @click="init">.init</v-btn></v-list-tile-action>
               </v-list-tile>
             </v-list>
@@ -161,6 +163,7 @@
           {href: '/server/users',text: 'Users',icon: 'supervisor_account'},
           {href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
           {href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
+          {href: '/server/upload',text: 'Upload to server',icon: 'file_upload'},
           {href: '/server/ping',text: 'Ping',icon: 'update'}
       ]},
       {
@@ -191,8 +194,6 @@
         text: 'More' ,
         model: false,
         children: [
-    
-      {href: '/session',text: 'Session',icon: 'person'},
       {href: '/timeline',text: 'Time line',icon: 'timelapse'},
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
@@ -273,7 +274,7 @@
    
     HTTP.get("status")
     .then(r=>{
-      console.log("status",r)
+      //console.log("status",r)
       this.$auth=Object.assign(this.$auth,r.data);
       console.log("AFTER: ",this.$auth);
       //this.$forceUpdate()

src/vue-poc/components/qd-fileupload.vue

@@ -4,13 +4,13 @@
  -->
 <template id="qd-fileupload">
   <vue-clip :options="options">
-    <template slot="clip-uploader-action">
+    <template slot-scope="clip-uploader-action">
       <div>
         <div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
       </div>
     </template>
 
-    <template slot="clip-uploader-body" scope="props">
+    <template slot-scope="clip-uploader-body" scope="props">
       <div v-for="file in props.files">
         <img v-bind:src="file.dataUrl" />
         {{ file.name }} {{ file.status }}

src/vue-poc/components/qd-table.vue

@@ -10,6 +10,7 @@
         single-line
         hide-details
         v-model="search"
+        clearable
       ></v-text-field>   
       <v-spacer></v-spacer>
          <v-btn

src/vue-poc/components/vp-paramform.vue

@@ -9,7 +9,7 @@
               <div :title="url">{{ updating }}</div>
               <v-layout row>
               
-              <v-layout column xs10> 
+              <v-layout column xs11> 
               <v-flex v-for="field in fields" :key="field.model" >
               
               <v-text-field  v-if="field.type === 'xs:anyURI'" :full-width="true" 
@@ -33,7 +33,7 @@
               </v-flex>
               </v-layout>
               
-              <v-layout align-center justify-center column fill-height xs2 amber lighten-5>
+              <v-layout align-center justify-center column fill-height xs1 amber lighten-5>
                <v-btn  @click="clear()" 
 					          >Clear</v-btn>
 					     <v-btn  @click="reset()"

src/vue-poc/config.xqm

@@ -2,7 +2,7 @@ xquery version "3.1";
 (:~ data locations for image feature :)
 module namespace cfg = "quodatum:media.image.configure";
 
-declare variable $cfg:DB-IMAGE:="media-images";
+declare variable $cfg:DB-IMAGE:="media-images-20180817";
 
 declare variable $cfg:IMAGEDIR:="P:/pictures/Pictures/";
 declare variable $cfg:THUMBDIR:="C:/tmp/";

src/vue-poc/core.js

@@ -174,13 +174,14 @@ function install (Vue) {
 };
 Vue.use({ install: install });
 var sockhost=('https:'==window.location.protocol?'wss:':'ws:')+'//'+ window.location.host +'/ws';
-Vue.use(VueNativeSock.default, sockhost);
+//Vue.use(VueNativeSock.default, sockhost);
-console.log("SOCK UP",VueNativeSock,sockhost);
+//console.log("SOCK UP",VueNativeSock,sockhost);
 
 //leaflet
-//Vue.component('v-map', Vue2Leaflet.Map);
+Vue.component('l-map', Vue2Leaflet.LMap);
-//Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
+Vue.component('l-tilelayer', Vue2Leaflet.LTileLayer);
-//Vue.component('v-marker', Vue2Leaflet.Marker);
+Vue.component('l-marker', Vue2Leaflet.LMarker);
+
 //function install (Vue) {
 //  Vue.component('form-schema', window["vue-json-schema"].default);
 //};

src/vue-poc/features/collection/files.vue

@@ -5,17 +5,13 @@
 <v-card>
 
 <v-toolbar dense >
-    <v-btn icon :to="{query: { url: '/' }}">
-     <v-icon >{{icon}}</v-icon>
-     </v-btn>
-        
-   
     
     <v-toolbar-title>
 		    <v-breadcrumbs >
 		        <span slot="divider" style="padding:0;"></span>
 				    <v-breadcrumbs-item v-for="item in crumbs" :key="item.path" 
 				    :to="{ query: { url:  item.path }}" :exact="true">
+				    <v-icon v-if="item.icon">{{ icon }}</v-icon>
 				    {{ item.name }}
 				    </v-breadcrumbs-item>
 		    </v-breadcrumbs>
@@ -253,11 +249,13 @@
       },   
    // array of {name:"that", path:"/this/that/"} for url
    crumbs(){
-     var url=this.url
+     var url=this.url.split("/").slice(0,-1).map(
-     return url.split("/").slice(0,-1).map(
          function(v,i,a){return {name: v +"/",  
                                  path: a.slice(0,i+1).join("/")+"/"}}
-         ) 
+         );
+       url[0].icon=this.icon;
+       console.log("CRUM",url)
+       return url;  
       },
    selection(){
         return this.items.filter(item=>{return item.selected} ) 

src/vue-poc/features/edit/tabs.vue

@@ -263,7 +263,7 @@
     },
     
     loadItem(url){
-      HTTP.get("get2",{params: {url:url}})
+      HTTP.get("get",{params: {url:url}})
       .then(r=>{
           console.log(r)
           var tab={

src/vue-poc/features/images/images.vue

@@ -118,6 +118,7 @@
             v-model="query.from"
             prepend-icon="event"
             readonly
+            clearable
           ></v-text-field>
          
           <v-date-picker v-model="query.from" scrollable actions>
@@ -148,6 +149,7 @@
             v-model="query.until"
             prepend-icon="event"
             readonly
+            clearable
           ></v-text-field>
          
           <v-date-picker v-model="query.until" scrollable actions>
@@ -160,7 +162,7 @@
           </v-date-picker>
           </v-menu>
         
-            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
+            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
         
         </v-card-text>
         
@@ -232,6 +234,7 @@
     },
     getImages(){
       this.busy=true
+      console.log("Images",this.query);
       var t0 = performance.now();
       HTTP.get("images/list",{params:this.query})
       .then(r=>{

src/vue-poc/features/images/imagesfilter.vue

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<!-- 
+ image filter ui
+ 
+ -->
+<template id="imagesfilter">
+         <v-card>
+          <v-toolbar class="green white--text">
+                <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>
+          
+        <v-card-text>    
+         <v-autocomplete
+              v-bind:items="keywords"
+              v-model="query.keyword"
+              label="Keyword" item-value="text" item-text="text"
+               clearable
+            >
+             <template slot="item" slot-scope="data">
+                  <v-list-tile-content>
+                    <v-list-tile-title v-html="data.item.text"></v-list-tile-title>
+                    <v-list-tile-sub-title v-html="data.item.count"></v-list-tile-sub-title>
+                  </v-list-tile-content>
+              </template>
+            </v-autocomplete>
+            
+          <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
+            clearable
+          ></v-text-field>
+         
+          <v-date-picker v-model="query.from" scrollable actions>
+            <template slot-scope="{ save, cancel }">
+              <v-card-actions>
+                <v-btn flat color="primary" @click="cancel()">Cancel</v-btn>
+                <v-btn flat  color="primary"  @click="save()">Save</v-btn>
+              </v-card-actions>
+            </template>
+          </v-menu>
+          
+           <v-menu
+          lazy
+          :close-on-content-click="false"
+          v-model="showUntil"
+          transition="scale-transition"
+          offset-y
+          full-width
+          :nudge-left="40"
+          max-width="290px"
+        >
+           </v-date-picker>
+            <v-text-field
+            slot="activator"
+            label="Latest date"
+            v-model="query.until"
+            prepend-icon="event"
+            readonly
+            clearable
+          ></v-text-field>
+         
+          <v-date-picker v-model="query.until" scrollable actions>
+            <template slot-scope="{ save, cancel }">
+              <v-card-actions>
+                <v-btn flat  color="primary"  @click="cancel()">Cancel</v-btn>
+                <v-btn flat  color="primary"  @click="save()">Save</v-btn>
+              </v-card-actions>
+            </template>
+          </v-date-picker>
+          </v-menu>
+        
+            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
+        
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn  @click="showFilter = false"  color="primary" >Apply</v-btn>
+        </v-card-actions>
+      </v-card>
+     
+ 
+</template>
+
+<script>{ 
+  
+  data(){ 
+    return {
+    query: {page:0,  // current page
+           from:null,
+           until:null,
+           keyword:null
+    },
+    showFilter: false,
+    busy: false,
+    menu2: false,
+    showUntil: false,
+    keywords: [],
+    showInfo: false,
+    selitem: "TODO",
+    location: {use:false,value:true},
+   
+  }
+    },
+  methods:{
+    
+    cyclelocation(){
+      this.location.use=!this.location.use
+    },
+  
+    clear(){
+      this.query.from=null;
+      this.query.until=null;
+      this.query.keyword=null;
+      this.query.page=0;
+    },
+   
+    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
+    },
+   
+   
+  },
+ 
+  watch:{
+      "query":{
+        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
+      },
+      
+
+      showFilter(){
+        if(this.keywords.length==0){
+          HTTP.get("images/keywords2")
+          .then(r=>{
+            this.keywords=r.data.items
+            }) 
+        }
+      }
+  },
+  created:function(){
+    console.log("create images")
+    this.query.page=Number(this.$route.query.page) || this.query.page
+    this.query.keyword=this.$route.query.keyword || this.query.keyword
+    this.query.from=this.$route.query.from || this.query.from
+    this.query.until=this.$route.query.until || this.query.until
+    this.getImages()
+    
+  },
+  mounted:function(){
+    console.log("image filter mount")
+    
+  }
+    }
+</script>

src/vue-poc/features/images/tasks/pics-01-store-directory.xq

@@ -1,17 +1,19 @@
 (:~ 
-: create xml file list by scanning $SRC and write to vue-poc 
+: create xml file list by scanning $cfg:IMAGEDIR and write to db $cfg:DB-IMAGE
 :)
 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 $DEST:="c:\tmp\pics2.xml"; :)
-declare variable $DEST:=format-date(current-date(),"/[Y0001][M01][D01]-pics.xml");
 
-declare %updating function local:put($data,$path){
+declare %updating function local:put($data,$path)
+{
+  if(db:exists($cfg:DB-IMAGE)) then
    db:replace($cfg:DB-IMAGE,$path,$data)
+  else
+    db:create($cfg:DB-IMAGE,$data,$path)
 };
 
 let $opt:=map{"include-info":true()}
 let $files:=fw:directory-list($cfg:IMAGEDIR,$opt)
-return $files=>local:put($DEST)
+return $files=>local:put('/pics.xml')

src/vue-poc/features/images/tasks/pics-02-store-meta.xq

@@ -7,20 +7,19 @@ import module namespace cfg = "quodatum:media.image.configure" at "../../../conf
 import module namespace imgmeta = "expkg-zone58:image.metadata" ;
 declare namespace c="http://www.w3.org/ns/xproc-step";
 
-declare variable $KEY:="20180603";
+declare variable $dir-uri:=``[`{ $cfg:DB-IMAGE }`/pics.xml]``;
-declare variable $dir-uri:=``[`{ $cfg:DB-IMAGE }`/`{ $KEY }`-pics.xml]``;
 declare variable $doc:=doc( $dir-uri);
-declare variable $CHUNK:=1000;
+declare variable $CHUNK:=15000;
-declare variable $meta:="/meta2/";
+declare variable $meta:="/meta/";
 let $done:=uri-collection($cfg:DB-IMAGE ||$meta)
 let $files:= $doc//c:file[ends-with(lower-case(@name),".jpg")] 
 
 let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
 
-let $todo:= $relpath[not("/vue-poc/meta/" || .|| "/meta.xml"=$done)]
+let $todo:= $relpath[not($done=``[/`{ $cfg:DB-IMAGE }`/meta/`{ . }`/meta.xml]``)]
 return (for $f in subsequence($todo,1, $CHUNK)
         let $spath:=$cfg:IMAGEDIR || "../" || $f
         let $dbpath:=$meta || $f || "/meta.xml"
-        let $meta:=imgmeta:read($spath)
+        let $meta:=imgmeta:read(trace($spath))
         return  db:replace($cfg:DB-IMAGE,$dbpath,$meta),
         update:output($todo=>count()))

src/vue-poc/features/images/tasks/pics-03-store-image.xq

@@ -7,7 +7,7 @@ import module namespace cfg = "quodatum:media.image.configure" at "../../../conf
 for $meta in collection($cfg:DB-IMAGE || "/meta")/metadata
   let $loc:=db:path($meta)=>tokenize("/")
   let $name:=$loc[count($loc)-1]
-  let $path:= subsequence($loc,1,count($loc)-1)=>string-join("/")
+  let $path:= subsequence($loc,2,count($loc)-2)=>string-join("/")
   let $image:=<image> 
              <file name="{$name}" path="{$path}"/>{
                 metadata:core($meta),
@@ -15,4 +15,4 @@ for $meta in collection($cfg:DB-IMAGE || "/meta")/metadata
                 metadata:keywords($meta)
               } </image>
 let $target:="image/"|| $path || "/image.xml"
-return db:replace($cfg:DB-IMAGE,$target,$image)
+return  db:replace($cfg:DB-IMAGE,$target=>trace(),$image)

src/vue-poc/features/images/tasks/pics-04-store-thumbs.xq

@@ -8,12 +8,15 @@ declare namespace c="http://www.w3.org/ns/xproc-step";
 
 declare variable $CHUNK:=1000;
 
+declare variable $DEST:="/pics.xml";
+declare variable $SIZE:=xs:integer(100);
+
 declare %updating function local:store-thumb($f as xs:string)
 {
   let $src:=$cfg:IMAGEDIR || "../" || trace($f)
   let $trg:= $cfg:THUMBDIR || $f
   return try{
-            fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
+            fetch:binary($src)=>t:size($SIZE)=>local:write-binary($trg)
          } catch * {
              update:output("bad: " || $f)
         }
@@ -30,7 +33,7 @@ declare %updating function local:write-binary($data,$url as xs:string)
          )
 };
 
-let $files:= doc($cfg:DB-IMAGE || "/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")] 
+let $files:= doc($cfg:DB-IMAGE || $DEST)//c:file[ends-with(lower-case(@name),".jpg")] 
 
 let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
 let $relpath:=filter($relpath,function($f){ 

src/vue-poc/features/map.vue

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<template id="leaflet">
+ <v-container fluid>
+     <v-layout row wrap>
+      <v-flex xs12 style="height:400px">
+     <l-map :zoom="zoom" :center="center" >
+      <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
+      <l-marker :lat-lng="marker"></l-marker>
+    </l-map>
+    </v-flex>
+    </v-layout>
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      zoom: 13,
+      center: [54.320498718, -2.739663708],
+      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+      marker: L.latLng(54.320498718, -2.739663708)
+    }
+  },
+  created:function(){
+    console.log("map")
+  }
+}
+</script>

src/vue-poc/features/server/ping.vue

@@ -29,7 +29,7 @@
           <tr>
               <td>
                <v-btn @click="get()"  >
-                   Read <v-icon>compare_arrows</v-icon> 
+                   Read <v-icon right>compare_arrows</v-icon> 
                 </v-btn>
              
                </td>
@@ -62,7 +62,7 @@
             <tr>
           <td>
            <v-btn @click="update()"  >
-                 Write <v-icon>compare_arrows</v-icon>
+                 Write <v-icon right>compare_arrows</v-icon>
             </v-btn>
           </td>
           

src/vue-poc/features/server/upload.vue

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<template id="upload">
+  <v-card>
+  <v-card-title>Upload</v-card-title>
+  <v-card-actions>
+    <qd-fileupload>up..</qd-fileupload> 
+    </v-card-actions>
+    </v-card> 
+	</template>
+<script>{
+  data:  function(){
+    return { 
+      fab: false
+  }
+  }
+}</script>

src/vue-poc/features/session.vue

@@ -55,7 +55,6 @@
       .then(r=>{
         console.log("status",r)
         this.$auth=Object.assign(this.$auth,r.data);
-        console.log("AFTER: ",this.$auth);
         //this.$forceUpdate()
       })  
     },

src/vue-poc/features/tasks/rxq-tasks.xqm

@@ -3,7 +3,7 @@
  :)
 module namespace vue-rest = 'quodatum:vue.tasks';
 import module namespace query-a = 'vue-poc/query-a' at "../../lib/query-a.xqm";
-
+import module namespace hlog = 'quodatum.data.history' at '../../lib/history.xqm';
 (:~
  : list tasks
  :)
@@ -52,9 +52,10 @@ function vue-rest:runtask($task)
 {
   let $task:=doc("taskdef.xml")/tasks/task[@name=$task]
   let $url:=resolve-uri($task/@url)
-  
+  let $params:=query-a:params($url)
   return (
-  query-a:run($url,query-a:params($url)),
+    query-a:run($url,$params),
-  
+    hlog:save(<task url="{ $url }"/>)
+  )
 };
     

src/vue-poc/features/tasks/task/task.vue

@@ -60,8 +60,12 @@
       this.$refs.params.submit()
       .then(r=>{
         this.loading= false
-        this.snackbar= {show:true,msg:r.data.msg,context:"success"}
+ 
-        console.log(r.data)
+        this.snackbar= {show:true,
+                        msg: r.data && r.data.msg, 
+                        context:"success"
+                        };
+        console.log(r)
       })
       .catch(error=>{
         this.loading= false

src/vue-poc/features/tasks/task/tx-dbimport.xq

@@ -12,7 +12,7 @@ import module namespace dbtools = 'quodatum.dbtools' at "../../../lib/dbtools.xq
 declare variable $srcpath as xs:anyURI  external :="C:/Users/andy/git/vue-poc/src/vue-poc/models/entities";
 
 (:~ Target BaseX db root path for imported files 
- : @default /vuepoc-test/
+ : @default vuepoc-test
  :)
 declare variable $targetpath as xs:anyURI external :="/vuepoc-test";
 
@@ -21,5 +21,4 @@ declare variable $targetpath as xs:anyURI external :="/vuepoc-test";
   :)
 declare variable $boolean as xs:boolean  external :=false();
                                  
-let $result:=<json type="object"><hello>TODO</hello></json>
+dbtools:sync-from-path($targetpath, $srcpath)
-return $result

src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm

@@ -18,7 +18,7 @@ declare
 %updating 
 function vue-api:model()   
 {
- resolve-uri($vue-api:query)=>query-a:update(query-a:params())
+ resolve-uri($vue-api:query)=>query-a:update(query-a:params($vue-api:query))
 };
   
 (:~

src/vue-poc/features/validate/rq-validate.xqm

@@ -19,7 +19,8 @@ declare
 %updating
 function tx:run( )
 {
-  resolve-uri("tx-validate.xq")=>query-a:run(query-a:params())
+  let $url:= resolve-uri("tx-validate.xq")
+  return query-a:run-json($url,query-a:params($url))
 };
 
 (:~ validation settings 

src/vue-poc/lib/query-a.xqm

@@ -4,7 +4,7 @@
  : @author Andy Bunce, 2018
  :)
 module namespace query-a = 'vue-poc/query-a';
-import module namespace hlog = 'quodatum.data.history' at 'history.xqm';
+
 import module namespace request = "http://exquery.org/ns/request";
 declare namespace map2='http://www.woerteler.de/xquery/modules/map-extras';
 (:~
@@ -66,15 +66,24 @@ declare
 %updating  
 function query-a:run($query as xs:anyURI,$params as map(*))
 { 
-   (
+let $updating:=xquery:parse-uri($query)/@updating/boolean(.)
+return if($updating) then
+       xquery:invoke-update($query,$params)
+     else 
        <json type="object">
                <res>{ xquery:invoke($query,$params)}</res>
                <params>todo</params>
-   </json>=>update:output(),
+       </json>=>update:output()
-   hlog:save(<task url="{ $query }"/>)
-   )
 };
 
+declare
+%updating  
+function query-a:run-json($query as xs:anyURI,$params as map(*))
+{ 
+  xquery:invoke($query,$params)=>update:output()
+};
+
+
 declare
 %updating 
 function query-a:update($query as xs:anyURI,$params as map(*))

src/vue-poc/router.js

@@ -83,6 +83,7 @@ const router = new VueRouter({
       { path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
       { path: 'jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
       { path: 'ping', component: Ping,meta:{title:"Ping"} },
+      { path: 'upload', component: Upload,meta:{title:"Upload"} },
       { path: 'websocket', component: Websocket,meta:{title:"Web socket"} }
      ]
     },
@@ -108,7 +109,7 @@ const router = new VueRouter({
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/tree', component: Tree, meta:{title:"tree"} },
     { path: '/tree2', component: Tree2, meta:{title:"tree2"} },
-    { path: '/map', component: Map,meta:{title:"map"} },
+    { path: '/map', component: Leaflet,meta:{title:"map"} },
     
     { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
     { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },

src/vue-poc/static/app-gen.js

@@ -1,4 +1,4 @@
-// generated 2018-08-15T17:56:05.102+01:00
+// generated 2018-08-20T23:31:08.866+01:00
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-autoheight.vue
 Vue.component('qd-autoheight',{template:` 
@@ -53,13 +53,13 @@ Vue.component('qd-confirm',{template:`
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-fileupload.vue
 Vue.component('qd-fileupload',{template:` 
   <vue-clip :options="options">
-    <template slot="clip-uploader-action">
+    <template slot-scope="clip-uploader-action">
       <div>
         <div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
       </div>
     </template>
 
-    <template slot="clip-uploader-body" scope="props">
+    <template slot-scope="clip-uploader-body" scope="props">
       <div v-for="file in props.files">
         <img v-bind:src="file.dataUrl">
         {{ file.name }} {{ file.status }}
@@ -233,7 +233,7 @@ Vue.component('qd-table',{template:`
  <v-container fluid="">
   <v-card>
    <v-toolbar>
-    <v-text-field append-icon="search" label="Filter user" single-line="" hide-details="" v-model="search"></v-text-field>   
+    <v-text-field append-icon="search" label="Filter user" single-line="" hide-details="" v-model="search" clearable=""></v-text-field>   
       <v-spacer></v-spacer>
          <v-btn icon="" :loading="loading" :disabled="loading" @click="getItems">
     <v-icon>refresh</v-icon>
@@ -550,7 +550,7 @@ Vue.component('vp-paramform',{template:`
               <div :title="url">{{ updating }}</div>
               <v-layout row="">
               
-              <v-layout column="" xs10=""> 
+              <v-layout column="" xs11=""> 
               <v-flex v-for="field in fields" :key="field.model">
               
               <v-text-field v-if="field.type === 'xs:anyURI'" :full-width="true" v-model="params[field.model]" :label="field.label" clearable="" :rules="fieldrules(field)" box="" append-outer-icon="send" @click:append-outer="source(field)"></v-text-field>
@@ -567,7 +567,7 @@ Vue.component('vp-paramform',{template:`
               </v-flex>
               </v-layout>
               
-              <v-layout align-center="" justify-center="" column="" fill-height="" xs2="" amber="" lighten-5="">
+              <v-layout align-center="" justify-center="" column="" fill-height="" xs1="" amber="" lighten-5="">
                <v-btn @click="clear()">Clear</v-btn>
 					     <v-btn @click="reset()">Reset</v-btn>
               </v-layout>
@@ -1319,16 +1319,12 @@ const Files=Vue.extend({template:`
 <v-card>
 
 <v-toolbar dense="">
-    <v-btn icon="" :to="{query: { url: '/' }}">
-     <v-icon>{{icon}}</v-icon>
-     </v-btn>
-        
-   
     
     <v-toolbar-title>
 		    <v-breadcrumbs>
 		        <span slot="divider" style="padding:0;"></span>
 				    <v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url:  item.path }}" :exact="true">
+				    <v-icon v-if="item.icon">{{ icon }}</v-icon>
 				    {{ item.name }}
 				    </v-breadcrumbs-item>
 		    </v-breadcrumbs>
@@ -1562,11 +1558,13 @@ const Files=Vue.extend({template:`
       },   
    // array of {name:"that", path:"/this/that/"} for url
    crumbs(){
-     var url=this.url
+     var url=this.url.split("/").slice(0,-1).map(
-     return url.split("/").slice(0,-1).map(
          function(v,i,a){return {name: v +"/",  
                                  path: a.slice(0,i+1).join("/")+"/"}}
-         ) 
+         );
+       url[0].icon=this.icon;
+       console.log("CRUM",url)
+       return url;  
       },
    selection(){
         return this.items.filter(item=>{return item.selected} ) 
@@ -2540,7 +2538,7 @@ const Tabs=Vue.extend({template:`
     },
     
     loadItem(url){
-      HTTP.get("get2",{params: {url:url}})
+      HTTP.get("get",{params: {url:url}})
       .then(r=>{
           console.log(r)
           var tab={
@@ -3413,7 +3411,7 @@ const Images=Vue.extend({template:`
             </v-autocomplete>
             
           <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-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly="" clearable=""></v-text-field>
          
           <v-date-picker v-model="query.from" scrollable="" actions="">
             <template slot-scope="{ save, cancel }">
@@ -3428,7 +3426,7 @@ const Images=Vue.extend({template:`
           
            <v-menu lazy="" :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
            
-            <v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly=""></v-text-field>
+            <v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly="" clearable=""></v-text-field>
          
           <v-date-picker v-model="query.until" scrollable="" actions="">
             <template slot-scope="{ save, cancel }">
@@ -3440,7 +3438,7 @@ const Images=Vue.extend({template:`
           </v-date-picker>
           </v-menu>
         
-            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
+            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
         
         </v-card-text>
         
@@ -3511,6 +3509,7 @@ const Images=Vue.extend({template:`
     },
     getImages(){
       this.busy=true
+      console.log("Images",this.query);
       var t0 = performance.now();
       HTTP.get("images/list",{params:this.query})
       .then(r=>{
@@ -3616,6 +3615,145 @@ const Images=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/images/imagesfilter.vue
+const Imagesfilter=Vue.extend({template:` 
+         <v-card>
+          <v-toolbar class="green white--text">
+                <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>
+          
+        <v-card-text>    
+         <v-autocomplete v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" clearable="">
+             <template slot="item" slot-scope="data">
+                  <v-list-tile-content>
+                    <v-list-tile-title v-html="data.item.text"></v-list-tile-title>
+                    <v-list-tile-sub-title v-html="data.item.count"></v-list-tile-sub-title>
+                  </v-list-tile-content>
+              </template>
+            </v-autocomplete>
+            
+          <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="" clearable=""></v-text-field>
+         
+          <v-date-picker v-model="query.from" scrollable="" actions="">
+            <template slot-scope="{ save, cancel }">
+              <v-card-actions>
+                <v-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
+                <v-btn flat="" color="primary" @click="save()">Save</v-btn>
+              </v-card-actions>
+            </template>
+          </v-date-picker></v-menu>
+          
+           <v-menu lazy="" :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
+           
+            <v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly="" clearable=""></v-text-field>
+         
+          <v-date-picker v-model="query.until" scrollable="" actions="">
+            <template slot-scope="{ save, cancel }">
+              <v-card-actions>
+                <v-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
+                <v-btn flat="" color="primary" @click="save()">Save</v-btn>
+              </v-card-actions>
+            </template>
+          </v-date-picker>
+          </v-menu>
+        
+            <v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
+        
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn @click="showFilter = false" color="primary">Apply</v-btn>
+        </v-card-actions>
+      </v-card>
+     
+ 
+ `,
+       
+  
+  data(){ 
+    return {
+    query: {page:0,  // current page
+           from:null,
+           until:null,
+           keyword:null
+    },
+    showFilter: false,
+    busy: false,
+    menu2: false,
+    showUntil: false,
+    keywords: [],
+    showInfo: false,
+    selitem: "TODO",
+    location: {use:false,value:true},
+   
+  }
+    },
+  methods:{
+    
+    cyclelocation(){
+      this.location.use=!this.location.use
+    },
+  
+    clear(){
+      this.query.from=null;
+      this.query.until=null;
+      this.query.keyword=null;
+      this.query.page=0;
+    },
+   
+    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
+    },
+   
+   
+  },
+ 
+  watch:{
+      "query":{
+        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
+      },
+      
+
+      showFilter(){
+        if(this.keywords.length==0){
+          HTTP.get("images/keywords2")
+          .then(r=>{
+            this.keywords=r.data.items
+            }) 
+        }
+      }
+  },
+  created:function(){
+    console.log("create images")
+    this.query.page=Number(this.$route.query.page) || this.query.page
+    this.query.keyword=this.$route.query.keyword || this.query.keyword
+    this.query.from=this.$route.query.from || this.query.from
+    this.query.until=this.$route.query.until || this.query.until
+    this.getImages()
+    
+  },
+  mounted:function(){
+    console.log("image filter mount")
+    
+  }
+    }
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/images/ireport.vue
 const Report=Vue.extend({template:` 
  <v-container fluid="">
@@ -4012,6 +4150,36 @@ const Login=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/map.vue
+const Leaflet=Vue.extend({template:` 
+ <v-container fluid="">
+     <v-layout row="" wrap="">
+      <v-flex xs12="" style="height:400px">
+     <l-map :zoom="zoom" :center="center">
+      <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
+      <l-marker :lat-lng="marker"></l-marker>
+    </l-map>
+    </v-flex>
+    </v-layout>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      zoom: 13,
+      center: [54.320498718, -2.739663708],
+      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+      marker: L.latLng(54.320498718, -2.739663708)
+    }
+  },
+  created:function(){
+    console.log("map")
+  }
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/documentation.vue
 const Documentation=Vue.extend({template:` 
  <v-container fluid="">
@@ -4716,7 +4884,7 @@ const Ping=Vue.extend({template:`
           <tr>
               <td>
                <v-btn @click="get()">
-                   Read <v-icon>compare_arrows</v-icon> 
+                   Read <v-icon right="">compare_arrows</v-icon> 
                 </v-btn>
              
                </td>
@@ -4749,7 +4917,7 @@ const Ping=Vue.extend({template:`
             <tr>
           <td>
            <v-btn @click="update()">
-                 Write <v-icon>compare_arrows</v-icon>
+                 Write <v-icon right="">compare_arrows</v-icon>
             </v-btn>
           </td>
           
@@ -4848,6 +5016,24 @@ const Ping=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/server/upload.vue
+const Upload=Vue.extend({template:` 
+  <v-card>
+  <v-card-title>Upload</v-card-title>
+  <v-card-actions>
+    <qd-fileupload>up..</qd-fileupload> 
+    </v-card-actions>
+    </v-card> 
+	 `,
+      
+  data:  function(){
+    return { 
+      fab: false
+  }
+  }
+}
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/session.vue
 const Session=Vue.extend({template:` 
  <v-container fluid="">
@@ -4903,7 +5089,6 @@ const Session=Vue.extend({template:`
       .then(r=>{
         console.log("status",r)
         this.$auth=Object.assign(this.$auth,r.data);
-        console.log("AFTER: ",this.$auth);
         //this.$forceUpdate()
       })  
     },
@@ -5273,8 +5458,12 @@ const Runtask=Vue.extend({template:`
       this.$refs.params.submit()
       .then(r=>{
         this.loading= false
-        this.snackbar= {show:true,msg:r.data.msg,context:"success"}
+ 
-        console.log(r.data)
+        this.snackbar= {show:true,
+                        msg: r.data && r.data.msg, 
+                        context:"success"
+                        };
+        console.log(r)
       })
       .catch(error=>{
         this.loading= false
@@ -6069,6 +6258,7 @@ const router = new VueRouter({
       { path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
       { path: 'jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
       { path: 'ping', component: Ping,meta:{title:"Ping"} },
+      { path: 'upload', component: Upload,meta:{title:"Upload"} },
       { path: 'websocket', component: Websocket,meta:{title:"Web socket"} }
      ]
     },
@@ -6094,7 +6284,7 @@ const router = new VueRouter({
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/tree', component: Tree, meta:{title:"tree"} },
     { path: '/tree2', component: Tree2, meta:{title:"tree2"} },
-    { path: '/map', component: Map,meta:{title:"map"} },
+    { path: '/map', component: Leaflet,meta:{title:"map"} },
     
     { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
     { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
@@ -6177,7 +6367,9 @@ const Vuepoc=Vue.extend({template:`
       </v-btn>
      
           <v-list>
-        
+              <v-list-tile to="/session" avatar="" ripple="">
+                <v-list-tile-title>Session</v-list-tile-title>
+              </v-list-tile>
               <v-list-tile @click="logout()">
                 <v-list-tile-title>logout</v-list-tile-title>
               </v-list-tile>
@@ -6206,7 +6398,7 @@ const Vuepoc=Vue.extend({template:`
               </v-list-tile>
               <v-divider></v-divider>
                <v-list-tile>
-               <v-list-tile-title>Refresh:</v-list-tile-title> 
+               <v-list-tile-title>Server hot load:</v-list-tile-title> 
                 <v-list-tile-action><v-btn @click="init">.init</v-btn></v-list-tile-action>
               </v-list-tile>
             </v-list>
@@ -6282,6 +6474,7 @@ const Vuepoc=Vue.extend({template:`
           {href: '/server/users',text: 'Users',icon: 'supervisor_account'},
           {href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
           {href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
+          {href: '/server/upload',text: 'Upload to server',icon: 'file_upload'},
           {href: '/server/ping',text: 'Ping',icon: 'update'}
       ]},
       {
@@ -6312,8 +6505,6 @@ const Vuepoc=Vue.extend({template:`
         text: 'More' ,
         model: false,
         children: [
-    
-      {href: '/session',text: 'Session',icon: 'person'},
       {href: '/timeline',text: 'Time line',icon: 'timelapse'},
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
@@ -6394,7 +6585,7 @@ const Vuepoc=Vue.extend({template:`
    
     HTTP.get("status")
     .then(r=>{
-      console.log("status",r)
+      //console.log("status",r)
       this.$auth=Object.assign(this.$auth,r.data);
       console.log("AFTER: ",this.$auth);
       //this.$forceUpdate()
@@ -6586,13 +6777,14 @@ function install (Vue) {
 };
 Vue.use({ install: install });
 var sockhost=('https:'==window.location.protocol?'wss:':'ws:')+'//'+ window.location.host +'/ws';
-Vue.use(VueNativeSock.default, sockhost);
+//Vue.use(VueNativeSock.default, sockhost);
-console.log("SOCK UP",VueNativeSock,sockhost);
+//console.log("SOCK UP",VueNativeSock,sockhost);
 
 //leaflet
-//Vue.component('v-map', Vue2Leaflet.Map);
+Vue.component('l-map', Vue2Leaflet.LMap);
-//Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
+Vue.component('l-tilelayer', Vue2Leaflet.LTileLayer);
-//Vue.component('v-marker', Vue2Leaflet.Marker);
+Vue.component('l-marker', Vue2Leaflet.LMarker);
+
 //function install (Vue) {
 //  Vue.component('form-schema', window["vue-json-schema"].default);
 //};

src/vue-poc/static/app.html

@@ -3,7 +3,6 @@
 
 <head>
 	<meta charset="utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta name="description" content="Vue poc" />
 	<meta name="author" content="andy bunce." />
@@ -11,9 +10,10 @@
 	<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="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
-	<link href="//unpkg.com/vuetify@1.1.12/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
+	<link href="//unpkg.com/vuetify@1.1.13/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
 	<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.css">
 	<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.css"/>
+	<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
 	<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
 	<link href="/vue-poc/ui/svg/d3-svg.css" rel="stylesheet" type="text/css"/>
 	<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
@@ -38,7 +38,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
-<script src="//unpkg.com/vuetify@1.1.12/dist/vuetify.min.js" crossorigin="anonymous"></script>
+<script src="//unpkg.com/vuetify@1.1.13/dist/vuetify.min.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-language_tools.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-linking.js" type="text/javascript" charset="utf-8"></script>
@@ -49,10 +49,13 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.7.1/localforage.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/vue-clip@1.0.0/dist/vue-clip.js" crossorigin="anonymous"></script>
+<script src="//unpkg.com/vue-clip@1.0.0/dist/vue-clip.js" crossorigin="anonymous"></script>
 <script src="//unpkg.com/vue-jstree@2.1.6/dist/vue-jstree.js" crossorigin="anonymous"></script>
 <script src="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.js" crossorigin="anonymous"></script>
 
+<script src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"  crossorigin="anonymous"></script>
+<script src="//unpkg.com/vue2-leaflet@1.0.2/dist/vue2-leaflet.js"  crossorigin="anonymous"></script>
+
 <script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js" crossorigin="anonymous"></script>
 <script src="//unpkg.com/vue-json-schema@1.1.1/dist/vue-json-schema.js" crossorigin="anonymous"></script>
 <script src="//unpkg.com/vue-form-json-schema@1.15.3/dist/vue-form-json-schema.umd.js" crossorigin="anonymous"></script>