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

image collection

Browse source
This commit is contained in:
Andy Bunce 2017-08-13 12:12:48 +01:00
parent d967271006
commit 25848c5cd3
21 changed files with 325 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -93,6 +93,7 @@ const router = new VueRouter({
{ path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} }, { path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} },
{ path: '/jobs', component: Job,meta:{title:"Jobs"} }, { path: '/jobs', component: Job,meta:{title:"Jobs"} },
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} }, { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} } { path: '*', component: Notfound,meta:{title:"Page not found"} }
], ],
}); });
@ -135,7 +136,7 @@ const app = new Vue({
children: [ children: [
{href: '/database', text: 'Databases',icon: 'account_balance' }, {href: '/database', text: 'Databases',icon: 'account_balance' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/edit',text: 'edit',icon: 'mode_edit'}, {href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/history',text: 'history',icon: 'history'} {href: '/history',text: 'history',icon: 'history'}
]}, ]},
{ {
@ -153,7 +154,7 @@ const app = new Vue({
children: [ children: [
{href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
{href: '/logs',text: 'Server logs',icon: 'dns'}, {href: '/logs',text: 'Server logs',icon: 'dns'},
{href: '/ping',text: 'ping',icon: 'update'} {href: '/ping',text: 'Ping',icon: 'update'}
]}, ]},
{ {
icon: 'camera_roll', icon: 'camera_roll',
@ -161,7 +162,7 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/images',text: 'Collection',icon: 'photo_camera'}, {href: '/images',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'} {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',
@ -169,12 +170,14 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/session',text: 'Session',icon: 'person'}, {href: '/session',text: 'Session',icon: 'person'},
{href: '/select',text: 'select',icon: 'extension'}, {href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'}, {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/tabs',text: 'tabs',icon: 'switch_camera'}, {href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
{href: '/timeline',text: 'time line',icon: 'timelapse'} {href: '/timeline',text: 'Time line',icon: 'timelapse'}
]}, ]},
{href: '/settings',text: 'settings',icon: 'settings' }
{href: '/settings',text: 'Settings',icon: 'settings' },
{href: '/about',text: 'About', icon: 'help' },
] ]
}}, }},

2
src/vue-poc/expath-pkg.xml
View file

@ -2,7 +2,7 @@
abbrev="vue-poc" version="0.0.4" spec="1.0"> abbrev="vue-poc" version="0.0.4" spec="1.0">
<title>vue-poc test of vue.js.</title> <title>vue-poc test of vue.js.</title>
<dependency name="ace" version="1.2.7" /> <dependency name="ace" version="1.2.7" />
<dependency name="vuetify" version="0.14.7" /> <dependency name="vuetify" version="0.14.8" />
<dependency name="vue" version="2.4.1" /> <dependency name="vue" version="2.4.1" />
<dependency name="vue-router" version="2.5.3" /> <dependency name="vue-router" version="2.5.3" />
<dependency name="google-material" version="0.0.0" /> <dependency name="google-material" version="0.0.0" />

2
src/vue-poc/features/about.vue
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="about"> <v-layout class="ma-5"> <v-flex <template id="about"> <v-layout class="ma-5"> <v-flex
xs4> <v-card hover raised> <v-card-title xs4> <v-card hover raised> <v-card-title
height="200px" class="pa-5 green lighten-1"> height="200px" class="pa-5 indigo accent-3">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4> v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
<p> <p>

2
src/vue-poc/features/adminlog/logs.vue
View file

@ -2,7 +2,7 @@
<template id="log"> <template id="log">
<v-container fluid> <v-container fluid>
<v-card > <v-card >
<v-toolbar class="green white--text"> <v-toolbar light>
<v-btn <v-btn
light icon light icon
:loading="loading" :loading="loading"

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

@ -85,10 +85,9 @@
}, },
run(){ run(){
var data={xq:this.xq}
this.showError=this.show=false this.showError=this.show=false
this.start = performance.now(); this.start = performance.now();
HTTP.post("eval/execute",Qs.stringify(data)) HTTP.post("eval/execute",Qs.stringify({xq:this.xq}))
.then(r=>{ .then(r=>{
this.elapsed=Math.floor(performance.now() - this.start); this.elapsed=Math.floor(performance.now() - this.start);
this.result=r.data.result this.result=r.data.result

2
src/vue-poc/features/home.vue
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="home"> <v-layout class="ma-5"> <v-flex <template id="home"> <v-layout class="ma-5"> <v-flex
xs4> <v-card hover raised> <v-card-title xs4> <v-card hover raised> <v-card-title
height="200px" class="pa-5 green lighten-1"> height="200px" class="pa-5 indigo">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4> v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
<p> <p>

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

@ -5,11 +5,23 @@
--> -->
<template id="image"> <template id="image">
<v-container fluid> <v-container fluid>
Image: {{id}} Image: {{ id }}
doc <pre>{{ image && image.doc }}</pre>
</v-container> </v-container>
</template> </template>
<script>{ <script>{
props:["id"] props:["id"],
data: ()=>( {
image:null
}),
created:function(){
var id=this._props.id
HTTP.get("images/list/"+id)
.then(r=>{
console.log(r.data)
this.image=r.data
})
}
} }
</script> </script>

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

@ -6,7 +6,31 @@
<template id="images"> <template id="images">
<v-card> <v-card>
<v-card-actions> <v-toolbar light>
<v-menu
:close-on-content-click="false"
v-model="showFilter"
transition="scale-transition"
offset-y
full-width
>
<v-text-field
slot="activator"
name="input-1-3" style="width:30em;"
label="Filter images"
single-line
prepend-icon="search"
readonly
:value="qtext" ></v-text-field>
<v-card>
<v-card-title>
Set filter...
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
</v-card-title>
<v-card-text>
<v-select <v-select
v-bind:items="keywords" v-bind:items="keywords"
@ -14,11 +38,15 @@
label="Keyword" label="Keyword"
autocomplete autocomplete
></v-select> ></v-select>
<v-dialog <v-menu
persistent
v-model="modal"
lazy lazy
:close-on-content-click="false"
v-model="menu2"
transition="scale-transition"
offset-y
full-width full-width
:nudge-left="40"
max-width="290px"
> >
<v-text-field <v-text-field
slot="activator" slot="activator"
@ -27,21 +55,41 @@
prepend-icon="event" prepend-icon="event"
readonly readonly
></v-text-field> ></v-text-field>
<v-date-picker v-model="query.from" scrollable actions> <v-date-picker v-model="query.from" scrollable actions>
<template scope="{ save, cancel }"> <template scope="{ save, cancel }">
<v-card-actions> <v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn> <v-btn flat primary @click="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn> <v-btn flat primary @click="save()">Save</v-btn>
</v-card-actions> </v-card-actions>
</template> </template>
</v-date-picker> </v-date-picker>
</v-dialog> </v-menu>
<v-btn @click.native="clear()">Clear</v-btn> </v-card-text>
<v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click.native="query.page+=1">next</v-btn>
{{query.page}} <v-btn @click="showFilter = false" primary>Apply</v-btn>
<v-btn @click.native="query.page-=1">back</v-btn>
</v-card-actions> </v-card-actions>
</v-card>
</v-menu>
<v-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
:disabled="!(query.keyword || query.from)">
<v-icon>clear</v-icon>
</v-btn>
<v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
<v-spacer></v-spacer>
Page:{{ query.page+1 }}
<v-btn @click="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary>
<v-icon>arrow_back</v-icon>
</v-btn>
<v-btn @click="query.page+=1" icon primary>
<v-icon>arrow_forward</v-icon>
</v-btn>
</v-toolbar>
<v-container fluid grid-list-md> <v-container fluid grid-list-md>
<v-layout row wrap> <v-layout row wrap>
<v-flex height="80px" <v-flex height="80px"
@ -74,7 +122,7 @@
<v-toolbar class="green white--text"> <v-toolbar class="green white--text">
<v-toolbar-title >{{selitem.name}}</v-toolbar-title> <v-toolbar-title >{{selitem.name}}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar> </v-toolbar>
<v-card-text> blah blah </v-card-text> <v-card-text> blah blah </v-card-text>
</v-card> </v-card>
@ -91,7 +139,9 @@
keyword:null keyword:null
}, },
modal:false, // showing datepicker modal:false, // showing datepicker
showFilter:false,
busy:false,
menu2:false,
keywords:[], keywords:[],
showInfo:false, showInfo:false,
selitem:"TODO" selitem:"TODO"
@ -101,14 +151,17 @@
return "data:image/jpeg;base64,"+item.data return "data:image/jpeg;base64,"+item.data
}, },
getImages(){ getImages(){
this.busy=true
HTTP.get("images/list",{params:this.query}) HTTP.get("images/list",{params:this.query})
.then(r=>{ .then(r=>{
this.busy=false
this.images=r.data.items this.images=r.data.items
}) })
}, },
clear(){ clear(){
this.query.from=null; this.query.from=null;
this.query.keyword=null; this.query.keyword=null;
this.query.page=0;
}, },
selected(image){ selected(image){
this.selitem=image; this.selitem=image;
@ -119,6 +172,12 @@
} }
}, },
computed:{
qtext(){
var k=this.query.keyword,f=this.query.from
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")
}
},
watch:{ watch:{
"query":{ "query":{
handler:function(v){ handler:function(v){

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

@ -8,8 +8,29 @@ import module namespace fw="quodatum:file.walker";
import module namespace entity = 'quodatum.models.generated' at "../../models.gen.xqm"; import module namespace entity = 'quodatum.models.generated' at "../../models.gen.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $vue-api:PICS:="c:\tmp\"; declare variable $vue-api:IMAGEDIR:="P:/pictures/";
declare variable $vue-api:THUMBDIR:="C:/tmp/";
(:
declare variable $vue-api:IMAGEDIR:="/mnt/sda1/pictures/";
declare variable $vue-api:THUMBDIR:="/mnt/sda1/pictures/thumbs/";
:)
declare variable $vue-api:entity:=$entity:list("thumbnail");
(:~
: do a thumbnail
:)
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)
{
let $image:=db:open-id("vue-poc",$id)
return <json type="object" >
<doc>{ serialize($image) }</doc>
{ vue-api:get-image($image) }
</json>
};
(:~ (:~
: do a thumbnail : do a thumbnail
:) :)
@ -27,8 +48,7 @@ $keyword
{ {
let $a:=trace(($from,$keyword),"----------") let $a:=trace(($from,$keyword),"----------")
let $rowsPerPage:=24 let $rowsPerPage:=24
let $entity:=$entity:list("thumbnail") let $images:=$vue-api:entity("data")()
let $images:=$entity("data")()
let $images:=if($from)then $images[datetaken ge $from] else $images let $images:=if($from)then $images[datetaken ge $from] else $images
let $images:=if($keyword)then $images[keywords/keyword = $keyword] else $images let $images:=if($keyword)then $images[keywords/keyword = $keyword] else $images
let $images:=subsequence($images,1+$rowsPerPage*$page,$rowsPerPage) let $images:=subsequence($images,1+$rowsPerPage*$page,$rowsPerPage)
@ -37,7 +57,7 @@ $keyword
<items type="array">{ <items type="array">{
for $f in $images for $f in $images
return <_ type="object"> return <_ type="object">
{vue-api:get-image($f,$entity)} {vue-api:get-image($f)}
</_> </_>
}</items> }</items>
</json> </json>
@ -63,14 +83,15 @@ return <json type="object" >
</json> </json>
}; };
declare function vue-api:get-image($image as element(image),$entity) (:~ fields for image for json :)
declare function vue-api:get-image($image as element(image))
as element(*)* as element(*)*
{ {
let $id:=$entity?access?id($image) let $id:=$vue-api:entity?access?id($image)
let $path:=$entity?access?path($image) let $path:=$vue-api:entity?access?path($image)
let $name:=$entity?access?name($image) let $name:=$vue-api:entity?access?name($image)
let $thumb:= $vue-api:PICS || $path let $thumb:= $vue-api:THUMBDIR || $path
let $thumb:=if(file:exists($thumb)) then $thumb else "C:\tmp\art.jpg" let $thumb:=if(file:exists($thumb)) then $thumb else $vue-api:THUMBDIR || "missing.jpg"
return ( <id>{$id}</id> return ( <id>{$id}</id>
,<name>{$name}</name> ,<name>{$name}</name>
,<data>{fetch:binary($thumb)}</data> ,<data>{fetch:binary($thumb)}</data>

2
src/vue-poc/features/job/jobs.vue
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="job"> <template id="job">
<v-card > <v-card >
<v-toolbar class="green white--text"> <v-toolbar light>
<v-btn <v-btn
light icon light icon
:loading="loading" :loading="loading"

15
src/vue-poc/features/ping/ping.vue
View file

@ -1,8 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="ping"> <template id="ping">
<v-container fluid> <v-container fluid>
<p>Simple performance measure. Read or increment a database value.</p> <v-card>
<h2>Counter:{{counter}}</h2> <v-toolbar light>
<v-toolbar-title>Simple performance measure</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.</p>
<p>Counter:{{counter}}</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -81,7 +88,9 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<v-btn @click="reset()">Reset</v-btn> </v-card-text>
</v-card>
</v-container> </v-container>
</template> </template>

2
src/vue-poc/lib/vue-compile/vue-compile.xqm
View file

@ -70,7 +70,7 @@ declare function vue:capitalize-first
:) :)
declare function vue:compile($proj as xs:string) declare function vue:compile($proj as xs:string)
{ {
let $FEATURES:="features/"=>file:resolve-path($proj) let $FEATURES:="features/"=>file:resolve-path($proj=>trace("proj:"))
let $COMPONENTS:="components/"=>file:resolve-path($proj) let $COMPONENTS:="components/"=>file:resolve-path($proj)
let $CORE:="components/core.js"=>file:resolve-path($proj) let $CORE:="components/core.js"=>file:resolve-path($proj)
let $FILTERS:="components/filters.js"=>file:resolve-path($proj) let $FILTERS:="components/filters.js"=>file:resolve-path($proj)

2
src/vue-poc/models.gen.xqm
View file

@ -1,5 +1,5 @@
(: entity access maps (: entity access maps
: auto generated from xml files in entities folder at: 2017-08-09T10:36:00.509+01:00 : auto generated from xml files in entities folder at: 2017-08-09T12:18:41.183+01:00
:) :)
module namespace entity = 'quodatum.models.generated'; module namespace entity = 'quodatum.models.generated';

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

@ -1,4 +1,4 @@
// generated 2017-08-09T10:37:44.029+01:00 // generated 2017-08-13T11:45:59.085+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>
`, `,
@ -145,7 +145,7 @@ Vue.filter('round', function(value, decimals) {
} }
); );
const About=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 green lighten-1"> const About=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 indigo accent-3">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4=""> v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<p> <p>
@ -170,7 +170,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
const Log=Vue.extend({template:` const Log=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<v-card> <v-card>
<v-toolbar class="green white--text"> <v-toolbar light="">
<v-btn light="" icon="" :loading="loading" @click="getItems()" :disabled="loading"> <v-btn light="" icon="" :loading="loading" @click="getItems()" :disabled="loading">
<v-icon>refresh</v-icon> <v-icon>refresh</v-icon>
</v-btn> </v-btn>
@ -788,10 +788,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}, },
run(){ run(){
var data={xq:this.xq}
this.showError=this.show=false this.showError=this.show=false
this.start = performance.now(); this.start = performance.now();
HTTP.post("eval/execute",Qs.stringify(data)) HTTP.post("eval/execute",Qs.stringify({xq:this.xq}))
.then(r=>{ .then(r=>{
this.elapsed=Math.floor(performance.now() - this.start); this.elapsed=Math.floor(performance.now() - this.start);
this.result=r.data.result this.result=r.data.result
@ -857,7 +856,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
); );
const Home=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 green lighten-1"> const Home=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 indigo">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4=""> v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<p> <p>
@ -881,37 +880,78 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
); );
const Image=Vue.extend({template:` const Image=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
Image: {{id}} Image: {{ id }}
doc <pre>{{ image &amp;&amp; image.doc }}</pre>
</v-container> </v-container>
`, `,
props:["id"] props:["id"],
data: ()=>( {
image:null
}),
created:function(){
var id=this._props.id
HTTP.get("images/list/"+id)
.then(r=>{
console.log(r.data)
this.image=r.data
})
}
} }
); );
const Images=Vue.extend({template:` const Images=Vue.extend({template:`
<v-card> <v-card>
<v-card-actions> <v-toolbar light="">
<v-menu :close-on-content-click="false" v-model="showFilter" transition="scale-transition" offset-y="" full-width="">
<v-text-field slot="activator" name="input-1-3" style="width:30em;" label="Filter images" single-line="" prepend-icon="search" readonly="" :value="qtext"></v-text-field>
<v-card>
<v-card-title>
Set filter...
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
</v-card-title>
<v-card-text>
<v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" autocomplete=""></v-select> <v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" autocomplete=""></v-select>
<v-dialog persistent="" v-model="modal" lazy="" full-width=""> <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-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly=""></v-text-field> <v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly=""></v-text-field>
<v-date-picker v-model="query.from" scrollable="" actions=""> <v-date-picker v-model="query.from" scrollable="" actions="">
<template scope="{ save, cancel }"> <template scope="{ save, cancel }">
<v-card-actions> <v-card-actions>
<v-btn flat="" primary="" @click.native="cancel()">Cancel</v-btn> <v-btn flat="" primary="" @click="cancel()">Cancel</v-btn>
<v-btn flat="" primary="" @click.native="save()">Save</v-btn> <v-btn flat="" primary="" @click="save()">Save</v-btn>
</v-card-actions> </v-card-actions>
</template> </template>
</v-date-picker> </v-date-picker>
</v-dialog> </v-menu>
<v-btn @click.native="clear()">Clear</v-btn> </v-card-text>
<v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click.native="query.page+=1">next</v-btn>
{{query.page}} <v-btn @click="showFilter = false" primary="">Apply</v-btn>
<v-btn @click.native="query.page-=1">back</v-btn>
</v-card-actions> </v-card-actions>
</v-card>
</v-menu>
<v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" :disabled="!(query.keyword || query.from)">
<v-icon>clear</v-icon>
</v-btn>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
<v-spacer></v-spacer>
Page:{{ query.page+1 }}
<v-btn @click="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary="">
<v-icon>arrow_back</v-icon>
</v-btn>
<v-btn @click="query.page+=1" icon="" primary="">
<v-icon>arrow_forward</v-icon>
</v-btn>
</v-toolbar>
<v-container fluid="" grid-list-md=""> <v-container 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">
@ -939,7 +979,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-toolbar class="green white--text"> <v-toolbar class="green white--text">
<v-toolbar-title>{{selitem.name}}</v-toolbar-title> <v-toolbar-title>{{selitem.name}}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar> </v-toolbar>
<v-card-text> blah blah </v-card-text> <v-card-text> blah blah </v-card-text>
</v-card> </v-card>
@ -955,7 +995,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
keyword:null keyword:null
}, },
modal:false, // showing datepicker modal:false, // showing datepicker
showFilter:false,
busy:false,
menu2:false,
keywords:[], keywords:[],
showInfo:false, showInfo:false,
selitem:"TODO" selitem:"TODO"
@ -965,14 +1007,17 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
return "data:image/jpeg;base64,"+item.data return "data:image/jpeg;base64,"+item.data
}, },
getImages(){ getImages(){
this.busy=true
HTTP.get("images/list",{params:this.query}) HTTP.get("images/list",{params:this.query})
.then(r=>{ .then(r=>{
this.busy=false
this.images=r.data.items this.images=r.data.items
}) })
}, },
clear(){ clear(){
this.query.from=null; this.query.from=null;
this.query.keyword=null; this.query.keyword=null;
this.query.page=0;
}, },
selected(image){ selected(image){
this.selitem=image; this.selitem=image;
@ -983,6 +1028,12 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
}, },
computed:{
qtext(){
var k=this.query.keyword,f=this.query.from
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")
}
},
watch:{ watch:{
"query":{ "query":{
handler:function(v){ handler:function(v){
@ -1009,7 +1060,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
); );
const Job=Vue.extend({template:` const Job=Vue.extend({template:`
<v-card> <v-card>
<v-toolbar class="green white--text"> <v-toolbar light="">
<v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading"> <v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading">
<v-icon>refresh</v-icon> <v-icon>refresh</v-icon>
</v-btn> </v-btn>
@ -1153,8 +1204,15 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
); );
const Ping=Vue.extend({template:` const Ping=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<p>Simple performance measure. Read or increment a database value.</p> <v-card>
<h2>Counter:{{counter}}</h2> <v-toolbar light="">
<v-toolbar-title>Simple performance measure</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.</p>
<p>Counter:{{counter}}</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -1233,7 +1291,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</tr> </tr>
</tbody> </tbody>
</table> </table>
<v-btn @click="reset()">Reset</v-btn> </v-card-text>
</v-card>
</v-container> </v-container>
`, `,
@ -2091,6 +2151,7 @@ const router = new VueRouter({
{ path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} }, { path: '/tasks/vuecompile', component: Vuecompile,meta:{title:"vue compile"} },
{ path: '/jobs', component: Job,meta:{title:"Jobs"} }, { path: '/jobs', component: Job,meta:{title:"Jobs"} },
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} }, { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} } { path: '*', component: Notfound,meta:{title:"Page not found"} }
], ],
}); });
@ -2133,7 +2194,7 @@ const app = new Vue({
children: [ children: [
{href: '/database', text: 'Databases',icon: 'account_balance' }, {href: '/database', text: 'Databases',icon: 'account_balance' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/edit',text: 'edit',icon: 'mode_edit'}, {href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/history',text: 'history',icon: 'history'} {href: '/history',text: 'history',icon: 'history'}
]}, ]},
{ {
@ -2151,7 +2212,7 @@ const app = new Vue({
children: [ children: [
{href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, {href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
{href: '/logs',text: 'Server logs',icon: 'dns'}, {href: '/logs',text: 'Server logs',icon: 'dns'},
{href: '/ping',text: 'ping',icon: 'update'} {href: '/ping',text: 'Ping',icon: 'update'}
]}, ]},
{ {
icon: 'camera_roll', icon: 'camera_roll',
@ -2159,7 +2220,7 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/images',text: 'Collection',icon: 'photo_camera'}, {href: '/images',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'thumbnail',icon: 'touch_app'} {href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',
@ -2167,12 +2228,14 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/session',text: 'Session',icon: 'person'}, {href: '/session',text: 'Session',icon: 'person'},
{href: '/select',text: 'select',icon: 'extension'}, {href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'}, {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/tabs',text: 'tabs',icon: 'switch_camera'}, {href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
{href: '/timeline',text: 'time line',icon: 'timelapse'} {href: '/timeline',text: 'Time line',icon: 'timelapse'}
]}, ]},
{href: '/settings',text: 'settings',icon: 'settings' }
{href: '/settings',text: 'Settings',icon: 'settings' },
{href: '/about',text: 'About', icon: 'help' },
] ]
}}, }},

4
src/vue-poc/static/app.html
View file

@ -60,9 +60,9 @@
<qd-navlist :items="items"></qd-navlist> <qd-navlist :items="items"></qd-navlist>
</v-navigation-drawer> </v-navigation-drawer>
<v-toolbar class="green lighten-1" > <v-toolbar class="indigo" dark >
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon> <v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon>
<v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title> <v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Search..." v-model="q" <v-text-field prepend-icon="search" label="Search..." v-model="q"
hide-details single-line dark @keyup.native.enter="search"></v-text-field> hide-details single-line dark @keyup.native.enter="search"></v-text-field>

15
src/vue-poc/tasks/createthumbs.xq
View file

@ -1,15 +0,0 @@
(:~ update image meta data docs :)
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
let $done:=uri-collection("vue-poc/Pictures")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
return ((for $f in subsequence($todo,1, 1000)
let $spath:="P:/pictures/" || $f
let $dbpath:=$f || "/meta.xml"
let $meta:=imgmeta:read($spath)
return db:replace($DB,$dbpath,$meta)),db:output($todo=>count()))

3
src/vue-poc/tasks/scanpics.xq → src/vue-poc/tasks/pics-01-store-directory.xq
View file

@ -1,4 +1,5 @@
(:~ create xml file list (:~
: create xml file list by scanning $SRC and write to vue-poc
:) :)
import module namespace fw="quodatum:file.walker"; import module namespace fw="quodatum:file.walker";
declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace c="http://www.w3.org/ns/xproc-step";

22
src/vue-poc/tasks/pics-02-store-meta.xq Normal file
View file

@ -0,0 +1,22 @@
(:~
: store meta.xml document for all jpgs referenced in doc("/vue-poc/pics.xml")
: done in batches of 1000
: @return initial number of missing docs
:)
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $IMAGEDIR:="P:/pictures/";
let $done:=uri-collection("vue-poc/Pictures")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
return (for $f in subsequence($todo,1, 1000)
let $spath:=$IMAGEDIR || $f
let $dbpath:=$f || "/meta.xml"
let $meta:=imgmeta:read($spath)
return db:replace($DB,$dbpath,$meta),
db:output($todo=>count()))

0
src/vue-poc/tasks/createimage.xq → src/vue-poc/tasks/pics-03-store-image.xq
View file

46
src/vue-poc/tasks/pics-04-store-thumbs.xq Normal file
View file

@ -0,0 +1,46 @@
(:~
: generate thumbs
: @return initial number of missing docs
:)
import module namespace t="expkg-zone58:image.thumbnailator";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $IMAGEDIR:="P:/pictures/";
declare variable $THUMBDIR:="C:/tmp/";
(:
declare variable $IMAGEDIR:="/mnt/sda1/pictures/";
declare variable $THUMBDIR:="/mnt/sda1/pictures/thumbs/";
:)
declare %updating function local:store-thumb($f as xs:string)
{
let $src:=$IMAGEDIR || trace($f)
let $trg:= $THUMBDIR || $f
return fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
};
(:~ create folder if missing) :)
declare %updating function local:write-binary($data,$url as xs:string)
{
let $p:=file:parent($url)
return (if(file:is-dir($p)) then
()
else
file:create-dir($p),
file:write-binary($url,$data)
)
};
let $done:=uri-collection("vue-poc/Pictures")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $relpath:=filter($relpath,function($f){
not(file:exists($THUMBDIR || $f)) and file:exists($IMAGEDIR || $f)
})
let $todo:= $relpath=>subsequence(1, 400)
return (
$todo!local:store-thumb(.),
db:output($relpath=>count())
)

5
src/vue-poc/tasks/vue-compile.xq Normal file
View file

@ -0,0 +1,5 @@
import module namespace vue = 'quodatum:vue.compile' at "../lib/vue-compile/vue-compile.xqm";
let $proj:="C:/Users/andy/git/vue-poc/src/vue-poc/"
return vue:compile($proj)