vuetify 2.1.9

simple.xqm

@@ -0,0 +1,4 @@
+module namespace _='apb.test';
+declare function _:A($a){
+  $a+2
+};

src/vue-poc/api.xqm

@@ -70,6 +70,7 @@ something
 }
 </div>
 };
+
 (:~
  : Returns wadl.
  :)

src/vue-poc/components/vue-ace.vue

@@ -25,6 +25,7 @@ event fired cmd outline
       beforeContent: '',
       aceSettings:{
           theme: "github",
+          themeDark: "chaos",
           keybinding: "ace",
           fontsize: 16,
           enableSnippets:true,
@@ -88,8 +89,14 @@ event fired cmd outline
     }]);
     },
     
+    setTheme(){
+    	 var theme=this.$vuetify.theme.dark ? this.aceSettings.themeDark : this.aceSettings.theme;
+         this.editor.setTheme(`ace/theme/${theme}`)
+    },
+    
     applySettings(aceSettings){
-      this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
+      var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme;
+      this.editor.setTheme(`ace/theme/${theme}`)
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
       this.editor.setOptions({ 
@@ -102,6 +109,11 @@ event fired cmd outline
     }
   },
   
+  watch: {
+	    // whenever theme changes, this function will run
+	    "$vuetify.theme.dark": function (newState) {this.setTheme()}
+  },
+	  
   mounted () {
     const mode = this.mode || 'text'
     const wrap = this.wrap || false

src/vue-poc/core.js

@@ -59,6 +59,7 @@ var Settings = {
       
       "settings/ace": {
                       theme: "github",
+                      themeDark: "chaos",
                       keybinding: "ace",
                       fontsize: 16,
                       enableSnippets:true,
@@ -86,12 +87,12 @@ return $a   `},
        "edit/currentId": "?",
        "images/thumbtask":`
 <thumbnail>
-    <size width="100" height="100"/>
+    <size width="200" height="200"/>
     <filters>             
         <colorize color="green" alpha=".5"/>      
         <caption position="CENTER">Some Text here</caption>
         <rotate angle="15"/>
-        <canvas height="500" width="500" position="TOP_LEFT" color="black"/> 
+        <canvas height="300" width="300" position="TOP_LEFT" color="yellow"/> 
     </filters>
     <output format="gif"/>         
 </thumbnail>

src/vue-poc/data/vue-poc/entities/basexlogfile.xml

@@ -2,6 +2,10 @@
 	<description>saved BaseX log entries in the vue-poc database</description>
 
 	<fields>
+		<field name="date" type="xs:string">
+			<description>log date</description>
+			<xpath>text()!fn:replace(.,".*(\d{4}-\d{2}-\d{2}).*","$1")</xpath>
+		</field>
 		<field name="name" type="xs:string">
 			<description>file name</description>
 			<xpath>.</xpath>

src/vue-poc/data/vue-poc/entities/namespace.xml

@@ -1,5 +1,6 @@
 <entity name="namespace" xmlns="https://github.com/Quodatum/app-doc/entity">
 	<description>An XML namespace</description>
+	<namespace prefix="qns" uri="https://github.com/Quodatum/namespaces" />
 	<fields>
 		<field name="xmlns" type="xs:string">
 			<description>namespace</description>
@@ -11,13 +12,13 @@
 		</field>
 		<field name="description" type="xs:string">
 			<description>about the namespace</description>
-			<xpath>description</xpath>
+			<xpath>qns:description</xpath>
 		</field>
 
 	</fields>
 	<views iconclass="label">
 		<view name="filter">xmlns description</view>
 	</views>
-	<data type="element(namespace)">collection("vue-poc")/namespaces/namespace
+	<data type="element(qns:namespace)">db:open("vue-poc","namespaces.xml")/qns:namespaces/qns:namespace
 	</data>
 </entity>

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

@@ -1,5 +1,5 @@
 <!-- common namespaces -->
-<namespaces>
+<namespaces  xmlns="https://github.com/Quodatum/namespaces">
 	<namespace uri="http://www.w3.org/XML/1998/namespace" prefix="xml">
 		<description>XML core features</description>
 	</namespace>

src/vue-poc/expath-pkg.xml

@@ -2,5 +2,5 @@
 	abbrev="vue-poc" version="0.0.4" spec="1.0">
 	<title>vue-poc test of vue.js.</title>
 	<dependency name="file-walker" version="0.5.2" />
-	<dependency name="ex-thumbnailator" version="5.0.11" />
+	<dependency name="ex-thumbnailator" version="6.0.2" />
 </package>

src/vue-poc/features/adminlog/basexlogdate.vue

@@ -1,8 +1,5 @@
 <!DOCTYPE html>
-<!-- 
+<template id="basexlogdate">
- cards for log sources
- -->
-<template id="logarchive">
  <v-container fluid>
  <v-card>
  
@@ -40,19 +37,16 @@
     class="elevation-1"
   >
   
-  <template v-slot:item.xmlns="{ item }" > 
+  <template v-slot:item.date="{ item }" > 
-	      <td ><router-link :to="{path:'namespace/item?xmlns='+ item.xmlns}">
+	      <td ><router-link :to="{path:'logdate/'+ item.date}">
-                 {{ item.xmlns }}
+                 {{ item.date }}
                 </router-link></td>
     </template>
       
     <template slot="no-results">
         No matching results.
     </template>
-    
+
-    <template slot="no-data">
-        No matching items.
-    </template>
   </v-data-table>
    </v-card-text>
    </v-card>
@@ -69,13 +63,10 @@
      
       selected:[],
       headers: [
-        
+        { text: 'Date', value: 'date' },
-        { text: 'xmlns', value: 'xmlns' },
+        { text: 'File name', value: 'name' }
-        
-        { text: 'Description', value: 'description' },
-        { text: 'Prefix', value: 'prefix' }
         ],
-        crumbs:[{to:"/namespace", text:"namespaces"}]
+        crumbs:[{to:"/logdate", text:"Log files"}]
       }
   },
   methods: {
@@ -106,7 +97,7 @@
   created:function(){
     this.q=this.$route.query.q || this.q;
     this.load();
-    console.log("logarchive")
+    console.log("logfiles")
   }
 }
 </script>

src/vue-poc/features/adminlog/basexlogdate1.vue

@@ -2,11 +2,15 @@
 <!-- 
  show log file data in vis-time-line 
  -->
-<template id="logdate">
+<template id="basexlogdate1">
  <v-container fluid>
  <v-card>
  <v-toolbar class="lime darken-1">
-	 <v-card-title >XML Log {{ query.name }}</v-card-title>
+	 <v-card-title >
+	 <qd-breadcrumbs @todo="showmenu= ! showmenu" 
+         :crumbs="[{to: '/logdate', text:'log files'}, {text: date, disabled: false, menu: 'todo'}]"
+         >crumbs</qd-breadcrumbs> 
+	 </v-card-title>
 	
 	  <v-menu
         ref="menu"
@@ -79,11 +83,13 @@
       },
       data:[],
     query:{name: "2019-09-23", start: 1, limit:30, from:"00:00:00", mins:10},
+    showmenu: false,
     Events: new Vue({}),
     msg:"Select an entry",
     showFrom: false
     }
 },
+props: ['date'],
 methods:{
   fit(){
     this.Events.$emit('fit');

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

@@ -118,12 +118,10 @@
             </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"
         >
@@ -149,12 +147,10 @@
           </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"
         >

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

@@ -10,6 +10,7 @@ import module namespace entity = 'quodatum.models.generated' at "../../models.ge
 declare namespace c="http://www.w3.org/ns/xproc-step";
 
 declare variable $vue-api:entity:=$entity:list("thumbnail");
+
 (:~
  : do a thumbnail
  :)
@@ -17,7 +18,7 @@ declare
 %rest:GET %rest:path("/vue-poc/api/images/list/{$id}")
 %rest:produces("application/json")
 %output:method("json")   
-function vue-api:id( $id as xs:integer)   
+function vue-api:id( $id )   
 {
  let $image:=db:open-id($cfg:DB-IMAGE,$id)
  return <json type="object" >

src/vue-poc/features/model/entity1.vue

@@ -40,12 +40,14 @@
   <v-container fluid >
 	  <v-expansion-panels>
 	    <v-expansion-panel  expand >
-			     <v-expansion-panel-header><v-layout>
+			     <v-expansion-panel-header>
-          <v-flex xs12>
+			     <v-layout>
-			     <v-icon>{{ item.iconclass }}</v-icon> {{ item.name }}</div>
+		          <v-flex xs12>
-			         {{item.description}}
+						     <v-avatar><v-icon>{{ item.iconclass }}</v-icon></v-avatar>
-			 </v-flex>
+						     <span class="font-weight-black">{{ item.name }}</span> 
-			 </v-layout>        
+					         {{item.description}}
+					 </v-flex>
+			     </v-layout>        
 			     </v-expansion-panel-header>
 			     <v-expansion-panel-content>
 			          <pre v-if="xml"><code>{{ xml }}</code></pre> 

src/vue-poc/features/namespaces/namespace1.vue

@@ -26,6 +26,9 @@
   
   
       hello
+      <div>{{ item.prefix }}</div>
+      <div>{{ item.xmlns }}</div>
+      <div>{{ item.description }}</div>
   </v-container>
    </v-card>
 </template>
@@ -45,7 +48,7 @@
       .then(r=>{
         this.loading=false;
         console.log(r.data)
-       
+        this.item= r.data
         }) 
     }
   },

src/vue-poc/features/namespaces/namespaces.xqm

@@ -0,0 +1,28 @@
+xquery version "3.1";
+(:~ 
+: namespace rest interface 
+: defines urls below vue-poc/data/namespace/
+: @author andy bunce
+: @since oct 2019
+:)
+
+module namespace _ = 'quodatum.model.namespaces';
+
+
+import module namespace entity ='quodatum.models.generated' at "../../models.gen.xqm";
+import module namespace dice = 'quodatum.web.dice/v4' at "../../lib/dice.xqm"; 
+import module namespace web = 'quodatum.web.utils4' at "../../lib/webutils.xqm";
+
+(:~ 
+ : return a namespace 
+ :)
+declare 
+%rest:GET %rest:path("vue-poc/api/data/namespace/item")
+%rest:query-param("id", "{$id}") 
+%output:method("json")    
+function _:model-list($id) {
+ let $entity:=$entity:list("namespace")
+ let $_:=trace($id," ID:")
+ let $item:=$entity?data()[1]
+ return dice:one($item,$entity)
+};

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

@@ -23,6 +23,13 @@
               label="Theme"
             ></v-select>
           </v-flex>
+          <v-flex >
+            <v-select
+              v-bind:items="themesDark"
+              v-model="ace.themeDark"
+              label="Dark Theme"
+            ></v-select>
+          </v-flex>
         </v-layout>
        
         <v-layout row>
@@ -105,11 +112,13 @@
 			        enableBasicAutocompletion: true,
 			        enableLiveAutocompletion: true,
 			        theme: "github",
+			        themeDark: "twilight",
 			        keybinding: "ace",
 			        fontsize: "14"
 			    },
 			    keybindings:[  'ace',  'vim', 'emacs', 'textarea', 'sublime' ],
-			    themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
+			    themes: [ "github","chrome" ,"tomorrow"],
+			    themesDark: ["chaos","twilight"]
 			    }
   },
   methods:{

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

@@ -82,7 +82,8 @@
     var task=this.task
     HTTP.get("tasks/model")
     .then(r=>{
-      console.log(r);
+      console.log(r.data.values);
+      this.params=r.data.values;
       })
    },
 }

src/vue-poc/features/tasks/model.build/tx-model.xq

@@ -6,7 +6,7 @@ import module namespace bf = 'quodatum.tools.buildfields' at "./../../../lib/ent
 
 (:~ 
  : Folder containing model definitions as xml
- : @default C:/Users/andy/git/vue-poc/src/vue-poc/models/entities
+ : @default C:/Users/andy/git/vue-poc/src/vue-poc/data/vue-poc/entities
  :)
 declare variable $efolder as xs:anyURI  external 
 :=xs:anyURI("C:\Users\andy\git\vue-poc\src\vue-poc\data\vue-poc\entities");

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

@@ -3,51 +3,69 @@
  <v-container fluid>
  <v-stepper v-model="step" non-linear  >
   <v-stepper-header>
-      <v-stepper-step step="1" :complete="step > 1" editable>Select image location</v-stepper-step>
+      <v-stepper-step step="1" :complete="step > 1" editable>Image source</v-stepper-step>
       <v-divider></v-divider>
-      <v-stepper-step step="2" :complete="step > 2" editable>Set thumbnail details</v-stepper-step>
+      <v-stepper-step step="2" :complete="step > 2" editable>Thumbnail parameters</v-stepper-step>
       <v-divider></v-divider>
-      <v-stepper-step step="3" editable>Result</v-stepper-step>
+      <v-stepper-step step="3" editable>Thumbnail</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-card class="lime lighten-1 z-depth-1 mb-5" height="200px" >
-    <v-text-field
+    <v-card-text>
-              name="url"
+	    <v-text-field
-              label="Image Url"
+	              name="url"
-              hint="http:...??"
+	              label="Image Url"
-              v-model="image"
+	              hint="http:...??"
-              required
+	              v-model="image"
-             ></v-text-field>
+	              required
-    </v-card>
+	             ></v-text-field>
+     </v-card-text>
+    <v-card-actions>
+    <v-spacer></v-spacer>
         <v-btn  color="primary"  @click="step = 2">Next</v-btn>
+        </v-card-actions>
+          </v-card>
   </v-stepper-content>
   
   <v-stepper-content step="2" non-linear>
-    <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
+  
-    <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true"
+    <v-card class="lime lighten-1 z-depth-1 mb-5"  >
-		v-on:change-content="onChange" 
+    <v-toolbar dense>
-		></vue-ace>
+		<v-btn text @click="step -= 1">Back</v-btn>
+		<v-spacer></v-spacer>
+	    <v-btn  color="primary"  @click="validate()">Validate</v-btn>
+	    <v-spacer></v-spacer>
+	     <v-btn  color="primary"  @click="step = 3">Next</v-btn>  
+		</v-toolbar>
+		<v-flex xs12 style="height:400px"  fill-height>
+	    <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true"
+			v-on:change-content="onChange" min-lines="7"
+			></vue-ace>
+        </v-flex>
 		</v-card>
-   
+  
-    <v-btn text @click="step -= 1">Back</v-btn>
+    
-    <v-btn  color="primary"  @click="validate()">Validate</v-btn>
-     <v-btn  color="primary"  @click="step = 3">Next</v-btn>  
   </v-stepper-content>
 
   <v-stepper-content step="3" non-linear>
-    <v-card class="grey lighten-1 z-depth-1 mb-5" >
+    <v-card :loading="loading" class="lime lighten-1 z-depth-1 mb-5" >
      <v-card-actions>
     <v-btn text @click="step -= 1">Back</v-btn>
-     <v-btn  color="primary"  @click="go()">go</v-btn>
+    <v-spacer></v-spacer>
+     <v-btn  color="primary"  @click="go()">refresh</v-btn>
+     <div v-if="elapsed"> (took {{ elapsed }}ms.)</div>
+     <v-spacer></v-spacer>
      </v-card-actions>
     <v-card-text>
-    <v-layout  style="height:200px" fill-height>
+    <v-layout  style="height:300px" fill-height>
     <v-flex xs6>
+    <div>Source</div>
     <img :src="image" class="contain" style="width:100%; height:100%;"/>
     </v-flex>
     <v-flex xs6>
-    <img :src="image" class="contain" style="width:50%; height:50%;object-position: 50% 50%;"/>
+    <div>Thumbnail</div>
+    <img ref="imgResult"  class="contain" style="width:100%; height:100%;object-position: 50% 50%;"/>
     </v-flex>
     </v-layout>
     </v-card-text>
@@ -64,15 +82,18 @@
 <script>{
   data(){
     return {
-      image:"https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg",
+      image:"https://picsum.photos/id/123/500/700",
-      step: 0,
+      step: 1,
+      elapsed: null,
       taskxml:"<task></task>",
       items:[
-        {
+        { src: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg'},
-          src: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg'
+        { src: 'https://picsum.photos/id/123/500/700' }
-        }]
+        ],
+        loading: false
       }
   },
+  
   methods:{
     onChange (val) {
       if (this.taskxml !== val) this.taskxml = val;
@@ -82,15 +103,27 @@
         HTTP.post("thumbnail/validate",Qs.stringify({task: this.taskxml}))
         .then(r=>{alert("gg")})
       },
+      
     go(){
-        alert("post")
+    	  var target= this.$refs.imgResult;
-        HTTP.post("thumbnail",Qs.stringify({task: this.taskxml,url:this.image}))
+    	  var _start = performance.now();
-        .then(function(r){
+    	  this.loading = true
-          console.log(r)
+    	  fetch("/vue-poc/api/thumbnail",
-       alert("not yet:"+r);
+        		  {
-     })
+    		      method: 'POST',
+    		      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+    		      body:  Qs.stringify({task: this.taskxml,url:this.image})
+        		  }
+        		  ).then(function(response) {
+    		  return response.blob();
+    		}).then(myBlob=> { 			
+    		      target.src = URL.createObjectURL(myBlob);
+    		      this.elapsed=Math.floor(performance.now() - _start);
+    		      this.loading = false
+    		});	  
       }
   },
+  
   beforeRouteEnter (to, from, next) {
     Promise.all([Settings.getItem('images/thumbtask')
                  ])

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

@@ -21,8 +21,10 @@ function vue-api:thumbnail($url,$task )
 {
  let $x:=fn:parse-xml($task)=>fn:trace("task: ")
  let $thumb:=fetch:binary($url)=>t:task($x/thumbnail)
- 
+ return (
- return (qweb:download-response("basex","xx.gif"), $thumb)
+		 web:response-header(map { 'media-type': "image/gif" }), 
+		 $thumb
+		 )
 };
 
 (:~
@@ -42,6 +44,7 @@ function vue-api:thumbnail-validate($task )
             </items>
   </json>
 };
+
 (:~
  : return set of images as base64
  :)
@@ -77,6 +80,7 @@ return map{
            "mime":fetch:content-type($f)
            }
 };
+
 (:~
  : resolve path relative to basex webpath
  : file("/fred")=>C:\Program Files (x86)\BaseX\webapp\fred

src/vue-poc/lib/dice.xqm

@@ -126,7 +126,7 @@ declare function dice:one($item,$entity as map(*),$opts as map(*))
 as element(json)
 {
   let $jsonf:= map:get($entity,"json")
-  let $fields:=if ($opts?fields) then fn:tokenize($opts?fields) else map:keys($jsonf)=>fn:trace("FF")
+  let $fields:=if ($opts?fields) then fn:tokenize($opts?fields) else map:keys($jsonf)
   
   return  <json objects="json " >
   {$fields!$jsonf(.)($item)}

src/vue-poc/lib/vue-compile/smoke-jsoup.xq

@@ -5,7 +5,9 @@ let $text:=``[
 <!DOCTYPE html>
 <template id="dicetest">
   <v-abc >
+ <template v-slot:default> 
  <thead>xxx</thead>
+ </template >
   </v-abc>
   </template>
 ]``

src/vue-poc/lib/vue-compile/smoke.xq

@@ -1,12 +1,28 @@
+(:
+ : test v-simpletable parse
+:)
 import module namespace html5="text.html5" at "C:\Users\andy\git\vue-poc\src\vue-poc\lib\vue-compile\html5parse.xqm";
 
 let $text:=fetch:text("C:\Users\andy\git\vue-poc\src\vue-poc\features\server\dicetest.vue")
 let $text:=``[
 <!DOCTYPE html>
 <template id="dicetest">
-  <v-abc >
+  <v-simpletable >
- <thead>xxx</thead>
+    <template v-slot:default>
-  </v-abc>
+      <thead>
+        <tr>
+          <th class="text-left">Name</th>
+          <th class="text-left">Calories</th>
+        </tr>
+        </thead>
+ <tbody>
+        <tr v-for="item in desserts" :key="item.name">
+          <td>{{ item.name }}</td>
+          <td>{{ item.calories }}</td>
+        </tr>
+      </tbody>
+ </template>
+  </v-simpletable>
   </template>
 ]``
 let $doc:=html5:doc($text)

src/vue-poc/lib/webutils.xqm

@@ -92,9 +92,9 @@ declare function method($method as xs:string){
 declare function download-response($method,$filename){
 
 <rest:response>
-    <output:serialization-parameters>
+   <output:serialization-parameters>
         <output:method value="{$method}"/>
-    </output:serialization-parameters>
+   </output:serialization-parameters>
    <http:response>
        <http:header name="Content-Disposition" value='attachment;filename="{$filename}"'/> 
     </http:response>

src/vue-poc/models.gen.xqm

@@ -1,11 +1,12 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2019-10-13T21:47:03.427+01:00 
+ : auto generated from xml files in entities folder at: 2019-11-07T11:13:26.624Z 
  :)
 
 module namespace entity = 'quodatum.models.generated';
 import module namespace cfg = "quodatum:media.image.configure" at "features/images/config.xqm";declare namespace xqdoc='http://www.xqdoc.org/1.0';
 declare namespace ent='https://github.com/Quodatum/app-doc/entity';
 declare namespace h='urn:quodatum:vue-poc.history';
+declare namespace qns='https://github.com/Quodatum/namespaces';
 declare namespace c='http://www.w3.org/ns/xproc-step';
           
 declare variable $entity:list:=map { 
@@ -143,6 +144,7 @@ hof:top-k-by(admin:logs(), string#1, 2)
      "name": "basexlogfile",
      "description": "saved BaseX log entries in the vue-poc database",
      "access": map{ 
+       "date": function($_ as element()) as xs:string {$_/text()!fn:replace(.,".*(\d{4}-\d{2}-\d{2}).*","$1") },
        "name": function($_ as element()) as xs:string {$_/. } },
     
      "filter": function($item,$q) as xs:boolean{ 
@@ -150,6 +152,10 @@ hof:top-k-by(admin:logs(), string#1, 2)
          fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
       },
        "json":   map{ 
+           "date": function($_ as element()) as element(date)? {
+            (: xs:string :)
+                        fn:data($_/text()!fn:replace(.,".*(\d{4}-\d{2}-\d{2}).*","$1"))!element date {  .} 
+                 },
            "name": function($_ as element()) as element(name)? {
             (: xs:string :)
                         fn:data($_/.)!element name {  .} 
@@ -441,18 +447,18 @@ hof:top-k-by(admin:logs(), string#1, 2)
      "name": "namespace",
      "description": "An XML namespace",
      "access": map{ 
-       "description": function($_ as element()) as xs:string {$_/description },
+       "description": function($_ as element()) as xs:string {$_/qns:description },
        "prefix": function($_ as element()) as xs:string {$_/@prefix },
        "xmlns": function($_ as element()) as xs:string {$_/@uri } },
     
      "filter": function($item,$q) as xs:boolean{ 
-         some $e in ( $item/@uri, $item/description) satisfies
+         some $e in ( $item/@uri, $item/qns:description) satisfies
          fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
       },
        "json":   map{ 
            "description": function($_ as element()) as element(description)? {
             (: xs:string :)
-                        fn:data($_/description)!element description {  .} 
+                        fn:data($_/qns:description)!element description {  .} 
                  },
            "prefix": function($_ as element()) as element(prefix)? {
             (: xs:string :)
@@ -463,8 +469,8 @@ hof:top-k-by(admin:logs(), string#1, 2)
                         fn:data($_/@uri)!element xmlns {  .} 
                  } },
        
-      "data": function() as element(namespace)*
+      "data": function() as element(qns:namespace)*
-       { collection("vue-poc")/namespaces/namespace
+       { db:open("vue-poc","namespaces.xml")/qns:namespaces/qns:namespace
 	 },
        
        "views": map{ 

src/vue-poc/package.json

@@ -3,8 +3,8 @@
 	"version": "0.2.0",
 	"description": "A vue test",
 	"dependencies": {
-		"ace": "1.4.5",
+		"ace": "1.4.6",
-		"vuetify": "2.1.1",
+		"vuetify": "2.1.9",
 		"vue": "2.6.10",
 		"vuex": "3.0.1",
 		"vue-router": "3.0.3",

src/vue-poc/router.js

@@ -27,7 +27,10 @@ const router = new VueRouter({
     { path: '/images/people', component: People, meta:{title:"Image people"} },
     
     { path: '/documentation', component: Documentation, meta:{title:"documentation"} },
-    { path: '/logdate', component: Logdate, meta:{title:"log files"} },
+    
+    { path: '/logdate', component: Basexlogdate, meta:{title:"log files"} },
+    { path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} },
+    
     { path: '/entity', component: Entity, meta:{title:"Entities"} },
     { path: '/entity/:entity',  name:"entity1", component: Entity1, props: true, meta:{title:"Entity"} },
     

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

@@ -1,4 +1,4 @@
-// generated 2019-10-14T11:47:08.629+01:00
+// generated 2019-11-07T12:55:30.849Z
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-autoheight.vue
 Vue.component('qd-autoheight',{template:` 
@@ -970,6 +970,7 @@ Vue.component('vue-ace',{template:`
       beforeContent: '',
       aceSettings:{
           theme: "github",
+          themeDark: "chaos",
           keybinding: "ace",
           fontsize: 16,
           enableSnippets:true,
@@ -1033,8 +1034,14 @@ Vue.component('vue-ace',{template:`
     }]);
     },
     
+    setTheme(){
+    	 var theme=this.$vuetify.theme.dark ? this.aceSettings.themeDark : this.aceSettings.theme;
+         this.editor.setTheme(`ace/theme/${theme}`)
+    },
+    
     applySettings(aceSettings){
-      this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
+      var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme;
+      this.editor.setTheme(`ace/theme/${theme}`)
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
       this.editor.setOptions({ 
@@ -1047,6 +1054,11 @@ Vue.component('vue-ace',{template:`
     }
   },
   
+  watch: {
+	    // whenever theme changes, this function will run
+	    "$vuetify.theme.dark": function (newState) {this.setTheme()}
+  },
+	  
   mounted () {
     const mode = this.mode || 'text'
     const wrap = this.wrap || false
@@ -1594,6 +1606,226 @@ const About=Vue.extend({template:`
 }
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/basexlogdate.vue
+const Basexlogdate=Vue.extend({template:` 
+ <v-container fluid>
+ <v-card>
+ 
+   <v-toolbar>
+   <v-toolbar-title>
+    <v-breadcrumbs :items="crumbs">
+         <template slot="item" slot-scope="props">
+             <v-breadcrumbs-item :to="props.item.to" :disabled="props.item.disabled" :exact="true">
+                  {{ props.item.text }}
+              </v-breadcrumbs-item>
+          </template>
+     </v-breadcrumbs>
+   </v-toolbar-title>
+     <v-btn @click="load" icon :loading="loading" :disabled="loading"><v-icon>refresh</v-icon></v-btn>
+   
+   <v-spacer></v-spacer>
+   
+   <v-text-field prepend-icon="filter_list" label="Filter..." v-model="q" type="search" hide-details single-line @keyup.enter="setfilter" clearable></v-text-field>
+   
+   <v-spacer></v-spacer>
+   <vp-entitylink entity="basexlogfile"></vp-entitylink> 
+   </v-toolbar>
+   
+   <v-card-text>
+    <v-data-table :headers="headers" :items="items" :loading="loading" hide-default-footer :search="q" class="elevation-1">
+  
+  <template v-slot:item.date="{ item }"> 
+	      <td><router-link :to="{path:'logdate/'+ item.date}">
+                 {{ item.date }}
+                </router-link></td>
+    </template>
+      
+    <template slot="no-results">
+        No matching results.
+    </template>
+
+  </v-data-table>
+   </v-card-text>
+   </v-card>
+   </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      items: [],
+      loading: false,
+      q: "",
+      message: 'bad route!',
+     
+      selected:[],
+      headers: [
+        { text: 'Date', value: 'date' },
+        { text: 'File name', value: 'name' }
+        ],
+        crumbs:[{to:"/logdate", text:"Log files"}]
+      }
+  },
+  methods: {
+    load(){
+    
+      this.loading= true
+      HTTP.get("data/basexlogfile",{params:{q:this.q}})
+      .then(r=>{
+        this.items= r.data.items
+        this.loading= false
+        })
+      
+    },
+    setfilter(){
+      console.log("TODO",this.q)
+      this.$router.push({  query: {url:this.url,q:this.q }})
+    },
+  },
+  watch:{
+    $route(vnew,vold){
+      console.log("ROUTE",vnew,vold)    
+      var url=this.$route.query.url
+      this.url=url?url:"/";
+      if(vnew.query.url != vold.query.url) this.load() 
+    }
+  },
+
+  created:function(){
+    this.q=this.$route.query.q || this.q;
+    this.load();
+    console.log("logfiles")
+  }
+}
+
+      );
+      
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/basexlogdate1.vue
+const Basexlogdate1=Vue.extend({template:` 
+ <v-container fluid>
+ <v-card>
+ <v-toolbar class="lime darken-1">
+	 <v-card-title>
+	 <qd-breadcrumbs @todo="showmenu= ! showmenu" :crumbs="[{to: '/logdate', text:'log files'}, {text: date, disabled: false, menu: 'todo'}]">crumbs</qd-breadcrumbs> 
+	 </v-card-title>
+	
+	  <v-menu ref="menu" v-model="showFrom" :close-on-content-click="false" :nudge-right="40" :return-value.sync="query.from" transition="scale-transition" offset-y max-width="290px" min-width="100px">
+        <template v-slot:activator="{ on }">
+          <v-text-field v-model="query.from" label="Start time" prepend-icon="access_time" readonly v-on="on"></v-text-field>
+        </template>
+        <v-time-picker v-if="showFrom" v-model="query.from" full-width use-seconds @click:second="$refs.menu.save(query.from)"></v-time-picker>
+      </v-menu>
+	  <v-toolbar-items>
+		  <v-text-field type="number" v-model.number="query.start" label="start"> </v-text-field>
+		   <v-text-field type="number" v-model.number="query.limit" label="limit"> </v-text-field> 
+      </v-toolbar-items>
+     
+	 <v-spacer></v-spacer> 
+	 <v-toolbar-items> 
+	 <v-btn @click="fit">fit</v-btn> 
+	<v-btn @click="getItems">
+	     <v-avatar><v-icon>refresh</v-icon></v-avatar>
+	     </v-btn> 
+	<v-btn @click="pageBack()" :disabled="query.start==1" icon> 
+		<v-avatar><v-icon>arrow_back</v-icon> </v-avatar> 
+	</v-btn> 
+   <v-btn @click="pageNext()" icon>
+	  <v-avatar> <v-icon>arrow_forward</v-icon> </v-avatar> 
+	</v-btn> 
+   </v-toolbar-items>
+	 </v-toolbar>
+	 
+	 <v-card-text>
+	   <vis-time-line :items="data" :events="Events" :options="options" @select="select"></vis-time-line>
+	 </v-card-text>
+ </v-card>
+ 
+ <v-card>
+ <v-card-text>
+ <pre>{{msg}}</pre>
+ </v-card-text>
+</v-card>
+ </v-container>
+ `,
+      
+  data:function(){
+    return {
+
+      loading: false,
+      options: {editable: false, clickToUse: false,
+    	  timeAxis: {scale: 'minute', step: 1}
+      },
+      data:[],
+    query:{name: "2019-09-23", start: 1, limit:30, from:"00:00:00", mins:10},
+    showmenu: false,
+    Events: new Vue({}),
+    msg:"Select an entry",
+    showFrom: false
+    }
+},
+props: ['date'],
+methods:{
+  fit(){
+    this.Events.$emit('fit');
+  },
+  select(sel){
+   
+    var hit=this.data.find(item => item.id==sel )
+    var h=JSON.stringify(hit,null,2)
+    this.msg= h
+  },
+  pageNext(){
+	 this.query.start+= this.query.limit
+	 this.query.from= this.addtime(this.query.from,this.query.mins)
+	 this.getItems()
+  },
+  pageBack(){
+	  this.query.start-= this.query.limit
+	  this.query.from = this.addtime(this.query.from,-this.query.mins)
+	  this.getItems()
+  },
+  addtime(time,mins){
+	  return moment(time,moment.HTML5_FMT.TIME_SECONDS).add(mins,"m").format(moment.HTML5_FMT.TIME_SECONDS) 
+  },
+  getItems(){
+      this.loading=true
+      HTTP.get("logxml", {params:this.query})
+      .then(r=>{
+        this.loading=false
+       
+        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
+        var items=r.data.items
+        //console.log("logxml",items)
+        // {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19', type: 'point'}
+        this.data=items.map(x=>Object.assign({}, x, 
+        		{ start: x.time,
+        	      content: x.text.split(";",1)[0],
+        	      title: x.text,
+        	      style: x.text.startsWith("[POST] ")?"background-color: red;": "background-color: yellow;",
+        	      group: x.user}
+               ))
+        //console.log("data",this.data)
+        }) 
+    }
+},
+watch:{
+	"query":{
+	    handler:function(vnew,vold){
+	      console.log("watch",vnew,vold)
+	      this.$router.push({  query: this.query })
+	      },
+	    deep:true
+	  }
+},
+created(){
+  console.log("logxml: ",this.$route.query)
+  this.query=Object.assign(this.query,this.$route.query)
+  this.query.start=Number(this.query.start)
+  this.query.limit=Number(this.query.limit)
+  this.getItems();
+}
+}
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/logadd.vue
 const Logadd=Vue.extend({template:` 
 
@@ -1669,228 +1901,6 @@ const Logadd=Vue.extend({template:`
 
       );
       
-// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/logarchive.vue
-const Logarchive=Vue.extend({template:` 
- <v-container fluid>
- <v-card>
- 
-   <v-toolbar>
-   <v-toolbar-title>
-    <v-breadcrumbs :items="crumbs">
-         <template slot="item" slot-scope="props">
-             <v-breadcrumbs-item :to="props.item.to" :disabled="props.item.disabled" :exact="true">
-                  {{ props.item.text }}
-              </v-breadcrumbs-item>
-          </template>
-     </v-breadcrumbs>
-   </v-toolbar-title>
-     <v-btn @click="load" icon :loading="loading" :disabled="loading"><v-icon>refresh</v-icon></v-btn>
-   
-   <v-spacer></v-spacer>
-   
-   <v-text-field prepend-icon="filter_list" label="Filter..." v-model="q" type="search" hide-details single-line @keyup.enter="setfilter" clearable></v-text-field>
-   
-   <v-spacer></v-spacer>
-   <vp-entitylink entity="basexlogfile"></vp-entitylink> 
-   </v-toolbar>
-   
-   <v-card-text>
-    <v-data-table :headers="headers" :items="items" :loading="loading" hide-default-footer :search="q" class="elevation-1">
-  
-  <template v-slot:item.xmlns="{ item }"> 
-	      <td><router-link :to="{path:'namespace/item?xmlns='+ item.xmlns}">
-                 {{ item.xmlns }}
-                </router-link></td>
-    </template>
-      
-    <template slot="no-results">
-        No matching results.
-    </template>
-    
-    <template slot="no-data">
-        No matching items.
-    </template>
-  </v-data-table>
-   </v-card-text>
-   </v-card>
-   </v-container>
- `,
-      
-  data:  function(){
-    return {
-      items: [],
-      loading: false,
-      q: "",
-      message: 'bad route!',
-     
-      selected:[],
-      headers: [
-        
-        { text: 'xmlns', value: 'xmlns' },
-        
-        { text: 'Description', value: 'description' },
-        { text: 'Prefix', value: 'prefix' }
-        ],
-        crumbs:[{to:"/namespace", text:"namespaces"}]
-      }
-  },
-  methods: {
-    load(){
-    
-      this.loading= true
-      HTTP.get("data/basexlogfile",{params:{q:this.q}})
-      .then(r=>{
-        this.items= r.data.items
-        this.loading= false
-        })
-      
-    },
-    setfilter(){
-      console.log("TODO",this.q)
-      this.$router.push({  query: {url:this.url,q:this.q }})
-    },
-  },
-  watch:{
-    $route(vnew,vold){
-      console.log("ROUTE",vnew,vold)    
-      var url=this.$route.query.url
-      this.url=url?url:"/";
-      if(vnew.query.url != vold.query.url) this.load() 
-    }
-  },
-
-  created:function(){
-    this.q=this.$route.query.q || this.q;
-    this.load();
-    console.log("logarchive")
-  }
-}
-
-      );
-      
-// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/logdate.vue
-const Logdate=Vue.extend({template:` 
- <v-container fluid>
- <v-card>
- <v-toolbar class="lime darken-1">
-	 <v-card-title>XML Log {{ query.name }}</v-card-title>
-	
-	  <v-menu ref="menu" v-model="showFrom" :close-on-content-click="false" :nudge-right="40" :return-value.sync="query.from" transition="scale-transition" offset-y max-width="290px" min-width="100px">
-        <template v-slot:activator="{ on }">
-          <v-text-field v-model="query.from" label="Start time" prepend-icon="access_time" readonly v-on="on"></v-text-field>
-        </template>
-        <v-time-picker v-if="showFrom" v-model="query.from" full-width use-seconds @click:second="$refs.menu.save(query.from)"></v-time-picker>
-      </v-menu>
-	  <v-toolbar-items>
-		  <v-text-field type="number" v-model.number="query.start" label="start"> </v-text-field>
-		   <v-text-field type="number" v-model.number="query.limit" label="limit"> </v-text-field> 
-      </v-toolbar-items>
-     
-	 <v-spacer></v-spacer> 
-	 <v-toolbar-items> 
-	 <v-btn @click="fit">fit</v-btn> 
-	<v-btn @click="getItems">
-	     <v-avatar><v-icon>refresh</v-icon></v-avatar>
-	     </v-btn> 
-	<v-btn @click="pageBack()" :disabled="query.start==1" icon> 
-		<v-avatar><v-icon>arrow_back</v-icon> </v-avatar> 
-	</v-btn> 
-   <v-btn @click="pageNext()" icon>
-	  <v-avatar> <v-icon>arrow_forward</v-icon> </v-avatar> 
-	</v-btn> 
-   </v-toolbar-items>
-	 </v-toolbar>
-	 
-	 <v-card-text>
-	   <vis-time-line :items="data" :events="Events" :options="options" @select="select"></vis-time-line>
-	 </v-card-text>
- </v-card>
- 
- <v-card>
- <v-card-text>
- <pre>{{msg}}</pre>
- </v-card-text>
-</v-card>
- </v-container>
- `,
-      
-  data:function(){
-    return {
-
-      loading: false,
-      options: {editable: false, clickToUse: false,
-    	  timeAxis: {scale: 'minute', step: 1}
-      },
-      data:[],
-    query:{name: "2019-09-23", start: 1, limit:30, from:"00:00:00", mins:10},
-    Events: new Vue({}),
-    msg:"Select an entry",
-    showFrom: false
-    }
-},
-methods:{
-  fit(){
-    this.Events.$emit('fit');
-  },
-  select(sel){
-   
-    var hit=this.data.find(item => item.id==sel )
-    var h=JSON.stringify(hit,null,2)
-    this.msg= h
-  },
-  pageNext(){
-	 this.query.start+= this.query.limit
-	 this.query.from= this.addtime(this.query.from,this.query.mins)
-	 this.getItems()
-  },
-  pageBack(){
-	  this.query.start-= this.query.limit
-	  this.query.from = this.addtime(this.query.from,-this.query.mins)
-	  this.getItems()
-  },
-  addtime(time,mins){
-	  return moment(time,moment.HTML5_FMT.TIME_SECONDS).add(mins,"m").format(moment.HTML5_FMT.TIME_SECONDS) 
-  },
-  getItems(){
-      this.loading=true
-      HTTP.get("logxml", {params:this.query})
-      .then(r=>{
-        this.loading=false
-       
-        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
-        var items=r.data.items
-        //console.log("logxml",items)
-        // {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19', type: 'point'}
-        this.data=items.map(x=>Object.assign({}, x, 
-        		{ start: x.time,
-        	      content: x.text.split(";",1)[0],
-        	      title: x.text,
-        	      style: x.text.startsWith("[POST] ")?"background-color: red;": "background-color: yellow;",
-        	      group: x.user}
-               ))
-        //console.log("data",this.data)
-        }) 
-    }
-},
-watch:{
-	"query":{
-	    handler:function(vnew,vold){
-	      console.log("watch",vnew,vold)
-	      this.$router.push({  query: this.query })
-	      },
-	    deep:true
-	  }
-},
-created(){
-  console.log("logxml: ",this.$route.query)
-  this.query=Object.assign(this.query,this.$route.query)
-  this.query.start=Number(this.query.start)
-  this.query.limit=Number(this.query.limit)
-  this.getItems();
-}
-}
-      );
-      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/adminlog/logs.vue
 const Log=Vue.extend({template:` 
  <v-container fluid>
@@ -4076,7 +4086,7 @@ const Images=Vue.extend({template:`
               </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-menu :close-on-content-click="false" v-model="menu2" transition="scale-transition" offset-y :nudge-left="40" max-width="290px">
          <template v-slot:activator="{ on }">  
              <v-text-field v-on="on" label="Earliest date" v-model="query.from" prepend-icon="event" readonly clearable></v-text-field>
          </template>
@@ -4091,7 +4101,7 @@ const Images=Vue.extend({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-menu :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y :nudge-left="40" max-width="290px">
            
             <template v-slot:activator="{ on }">  
             <v-text-field v-on="on" label="Latest date" v-model="query.until" prepend-icon="event" readonly clearable></v-text-field>
@@ -5080,12 +5090,14 @@ const Entity1=Vue.extend({template:`
   <v-container fluid>
 	  <v-expansion-panels>
 	    <v-expansion-panel expand>
-			     <v-expansion-panel-header><v-layout>
+			     <v-expansion-panel-header>
-          <v-flex xs12>
+			     <v-layout>
-			     <v-icon>{{ item.iconclass }}</v-icon> {{ item.name }}
+		          <v-flex xs12>
-			         {{item.description}}
+						     <v-avatar><v-icon>{{ item.iconclass }}</v-icon></v-avatar>
-			 </v-flex>
+						     <span class="font-weight-black">{{ item.name }}</span> 
-			 </v-layout>        
+					         {{item.description}}
+					 </v-flex>
+			     </v-layout>        
 			     </v-expansion-panel-header>
 			     <v-expansion-panel-content>
 			          <pre v-if="xml"><code>{{ xml }}</code></pre> 
@@ -5180,7 +5192,7 @@ const Entity1=Vue.extend({template:`
 
       );
       
-// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/namespace.vue
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/namespaces/namespace.vue
 const Namespace=Vue.extend({template:` 
  <v-container fluid>
  <v-card>
@@ -5279,7 +5291,7 @@ const Namespace=Vue.extend({template:`
 
       );
       
-// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/namespace1.vue
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/namespaces/namespace1.vue
 const Namespace1=Vue.extend({template:` 
 <v-card>
 	<v-toolbar>
@@ -5304,6 +5316,9 @@ const Namespace1=Vue.extend({template:`
   
   
       hello
+      <div>{{ item.prefix }}</div>
+      <div>{{ item.xmlns }}</div>
+      <div>{{ item.description }}</div>
   </v-container>
    </v-card>
  `,
@@ -5322,7 +5337,7 @@ const Namespace1=Vue.extend({template:`
       .then(r=>{
         this.loading=false;
         console.log(r.data)
-       
+        this.item= r.data
         }) 
     }
   },
@@ -6367,6 +6382,9 @@ const Acesettings=Vue.extend({template:`
           <v-flex>
             <v-select v-bind:items="themes" v-model="ace.theme" label="Theme"></v-select>
           </v-flex>
+          <v-flex>
+            <v-select v-bind:items="themesDark" v-model="ace.themeDark" label="Dark Theme"></v-select>
+          </v-flex>
         </v-layout>
        
         <v-layout row>
@@ -6441,11 +6459,13 @@ const Acesettings=Vue.extend({template:`
 			        enableBasicAutocompletion: true,
 			        enableLiveAutocompletion: true,
 			        theme: "github",
+			        themeDark: "twilight",
 			        keybinding: "ace",
 			        fontsize: "14"
 			    },
 			    keybindings:[  'ace',  'vim', 'emacs', 'textarea', 'sublime' ],
-			    themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
+			    themes: [ "github","chrome" ,"tomorrow"],
+			    themesDark: ["chaos","twilight"]
 			    }
   },
   methods:{
@@ -6687,7 +6707,8 @@ const Model=Vue.extend({template:`
     var task=this.task
     HTTP.get("tasks/model")
     .then(r=>{
-      console.log(r);
+      console.log(r.data.values);
+      this.params=r.data.values;
       })
    },
 }
@@ -6998,43 +7019,61 @@ const Thumbnail=Vue.extend({template:`
  <v-container fluid>
  <v-stepper v-model="step" non-linear>
   <v-stepper-header>
-      <v-stepper-step step="1" :complete="step > 1" editable>Select image location</v-stepper-step>
+      <v-stepper-step step="1" :complete="step > 1" editable>Image source</v-stepper-step>
       <v-divider></v-divider>
-      <v-stepper-step step="2" :complete="step > 2" editable>Set thumbnail details</v-stepper-step>
+      <v-stepper-step step="2" :complete="step > 2" editable>Thumbnail parameters</v-stepper-step>
       <v-divider></v-divider>
-      <v-stepper-step step="3" editable>Result</v-stepper-step>
+      <v-stepper-step step="3" editable>Thumbnail</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-card class="lime lighten-1 z-depth-1 mb-5" height="200px">
-    <v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required></v-text-field>
+    <v-card-text>
-    </v-card>
+	    <v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required></v-text-field>
+     </v-card-text>
+    <v-card-actions>
+    <v-spacer></v-spacer>
         <v-btn color="primary" @click="step = 2">Next</v-btn>
+        </v-card-actions>
+          </v-card>
   </v-stepper-content>
   
   <v-stepper-content step="2" non-linear>
-    <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
+  
-    <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true" v-on:change-content="onChange"></vue-ace>
+    <v-card class="lime lighten-1 z-depth-1 mb-5">
+    <v-toolbar dense>
+		<v-btn text @click="step -= 1">Back</v-btn>
+		<v-spacer></v-spacer>
+	    <v-btn color="primary" @click="validate()">Validate</v-btn>
+	    <v-spacer></v-spacer>
+	     <v-btn color="primary" @click="step = 3">Next</v-btn>  
+		</v-toolbar>
+		<v-flex xs12 style="height:400px" fill-height>
+	    <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true" v-on:change-content="onChange" min-lines="7"></vue-ace>
+        </v-flex>
 		</v-card>
-   
+  
-    <v-btn text @click="step -= 1">Back</v-btn>
+    
-    <v-btn color="primary" @click="validate()">Validate</v-btn>
-     <v-btn color="primary" @click="step = 3">Next</v-btn>  
   </v-stepper-content>
 
   <v-stepper-content step="3" non-linear>
-    <v-card class="grey lighten-1 z-depth-1 mb-5">
+    <v-card :loading="loading" class="lime lighten-1 z-depth-1 mb-5">
      <v-card-actions>
     <v-btn text @click="step -= 1">Back</v-btn>
-     <v-btn color="primary" @click="go()">go</v-btn>
+    <v-spacer></v-spacer>
+     <v-btn color="primary" @click="go()">refresh</v-btn>
+     <div v-if="elapsed"> (took {{ elapsed }}ms.)</div>
+     <v-spacer></v-spacer>
      </v-card-actions>
     <v-card-text>
-    <v-layout style="height:200px" fill-height>
+    <v-layout style="height:300px" fill-height>
     <v-flex xs6>
+    <div>Source</div>
     <img :src="image" class="contain" style="width:100%; height:100%;">
     </v-flex>
     <v-flex xs6>
-    <img :src="image" class="contain" style="width:50%; height:50%;object-position: 50% 50%;">
+    <div>Thumbnail</div>
+    <img ref="imgResult" class="contain" style="width:100%; height:100%;object-position: 50% 50%;">
     </v-flex>
     </v-layout>
     </v-card-text>
@@ -7050,15 +7089,18 @@ const Thumbnail=Vue.extend({template:`
       
   data(){
     return {
-      image:"https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg",
+      image:"https://picsum.photos/id/123/500/700",
-      step: 0,
+      step: 1,
+      elapsed: null,
       taskxml:"<task></task>",
       items:[
-        {
+        { src: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg'},
-          src: 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Lycidae-Kadavoor-2017-05-22-001.jpg'
+        { src: 'https://picsum.photos/id/123/500/700' }
-        }]
+        ],
+        loading: false
       }
   },
+  
   methods:{
     onChange (val) {
       if (this.taskxml !== val) this.taskxml = val;
@@ -7068,15 +7110,27 @@ const Thumbnail=Vue.extend({template:`
         HTTP.post("thumbnail/validate",Qs.stringify({task: this.taskxml}))
         .then(r=>{alert("gg")})
       },
+      
     go(){
-        alert("post")
+    	  var target= this.$refs.imgResult;
-        HTTP.post("thumbnail",Qs.stringify({task: this.taskxml,url:this.image}))
+    	  var _start = performance.now();
-        .then(function(r){
+    	  this.loading = true
-          console.log(r)
+    	  fetch("/vue-poc/api/thumbnail",
-       alert("not yet:"+r);
+        		  {
-     })
+    		      method: 'POST',
+    		      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+    		      body:  Qs.stringify({task: this.taskxml,url:this.image})
+        		  }
+        		  ).then(function(response) {
+    		  return response.blob();
+    		}).then(myBlob=> { 			
+    		      target.src = URL.createObjectURL(myBlob);
+    		      this.elapsed=Math.floor(performance.now() - _start);
+    		      this.loading = false
+    		});	  
       }
   },
+  
   beforeRouteEnter (to, from, next) {
     Promise.all([Settings.getItem('images/thumbtask')
                  ])
@@ -7417,7 +7471,10 @@ const router = new VueRouter({
     { path: '/images/people', component: People, meta:{title:"Image people"} },
     
     { path: '/documentation', component: Documentation, meta:{title:"documentation"} },
-    { path: '/logdate', component: Logdate, meta:{title:"log files"} },
+    
+    { path: '/logdate', component: Basexlogdate, meta:{title:"log files"} },
+    { path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} },
+    
     { path: '/entity', component: Entity, meta:{title:"Entities"} },
     { path: '/entity/:entity',  name:"entity1", component: Entity1, props: true, meta:{title:"Entity"} },
     
@@ -7916,6 +7973,7 @@ var Settings = {
       
       "settings/ace": {
                       theme: "github",
+                      themeDark: "chaos",
                       keybinding: "ace",
                       fontsize: 16,
                       enableSnippets:true,
@@ -7943,12 +8001,12 @@ return $a   `},
        "edit/currentId": "?",
        "images/thumbtask":`
 <thumbnail>
-    <size width="100" height="100"/>
+    <size width="200" height="200"/>
     <filters>             
         <colorize color="green" alpha=".5"/>      
         <caption position="CENTER">Some Text here</caption>
         <rotate angle="15"/>
-        <canvas height="500" width="500" position="TOP_LEFT" color="black"/> 
+        <canvas height="300" width="300" position="TOP_LEFT" color="yellow"/> 
     </filters>
     <output format="gif"/>         
 </thumbnail>

src/vue-poc/static/app.html

@@ -10,7 +10,7 @@
 	<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
 	<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 rel="stylesheet" href="//unpkg.com/vuetify@2.1.2/dist/vuetify.min.css" type="text/css"/>
+	<link rel="stylesheet" href="//unpkg.com/vuetify@2.1.9/dist/vuetify.min.css" type="text/css"/>
 	<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.css"/>
 	<link rel="stylesheet" href="/vue-poc/ui/prism/prism.css" type="text/css"/> 
 	<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
@@ -20,9 +20,9 @@
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
 </head>
 
-<body>
+<body >
 <div id="app">
-<h3><code>vue-poc</code> <small>(v0.4.4)</small> </h3>
+<h1>vue-poc</h1>
 
 <div class="spinner">
   <div class="rect1"></div>
@@ -39,7 +39,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.1/axios.js" crossorigin="anonymous"></script>
 <script src="//unpkg.com/vuex@3.1.0/dist/vuex.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@2.1.2/dist/vuetify.min.js" crossorigin="anonymous"></script>
+<script src="//unpkg.com/vuetify@2.1.9/dist/vuetify.min.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-language_tools.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-linking.js" crossorigin="anonymous" charset="utf-8"></script>