vuetify 1.0.11

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

@@ -4,7 +4,7 @@
  -->
 <template id="vp-notifications">
    <v-card>
-         <v-toolbar class="amber white--text">
+         <v-toolbar class="amber white--text" scroll-toolbar-off-screen>
                 <v-toolbar-title >Notifications </v-toolbar-title>
                 {{ $notification.nextId }}
                  <v-btn  @click="refresh" icon><v-icon>refresh</v-icon></v-btn>

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

@@ -150,7 +150,7 @@
       });
       localforage.setItem('eval/xq', this.xq)
     },
-    // 
+    // request run
     submit(){
       this.showError=this.showResult=this.showJob=false
       this.start = performance.now();
@@ -165,6 +165,7 @@
       });
       
     },
+    // 
     pollState(){
       if(this.destroyed)return;
       this.waiting=true;

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

@@ -61,20 +61,19 @@
               v-for="image in images"
               :key="image.name"
             >
-              <v-card  flat tile class="grey lighten-2 pa-1" >
+              <v-card  flat tile  >
-                <v-card-media :src="src(image)"  @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected "
+                <v-card-media :src="src(image)" v-bind:class="{ selcard: image.selected}" 
+                @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected "
                 height="100px" contain>
                  <span v-if="image.keywords >0 ">#{{image.keywords}}</span>
                  <v-avatar icon small v-if="image.geo">
                   <v-icon>place</v-icon>
                 </v-avatar>
-                
-               
                 </v-card-media>
                 
-            <div v-if="image.selected" style="position:absolute;right:0;top:0" >
+                <div v-if="image.selected" style="position:absolute;right:0;top:0" >
                  <v-icon class="white primary--text">check_circle</v-icon>
-                 </div
+                 </div>
               </v-card>
             </v-flex>
           </v-layout>
@@ -280,7 +279,7 @@
       this.$router.push({ name: 'image', params: { id: image.id }})
     },
     pageBack(){
-      this.query.page=Math.min(0,this.query.page-1)
+      this.query.page=Math.max(0,this.query.page-1)
     },
     pageNext(){
       this.query.page+=1

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

@@ -4,6 +4,9 @@
 	<v-toolbar >
 	 <v-toolbar-title>Entities</v-toolbar-title>
 	 <v-spacer></v-spacer>
+	 <v-text-field  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-btn @click="getItems"
 	  :loading="loading"
       :disabled="loading"
@@ -18,7 +21,7 @@
       row
       wrap
       :loading="loading"
-      :items="items"
+      :items="filtered"
       :rows-per-page-items="rowsPerPageItems"
       :pagination.sync="pagination"
       select-all 
@@ -60,7 +63,7 @@
 <script>{
   data:  function(){
     return {
-      q: 'filter',
+      q: '',
       items: [],
       loading: false,
       rowsPerPageItems: [4, 8, 20],
@@ -80,8 +83,18 @@
         //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
         this.items=r.data.items
         }) 
+    },
+    setfilter(){
+      console.log("TODO",this.q);
+      this.$router.push({ query: {url: this.url,
+                                   q: this.q }})
     }
   },
+  computed: {
+		  filtered(){
+		    return this.items.filter(item=>{return ((!this.q) || item.name.includes(this.q))})
+		  }
+  },
   created:function(){
     this.getItems()
   },

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

@@ -33,7 +33,7 @@
         
           <v-toolbar  color="amber">
               <v-card-title >
-               <router-link :to="{path:'entity/'+ props.item.name}">
+               <router-link :to="{path:'namespace/'+ props.item.name}">
                 <h3>
                 <v-icon>star</v-icon> {{ props.item.xmlns }}
                 </h3>

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

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<template id="namespace1">
+<v-card>
+	<v-toolbar >
+	 <v-toolbar-title> Namespace: {{ namespace }}</v-toolbar-title>
+	 <v-spacer></v-spacer>
+	 <v-btn @click="getItem"
+	  :loading="loading"
+      :disabled="loading"
+	 >Refresh</v-btn>
+	 </v-toolbar>
+
+  <v-container fluid grid-list-md>
+  
+  
+      hello
+  </v-container>
+   </v-card>
+</template>
+
+<script>{
+  props: ['namespace'],
+  data:  function(){
+    return {
+      q: 'filter',
+      item: {},
+      loading: false
+      }
+  },
+  methods:{
+    getItem(){
+      this.loading=true
+      HTTP.get("data/namespace",{params:this.q})
+      .then(r=>{
+        this.loading=false
+        //console.log(r.data)
+        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
+        this.item=r.data.items
+        }) 
+    }
+  },
+  created:function(){
+    this.getItem()
+  },
+}
+</script>

src/vue-poc/features/tree.vue

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<template id="tree">
+ <v-container fluid>
+ TREE
+<div id="canvasqPWKOg" class="canvas"></div>
+<button id="resetButtonqPWKOg">Reset</button>
+<div>
+    <svg width="500" height="300"></svg>
+    <br>
+    <input
+      type="range"
+      v-model="circleSize"
+      min="1"
+      max="100"
+      step="1"
+    >
+</div>
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      message: 'bad route!',
+      circleSize: 50
+      }
+  },
+  created:function(){
+    console.log("notfound",this.$route.query.q)
+  },
+  mounted: function(createElement) {
+    var svg = d3.select(this.$el).select('svg');
+    this.circle = svg
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', this.circleSize)
+  },
+  watch: {
+    circleSize: function(newValue) {
+      this.circle
+        .attr('r', newValue)
+    }
+  }
+
+}
+</script>

src/vue-poc/models.gen.xqm

@@ -1,5 +1,5 @@
 (: entity access maps 
- : auto generated from xml files in entities folder at: 2018-03-12T22:33:57.01Z 
+ : auto generated from xml files in entities folder at: 2018-03-25T22:09:48.189+01:00 
  :)
 
 module namespace entity = 'quodatum.models.generated';
@@ -227,6 +227,7 @@ declare variable $entity:list:=map {
      "access": map{ 
        "created": function($_ as element()) as xs:string {$_/json/dateTime },
        "id": function($_ as element()) as xs:string {$_/@id },
+       "job": function($_ as element()) as xs:string {$_/json/job },
        "query": function($_ as element()) as xs:string {$_/query },
        "result": function($_ as element()) as xs:string {$_/substring(result,0,1000) },
        "resultlength": function($_ as element()) as xs:integer {$_/string-length(result) } },
@@ -244,6 +245,10 @@ declare variable $entity:list:=map {
             (: xs:string :)
                         fn:data($_/@id)!element id {  .} 
                  },
+           "job": function($_ as element()) as element(job)? {
+            (: xs:string :)
+                        fn:data($_/json/job)!element job {  .} 
+                 },
            "query": function($_ as element()) as element(query)? {
             (: xs:string :)
                         fn:data($_/query)!element query {  .} 

src/vue-poc/models/jobrun.xml

@@ -1,6 +1,6 @@
 <entity name="jobrun" xmlns="https://github.com/Quodatum/app-doc/entity">
 	<description>About the running of a job</description>
-	<namespace prefix="xqdoc" uri="http://www.xqdoc.org/1.0"/>
+	<namespace prefix="xqdoc" uri="http://www.xqdoc.org/1.0" />
 
 	<fields>
 		<field name="id" type="xs:string">
@@ -11,22 +11,26 @@
 			<description>date</description>
 			<xpath>json/dateTime</xpath>
 		</field>
+		  <field name="job" type="xs:string">
+      <description>eval job id</description>
+      <xpath>json/job</xpath>
+    </field>
 		<field name="query" type="xs:string">
-            <description>query</description>
+			<description>query</description>
-            <xpath>query</xpath>
+			<xpath>query</xpath>
-        </field>
+		</field>
-        <field name="result" type="xs:string">
+		<field name="result" type="xs:string">
-            <description>result</description>
+			<description>result</description>
-            <xpath>substring(result,0,1000)</xpath>
+			<xpath>substring(result,0,1000)</xpath>
-        </field>
+		</field>
-         <field name="resultlength" type="xs:integer">
+		<field name="resultlength" type="xs:integer">
-            <description>result</description>
+			<description>result</description>
-            <xpath>string-length(result)</xpath>
+			<xpath>string-length(result)</xpath>
-        </field>
+		</field>
 	</fields>
-	   <views>
+	<views>
-        <view name="filter">name description</view>
+		<view name="filter">name description</view>
-    </views>
+	</views>
 	<iconclass>fa fa-file-code-o</iconclass>
 	<data type="element(jobrun)">collection("vue-poc/jobrun")/jobrun
 	</data>

src/vue-poc/router.js

@@ -66,6 +66,7 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/tree', component: Tree,meta:{title:"tree"} },
     { path: '/map', component: Map,meta:{title:"map"} },
     { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
     { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },

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

@@ -1,4 +1,4 @@
-// generated 2018-03-22T22:55:38.143Z
+// generated 2018-03-28T21:33:37.464+01:00
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
 Vue.component('qd-confirm',{template:` 
@@ -394,7 +394,7 @@ Vue.component('vp-job',{template:`
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-notifications.vue
 Vue.component('vp-notifications',{template:` 
    <v-card>
-         <v-toolbar class="amber white--text">
+         <v-toolbar class="amber white--text" scroll-toolbar-off-screen="">
                 <v-toolbar-title>Notifications </v-toolbar-title>
                 {{ $notification.nextId }}
                  <v-btn @click="refresh" icon=""><v-icon>refresh</v-icon></v-btn>
@@ -1786,7 +1786,7 @@ const Eval=Vue.extend({template:`
       });
       localforage.setItem('eval/xq', this.xq)
     },
-    // 
+    // request run
     submit(){
       this.showError=this.showResult=this.showJob=false
       this.start = performance.now();
@@ -1801,6 +1801,7 @@ const Eval=Vue.extend({template:`
       });
       
     },
+    // 
     pollState(){
       if(this.destroyed)return;
       this.waiting=true;
@@ -2340,20 +2341,19 @@ const Images=Vue.extend({template:`
         <v-container v-if="!busy" fluid="" grid-list-md="">
           <v-layout row="" wrap="" v-touch="{ left: () => pageNext(), right: () => pageBack()}">
             <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
-              <v-card flat="" tile="" class="grey lighten-2 pa-1">
+              <v-card flat="" tile="">
-                <v-card-media :src="src(image)" @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected " height="100px" contain="">
+                <v-card-media :src="src(image)" v-bind:class="{ selcard: image.selected}" @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected " height="100px" contain="">
                  <span v-if="image.keywords >0 ">#{{image.keywords}}</span>
                  <v-avatar icon="" small="" v-if="image.geo">
                   <v-icon>place</v-icon>
                 </v-avatar>
-                
-               
                 </v-card-media>
                 
-            <div v-if="image.selected" style="position:absolute;right:0;top:0">
+                <div v-if="image.selected" style="position:absolute;right:0;top:0">
                  <v-icon class="white primary--text">check_circle</v-icon>
                  </div>
-            </v-card></v-flex>
+              </v-card>
+            </v-flex>
           </v-layout>
         </v-container>
 
@@ -2521,7 +2521,7 @@ const Images=Vue.extend({template:`
       this.$router.push({ name: 'image', params: { id: image.id }})
     },
     pageBack(){
-      this.query.page=Math.min(0,this.query.page-1)
+      this.query.page=Math.max(0,this.query.page-1)
     },
     pageNext(){
       this.query.page+=1
@@ -3019,13 +3019,14 @@ const Entity=Vue.extend({template:`
 	<v-toolbar>
 	 <v-toolbar-title>Entities</v-toolbar-title>
 	 <v-spacer></v-spacer>
+	 <v-text-field 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-btn @click="getItems" :loading="loading" :disabled="loading">Refresh</v-btn>
 	 Text
 	 </v-toolbar>
 
   <v-container fluid="" grid-list-md="">
   
-    <v-data-iterator content-tag="v-layout" row="" wrap="" :loading="loading" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
+    <v-data-iterator content-tag="v-layout" row="" wrap="" :loading="loading" :items="filtered" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
       <v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3="">
         <v-card :hover="true" active-class="default-class qd-active">
         
@@ -3054,7 +3055,7 @@ const Entity=Vue.extend({template:`
       
   data:  function(){
     return {
-      q: 'filter',
+      q: '',
       items: [],
       loading: false,
       rowsPerPageItems: [4, 8, 20],
@@ -3074,8 +3075,18 @@ const Entity=Vue.extend({template:`
         //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
         this.items=r.data.items
         }) 
+    },
+    setfilter(){
+      console.log("TODO",this.q);
+      this.$router.push({ query: {url: this.url,
+                                   q: this.q }})
     }
   },
+  computed: {
+		  filtered(){
+		    return this.items.filter(item=>{return ((!this.q) || item.name.includes(this.q))})
+		  }
+  },
   created:function(){
     this.getItems()
   },
@@ -3127,7 +3138,7 @@ const Entity1=Vue.extend({template:`
 
       );
       
-// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/namespace.vue
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/namespace.vue
 const Namespace=Vue.extend({template:` 
  <v-container fluid="" grid-list-md="">
 <v-toolbar>
@@ -3142,7 +3153,7 @@ const Namespace=Vue.extend({template:`
         
           <v-toolbar color="amber">
               <v-card-title>
-               <router-link :to="{path:'entity/'+ props.item.name}">
+               <router-link :to="{path:'namespace/'+ props.item.name}">
                 <h3>
                 <v-icon>star</v-icon> {{ props.item.xmlns }}
                 </h3>
@@ -3202,6 +3213,50 @@ const Namespace=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/namespace1.vue
+const Namespace1=Vue.extend({template:` 
+<v-card>
+	<v-toolbar>
+	 <v-toolbar-title> Namespace: {{ namespace }}</v-toolbar-title>
+	 <v-spacer></v-spacer>
+	 <v-btn @click="getItem" :loading="loading" :disabled="loading">Refresh</v-btn>
+	 </v-toolbar>
+
+  <v-container fluid="" grid-list-md="">
+  
+  
+      hello
+  </v-container>
+   </v-card>
+ `,
+      
+  props: ['namespace'],
+  data:  function(){
+    return {
+      q: 'filter',
+      item: {},
+      loading: false
+      }
+  },
+  methods:{
+    getItem(){
+      this.loading=true
+      HTTP.get("data/namespace",{params:this.q})
+      .then(r=>{
+        this.loading=false
+        //console.log(r.data)
+        //var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
+        this.item=r.data.items
+        }) 
+    }
+  },
+  created:function(){
+    this.getItem()
+  },
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/ping/ping.vue
 const Ping=Vue.extend({template:` 
  <v-container fluid="">
@@ -4428,6 +4483,48 @@ created(){
 }
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tree.vue
+const Tree=Vue.extend({template:` 
+ <v-container fluid="">
+ TREE
+<div id="canvasqPWKOg" class="canvas"></div>
+<button id="resetButtonqPWKOg">Reset</button>
+<div>
+    <svg width="500" height="300"></svg>
+    <br>
+    <input type="range" v-model="circleSize" min="1" max="100" step="1">
+</div>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      message: 'bad route!',
+      circleSize: 50
+      }
+  },
+  created:function(){
+    console.log("notfound",this.$route.query.q)
+  },
+  mounted: function(createElement) {
+    var svg = d3.select(this.$el).select('svg');
+    this.circle = svg
+      .append('circle')
+      .attr('cx', '250')
+      .attr('cy', '150')
+      .attr('r', this.circleSize)
+  },
+  watch: {
+    circleSize: function(newValue) {
+      this.circle
+        .attr('r', newValue)
+    }
+  }
+
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/users/users.vue
 const Users=Vue.extend({template:` 
  <v-container fluid="">
@@ -4801,6 +4898,7 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
+    { path: '/tree', component: Tree,meta:{title:"tree"} },
     { path: '/map', component: Map,meta:{title:"map"} },
     { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
     { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },

src/vue-poc/static/app.css

@@ -127,6 +127,10 @@ height: 100%;
 .qd-active {
 	  background-color: green;
 }
+.selcard {
+	 background-color: green;
+	 border: thick double #32a1ce;
+}
 .canvas {
   overflow: hidden;
 }

src/vue-poc/static/app.html

@@ -10,7 +10,7 @@
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"/>
 <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"/>
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
-<link href="//unpkg.com/vuetify@1.0.10/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
+<link href="//unpkg.com/vuetify@1.0.11/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
 
 <link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.css"/>
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
@@ -33,11 +33,11 @@
 </div>
 </div>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="//unpkg.com/vuetify@1.0.10/dist/vuetify.min.js"></script>
+<script src="//unpkg.com/vuetify@1.0.11/dist/vuetify.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script>
 <script src="//d3js.org/d3.v4.min.js"></script>

src/vue-poc/static/serviceworker.js

@@ -5,7 +5,7 @@ console.log('WORKER: executing.');
 /* A version number is useful when updating the worker logic,
    allowing you to remove outdated cache entries during the update.
 */
-var version = 'v1:1:';
+var version = 'v1:2:';
 
 /* These resources will be downloaded and cached by the service worker
    during the installation process. If any resource fails to be downloaded,