vuetify 0.16.1

src/vue-poc/core.js

@@ -141,5 +141,10 @@ const Fullscreen={
 };
 Vue.use(Fullscreen);
 
+//leaflet
+Vue.component('v-map', Vue2Leaflet.Map);
+Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
+Vue.component('v-marker', Vue2Leaflet.Marker);
+
 Vue.use(Vuetify);
 new Vuepoc().$mount('#app')

src/vue-poc/data/vue-poc/namespaces.xml

@@ -62,4 +62,9 @@
 		<description>Schematron
 		</description>
 	</namespace>
+	
+	<namespace uri="http://www.opengis.net/kml/2.2" prefix="kml">
+    <description>Geo 
+    </description>
+  </namespace>
 </namespaces>

src/vue-poc/features/collection/collections.xqm

@@ -39,6 +39,7 @@ declare
 function vue-api:file($url as xs:string,$protocol as xs:string)
 as element(json)   
 {
+   let $_:=trace($protocol,"proto:")
    let $reader:=map{
               "webfile":ufile:webfile#1,
               "xmldb":ufile:xmldb#1

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

@@ -19,8 +19,12 @@
    <v-btn v-if="clipboard" @click="clipboard=null" icon><v-icon>content_paste</v-icon></v-btn>
     <v-spacer></v-spacer>
      <v-btn v-if="selection.length"  @click="selectNone">S: {{selection.length}}</v-btn>
+     
  <v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search"
-   hide-details single-line  @keyup.enter="setfilter"></v-text-field>
+   hide-details single-line  @keyup.enter="setfilter"
+   :append-icon="this.q?'clear':''" :append-icon-cb="e=>this.q=''"></v-text-field>
+   
+ 
     <v-toolbar-items v-if="!selection.length">
     
    <v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)">
@@ -65,7 +69,7 @@
 	      <v-list-tile v-for="item in xfolders" v-bind:key="item.name" 
 	      v-model="item.selected" @click="folder(item)" avatar >
 	        <v-list-tile-avatar   @click.prevent.stop="item.selected =! item.selected ">
-	          <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
+	          <v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
 	        </v-list-tile-avatar>
 	        <v-list-tile-content  >
 	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
@@ -84,7 +88,7 @@
 	        </v-subheader> 
 	      <v-list-tile v-for="item in xfiles" v-bind:key="item.name" >
 	        <v-list-tile-avatar avatar  @click.prevent.stop="item.selected =! item.selected ">
-	          <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
+	          <v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
 	        </v-list-tile-avatar>
 	        <v-list-tile-content @click="file(item.name)">
 	          <v-list-tile-title >{{ item.name }}</v-list-tile-title>
@@ -127,10 +131,11 @@
     return { 
             url: "", 
             items: [],
-            q: "",
+            q: null,
             busy: false,
             showInfo: false,
             clipboard: null,
+          
 						buttons: [ 
 						    {method: this.todo, icon: "view_quilt"},
 			          {method: this.add, icon: "add"},
@@ -162,6 +167,7 @@
       HTTP.get("collection",{params:{url:url,protocol:this.protocol}})
       .then(r=>{
         this.items=r.data.items
+        this.q=null
         this.busy=false
         })
         .catch(error=> {
@@ -170,6 +176,9 @@
           alert("Get query error"+url)
         });
       
+    },
+    clearq(){
+      this.q=null
     },
 	  action(b){
 	      b.method(b.icon)
@@ -198,6 +207,9 @@
    todo(icon){
       alert("todo: " + icon)
      },
+   itemClass(item){
+       return (item.selected)?"blue--text text--darken-2":""
+     }, 
    itemIcon(item){
        if(item.selected) return "check_circle"
        else return (item.type=="folder")?"folder":"insert_drive_file"
@@ -214,10 +226,10 @@
         return (this.protocol=="xmldb")?"developer_mode":"folder"
       },
    xfiles(){
-        return this.items.filter(item=>{return item.type!="folder"})
+        return this.items.filter(item=>{return item.type!="folder" &&((!this.q) || item.name.includes(this.q))})
       },
    xfolders(){
-        return this.items.filter(item=>{return item.type=="folder"})
+        return this.items.filter(item=>{return item.type=="folder" &&((!this.q) || item.name.includes(this.q))})
       },   
    // array of {name:"that", path:"/this/that/"} for url
    crumbs(){

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

@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <template id="edit">
 <v-container fluid>
-      <v-snackbar top error  v-model="snackbar">
+      <v-snackbar top color="error"  v-model="snackbar">
       {{ message }}
       <v-btn flat  @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-snackbar>
     
 <v-card>
 <v-toolbar dense>
-<v-menu >
+<v-tooltip top >
-  <v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >{{icon}}</v-icon></v-btn>
+<v-menu slot="activator">
+
+  <v-btn primary icon dark slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
   <v-list>
       <v-list-tile  v-for="item in path" :key="item">
         <v-list-tile-content @click="showfiles()">
@@ -18,34 +20,42 @@
       </v-list-tile>
   </v-list>
 </v-menu>
-
+<span>{{ path.join('/') }}</span>
+</v-tooltip>
   <v-toolbar-title >
       <span >{{ name }}</span>
   </v-toolbar-title>
- 
+  <v-tooltip top>
-  <span v-tooltip:top="{ html: 'Changed?' }">
+  <span slot="activator">
   <v-chip v-if="dirty" label small class="red white--text">*</v-chip>
 <v-chip  v-if="!dirty" label small class="green white--text">.</v-chip>
 </span>
-  <v-menu left  transition="v-fade-transition">
+<span>Changed?</span>
-      <v-chip label small slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
+</v-tooltip>
+
+<v-tooltip top>
+  <v-menu left  transition="v-fade-transition" slot="activator">
+      <v-chip label small slot="activator" >{{ mode }}</v-chip>
           <v-list dense>
               <v-list-tile v-for="(mode, mimetype) in mimeTypes"  :key="mimetype">
                 <v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
    </v-menu>
- 
+   <span v-text="mimetype"></span>
-     <v-chip   @click="acecmd('goToNextError')"
+   </v-tooltip>
-          v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
+   
-           >
+  <v-tooltip top>
+     <v-chip   @click="acecmd('goToNextError')" slot="activator" >
           <v-avatar  class="green ">{{annotations && annotations.info}}</v-avatar>
           <v-avatar  class="yellow ">{{annotations && annotations.warning}}</v-avatar>        
           <v-avatar   class="red " small>{{annotations && annotations.error}}</v-avatar>    
            <v-avatar>
               <v-icon black >navigate_next</v-icon>
            </v-avatar>
-          </v-chip>
+      </v-chip>
+      <span>Annotations: Errors,Warning and Info</span>
+   </v-tooltip>
 <v-spacer></v-spacer>
    <v-btn  icon @click="acecmd('outline')" title="outline -todo">
       <v-icon>star</v-icon>

src/vue-poc/features/eval/eval.vue

@@ -71,7 +71,7 @@
          
     </v-card-actions>
     <v-card-text v-if="showError">
-     <v-alert error v-model="showError">Error </v-alert>
+     <v-alert color="error" v-model="showError">Error </v-alert>
     </v-card-text>
      <v-card-text v-if="showResult">
      <v-flex xs12 style="height:200px"  fill-height>

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

@@ -9,12 +9,13 @@
       <v-toolbar class="green white--text">
       <v-btn  @click.stop="showFilter = true" icon><v-icon>search</v-icon></v-btn>
         <v-toolbar-title>{{ qtext }}</v-toolbar-title>
-              
+        <v-tooltip top  v-if="query.keyword || query.from || query.until">      
-        <v-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
+        <v-btn @click="clear" icon slot="activator"
-        v-if="query.keyword || query.from || query.until">
+       >
             <v-icon>clear</v-icon>
            </v-btn>
-          
+         <span>Clear search</span>
+         </v-tooltip> 
            <v-spacer></v-spacer>
            <span v-if="!busy">
            <v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
@@ -39,7 +40,8 @@
               <v-card   class="grey lighten-2 pt-1">
                 <v-card-media :src="src(image)"  @dblclick="go(image)" 
                 height="80px" contain></v-card-media>
-                 <v-card-actions  v-tooltip:top="{ html:  ' '+image.path }">
+                <v-tooltip top>
+                 <v-card-actions  slot="activator">
               
                 <v-btn icon small>
                   <v-icon>favorite</v-icon>
@@ -52,6 +54,8 @@
                   <v-icon>share</v-icon>
                 </v-btn>
               </v-card-actions>
+              <span v-text="image.path"></span>
+              </v-tooltip>
               </v-card>
             </v-flex>
           </v-layout>
@@ -70,7 +74,7 @@
               v-bind:items="keywords"
               v-model="query.keyword"
               label="Keyword" item-value="text" item-text="text"
-              autocomplete
+              autocomplete clearable
             >
              <template slot="item" scope="data">
                   <v-list-tile-content>
@@ -140,6 +144,9 @@
             </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>
@@ -180,12 +187,16 @@
     showUntil: false,
     keywords: [],
     showInfo: false,
-    selitem: "TODO"
+    selitem: "TODO",
+    location: {use:false,value:true}
   }),
   methods:{
     src(item){
         return "data:image/jpeg;base64,"+item.data
     },
+    cyclelocation(){
+      this.location.use=!this.location.use
+    },
     getImages(){
       this.busy=true
       var t0 = performance.now();

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

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- 
+ image  report
+ 
+ -->
+<template id="people">
+ <v-container fluid>
+  <v-card >
+    <v-toolbar class="orange darken-1">
+     <v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title >
+     <v-chip >todo</v-chip>   
+    </v-card-title>
+   
+    <v-spacer></v-spacer> 
+  
+    </v-toolbar>
+    <v-card-text>
+people
+ </v-card-text>
+ </v-card>
+ </v-container>
+</template>
+
+<script>{  
+ 
+    }
+</script>

src/vue-poc/features/login/login.vue

@@ -5,7 +5,7 @@
       <v-card-title class="green darken-1">
         <span class="white--text">Login</span>
       </v-card-title>
-    <v-alert error v-bind:value="showMessage">
+    <v-alert color="error" v-bind:value="showMessage">
       {{message}}
     </v-alert>
      <v-card-actions>

src/vue-poc/features/map.vue

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<template id="map">
+ <v-container fluid>
+     <v-layout row wrap>
+      <v-flex xs12 style="height:400px">
+     <v-map :zoom="zoom" :center="center" >
+      <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
+      <v-marker :lat-lng="marker"></v-marker>
+    </v-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/ping/ping.vue

@@ -8,12 +8,13 @@
  <v-btn @click="reset()">Reset</v-btn>
  </v-toolbar>
  <v-card-text>
-  <p>Read or increment a database value.</p>
+  <p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
   <p>Counter:{{counter}}</p>
   <table class="table">
       <thead> 
         <tr>
-          <th>Option</th>
+         <th>Action</th>
+          <th>Once</th>
           <th >Repeat</th>
           <th >Last</th>
           <th >Count</th>
@@ -27,13 +28,17 @@
 
       
           <tr>
+              <td>Get</td>
               <td>
-                   <v-btn     @click="get()" >Get count</v-btn>
+               <v-btn @click="get()" icon >
+                   <v-icon>cached</v-icon>
+                </v-btn>
+             
                </td>
                <td>
-                <v-switch  v-model="repeat.get"></v-switch>
+                <v-switch v-on:change="gchange" v-model="repeat.get"></v-switch>
 
-        </td>    
+             </td>    
               <td>
                   <span >{{getValues.last}}</span>
               </td>
@@ -57,12 +62,15 @@
           </tr>
           
             <tr>
+             <td>Update</td>
           <td>
-             <v-btn    @click="update()" >Update count</v-btn>
+           <v-btn @click="update()" icon >
+                   <v-icon>cached</v-icon>
+            </v-btn>
           </td>
           
           <td>
-           <v-switch  v-model="repeat.post"></v-switch>
+           <v-switch  v-on:change="pchange"  v-model="repeat.post"></v-switch>
           </td>
            <td class="col-md-1">
                         <span >{{postValues.last}}</span>
@@ -131,6 +139,12 @@
         }
      })
     },
+    gchange(v){
+      if(v)this.get() 
+    },
+    pchange(v){
+      if(v)this.update() 
+    },
     reset(){
       Object.assign(this.getValues,this.getValues.clear());
       Object.assign(this.postValues,this.postValues.clear());

src/vue-poc/features/search.vue

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="search">
  <v-container fluid>
- <v-alert warning value="true">Not finished</v-alert>
+ <v-alert color="warning" value="true">Not finished</v-alert>
  <v-text-field  label="Search..." v-model="q" v-on:keyup="send"></v-text-field> 
   <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
   <v-layout>

src/vue-poc/features/settings/acesettings.vue

@@ -5,7 +5,7 @@
   <v-layout row>
     <v-flex xs12 sm8 offset-sm2>
       <v-card>
-        <v-alert  warning value="true">Not fully implemented</v-alert>
+        <v-alert  color="warning" value="true">Not fully implemented</v-alert>
       
       <v-container fluid>
         <v-layout row>

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

@@ -13,6 +13,19 @@ declare
 function vue-rest:tasks()   
 {
   let $a:=42
-  return <json type="object"><msg> hello tasks</msg></json>
+  return <json type="array">
+        <_ type="object">
+          <to>tasks/model</to>
+          <text>model</text>
+        </_>
+          <_ type="object">
+          <to>tasks/xqdoc</to>
+          <text>XQdoc</text>
+        </_>
+          <_ type="object">
+          <to>tasks/vuecompile</to>
+          <text>vue compile</text>
+        </_>
+        </json>
 };
   

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

@@ -20,11 +20,7 @@
 <script>{
   data(){
     return {
-      tasks: [
+      tasks: [],      
-       {to: "tasks/model", text: "model"},
-       {to: "tasks/xqdoc", text: "xqdoc"},
-       {to: "tasks/vuecompile", text: "vue compile"}
-      ],
       snackbar: false
       }
   },
@@ -33,6 +29,7 @@
         HTTP.get("tasks/list")
         .then(r=>{
 		   this.snackbar=true
+		   this.tasks=r.data
        })
     }
    },

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

@@ -35,10 +35,10 @@
     </v-card-text>
    
      
-    <v-alert success v-model="alert.success">
+    <v-alert color="success" v-model="alert.success">
     {{alert.timestamp}}:{{alert.msg}}
     </v-alert>
-     <v-alert error v-model="alert.error">
+     <v-alert color="error" v-model="alert.error">
     {{alert.timestamp}}:<code>{{alert.msg}}</code>
     </v-alert>
   </v-card>

src/vue-poc/features/thumbnail/thumbnail.vue

@@ -9,7 +9,7 @@
       <v-divider></v-divider>
       <v-stepper-step step="3">Result</v-stepper-step>
     </v-stepper-header>
-  
+  <v-stepper-items>
   <v-stepper-content step="1" non-linear>
     <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
     <v-text-field
@@ -43,6 +43,7 @@
      <v-btn flat @click="step -= 1">Back</v-btn>
      <v-btn primary @click="go()">go</v-btn>
   </v-stepper-content>
+  </v-stepper-items>
 </v-stepper>
  </v-container>
 </template>

src/vue-poc/features/timeline.vue

@@ -9,7 +9,7 @@
 	 </v-toolbar>
 	 <v-card-text>
 	   <vis-time-line :items="vueState.data1" :events="Events" 
-	                  :options="{editable: true, clickToUse: true}" @select="select"></vis-time-line>
+	                  :options="{editable: true, clickToUse: false" @select="select"></vis-time-line>
 	 </v-card-text>
  </v-card>
  

src/vue-poc/layout.xq

@@ -0,0 +1,64 @@
+declare  variable $body external :="{body}";
+declare  variable $version external :="{verson}";
+declare variable $base external :="/doc/";
+declare variable $static external :="/static/doc/";
+declare variable $incl-css as element()* external :=();
+declare variable $incl-js as element()* external :=();
+declare variable $debug-js as element()* external :=();
+
+<html ng-app="doc" ng-controller="AppController">
+<head>
+ <meta charset="utf-8"/>
+ <base href="{$base}" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<meta name="description" content="doc"/>
+<meta name="author" content="andy bunce"/>
+    
+<title>doc (v{$version})</title>
+<!-- Le fav and touch icons -->
+<link rel="shortcut icon" href="{$static}icon.png"/>
+<!-- component css -->
+{$incl-css}
+<link href="{$static}app.css" rel="stylesheet"/>
+<!--
+<script type="text/javascript" src="/static/lib/firebug-lite/4/firebug-lite.js">
+{{
+    overrideConsole: false,
+    startInNewWindow: true,
+    startOpened: true,
+    enableTrace: true
+}}
+</script>
+-->
+<script type="text/javascript">
+  (function(i,s,o,g,r,a,m){{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){{
+  (i[r].q=i[r].q||[]).push(arguments)}},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  }})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-39638119-1', 'auto');
+</script>   
+</head>
+<body> 
+{$body}
+
+ <!-- start component js -->
+    {$incl-js}
+    <!-- application -->
+    <script src="{$static}app.js"  ></script>
+    <script src="{$static}services.js"  ></script>
+    <script src="{$static}feats/apps/apps.js"  ></script>
+    <script src="{$static}feats/components/components.js"  ></script>
+	<script src="{$static}feats/history/history.js"  ></script>
+    <script src="{$static}feats/files/files.js"  ></script>
+    <script src="{$static}feats/jobs/jobs.js"  ></script>
+    <script src="{$static}feats/schema/schema.js"  ></script>
+    <script src="{$static}feats/entity/entity.js"  ></script>
+    <script src="{$static}feats/xqmodules/xqm.js"  ></script>
+    <script src="{$static}feats/tools/tools.js"  ></script>
+    <script src="{$static}feats/tasks/tasks.js"  ></script>
+    <script src="{$static}feats/database/database.js"  ></script>
+    <script src="{$static}feats/directives/directives.js"  ></script>
+</body>
+</html>

src/vue-poc/lib/txq.xqm

@@ -0,0 +1,49 @@
+xquery version "3.1";
+(:~
+: A(nother) templating Engine for XQuery (BaseX specific)
+: specials:
+: partial(file,name,sequence)
+:
+: @author andy bunce
+: @since sept 2012
+: @licence apache 2
+:)
+ 
+module namespace txq = 'quodatum.txq';
+declare default function namespace 'quodatum.txq';
+import module namespace xquery = "http://basex.org/modules/xquery";
+ 
+(:~
+: template function
+: @param template url to fill
+: @param map name and value to apply
+: @return updated doc from map
+:)
+declare function render($template as xs:string,$map as map(*))
+{
+    let $map:=map:merge(($map,map{"partial": partial(?,?,?,$map,$template)}))
+    return xquery:invoke($template,$map)
+};
+ 
+(:~
+: template function with wrapping layout
+: @param $layout outer template with $body placeholder to insert $template
+: @return updated doc from map
+:)
+declare function render($template as xs:string,$map as map(*),$layout as xs:string)
+{
+    let $content:=render($template,$map)
+    let $map:=map:merge(($map,map{"body": $content}))
+    return render($layout,$map)
+};
+ 
+(:~
+: partial template function: evaluate part for each value in sequence
+: @return updated doc from map
+:)
+declare function partial($part as xs:string,$name,$seq,$map,$base)
+{
+    for $s in $seq
+    let $map:=map:merge(($map,map{$name: $s}))
+    return render(fn:resolve-uri($part,$base),$map)
+};

src/vue-poc/lib/vue-compile/vue-compile.xqm

@@ -88,11 +88,14 @@ declare function vue:compile($proj as xs:string)
 {
 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)
-let $ROUTER:="components/router.js"=>file:resolve-path($proj)
+
-let $DEST:="static/app-gen.js"=>file:resolve-path($proj)
+let $CORE:="core.js"=>file:resolve-path($proj)
+let $ROUTER:="router.js"=>file:resolve-path($proj)
 let $APP:="vue-poc.vue"=>file:resolve-path($proj)
+
+let $DEST:="static/app-gen.js"=>file:resolve-path($proj)
+
 let $files:=vue:feature-files($proj)
 let $feats:=$files!vue:feature-build(.,false())
 

src/vue-poc/lib/xqdoc/html-module.xsl

@@ -4,9 +4,7 @@
 	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
 	xmlns:qd="http://www.quodatum.com/ns/xsl" exclude-result-prefixes="xs doc fn"
 	version="2.0">
-	<!-- Standalone xqdoc:xqdoc transform 
+	<!-- Standalone xqdoc:xqdoc transform mode"restxq" -->
-	mode"restxq"
-	-->
 	<xsl:param name="project" as="xs:string" />
 	<xsl:param name="source" as="xs:string" />
 	<xsl:param name="filename" as="xs:string" />
@@ -20,7 +18,7 @@
 		select="//doc:function[$show-private or not(doc:annotations/doc:annotation/@name='private')]" />
 	<xsl:variable name="docuri"
 		select="//doc:xqdoc/doc:module/doc:uri/string()" />
-	<!-- uses RESTXQ namespace -->
+	<!-- prefixes used for RESTXQ namespace -->
 	<xsl:variable name="restxq"
 		select="//doc:namespace[@uri='http://exquery.org/ns/restxq']/@prefix/string()" />
 	<!-- generate module html // -->
@@ -101,7 +99,7 @@
 			<xsl:apply-templates select="doc:comment/doc:description" />
 			<dt>Tags</dt>
 			<dd>
-				<xsl:if test="$restxq">
+				<xsl:if test="count($restxq)">
 					<span class="tag tag-success">RESTXQ</span>
 				</xsl:if>
 				<xsl:apply-templates
@@ -270,13 +268,15 @@
 						</a>
 					</h4>
 					<ul>
-					<xsl:for-each select="current-group()/../..">
+						<xsl:for-each select="current-group()/../..">
-					 <li>
+							<li>
-					 <a href="#{ doc:name }"><xsl:value-of select="doc:name"/></a>
+								<a href="#{ doc:name }">
-					 </li>
+									<xsl:value-of select="doc:name" />
-					</xsl:for-each>
+								</a>
+							</li>
+						</xsl:for-each>
 					</ul>
-					
+
 				</div>
 			</xsl:for-each-group>
 			<!-- <xsl:apply-templates select="doc:function" /> -->
@@ -295,9 +295,11 @@
 	<xsl:template match="doc:parameter">
 		<li>
 			<xsl:value-of select="doc:name" />
-			as
+			<code class="as">&#160;as&#160;</code>
-			<xsl:value-of select="doc:type" />
+			<code class="return-type">
-			<xsl:value-of select="doc:type/@occurrence" />
+				<xsl:value-of select="doc:type" />
+				<xsl:value-of select="doc:type/@occurrence" />
+			</code>
 			<xsl:variable name="name" select="string(doc:name)" />
 			<xsl:for-each
 				select="../../doc:comment/doc:param[starts-with(normalize-space(.), $name) or starts-with(normalize-space(.), concat('$',$name))]">
@@ -311,8 +313,10 @@
 		<dd>
 			<ul>
 				<li>
-					<xsl:value-of select="doc:type" />
+					<code class="return-type">
-					<xsl:value-of select="doc:type/@occurrence" />
+						<xsl:value-of select="doc:type" />
+						<xsl:value-of select="doc:type/@occurrence" />
+					</code>
 					<xsl:for-each select="../doc:comment/doc:return">
 						<xsl:text>: </xsl:text>
 						<xsl:copy-of select="node()|text()" />
@@ -332,25 +336,25 @@
 	</xsl:template>
 
 	<xsl:template match="doc:annotations">
-	<table class="data">
+		<table class="data">
-	 <caption style="text-align: left;">Annotations</caption>
+			<caption style="text-align: left;">Annotations</caption>
-	 <tbody>
+			<tbody>
-			<xsl:for-each select="doc:annotation">
+				<xsl:for-each select="doc:annotation">
-				<tr>
+					<tr>
-				<td>
+						<td>
-					<code class="function">
+							<code class="function">
-						<xsl:text>%</xsl:text>
+								<xsl:text>%</xsl:text>
-						<xsl:value-of select="@name" />
+								<xsl:value-of select="@name" />
-					</code>
+							</code>
-					</td>
+						</td>
-					<td>
+						<td>
-					<code class="arg">
+							<code class="arg">
-						<xsl:value-of select="doc:literal" />
+								<xsl:value-of select="doc:literal" />
-					</code>
+							</code>
-					</td>
+						</td>
-				</tr>
+					</tr>
-			</xsl:for-each>
+				</xsl:for-each>
-		</tbody>
+			</tbody>
 		</table>
 	</xsl:template>
 
@@ -490,7 +494,8 @@
 													</div>
 												</xsl:if>
 												<xsl:if test="qd:is-updating(current-group())">
-													<div class="tag tag-danger" title="Updating" style="float:right">U</div>
+													<div class="tag tag-danger" title="Updating" style="float:right">U
+													</div>
 												</xsl:if>
 											</span>
 										</a>
@@ -543,7 +548,7 @@
 	<xsl:function name="qd:restxq" as="element(doc:annotation)*">
 		<xsl:param name="fun" as="element(doc:function)*" />
 		<xsl:variable name="found"
-			select="$fun/doc:annotations/doc:annotation[@name=concat($restxq,':path')]" />
+			select="$fun/doc:annotations/doc:annotation[@name=(for $p in $restxq return concat($p,':path'))]" />
 		<xsl:message>
 			<xsl:copy-of select="$found" />
 		</xsl:message>
@@ -556,4 +561,59 @@
 			select="$fun/doc:annotations/doc:annotation[@name='updating']" />
 		<xsl:sequence select="not(empty($found))" />
 	</xsl:function>
+	
+	<!-- generate span with method name eg GET -->
+  <xsl:template match="method" mode="name">
+    <xsl:variable name="name" select="string(@name)" />
+    <span>
+      <xsl:attribute name="class">
+    <xsl:text>wadl-method label </xsl:text>
+      <xsl:choose>
+        <xsl:when test="$name='GET'">
+          <xsl:text>label-primary</xsl:text>
+        </xsl:when>
+        <xsl:when test="$name='POST'">
+          <xsl:text>label-success</xsl:text>
+        </xsl:when>
+        <xsl:when test="$name='DELETE'">
+          <xsl:text>label-danger</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>label-warning</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+      </xsl:attribute>
+      <xsl:value-of select="if($name = '')then '(ALL)' else $name" />
+    </span>
+  </xsl:template>
+  
+  <xsl:template match="representation" mode="mediaType">
+    <xsl:variable name="mediaType" select="@mediaType" />
+    <span class="label label-default label-pill pull-xs-right" title="{$mediaType}">
+      <xsl:choose>
+        <xsl:when test="$mediaType='text/html'">
+          <xsl:text>H</xsl:text>
+        </xsl:when>
+        <xsl:when test="$mediaType='application/octet-stream'">
+          <xsl:text>B</xsl:text>
+        </xsl:when>
+        <xsl:when test="$mediaType='application/xml'">
+          <xsl:text>X</xsl:text>
+        </xsl:when>
+        <xsl:when test="$mediaType='text/plain'">
+          <xsl:text>T</xsl:text>
+        </xsl:when>
+        <xsl:when test="$mediaType='application/json'">
+          <xsl:text>J</xsl:text>
+        </xsl:when>
+        <xsl:when test="$mediaType='image/svg+xml'">
+          <xsl:text>S</xsl:text>
+        </xsl:when>
+
+        <xsl:otherwise>
+          ?
+        </xsl:otherwise>
+      </xsl:choose>
+    </span>
+  </xsl:template>
 </xsl:stylesheet>

src/vue-poc/models.gen.xqm

@@ -1,5 +1,5 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2017-09-17T13:41:02.538+01:00 
+ : auto generated from xml files in entities folder at: 2017-10-06T15:21:02.917+01:00 
  :)
 
 module namespace entity = 'quodatum.models.generated';

src/vue-poc/router.js

@@ -4,6 +4,7 @@ const router = new VueRouter({
   routes: [
     { path: '/', component: Home, meta:{title:"Home"} },
     { path: '/session', component: Session ,meta: {title:"Session"}},
+    
     {path: '/images', redirect: '/images/item' },
     { path: '/images/item', name:'images', component: Images, meta:{title: "Images"} },
     { path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}},
@@ -11,6 +12,8 @@ const router = new VueRouter({
     { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
     { path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} },
     { path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
+    { path: '/images/people', component: People, meta:{title:"Image people"} },
+    
     { path: '/select', component: Select, meta:{title:"Select"} },
     { path: '/search', component: Search, meta:{title:"Search"} },
     { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@@ -34,6 +37,7 @@ const router = new VueRouter({
     { path: '/jobs', component: Jobs, meta:{title:"Jobs running"} },
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/map', component: Map,meta:{title:"map"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],

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

@@ -1,4 +1,4 @@
-// generated 2017-09-23T23:02:27.92+01:00
+// generated 2017-10-06T15:15:26.236+01:00
 
Vue.component('qd-confirm',{template:` 
   <v-dialog v-model="showDialog">
        <v-card>
@@ -467,7 +467,10 @@ Vue.filter('round', function(value, decimals) {
    <v-btn v-if="clipboard" @click="clipboard=null" icon=""><v-icon>content_paste</v-icon></v-btn>
     <v-spacer></v-spacer>
      <v-btn v-if="selection.length" @click="selectNone">S: {{selection.length}}</v-btn>
- <v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
+     
+ <v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter" :append-icon="this.q?'clear':''" :append-icon-cb="e=>this.q=''"></v-text-field>
+   
+ 
     <v-toolbar-items v-if="!selection.length">
     
    <v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)">
@@ -511,7 +514,7 @@ Vue.filter('round', function(value, decimals) {
 	     </v-subheader>
 	      <v-list-tile v-for="item in xfolders" v-bind:key="item.name" v-model="item.selected" @click="folder(item)" avatar="">
 	        <v-list-tile-avatar @click.prevent.stop="item.selected =! item.selected ">
-	          <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
+	          <v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
 	        </v-list-tile-avatar>
 	        <v-list-tile-content>
 	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
@@ -530,7 +533,7 @@ Vue.filter('round', function(value, decimals) {
 	        </v-subheader> 
 	      <v-list-tile v-for="item in xfiles" v-bind:key="item.name">
 	        <v-list-tile-avatar avatar="" @click.prevent.stop="item.selected =! item.selected ">
-	          <v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
+	          <v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
 	        </v-list-tile-avatar>
 	        <v-list-tile-content @click="file(item.name)">
 	          <v-list-tile-title>{{ item.name }}</v-list-tile-title>
@@ -572,10 +575,11 @@ Vue.filter('round', function(value, decimals) {
     return { 
             url: "", 
             items: [],
-            q: "",
+            q: null,
             busy: false,
             showInfo: false,
             clipboard: null,
+          
 						buttons: [ 
 						    {method: this.todo, icon: "view_quilt"},
 			          {method: this.add, icon: "add"},
@@ -607,6 +611,7 @@ Vue.filter('round', function(value, decimals) {
       HTTP.get("collection",{params:{url:url,protocol:this.protocol}})
       .then(r=>{
         this.items=r.data.items
+        this.q=null
         this.busy=false
         })
         .catch(error=> {
@@ -615,6 +620,9 @@ Vue.filter('round', function(value, decimals) {
           alert("Get query error"+url)
         });
       
+    },
+    clearq(){
+      this.q=null
     },
 	  action(b){
 	      b.method(b.icon)
@@ -643,6 +651,9 @@ Vue.filter('round', function(value, decimals) {
    todo(icon){
       alert("todo: " + icon)
      },
+   itemClass(item){
+       return (item.selected)?"blue--text text--darken-2":""
+     }, 
    itemIcon(item){
        if(item.selected) return "check_circle"
        else return (item.type=="folder")?"folder":"insert_drive_file"
@@ -659,10 +670,10 @@ Vue.filter('round', function(value, decimals) {
         return (this.protocol=="xmldb")?"developer_mode":"folder"
       },
    xfiles(){
-        return this.items.filter(item=>{return item.type!="folder"})
+        return this.items.filter(item=>{return item.type!="folder" &&((!this.q) || item.name.includes(this.q))})
       },
    xfolders(){
-        return this.items.filter(item=>{return item.type=="folder"})
+        return this.items.filter(item=>{return item.type=="folder" &&((!this.q) || item.name.includes(this.q))})
       },   
    // array of {name:"that", path:"/this/that/"} for url
    crumbs(){
@@ -739,15 +750,17 @@ Vue.filter('round', function(value, decimals) {
       );
       const Edit=Vue.extend({template:` 
 <v-container fluid="">
-      <v-snackbar top="" error="" v-model="snackbar">
+      <v-snackbar top="" color="error" v-model="snackbar">
       {{ message }}
       <v-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
     </v-snackbar>
     
 <v-card>
 <v-toolbar dense="">
-<v-menu>
+<v-tooltip top="">
-  <v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>{{icon}}</v-icon></v-btn>
+<v-menu slot="activator">
+
+  <v-btn primary="" icon="" dark="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
   <v-list>
       <v-list-tile v-for="item in path" :key="item">
         <v-list-tile-content @click="showfiles()">
@@ -756,32 +769,42 @@ Vue.filter('round', function(value, decimals) {
       </v-list-tile>
   </v-list>
 </v-menu>
-
+<span>{{ path.join('/') }}</span>
+</v-tooltip>
   <v-toolbar-title>
       <span>{{ name }}</span>
   </v-toolbar-title>
- 
+  <v-tooltip top="">
-  <span v-tooltip:top="{ html: 'Changed?' }">
+  <span slot="activator">
   <v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
 <v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
 </span>
-  <v-menu left="" transition="v-fade-transition">
+<span>Changed?</span>
-      <v-chip label="" small="" slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
+</v-tooltip>
+
+<v-tooltip top="">
+  <v-menu left="" transition="v-fade-transition" slot="activator">
+      <v-chip label="" small="" slot="activator">{{ mode }}</v-chip>
           <v-list dense="">
               <v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
                 <v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         
    </v-menu>
- 
+   <span v-text="mimetype"></span>
-     <v-chip @click="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
+   </v-tooltip>
+   
+  <v-tooltip top="">
+     <v-chip @click="acecmd('goToNextError')" slot="activator">
           <v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
           <v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>        
           <v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>    
            <v-avatar>
               <v-icon black="">navigate_next</v-icon>
            </v-avatar>
-          </v-chip>
+      </v-chip>
+      <span>Annotations: Errors,Warning and Info</span>
+   </v-tooltip>
 <v-spacer></v-spacer>
    <v-btn icon="" @click="acecmd('outline')" title="outline -todo">
       <v-icon>star</v-icon>
@@ -1096,7 +1119,7 @@ Vue.filter('round', function(value, decimals) {
          
     </v-card-actions>
     <v-card-text v-if="showError">
-     <v-alert error="" v-model="showError">Error </v-alert>
+     <v-alert color="error" v-model="showError">Error </v-alert>
     </v-card-text>
      <v-card-text v-if="showResult">
      <v-flex xs12="" style="height:200px" fill-height="">
@@ -1416,11 +1439,12 @@ Vue.filter('round', function(value, decimals) {
       <v-toolbar class="green white--text">
       <v-btn @click.stop="showFilter = true" icon=""><v-icon>search</v-icon></v-btn>
         <v-toolbar-title>{{ qtext }}</v-toolbar-title>
-              
+        <v-tooltip top="" v-if="query.keyword || query.from || query.until">      
-        <v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
+        <v-btn @click="clear" icon="" slot="activator">
             <v-icon>clear</v-icon>
            </v-btn>
-          
+         <span>Clear search</span>
+         </v-tooltip> 
            <v-spacer></v-spacer>
            <span v-if="!busy">
            <v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
@@ -1440,7 +1464,8 @@ Vue.filter('round', function(value, decimals) {
             <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
               <v-card class="grey lighten-2 pt-1">
                 <v-card-media :src="src(image)" @dblclick="go(image)" height="80px" contain=""></v-card-media>
-                 <v-card-actions v-tooltip:top="{ html:  ' '+image.path }">
+                <v-tooltip top="">
+                 <v-card-actions slot="activator">
               
                 <v-btn icon="" small="">
                   <v-icon>favorite</v-icon>
@@ -1453,6 +1478,8 @@ Vue.filter('round', function(value, decimals) {
                   <v-icon>share</v-icon>
                 </v-btn>
               </v-card-actions>
+              <span v-text="image.path"></span>
+              </v-tooltip>
               </v-card>
             </v-flex>
           </v-layout>
@@ -1467,7 +1494,7 @@ Vue.filter('round', function(value, decimals) {
           </v-toolbar>
           
         <v-card-text>    
-         <v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" autocomplete="">
+         <v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" autocomplete="" clearable="">
              <template slot="item" scope="data">
                   <v-list-tile-content>
                     <v-list-tile-title v-html="data.item.text"></v-list-tile-title>
@@ -1506,6 +1533,9 @@ Vue.filter('round', function(value, decimals) {
             </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>
@@ -1545,12 +1575,16 @@ Vue.filter('round', function(value, decimals) {
     showUntil: false,
     keywords: [],
     showInfo: false,
-    selitem: "TODO"
+    selitem: "TODO",
+    location: {use:false,value:true}
   }),
   methods:{
     src(item){
         return "data:image/jpeg;base64,"+item.data
     },
+    cyclelocation(){
+      this.location.use=!this.location.use
+    },
     getImages(){
       this.busy=true
       var t0 = performance.now();
@@ -1721,6 +1755,29 @@ body
     this.getKeywords()
   }
 }
+      );
+      const People=Vue.extend({template:` 
+ <v-container fluid="">
+  <v-card>
+    <v-toolbar class="orange darken-1">
+     <v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
+     <v-card-title>
+     <v-chip>todo</v-chip>   
+    </v-card-title>
+   
+    <v-spacer></v-spacer> 
+  
+    </v-toolbar>
+    <v-card-text>
+people
+ </v-card-text>
+ </v-card>
+ </v-container>
+ `,
+        
+ 
+    }
+
       );
       const Job=Vue.extend({template:` 
   <v-card>
@@ -1890,7 +1947,7 @@ body
       <v-card-title class="green darken-1">
         <span class="white--text">Login</span>
       </v-card-title>
-    <v-alert error="" v-bind:value="showMessage">
+    <v-alert color="error" v-bind:value="showMessage">
       {{message}}
     </v-alert>
      <v-card-actions>
@@ -1946,6 +2003,34 @@ body
   }
 }
 
+      );
+      const Map=Vue.extend({template:` 
+ <v-container fluid="">
+     <v-layout row="" wrap="">
+      <v-flex xs12="" style="height:400px">
+     <v-map :zoom="zoom" :center="center">
+      <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
+      <v-marker :lat-lng="marker"></v-marker>
+    </v-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")
+  }
+}
+
       );
       const Ping=Vue.extend({template:` 
  <v-container fluid="">
@@ -1956,12 +2041,13 @@ body
  <v-btn @click="reset()">Reset</v-btn>
  </v-toolbar>
  <v-card-text>
-  <p>Read or increment a database value.</p>
+  <p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
   <p>Counter:{{counter}}</p>
   <table class="table">
       <thead> 
         <tr>
-          <th>Option</th>
+         <th>Action</th>
+          <th>Once</th>
           <th>Repeat</th>
           <th>Last</th>
           <th>Count</th>
@@ -1975,13 +2061,17 @@ body
 
       
           <tr>
+              <td>Get</td>
               <td>
-                   <v-btn @click="get()">Get count</v-btn>
+               <v-btn @click="get()" icon="">
+                   <v-icon>cached</v-icon>
+                </v-btn>
+             
                </td>
                <td>
-                <v-switch v-model="repeat.get"></v-switch>
+                <v-switch v-on:change="gchange" v-model="repeat.get"></v-switch>
 
-        </td>    
+             </td>    
               <td>
                   <span>{{getValues.last}}</span>
               </td>
@@ -2005,12 +2095,15 @@ body
           </tr>
           
             <tr>
+             <td>Update</td>
           <td>
-             <v-btn @click="update()">Update count</v-btn>
+           <v-btn @click="update()" icon="">
+                   <v-icon>cached</v-icon>
+            </v-btn>
           </td>
           
           <td>
-           <v-switch v-model="repeat.post"></v-switch>
+           <v-switch v-on:change="pchange" v-model="repeat.post"></v-switch>
           </td>
            <td class="col-md-1">
                         <span>{{postValues.last}}</span>
@@ -2078,6 +2171,12 @@ body
         }
      })
     },
+    gchange(v){
+      if(v)this.get() 
+    },
+    pchange(v){
+      if(v)this.update() 
+    },
     reset(){
       Object.assign(this.getValues,this.getValues.clear());
       Object.assign(this.postValues,this.postValues.clear());
@@ -2186,7 +2285,7 @@ repository todo
       );
       const Search=Vue.extend({template:` 
  <v-container fluid="">
- <v-alert warning="" value="true">Not finished</v-alert>
+ <v-alert color="warning" value="true">Not finished</v-alert>
  <v-text-field label="Search..." v-model="q" v-on:keyup="send"></v-text-field> 
   <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
   <v-layout>
@@ -2406,7 +2505,7 @@ repository todo
   <v-layout row="">
     <v-flex xs12="" sm8="" offset-sm2="">
       <v-card>
-        <v-alert warning="" value="true">Not fully implemented</v-alert>
+        <v-alert color="warning" value="true">Not fully implemented</v-alert>
       
       <v-container fluid="">
         <v-layout row="">
@@ -2717,11 +2816,7 @@ repository todo
       
   data(){
     return {
-      tasks: [
+      tasks: [],      
-       {to: "tasks/model", text: "model"},
-       {to: "tasks/xqdoc", text: "xqdoc"},
-       {to: "tasks/vuecompile", text: "vue compile"}
-      ],
       snackbar: false
       }
   },
@@ -2730,6 +2825,7 @@ repository todo
         HTTP.get("tasks/list")
         .then(r=>{
 		   this.snackbar=true
+		   this.tasks=r.data
        })
     }
    },
@@ -2845,10 +2941,10 @@ repository todo
     </v-card-text>
    
      
-    <v-alert success="" v-model="alert.success">
+    <v-alert color="success" v-model="alert.success">
     {{alert.timestamp}}:{{alert.msg}}
     </v-alert>
-     <v-alert error="" v-model="alert.error">
+     <v-alert color="error" v-model="alert.error">
     {{alert.timestamp}}:<code>{{alert.msg}}</code>
     </v-alert>
   </v-card>
@@ -2908,7 +3004,7 @@ repository todo
       <v-divider></v-divider>
       <v-stepper-step step="3">Result</v-stepper-step>
     </v-stepper-header>
-  
+  <v-stepper-items>
   <v-stepper-content step="1" non-linear="">
     <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>
@@ -2934,6 +3030,7 @@ repository todo
      <v-btn flat="" @click="step -= 1">Back</v-btn>
      <v-btn primary="" @click="go()">go</v-btn>
   </v-stepper-content>
+  </v-stepper-items>
 </v-stepper>
  </v-container>
  `,
@@ -3039,6 +3136,7 @@ users todo
   routes: [
     { path: '/', component: Home, meta:{title:"Home"} },
     { path: '/session', component: Session ,meta: {title:"Session"}},
+    
     {path: '/images', redirect: '/images/item' },
     { path: '/images/item', name:'images', component: Images, meta:{title: "Images"} },
     { path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}},
@@ -3046,6 +3144,8 @@ users todo
     { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
     { path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} },
     { path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
+    { path: '/images/people', component: People, meta:{title:"Image people"} },
+    
     { path: '/select', component: Select, meta:{title:"Select"} },
     { path: '/search', component: Search, meta:{title:"Search"} },
     { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@@ -3069,6 +3169,7 @@ users todo
     { path: '/jobs', component: Jobs, meta:{title:"Jobs running"} },
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/map', component: Map,meta:{title:"map"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
@@ -3094,7 +3195,7 @@ router.beforeEach((to, from, next) => {
   }
 });const Vuepoc=Vue.extend({template:` 
  <v-app id="app" :dark="dark" @theme="onDark">
- <v-navigation-drawer persistent="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" class="grey lighten-4 pb-0">
+ <v-navigation-drawer persistent="" app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" class="grey lighten-4 pb-0">
   <v-list class="pa-0">
 
           <v-list-tile avatar="" tag="div">
@@ -3117,9 +3218,14 @@ router.beforeEach((to, from, next) => {
     <qd-navlist :items="items"></qd-navlist>
  </v-navigation-drawer>
   
- <v-toolbar class="indigo" dark="">
+ <v-toolbar class="indigo" app="" dark="">
   <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-btn @click="favorite" icon="" flat="" title="Save location">
+       <v-icon>favorite</v-icon>
+   </v-btn>
+  
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q" hide-details="" single-line="" dark="" @keyup.enter="search"></v-text-field>
    <v-menu left="" transition="v-fade-transition">
@@ -3139,15 +3245,20 @@ router.beforeEach((to, from, next) => {
           </v-list>
       </v-menu>
       <qd-fullscreen></qd-fullscreen>
+       <v-btn @click="notifications" icon="" flat="" title="Notifications">
+       <v-icon>notifications</v-icon>
+   </v-btn>
 </v-toolbar>
- <main> 
+ <main>
- <v-alert error="" value="true" dismissible="" v-model="alert.show">
+ <v-content> 
+ <v-alert color="error" value="true" dismissible="" v-model="alert.show">
       <pre style="overflow:auto;">{{ alert.msg }}</pre>
     </v-alert>   
-      <transition name="fade" mode="out-in">
+    <transition name="fade" mode="out-in">
-        <router-view class="view ma-3"></router-view>
+      <router-view class="view ma-3"></router-view>
-        </transition>
+      </transition>
-     </main>
+  </v-content>
+  </main>
 </v-app>
  `,
       
@@ -3199,6 +3310,8 @@ router.beforeEach((to, from, next) => {
           {href: '/images/keywords',text: 'Keywords',icon: 'label'},
           {href: '/images/dates',text: 'Date taken',icon: 'date_range'},
           {href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
+          {href: '/images/people',text: 'People',icon: 'people'},
+          {href: '/map',text: 'Map',icon: 'place'}, 
           {href: '/images/report',text: 'Reports',icon: 'report'}
           ]},
       {
@@ -3209,7 +3322,7 @@ router.beforeEach((to, from, next) => {
       {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},       
-      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, 
+      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
       {href: '/timeline',text: 'Time line',icon: 'timelapse'}
       ]},
       
@@ -3237,6 +3350,12 @@ router.beforeEach((to, from, next) => {
       onDark(dark){
         this.dark=dark
         alert("theme")
+      },
+      favorite(){
+        alert("@TODO")
+      },
+      notifications(){
+        alert("@TODO")
       }
   },
 
@@ -3422,5 +3541,10 @@ const Fullscreen={
 };
 Vue.use(Fullscreen);
 
+//leaflet
+Vue.component('v-map', Vue2Leaflet.Map);
+Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
+Vue.component('v-marker', Vue2Leaflet.Marker);
+
 Vue.use(Vuetify);
 new Vuepoc().$mount('#app')

src/vue-poc/static/app.html

@@ -9,9 +9,11 @@
 <title>Vue Router Test</title>
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-<link href="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
+<link href="https://unpkg.com/vuetify@0.16.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
 <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css"  rel="stylesheet" type="text/css">
-
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+  integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+  crossorigin=""/>
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
 <link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
 
@@ -22,7 +24,7 @@
 </head>
 <body>
 <div id="app">
-<h3><code>vue-poc</code> <small>(v0.1)</small> </h3>
+<h3><code>vue-poc</code> <small>(v0.2.??)</small> </h3>
 
 <div class="spinner">
   <div class="rect1"></div>
@@ -38,7 +40,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@0.16.1/dist/vuetify.min.js"></script>
 <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
@@ -49,6 +51,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.4.3/localforage.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
+<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" 
+  integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+  crossorigin=""></script>
+<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script> 
 <script src="/vue-poc/ui/perf-stat.js"></script>
 <script src="/vue-poc/ui/app-gen.js"></script>
 </body>

src/vue-poc/vue-poc.vue

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <template id="vuepoc">
  <v-app id="app" :dark="dark" @theme="onDark">
- <v-navigation-drawer persistent  :mini-variant.sync="mini" v-model="drawer"  
+ <v-navigation-drawer persistent app :mini-variant.sync="mini" v-model="drawer"  
  :disable-route-watcher="true"  class="grey lighten-4 pb-0">
   <v-list class="pa-0">
 
@@ -25,9 +25,14 @@
     <qd-navlist  :items="items"></qd-navlist>
  </v-navigation-drawer>
   
- <v-toolbar class="indigo" dark >
+ <v-toolbar class="indigo" app dark >
   <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-btn @click="favorite" icon flat title="Save location">
+       <v-icon>favorite</v-icon>
+   </v-btn>
+  
   <v-spacer></v-spacer>
    <v-text-field prepend-icon="search" label="Search..." v-model="q"
    hide-details single-line dark @keyup.enter="search"></v-text-field>
@@ -48,15 +53,20 @@
           </v-list>
       </v-menu>
       <qd-fullscreen></qd-fullscreen>
+       <v-btn  @click="notifications" icon flat title="Notifications">
+       <v-icon>notifications</v-icon>
+   </v-btn>
 </v-toolbar>
- <main> 
+ <main>
- <v-alert error value="true" dismissible v-model="alert.show">
+ <v-content> 
+ <v-alert color="error" value="true" dismissible v-model="alert.show">
       <pre style="overflow:auto;">{{ alert.msg }}</pre>
     </v-alert>   
-      <transition name="fade" mode="out-in">
+    <transition name="fade" mode="out-in">
-        <router-view class="view ma-3"></router-view>
+      <router-view class="view ma-3"></router-view>
-        </transition>
+      </transition>
-     </main>
+  </v-content>
+  </main>
 </v-app>
 </template>
 
@@ -109,6 +119,8 @@
           {href: '/images/keywords',text: 'Keywords',icon: 'label'},
           {href: '/images/dates',text: 'Date taken',icon: 'date_range'},
           {href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
+          {href: '/images/people',text: 'People',icon: 'people'},
+          {href: '/map',text: 'Map',icon: 'place'}, 
           {href: '/images/report',text: 'Reports',icon: 'report'}
           ]},
       {
@@ -119,7 +131,7 @@
       {href: '/session',text: 'Session',icon: 'person'}, 
       {href: '/select',text: 'Select',icon: 'extension'},
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},       
-      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, 
+      {href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
       {href: '/timeline',text: 'Time line',icon: 'timelapse'}
       ]},
       
@@ -147,6 +159,12 @@
       onDark(dark){
         this.dark=dark
         alert("theme")
+      },
+      favorite(){
+        alert("@TODO")
+      },
+      notifications(){
+        alert("@TODO")
       }
   },