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

image progress

Browse source
This commit is contained in:
Andy Bunce 2017-08-18 00:00:27 +01:00
parent 4bc20b5439
commit 67fb9239a5
6 changed files with 89 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/vue-poc/components/core.js
View file

@ -71,14 +71,16 @@ const router = new VueRouter({
routes: [ routes: [
{ path: '/', component: Home,meta:{title:"Home"} }, { path: '/', component: Home,meta:{title:"Home"} },
{ path: '/session', component: Session ,meta:{title:"Session"}}, { path: '/session', component: Session ,meta:{title:"Session"}},
{ path: '/images', component: Images,meta:{title:"Images"} }, { path: '/images/item', component: Images, meta:{title:"Images"} },
{ path: '/images/:id', name:"image",component: Image, props: true,meta:{title:"Image details"}}, { path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}},
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}},
{ path: '/search', component: Search,meta:{title:"Search"} }, { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
{ path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
{ path: '/ping', component: Ping,meta:{title:"Ping"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} },
@ -161,8 +163,9 @@ const app = new Vue({
text: 'Images' , text: 'Images' ,
model: false, model: false,
children: [ children: [
{href: '/images',text: 'Collection',icon: 'photo_camera'}, {href: '/images/item',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'} {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
{href: '/images/report',text: 'Image reports',icon: 'report'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',

4
src/vue-poc/features/images/image.vue
View file

@ -9,9 +9,11 @@
<v-toolbar class="orange darken-1"> <v-toolbar class="orange darken-1">
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn> <v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title > <v-card-title >
<span class="white--text">Image: {{ id }}</span> <v-chip > {{ image.name }}</v-chip>
</v-card-title> </v-card-title>
<span > {{ image.path }}</span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<span class="white--text">Image: {{ id }}</span>
<a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a> <a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>

10
src/vue-poc/features/images/images.vue
View file

@ -17,7 +17,7 @@
<v-chip class="primary white--text">{{ total }}</v-chip> <v-chip class="primary white--text">{{ total }}</v-chip>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
Page:{{ query.page+1 }} Page:{{ query.page+1 }}
<v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary> <v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary>
<v-icon>arrow_back</v-icon> <v-icon>arrow_back</v-icon>
@ -26,8 +26,8 @@
<v-icon>arrow_forward</v-icon> <v-icon>arrow_forward</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-container fluid grid-list-md> <v-container v-if="!busy" fluid grid-list-md>
<v-layout row wrap> <v-layout row wrap>
<v-flex height="80px" <v-flex height="80px"
xs2 xs2
@ -183,8 +183,8 @@
this.busy=false this.busy=false
this.total=r.data.total this.total=r.data.total
this.images=r.data.items this.images=r.data.items
var t0 = performance.now()-t0; var t1 = performance.now();
console.log("Time: ",t0) console.log("Time: ",t1 - t0)
}) })
}, },
clear(){ clear(){

1
src/vue-poc/features/images/images.xqm
View file

@ -29,6 +29,7 @@ function vue-api:id( $id as xs:integer)
: do a thumbnail : do a thumbnail
:) :)
declare declare
%rest:single
%rest:GET %rest:path("/vue-poc/api/images/list") %rest:GET %rest:path("/vue-poc/api/images/list")
%rest:produces("application/json") %rest:produces("application/json")
%rest:query-param("page", "{$page}",0) %rest:query-param("page", "{$page}",0)

28
src/vue-poc/features/images/ireport.vue Normal file
View file

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

56
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2017-08-17T16:08:17.382+01:00 // generated 2017-08-17T23:58:25.476+01:00
Vue.component('qd-link',{template:` Vue.component('qd-link',{template:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a> <a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`, `,
@ -903,9 +903,11 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-toolbar class="orange darken-1"> <v-toolbar class="orange darken-1">
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn> <v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title> <v-card-title>
<span class="white--text">Image: {{ id }}</span> <v-chip> {{ image.name }}</v-chip>
</v-card-title> </v-card-title>
<span> {{ image.path }}</span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<span class="white--text">Image: {{ id }}</span>
<a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a> <a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
@ -957,7 +959,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-chip class="primary white--text">{{ total }}</v-chip> <v-chip class="primary white--text">{{ total }}</v-chip>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
Page:{{ query.page+1 }} Page:{{ query.page+1 }}
<v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary=""> <v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary="">
<v-icon>arrow_back</v-icon> <v-icon>arrow_back</v-icon>
@ -966,8 +968,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-icon>arrow_forward</v-icon> <v-icon>arrow_forward</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-container fluid="" grid-list-md=""> <v-container v-if="!busy" fluid="" grid-list-md="">
<v-layout row="" wrap=""> <v-layout row="" wrap="">
<v-flex height="80px" xs2="" v-for="image in images" :key="image.name"> <v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
<v-card class="grey lighten-2 pt-1"> <v-card class="grey lighten-2 pt-1">
@ -1082,8 +1084,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
this.busy=false this.busy=false
this.total=r.data.total this.total=r.data.total
this.images=r.data.items this.images=r.data.items
var t0 = performance.now()-t0; var t1 = performance.now();
console.log("Time: ",t0) console.log("Time: ",t1 - t0)
}) })
}, },
clear(){ clear(){
@ -1144,6 +1146,29 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
console.log("images mount") console.log("images mount")
} }
}
);
const Report=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-toolbar class="orange darken-1">
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title>
<v-chip>todo</v-chip>
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
body
</v-card-text>
</v-card>
</v-container>
`,
} }
); );
@ -2219,14 +2244,16 @@ const router = new VueRouter({
routes: [ routes: [
{ path: '/', component: Home,meta:{title:"Home"} }, { path: '/', component: Home,meta:{title:"Home"} },
{ path: '/session', component: Session ,meta:{title:"Session"}}, { path: '/session', component: Session ,meta:{title:"Session"}},
{ path: '/images', component: Images,meta:{title:"Images"} }, { path: '/images/item', component: Images, meta:{title:"Images"} },
{ path: '/images/:id', name:"image",component: Image, props: true,meta:{title:"Image details"}}, { path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}},
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}},
{ path: '/search', component: Search,meta:{title:"Search"} }, { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
{ path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
{ path: '/ping', component: Ping,meta:{title:"Ping"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} },
@ -2309,8 +2336,9 @@ const app = new Vue({
text: 'Images' , text: 'Images' ,
model: false, model: false,
children: [ children: [
{href: '/images',text: 'Collection',icon: 'photo_camera'}, {href: '/images/item',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'} {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
{href: '/images/report',text: 'Image reports',icon: 'report'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',