vuetify 1.4.3

README.md

@@ -29,3 +29,4 @@ Example usage
   } 
 
 ```
+##

src/vue-poc/app.vue

@@ -169,6 +169,7 @@
           {href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
           {href: '/server/upload',text: 'Upload to server',icon: 'file_upload'},
           {href: '/server/ping',text: 'Ping',icon: 'update'},
+          {href: '/server/dicetest',text: 'Dice performance',icon: 'update'},
           {href: '/server/settings',text: 'Server settings',icon: 'settings_applications'}
       ]},
       {

src/vue-poc/app.xqm

@@ -45,14 +45,21 @@ function vue-poc:file(
 
 
 (:~
- :web serve $file if it exists otherwise serve $vue-poc:index
+ : Returns a file.
+ : @param  $file  file or unknown path
+ : @return rest binary data
  :)
-declare function vue-poc:get-file($file)
+declare function vue-poc:get-file( $file as xs:string) 
+as item()+ 
 {
   let $path := resolve-uri( 'static/' || $file,static-base-uri())
   let $path:= if(file:exists($path))then $path else ($vue-poc:index,prof:dump($path," Not found"))
+  let $content-type:= vue-poc:content-type($path)
   return (
-    web:response-header(map { 'media-type': vue-poc:content-type($path) }),
+    web:response-header(
+                     map { 'media-type': $content-type },
+                     map { 'Cache-Control': 'max-age=3600,public' }
+                     ),
     file:read-binary($path)
   )
 };

src/vue-poc/components/EditTabs.js

@@ -1,10 +1,11 @@
 //Manage array of text sources  used for:edit tabs
 // item{
 //     name: 
-//     contentType:
+//     contentType: "text/xml",
+//     mode: "xml",
 //     text:
 //     id: ids have the form "Tn"
-//     url:
+//     url: path to save to
 // requires: Settings,HTTP
 //
 const GEditTabs={
@@ -76,12 +77,14 @@ const GEditTabs={
            });   
       },
       
-      sorted(){ /* sorted indices */
+      sorted(q){ /* return sorted and filtered array of tab indices */
         var len=this.items.length
         var indices = new Array(len);
         for (var i = 0; i < len; ++i) indices[i] = i;
-        var list=this.items
+        var list=this.items;
-        return indices.sort((a,b) =>list[a].name.localeCompare(list[b].name))
+        indices=indices.filter(a=>(!q) || list[a].name.toLowerCase().includes(q.toLowerCase()))
+        var i= indices.sort((a,b) =>list[a].name.localeCompare(list[b].name))
+        return i
       }
     },
     created(){

src/vue-poc/components/aceextras.js

@@ -42,11 +42,11 @@ const AceExtras={
     snippets:[
           {
             name: "test",
-            content: "something",
+            content: "this is a test snippet",
             tabTrigger: "test:"
           },
           {
-            name: "test2",
+            name: "sniptest2",
             content: "some2",
             tabTrigger: "he"
           }

src/vue-poc/components/mimetypes.js

@@ -1,32 +1,49 @@
 // Mimetype info
 // 
+// 
 const MimeTypes=new function(){
- this.toMode=[
+  var formatdom= t=>html_beautify(t, { indent_size: 3 ,indent_inner_html:true});
-            {name: "text/plain", mode: "text"},
+  var formatjs= t=>js_beautify(t, { indent_size: 2 });
-            {name: "text/xml", mode: "xml"},
+  var formatcss= t=>css_beautify(t, { indent_size: 2 });
-            {name: "application/xml", mode:"xml"},
-            {name: "application/xquery", mode:"xquery"},
-            {name: "text/ecmascript", mode:"javascript"},
-            {name: "application/sparql-query", mode:"sparql"},
-            {name: "text/html", mode:"html"},
-            {name: "text/turtle", mode:"turtle"},
-            {name: "text/css", mode:"css"},
-            {name: "image/svg+xml", mode:"svg"}
-            ],
-  this.formatdom= t=>html_beautify(t, { indent_size: 3 ,indent_inner_html:true});
-  this.formatjs= t=>js_beautify(t, { indent_size: 2 });
   
-  this.mode={
+ this.contentType={
-    "text": {},
+     "text/plain":{ mode: "text"},
-    "javascript": {
+     "text/xml":{ mode: "xml"},
-      "format":this.formatjs
+     "application/xml":{ mode:"xml"},
-    },
+     "application/xquery":{ mode:"xquery"},
-   "xml": {
+     "text/ecmascript":{ mode:"javascript"},
-     "format":this.formatdom
+     "application/sparql-query": {mode:"sparql"},
-    },
+     "text/html":{ mode:"html"},
-    "css": {}
+     "text/turtle":{ mode:"turtle"},
+     "text/css": {mode:"css"},
+    "image/svg+xml":{ mode:"svg"}
  };
 
+  
+  this.mode={
+    "text": {
+      icon: "library_books"
+    },
+    "javascript": {
+      "format": formatjs
+    },
+   "xml": {
+     "format": formatdom
+    },
+    "html": {
+      "format": formatdom
+    },
+    "css": {
+      "format": formatcss
+    }
+  };
+  this.list=function(){
+    var that=this
+    var h= Object.keys(this.contentType).map(
+        function(k){ return {name: k, mode: that.contentType[k].mode}}
+        )
+    return h
+  }
   this.install=function(Vue){
       Object.defineProperty(Vue.prototype, '$MimeTypes', {
         get () { return MimeTypes }

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

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!-- 
+ mimetype UI 
+ An item can be selected emits selected event with  {name:.., mode: ...}
+ -->
+<template id="qd-mimelist">
+  <v-menu v-model="show" left bottom  :close-on-content-click="false" >
+    <v-chip  slot="activator">
+    
+    {{ mimetype }}
+    <v-avatar>
+      <v-icon right>arrow_drop_down</v-icon>
+      </v-avatar>
+    </v-chip>
+   <v-card>
+    <v-toolbar   >
+      <v-text-field
+            prepend-icon="filter_list" 
+            label="type filter for mimetypes"
+            single-line
+            hide-details
+            v-model="q"
+            clearable
+          ></v-text-field>  
+
+  </v-toolbar>
+	<v-card-text>
+	  <v-list  style="height: 300px; overflow-y: auto;"> 
+	  
+	        <v-list-tile
+	          v-for="(mime,index) in items" :key="index"
+	            avatar dense ripple
+            @click="setItem(mime,index)" 
+	         
+	        >
+	          <v-list-tile-avatar>
+	            <v-icon v-if="false">check_circle</v-icon>
+	            <v-icon v-else>insert_drive_file</v-icon>
+	          </v-list-tile-avatar>
+	
+	          <v-list-tile-content>
+	            <v-list-tile-title>{{ mime.name }}</v-list-tile-title>
+	          </v-list-tile-content>
+	
+	          <v-list-tile-action  >
+	           {{ mime.mode }}
+	          </v-list-tile-action>
+	        </v-list-tile>
+	     
+	  </v-list>
+  </v-card-text>
+  <v-card-actions>
+ 
+  </v-card-actions>
+</v-card>
+</v-menu>
+</template>
+
+<script>{
+  props: {
+    mimetype:{
+       type:String, default:"(default)"
+    }
+  },
+    
+  data () {
+    return {
+      q: null,
+      show: false
+    }
+  },
+  
+  methods:{
+    setItem(mime,index){
+      console.log("selected ",mime)
+      this.$emit('selected', mime)
+      this.show=false
+    }
+  },
+  
+  computed:{
+  items(){
+    return this.$MimeTypes.list().filter(item=>{return (!this.q) || item.name.toLowerCase().includes(this.q.toLowerCase())})
+  }
+  }, 
+  
+  created:function(){
+    console.log("qd-mimelist",this.$MimeTypes.list())
+  }
+}</script>

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

@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <!-- 
- A fixed height card showing files in a tabset. 
+ Show tab editor for tab list. 
- An item can be selected
  -->
 <template id="qd-tablist">
   <v-menu left bottom  :close-on-content-click="false" >
     <v-chip  slot="activator">
     
-    {{ EditTabs.length }}
+    {{ edittabs.length }}
     <v-avatar>
       <v-icon right>arrow_drop_down</v-icon>
       </v-avatar>
@@ -19,7 +18,7 @@
             label="type filter text"
             single-line
             hide-details
-            v-model="search"
+            v-model="q"
             clearable
           ></v-text-field>  
 
@@ -27,7 +26,7 @@
 	<v-card-text>
 	  <v-list  style="height: 300px; overflow-y: auto;"> 
 	        <v-list-tile
-	          v-for="index in edittabs.sorted()" :key="index"
+	          v-for="index in edittabs.sorted(q)" :key="index"
 	          avatar dense ripple
 	          @click="setItem(index)" :inactive="index == current"
 	        >
@@ -57,11 +56,13 @@
   props: ['edittabs',
           'current'
     ],
+    
   data () {
     return {
-      search:null
+      q:null
     }
   },
+  
   methods: {
     setItem(index){     
        this.$emit('selected', index)

src/vue-poc/core.js

@@ -95,7 +95,8 @@ return $a   `},
     </filters>
     <output format="gif"/>         
 </thumbnail>
-`       
+`,
+      "edit/query": "todo edit/query"
     },
     
     

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

@@ -35,7 +35,7 @@
   <v-menu left  transition="v-fade-transition" >
       <v-chip label small slot="activator" >{{ mode }}</v-chip>
           <v-list dense>
-              <v-list-tile v-for="type in $MimeTypes.toMode"  :key="type.name">
+              <v-list-tile v-for="type in $MimeTypes.list()"  :key="type.name">
                 <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>           
           </v-list>         

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

@@ -3,15 +3,15 @@
 <div> 
   <v-toolbar   tabs dense>
      <v-toolbar-items>
-	      <vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
+	      <vp-selectpath :frmfav.sync="showadd" @selectpath="add"> <v-icon>add_circle</v-icon></vp-selectpath>
 	      <v-btn icon @click="openUri"><v-icon>insert_drive_file</v-icon></v-btn>
       </v-toolbar-items>
-      <v-toolbar-title>{{ currentId   }} </v-toolbar-title>
+      <v-toolbar-title>{{ curIndex   }} </v-toolbar-title>
       
        <v-menu v-if="active"  left  transition="v-fade-transition" >
        <v-chip label small slot="activator" >{{ active.mode }}</v-chip>
           <v-list dense>
-                <v-list-tile v-for="type in $MimeTypes.toMode"  :key="type.name">
+                <v-list-tile v-for="type in $MimeTypes.list()"  :key="type.name">
                 <v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
               </v-list-tile>         
           </v-list>         
@@ -29,7 +29,7 @@
               </v-list-tile>             
           </v-list>         
       </v-menu>
-      <v-btn @click="EditTabs.addItem({txt:'hello'})">*{{  EditTabs.nextId }}</v-btn>
+      <v-btn @click="add">*{{  EditTabs.nextId }}</v-btn>
      
        <v-spacer></v-spacer>
        
@@ -108,25 +108,9 @@
           </v-list>         
     </v-menu>
     
-        <v-menu left bottom  :close-on-content-click="false" >
+    <qd-tablist v-if="EditTabs" :edittabs="EditTabs" :current="curIndex" @selected="setItem">tab list</qd-tablist>
-          <a class="tabs__item" slot="activator">
-          {{ EditTabs.items.length }}
-            <v-icon>arrow_drop_down</v-icon>
-          </a>
-          <v-card>
-            <v-card-title>Select Tab</v-card-title>
-	          <v-card-actions>
-	           <v-autocomplete :items="EditTabs.sorted()" v-model="a1"
-	          label="File"   class="input-group--focused"
-	          item-text="name" item-value="id"
-	          @change="setItem"
-	          clearable open-on-clear
-	        ></v-autocomplete>
-	        </v-card-actions>
-	        </v-card>
-        </v-menu>
         
-        <v-tabs   v-model="currentId" slot="extension">
+        <v-tabs   v-model="curIndex" slot="extension">
 		      <v-tab
 		        v-for="item in EditTabs.items"
 		        :key="item.id"
@@ -147,37 +131,13 @@
   </v-toolbar>
   
    
-      <v-tabs-items slot="body" v-model="currentId">
+      <v-tabs-items  v-model="curIndex">
        <v-tab-item
         v-for="item in EditTabs.items"
         :key="item.id"
-        :value="item.id"
       >
-		      <v-card flat v-if="showInfo" >
-					  <v-card-actions >
-				      <v-toolbar-title >Metadata for tab id: '{{ currentId }}'</v-toolbar-title>
-				      <v-spacer></v-spacer>    
-				       <v-btn flat > <v-icon>highlight_off</v-icon>todo</v-btn>
-			      </v-card-actions>
 
-			       <v-card-text v-if="active"> 
+			    <v-card >
-									<v-layout row v-for="x in ['name','id','mode','contentType','dirty','location']" :key="x">
-							      <v-flex xs3>
-							        <v-subheader>{{ x}}</v-subheader>
-							      </v-flex>
-							      <v-flex xs9>
-							        <v-text-field
-							          :name="x"
-							          label="Hint Text"
-							          :value="active[x]"
-							          single-line
-							        ></v-text-field>
-							      </v-flex>
-							    </v-layout>
-				    </v-card-text>
-			    </v-card>
-			    
-			    <v-card v-else>
 		        <div style="height:200px" ref="ace" v-resize="onResize" >
 		        <v-flex xs12  fill-height >
 					    <vue-ace  :content="item.text"  v-on:change-content="changeContent"  :events="events"
@@ -197,7 +157,7 @@
         showadd: false,  // showing add form
         showInfo: false, // showing info
         a1:"",
-        currentId: null, //href of current
+        curIndex: null, //index of current
         active: null,
         items: [],
       wrap: true,
@@ -210,17 +170,28 @@
   },
   
   methods:{
-    tabClose(item){
+    add(){
-      if(item.dirty){
+      var a=this.EditTabs.addItem({text:"hi "+ new Date()})
-        if (!confirm("Not saved continue? "))return;
+      this.curIndex=this.EditTabs.items.indexOf(a)
-      }else{
-	      this.EditTabs.closeItem(item)
-      }
     },
   
-    setItem(v){
+    tabClose(item,index){
-      if(v) this.currentId="T"+v;
+      if(item.dirty){
+        if (!confirm("Not saved continue? "+ index))return;
+      }else{
+        this.EditTabs.closeItem(item)
+        this.curIndex=0
+      }
     },
+    setItem(v){
+      this.curIndex=v;
+    },
+    setmime(mime){
+      this.$set(this.active, 'contentType', mime.contentType)
+      this.$set(this.active, 'mode', mime.mode)
+      //alert(mime.contentType+" "+mime.mode)
+    },
+    
     
     openUri(){
       alert("openUri TODO")
@@ -262,10 +233,7 @@
         alert("no validate yet");
     },
     
-    addItem(tab){
+   
-      var tab=EditTabs.addItem({text:"aaa hello"})
-      this.currentId="T" + tab.id
-    },
     
     
     changeContent(val){
@@ -290,10 +258,10 @@
   },
   
   watch:{
-    currentId (val) {
+    curIndex (val) {
-      console.log("currentId: ",val)
+      this.active = EditTabs.items[val];
-      this.active = EditTabs.items.find(e=> val=="T"+e.id);
+      console.log("curIndex: ",val)
-      this.$router.push({  query: { id: val }});
+      if(this.active) this.$router.push({  query: { id: this.active.id }});
     }
   },
   
@@ -327,8 +295,14 @@
     if(url){
       EditTabs.loadItem(url);
     }else{
-      var id=this.$route.query.id;
+    var tid=this.$route.query.id;
-      this.currentId=id?id:null;
+    var id=EditTabs.items.findIndex(i=>i.id ==tid)
+    console.log("set tab",tid,id)
+    EditTabs.restored.then(()=>{
+      var id=EditTabs.items.findIndex(i=>i.id ==tid)
+      console.log("set tab",tid,id)
+      this.curIndex= id;
+    });
     }
   }
 }</script>

src/vue-poc/features/job/jobs.xml

@@ -0,0 +1,3 @@
+<jobs>
+  <job base-uri="file:///C:/Users/andy/git/vue-poc/src/vue-poc/tasks/file2" id="cleanup" interval="PT1M">admin:write-log("cleanup","QDS")</job>
+</jobs>

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

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <template id="documentation">
  <v-container fluid>
-    <a href="file:///c:/tmp" target="doc">go</</a>
+    <h1>TODO</h1>
+    <a href="/vue-poc/api/xqdoc" target="doc">list</a>
  </v-container>
 </template>
 

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

@@ -14,7 +14,7 @@
 	 
 	 <v-text-field  prepend-icon="filter_list" label="Filter..." v-model="q" type="search"
    hide-details single-line  @keyup.enter="setfilter"
-   :append-icon="this.q?'clear':''" @click:append="e=>this.q=''"></v-text-field>
+   clearable></v-text-field>
    <v-spacer></v-spacer>
 	 <v-btn @click="getItems" icon
 	  :loading="loading"
@@ -48,12 +48,12 @@
         <v-card :hover="true" active-class="default-class qd-active"  max-height="200px">
         
           <v-toolbar  color="blue lighten-3"  dense>
-		          <v-card-title >
+		          <v-toolbar-title>
 		           <router-link :to="{path:'entity/'+ props.item.name}">
 		            
 		            <v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
 		            
-		            </router-link>
+		            </v-toolbar-title>
 		         </v-card-title>
           </v-toolbar>
           <v-card-text>{{ props.item.description }}</<v-card-text>

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

@@ -33,6 +33,7 @@
     <v-data-table
     :headers="headers"
     :items="items"
+    :loading="loading"
     hide-actions
      :search="q"
     class="elevation-1"
@@ -45,6 +46,11 @@
       <td >{{ props.item.prefix }}</td>
      
     </template>
+    
+    <template slot="no-data">
+        No result available.
+    </template>
+    
     <template slot="no-data">
       <v-alert :value="true" icon="warning" >
         No matching items.

src/vue-poc/features/model/xqdocs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xqdocs>
+	<entry id="279" >
+	</entry>
+	<entry id="280">
+	</entry>
+</xqdocs>

src/vue-poc/features/model/xqdocs.xqm

@@ -0,0 +1,37 @@
+module namespace j = 'quodatum.test.xqdoc';
+
+
+(:~
+ :  job list
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/xqdoc")
+%output:method("json")   
+function j:list()
+as element(json)
+{
+ let $jlist:=(279,280)
+ return <json type="array">
+ {for $j in $jlist
+ return <_ type="object">
+  <id>{ $j }</id>
+  <name>todo</name>
+ </_>
+ }</json>
+};
+
+(:~
+ :  job info
+ :)
+declare  
+%rest:GET %rest:path("/vue-poc/api/xqdoc/{$job}")
+%output:method("json")   
+function j:job($job)
+as element(json)
+{
+ let $j:=$job
+ return <json type="object">
+        <todo>uuu</todo>
+        </json>
+};
+

src/vue-poc/features/scratch.vue

@@ -4,13 +4,14 @@
    <v-toolbar tabs dense>
    <v-toolbar-title>Tab index {{ curIndex }}</v-toolbar-title>
    <v-btn v-if="active">{{ active.mode }}</v-btn>
+   <qd-mimelist  v-if="active" :mimetype="active.contentType" @selected="setmime">{{ active.mode }}</qd-mimelist>
    <v-btn v-if="active"> {{ active.name }}, id: {{ active.id }}</v-btn>
    <v-spacer></v-spacer>
 
    <v-btn @click="add">Add</v-btn>
     <v-btn @click="curIndex=2">set</v-btn>
-    <qd-tablist :edittabs="EditTabs" :current="curIndex" @selected="setItem">tab list</qd-tablist>
 
+    <qd-tablist v-if="EditTabs" :edittabs="EditTabs" :current="curIndex" @selected="setItem">tab list</qd-tablist>
     <v-tabs   v-model="curIndex" slot="extension">
           <v-tab
             v-for="(item,index) in EditTabs.items"
@@ -41,7 +42,10 @@
             <div style="height:200px" ref="ace" v-resize="onResize" >
             <v-flex xs12  fill-height >
               <vue-ace  :content="item.text"  v-on:change-content="changeContent"  :events="events"
-              :mode="item.mode" :wrap="wrap"  :settings="aceSettings" v-on:annotation="annotation"></vue-ace>
+              :mode="item.mode" :wrap="wrap"  :settings="aceSettings" 
+              v-on:annotation="annotation"
+              :completer="$aceExtras.basexCompleter" :snippets="$aceExtras.snippets" 
+              ></vue-ace>
             </v-flex>
             </div> 
           </v-card>
@@ -82,6 +86,11 @@
     setItem(v){
       this.curIndex=v;
     },
+    setmime(mime){
+      this.$set(this.active, 'contentType', mime.name)
+      this.$set(this.active, 'mode', mime.mode)
+      //alert(mime.contentType+" "+mime.mode)
+    },
     annotation(counts){
       this.annotations=counts
       //console.log("annotations: ",counts)

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

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<template id="dicetest">
+ <v-container fluid>
+ <v-card>
+ <v-toolbar >
+ <v-toolbar-title>Dice entity list</v-toolbar-title>
+ 
+ <v-spacer></v-spacer>
+ <v-btn @click="reset()">Reset</v-btn>
+ </v-toolbar>
+ <v-card-text>
+  <p>Read json data for 1st page for entity.</p>
+   <v-flex xs12 sm6>
+      <v-text-field v-model="url"
+        label="url"
+      ></v-text-field>
+    </v-flex>
+ 
+  <table class="v-table">
+      <thead> 
+        <tr>
+         <th xs1>Action</th>
+          <th xs1>Repeat</th>
+          <th xs1>Last</th>
+          <th xs1>Count</th>
+          <th xs1>Avg</th>
+          <th xs1>min</th>
+          <th xs1>max</th>
+          <th xs1>Median</th>
+        </tr>
+      </thead>
+      <tbody>
+
+      
+          <tr>
+              <td>
+               <v-btn @click="get()"  >
+                   Read <v-icon right>compare_arrows</v-icon> 
+                </v-btn>
+             
+               </td>
+               <td>
+                <v-switch v-on:change="gchange" v-model="repeat.get"></v-switch>
+
+             </td>    
+              <td>
+                  <span >{{getValues.last}}</span>
+              </td>
+              <td>
+                  <span >{{getValues.count}}</span>
+              </td>   
+            
+              <td>
+                  <span >{{getValues.avg | round(2)}}</span>
+              </td>
+            
+              <td>
+                  <span >{{getValues.min}}</span>
+              </td>
+              <td>
+                  <span >{{getValues.max}}</span>
+              </td>
+                <td>
+                  <span >{{getValues.median}}</span>
+              </td>
+          </tr>
+          
+          
+      </tbody>
+    </table>
+     <h3>Value: <v-chip color="amber" text-color="white">{{counter}}</v-chip></h3>
+     <pre>{{ result | pretty}}</pre>
+    </v-card-text>
+    </v-card>
+    
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      getValues: new perfStat(),
+      repeat: {get:false},
+      url: "data/entity",
+      counter: 0,
+      result: null
+      }
+  },
+  methods:{
+
+    get(){
+     var _start = performance.now();
+     HTTP.get(this.url,axios_json)
+     .then(r=>{
+       var elapsed=Math.floor(performance.now() - _start);
+       this.counter++;
+       this.result=r.data;
+       Object.assign(this.getValues,this.getValues.log(elapsed))
+       this.$forceUpdate()
+        if(this.repeat.get){
+          this.get(); //does this leak??
+        }
+     })
+    },
+    gchange(v){
+      if(v)this.get() 
+    },
+    
+    reset(){
+      Object.assign(this.getValues,this.getValues.clear());
+      this.$forceUpdate()
+    }
+  },
+  beforeRouteLeave(to, from, next){
+    var on=this.repeat.get 
+
+    if (on) {
+      alert("running!") //<--undefined
+      return next(false)
+    } else {
+      return next()
+    }
+  }
+}
+</script>

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

@@ -3,13 +3,13 @@
  <v-container fluid>
  <v-card>
  <v-toolbar >
- <v-toolbar-title>Simple performance measure</v-toolbar-title>
+ <v-toolbar-title>Simple response counter</v-toolbar-title>
  <v-spacer></v-spacer>
  <v-btn @click="reset()">Reset</v-btn>
  </v-toolbar>
  <v-card-text>
   <p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
-  <h3>Counter: <v-chip color="amber" text-color="white">{{counter}}</v-chip></h3>
+  <h3>Value: <v-chip color="amber" text-color="white">{{counter}}</v-chip></h3>
   <table class="v-table">
       <thead> 
         <tr>

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

@@ -8,8 +8,11 @@ declare namespace Element="java:ch.digitalfondue.jfiveparse.Element";
 declare namespace Node="java:ch.digitalfondue.jfiveparse.Node";
 declare namespace Parser="java:ch.digitalfondue.jfiveparse.Parser";
 declare namespace Selector="java:ch.digitalfondue.jfiveparse.Selector";
+declare namespace Option="java:ch.digitalfondue.jfiveparse.Option";
+declare namespace EnumSet="java:java.util.EnumSet";
 declare namespace list="java:java.util.ArrayList";
 
+declare variable $html5:opt:=EnumSet:of(Option:valueOf("HIDE_EMPTY_ATTRIBUTE_VALUE"));
 (:~
  : parse html text string into jfiveparse.Document 
  :)
@@ -53,7 +56,7 @@ as xs:string
 declare function html5:getInnerHTML($node)
 as xs:string
 {
- Node:getInnerHTML($node)
+ Node:getInnerHTML($node,$html5:opt)
 };
 (:~ 
  : @return matcher for given element and attribute with value

src/vue-poc/models.gen.xqm

@@ -1,11 +1,11 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2018-11-30T09:48:45.409Z 
+ : auto generated from xml files in entities folder at: 2019-01-23T21:27:22.427Z 
  :)
 
 module namespace entity = 'quodatum.models.generated';
-import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";declare namespace ent='https://github.com/Quodatum/app-doc/entity';
+import module namespace cfg = "quodatum:media.image.configure" at "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 xqdoc='http://www.xqdoc.org/1.0';
 declare namespace c='http://www.w3.org/ns/xproc-step';
           
 declare variable $entity:list:=map { 
@@ -63,6 +63,80 @@ hof:top-k-by(admin:logs(), string#1, 2)
        
        "views": map{ 
        
+       }
+   },
+  "basexjob": map{
+     "name": "basexjob",
+     "description": "A BaseX job",
+     "access": map{ 
+       "duration": function($_ as element()) as xs:string {$_/@duration },
+       "id": function($_ as element()) as xs:string {$_/@id },
+       "interval": function($_ as element()) as xs:string {$_/@interval },
+       "reads": function($_ as element()) as xs:string {$_/@reads },
+       "registered": function($_ as element()) as xs:string {$_/@time },
+       "start": function($_ as element()) as xs:string {$_/@start },
+       "state": function($_ as element()) as xs:string {$_/@state },
+       "text": function($_ as element()) as xs:string {$_/. },
+       "type": function($_ as element()) as xs:string {$_/@type },
+       "user": function($_ as element()) as xs:string {$_/@user },
+       "writes": function($_ as element()) as xs:string {$_/@writes } },
+    
+     "filter": function($item,$q) as xs:boolean{ 
+         some $e in ( ) satisfies
+         fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
+      },
+       "json":   map{ 
+           "duration": function($_ as element()) as element(duration)? {
+            (: xs:string :)
+                        fn:data($_/@duration)!element duration {  .} 
+                 },
+           "id": function($_ as element()) as element(id)? {
+            (: xs:string :)
+                        fn:data($_/@id)!element id {  .} 
+                 },
+           "interval": function($_ as element()) as element(interval)? {
+            (: xs:string :)
+                        fn:data($_/@interval)!element interval {  .} 
+                 },
+           "reads": function($_ as element()) as element(reads)? {
+            (: xs:string :)
+                        fn:data($_/@reads)!element reads {  .} 
+                 },
+           "registered": function($_ as element()) as element(registered)? {
+            (: xs:string :)
+                        fn:data($_/@time)!element registered {  .} 
+                 },
+           "start": function($_ as element()) as element(start)? {
+            (: xs:string :)
+                        fn:data($_/@start)!element start {  .} 
+                 },
+           "state": function($_ as element()) as element(state)? {
+            (: xs:string :)
+                        fn:data($_/@state)!element state {  .} 
+                 },
+           "text": function($_ as element()) as element(text)? {
+            (: xs:string :)
+                        fn:data($_/.)!element text {  .} 
+                 },
+           "type": function($_ as element()) as element(type)? {
+            (: xs:string :)
+                        fn:data($_/@type)!element type {  .} 
+                 },
+           "user": function($_ as element()) as element(user)? {
+            (: xs:string :)
+                        fn:data($_/@user)!element user {  .} 
+                 },
+           "writes": function($_ as element()) as element(writes)? {
+            (: xs:string :)
+                        fn:data($_/@writes)!element writes {  .} 
+                 } },
+       
+      "data": function() as element(job)*
+       { jobs:list()[. != jobs:current()] !jobs:list-details(.)=>reverse()
+	 },
+       
+       "views": map{ 
+       'filter': 'name description'
        }
    },
   "entity.field": map{
@@ -425,6 +499,49 @@ hof:top-k-by(admin:logs(), string#1, 2)
        
        "views": map{ 
        
+       }
+   },
+  "service": map{
+     "name": "service",
+     "description": "basex services ",
+     "access": map{ 
+       "base-uri": function($_ as element()) as xs:string {$_/@base-uri },
+       "id": function($_ as element()) as xs:string {$_/@id },
+       "interval": function($_ as element()) as xs:string {$_/@interval },
+       "query": function($_ as element()) as xs:string {$_/. },
+       "running": function($_ as element()) as xs:boolean {$_/jobs:list()=@id } },
+    
+     "filter": function($item,$q) as xs:boolean{ 
+         some $e in ( ) satisfies
+         fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
+      },
+       "json":   map{ 
+           "base-uri": function($_ as element()) as element(base-uri)? {
+            (: xs:string :)
+                        fn:data($_/@base-uri)!element base-uri {  .} 
+                 },
+           "id": function($_ as element()) as element(id)? {
+            (: xs:string :)
+                        fn:data($_/@id)!element id {  .} 
+                 },
+           "interval": function($_ as element()) as element(interval)? {
+            (: xs:string :)
+                        fn:data($_/@interval)!element interval {  .} 
+                 },
+           "query": function($_ as element()) as element(query)? {
+            (: xs:string :)
+                        fn:data($_/.)!element query {  .} 
+                 },
+           "running": function($_ as element()) as element(running)? {
+            (: xs:boolean :)
+                        fn:data($_/jobs:list()=@id)!element running { attribute type {'boolean'}, .} 
+                 } },
+       
+      "data": function() as element(job)*
+       { jobs:services() },
+       
+       "views": map{ 
+       
        }
    },
   "task": map{
@@ -598,7 +715,8 @@ hof:top-k-by(admin:logs(), string#1, 2)
      "name": "xqdoc",
      "description": "XQuery documentation set ",
      "access": map{ 
-       "root": function($_ as element()) as xs:string {$_/@root },
+       "id": function($_ as element()) as xs:string {$_/@id },
+       "root": function($_ as element()) as xs:string {$_/"file:///C:/tmp/xqdoc/" },
        "time": function($_ as element()) as xs:string {$_/@time } },
     
      "filter": function($item,$q) as xs:boolean{ 
@@ -606,9 +724,13 @@ 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{ 
+           "id": function($_ as element()) as element(id)? {
+            (: xs:string :)
+                        fn:data($_/@id)!element id {  .} 
+                 },
            "root": function($_ as element()) as element(root)? {
             (: xs:string :)
-                        fn:data($_/@root)!element root {  .} 
+                        fn:data($_/"file:///C:/tmp/xqdoc/")!element root {  .} 
                  },
            "time": function($_ as element()) as element(time)? {
             (: xs:string :)

src/vue-poc/models/entities/basexjob.xml

@@ -0,0 +1,55 @@
+<entity name="basexjob" xmlns="https://github.com/Quodatum/app-doc/entity">
+	<description>A BaseX job</description>
+	<namespace prefix="xqdoc" uri="http://www.xqdoc.org/1.0" />
+  <fields>
+		<field name="id" type="xs:string">
+			<description>unique id</description>
+			<xpath>@id</xpath>
+		</field>
+		<field name="state" type="xs:string">
+			<description>state</description>
+			<xpath>@state</xpath>
+		</field>
+		  <field name="type" type="xs:string">
+      <description>type of job</description>
+      <xpath>@type</xpath>
+    </field>
+		<field name="user" type="xs:string">
+			<description>user</description>
+			<xpath>@user</xpath>
+		</field>
+		<field name="registered" type="xs:string">
+			<description>registered time</description>
+			<xpath>@time</xpath>
+		</field>
+		<field name="start" type="xs:string">
+			<description>start</description>
+			<xpath>@start</xpath>
+		</field>
+		<field name="duration" type="xs:string">
+      <description>start</description>
+      <xpath>@duration</xpath>
+    </field>
+      <field name="interval" type="xs:string">
+      <description>interval</description>
+      <xpath>@interval</xpath>
+    </field>
+    <field name="text" type="xs:string">
+      <description>text</description>
+      <xpath>.</xpath>
+    </field>
+     <field name="reads" type="xs:string">
+      <description>reads</description>
+      <xpath>@reads</xpath>
+    </field>
+     <field name="writes" type="xs:string">
+      <description>writes</description>
+      <xpath>@writes</xpath>
+    </field>
+	</fields>
+	<views iconclass="code">
+		<view name="filter">name description</view>
+	</views>
+	<data type="element(job)">jobs:list()[. != jobs:current()] !jobs:list-details(.)=>reverse()
+	</data>
+</entity>

src/vue-poc/models/entities/service.xml

@@ -0,0 +1,27 @@
+<entity name="service" xmlns="https://github.com/Quodatum/app-doc/entity">
+	<description>basex services </description>
+	<fields>
+		<field name="id" type="xs:string">
+			<description>job id</description>
+			<xpath>@id</xpath>
+		</field>
+		<field name="base-uri" type="xs:string">
+			<description>base-uri</description>
+			<xpath>@base-uri</xpath>
+		</field>
+		<field name="interval" type="xs:string">
+			<description>interval</description>
+			<xpath>@interval</xpath>
+		</field>
+		<field name="query" type="xs:string">
+			<description>task description</description>
+			<xpath>.</xpath>
+		</field>
+		<field name="running" type="xs:boolean">
+			<description>service is running</description>
+			<xpath>jobs:list()=@id</xpath>
+		</field>
+	</fields>
+	<views iconclass="shop" />
+	<data type="element(job)">jobs:services()</data>
+</entity>

src/vue-poc/models/entities/xqdoc.xml

@@ -2,13 +2,17 @@
 	<description>XQuery documentation set </description>
 
 	<fields>
+	<field name="id" type="xs:string">
+      <description>id for doc run e.g 56</description>
+      <xpath>@id</xpath>
+    </field>
 		<field name="time" type="xs:string">
 			<description>time of generation</description>
 			<xpath>@time</xpath>
 		</field>
 		<field name="root" type="xs:string">
 			<description>root folder to scan</description>
-			<xpath>@root</xpath>
+			<xpath>"file:///C:/tmp/xqdoc/"</xpath>
 		</field>
 	</fields>
 	<views iconclass="pages"/>

src/vue-poc/package.json

@@ -3,10 +3,8 @@
 	"version": "0.1.99",
 	"description": "A vue test",
 	"dependencies": {
-		"foo": "1.0.0 - 2.9999.9999",
+		"ace": "1.4.2",
-		"bar": ">=1.0.2 <2.1.2",
+		"vuetify": "1.4.2",
-		"ace": "1.3.3",
-		"vuetify": "0.15.2",
 		"vue": "2.5.17",
 		"vue-router": "2.5.3",
 		"vue-treeselect": "0.0.25",
@@ -15,6 +13,7 @@
 		"axios": "0.17.1",
 		"qs": "6.4.0",
 		"localforage": "1.7.1",
-		"moment.js": "2.18.1"
+		"momentjs": "2.18.1",
+		"vue-form-generator": "2.2.2"
 	}
 }

src/vue-poc/router.js

@@ -83,6 +83,7 @@ const router = new VueRouter({
       { path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
       { path: 'jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
       { path: 'ping', component: Ping,meta:{title:"Ping"} },
+      { path: 'dicetest', component: Dicetest,meta:{title:"Dice test"} },
       { path: 'upload', component: Upload,meta:{title:"Upload"} },
       { path: 'websocket', component: Websocket,meta:{title:"Web socket"} },
       { path: 'settings', component: Basexsettings,meta:{title:"BaseX settings"} }

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@1.3.14/dist/vuetify.min.css" type="text/css"/>
+	<link rel="stylesheet" href="//unpkg.com/vuetify@1.4.3/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" rel="stylesheet" type="text/css"/> 
 	<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
@@ -21,7 +21,7 @@
 
 <body>
 <div id="app">
-<h3><code>vue-poc</code> <small>(v0.3.150)</small> </h3>
+<h3><code>vue-poc</code> <small>(v0.3.151)</small> </h3>
 
 <div class="spinner">
   <div class="rect1"></div>
@@ -37,7 +37,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
-<script src="//unpkg.com/vuetify@1.3.14/dist/vuetify.min.js" crossorigin="anonymous"></script>
+<script src="//unpkg.com/vuetify@1.4.3/dist/vuetify.min.js" crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ext-language_tools.js"  crossorigin="anonymous"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ext-linking.js" crossorigin="anonymous" charset="utf-8"></script>