apb
/
vue-poc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

vuetify 1.0.11

This commit is contained in:
Andy Bunce 2018-03-30 14:49:53 +01:00
parent cc6d3e6ed3
commit e8f05314ba
14 changed files with 264 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/vue-poc/components/vp-notifications.vue
View File

@ -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>

3
src/vue-poc/features/eval/eval.vue
View File

@ -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;

13
src/vue-poc/features/images/images.vue
View File

@ -61,20 +61,19 @@
v-for="image in images"
:key="image.name"
>
<v-card flat tile class="grey lighten-2 pa-1" >
<v-card-media :src="src(image)" @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected "
<v-card flat tile >
<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

17
src/vue-poc/features/model/entity.vue
View File

@ -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()
},

2
src/vue-poc/features/namespace.vue → src/vue-poc/features/model/namespace.vue
View File

@ -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>

46
src/vue-poc/features/model/namespace1.vue Normal file
View File

@ -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>

47
src/vue-poc/features/tree.vue Normal file
View File

@ -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>

7
src/vue-poc/models.gen.xqm
View File

@ -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 { .}

34
src/vue-poc/models/jobrun.xml
View File

@ -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>
<xpath>query</xpath>
</field>
<field name="result" type="xs:string">
<description>result</description>
<xpath>substring(result,0,1000)</xpath>
</field>
<field name="resultlength" type="xs:integer">
<description>result</description>
<xpath>string-length(result)</xpath>
</field>
<description>query</description>
<xpath>query</xpath>
</field>
<field name="result" type="xs:string">
<description>result</description>
<xpath>substring(result,0,1000)</xpath>
</field>
<field name="resultlength" type="xs:integer">
<description>result</description>
<xpath>string-length(result)</xpath>
</field>
</fields>
<views>
<view name="filter">name description</view>
</views>
<views>
<view name="filter">name description</view>
</views>
<iconclass>fa fa-file-code-o</iconclass>
<data type="element(jobrun)">collection("vue-poc/jobrun")/jobrun
</data>

1
src/vue-poc/router.js
View File

@ -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"} },

126
src/vue-poc/static/app-gen.js
View File

@ -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-media :src="src(image)" @dblclick="go(image)" @click.prevent.stop="image.selected =! image.selected " height="100px" contain="">
<v-card flat="" tile="">
<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"} },

4
src/vue-poc/static/app.css
View File

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

6
src/vue-poc/static/app.html
View File

@ -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>

2
src/vue-poc/static/serviceworker.js
View File

@ -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,