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

0.14.11

Browse source
This commit is contained in:
Andy Bunce 2017-08-15 22:48:37 +01:00
parent 25848c5cd3
commit f5af110ab2
18 changed files with 374 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/vue-poc/components/qd-navlist.vue
View file

@ -37,12 +37,12 @@ for nav drawer
</v-list-tile> </v-list-tile>
<template v-for="(child, i) in item.children" > <template v-for="(child, i) in item.children" >
<v-list-tile :to="child.href" :key="i" ripple> <v-list-tile :to="child.href" :key="i" ripple>
<v-list-tile-action v-if="child.icon"> <v-list-tile-action >
<v-icon>{{ child.icon }}</v-icon> <v-icon></v-icon>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
&nbsp;{{ child.text }} <v-icon>{{ child.icon }}</v-icon>&nbsp;{{ child.text }}
</v-list-tile-title> </v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>

23
src/vue-poc/components/qd-panel.vue Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<!--
show panel on right
-->
<template id="qd-panel">
<v-layout>
<v-flex>
<slot name="body"></slot>
</v-flex>
<v-flex v-if="show" xs4 grey lighten-3>
<slot name="aside"></slot>
</v-flex>
</v-layout>
</template>
<script>{
props: ['show'],
created:function(){
console.log("qd-panel");
}
}
</script>

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

@ -3,7 +3,7 @@
xs4> <v-card hover raised> <v-card-title xs4> <v-card hover raised> <v-card-title
height="200px" class="pa-5 indigo accent-3"> 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.3 </v-card-title> </v-card> </v-flex> <v-flex xs4>
<p> <p>
This is a experiment in using This is a experiment in using
<code>vue.js</code> <code>vue.js</code>

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

@ -13,7 +13,7 @@ as element(json)
{ {
let $entity:=$entity:list("basexlog") let $entity:=$entity:list("basexlog")
let $items:=$entity("data")() let $items:=$entity("data")()
let $items:=$items[. ne "[GET] http://localhost:8984/vue-poc/api/log"] let $items:=$items[not(ends-with(. ,"/vue-poc/api/log"))]
(: let $_:=admin:write-log("hello admin:write-log") :) (: let $_:=admin:write-log("hello admin:write-log") :)
return dice:response($items,$entity,web:dice()) return dice:response($items,$entity,web:dice())
}; };

16
src/vue-poc/features/collection/files.vue
View file

@ -87,14 +87,14 @@
props:["protocol"], props:["protocol"],
data: function(){ data: function(){
return { return {
url:"", url: "",
folders:[], folders: [],
files:[], files: [],
items:["root"], items: ["root"],
q:"", q: "",
busy:false, busy: false,
showInfo:false, showInfo: false,
selected:null selected: null
} }
}, },
methods:{ methods:{

11
src/vue-poc/features/images/config.xqm Normal file
View file

@ -0,0 +1,11 @@
xquery version "3.1";
(:~ data locations for image feature :)
module namespace cfg = "quodatum:media.image.configure";
declare variable $cfg:IMAGEDIR:="P:/pictures/";
declare variable $cfg:THUMBDIR:="C:/tmp/";
(:
declare variable $cfg:IMAGEDIR:="/mnt/sda1/pictures/";
declare variable $cfg:THUMBDIR:="/mnt/sda1/pictures/thumbs/";
:)

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

@ -6,39 +6,72 @@
<template id="images"> <template id="images">
<v-card> <v-card>
<v-toolbar light> <v-toolbar class="green white--text">
<v-btn @click.stop="showFilter = true" icon><v-icon>search</v-icon></v-btn>
<v-toolbar-title>{{ qtext }}</v-toolbar-title>
<v-menu <v-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
:close-on-content-click="false" v-if="query.keyword || query.from || query.until">
v-model="showFilter" <v-icon>clear</v-icon>
transition="scale-transition" </v-btn>
offset-y <v-spacer></v-spacer>
full-width <v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
Page:{{ query.page+1 }}
<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-btn>
<v-btn @click.stop="query.page+=1" icon primary>
<v-icon>arrow_forward</v-icon>
</v-btn>
</v-toolbar>
> <v-container fluid grid-list-md>
<v-text-field <v-layout row wrap>
slot="activator" <v-flex height="80px"
name="input-1-3" style="width:30em;" xs2
label="Filter images" v-for="image in images"
single-line :key="image.name"
prepend-icon="search" >
readonly <v-card class="grey lighten-2 pt-1">
:value="qtext" ></v-text-field> <v-card-media :src="src(image)" @click="go(image)"
height="80px" :contain="true"></v-card-media>
<v-card-actions v-tooltip:top="{ html: ' '+image.path }">
<v-btn icon small>
<v-icon>favorite</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon small>
<v-icon>bookmark</v-icon>
</v-btn>
<v-btn icon small @click="selected(image)">
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-navigation-drawer left persistent v-model="showFilter" :disable-route-watcher="true">
<v-card> <v-card>
<v-card-title> <v-toolbar class="green white--text">
Set filter... <v-toolbar-title >Set filter...</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon><v-icon>close</v-icon></v-btn> <v-btn @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
</v-card-title> </v-toolbar>
<v-card-text>
<v-card-text>
<v-select <v-select
v-bind:items="keywords" v-bind:items="keywords"
v-model="query.keyword" v-model="query.keyword"
label="Keyword" label="Keyword"
autocomplete autocomplete
></v-select> ></v-select>
<v-menu <v-btn @click="query.keyword=null" :disabled="!query.keyword">
<v-icon>close</v-icon>Clear keyword
</v-btn>
<v-menu
lazy lazy
:close-on-content-click="false" :close-on-content-click="false"
v-model="menu2" v-model="menu2"
@ -63,6 +96,36 @@
<v-btn flat primary @click="save()">Save</v-btn> <v-btn flat primary @click="save()">Save</v-btn>
</v-card-actions> </v-card-actions>
</template> </template>
</v-menu>
<v-menu
lazy
:close-on-content-click="false"
v-model="showUntil"
transition="scale-transition"
offset-y
full-width
:nudge-left="40"
max-width="290px"
>
</v-date-picker>
<v-text-field
slot="activator"
label="Latest date"
v-model="query.until"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="query.until" scrollable actions>
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click="cancel()">Cancel</v-btn>
<v-btn flat primary @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker> </v-date-picker>
</v-menu> </v-menu>
</v-card-text> </v-card-text>
@ -73,60 +136,18 @@
<v-btn @click="showFilter = false" primary>Apply</v-btn> <v-btn @click="showFilter = false" primary>Apply</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </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-layout row wrap>
<v-flex height="80px"
xs2
v-for="image in images"
:key="image.name"
>
<v-card class="grey lighten-2 pt-1">
<v-card-media :src="src(image)" @click="go(image)"
height="80px" :contain="true"></v-card-media>
<v-card-actions v-tooltip:top="{ html: image.id + ' '+image.name }">
<v-btn icon small>
<v-icon>favorite</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon small>
<v-icon>bookmark</v-icon>
</v-btn>
<v-btn icon small @click="selected(image)">
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-navigation-drawer left light temporary v-model="showInfo">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title >{{selitem.name}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> blah blah </v-card-text>
</v-card>
</v-navigation-drawer> </v-navigation-drawer>
<v-navigation-drawer left persistent v-model="showInfo" :disable-route-watcher="true">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title >{{selitem.name}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> blah blah </v-card-text>
</v-card>
</v-navigation-drawer>
</v-card> </v-card>
</template> </template>
@ -136,12 +157,13 @@
images:[], images:[],
query:{page:0, // current page query:{page:0, // current page
from:null, from:null,
until:null,
keyword:null keyword:null
}, },
modal:false, // showing datepicker
showFilter:false, showFilter:false,
busy:false, busy:false,
menu2:false, menu2:false,
showUntil:false,
keywords:[], keywords:[],
showInfo:false, showInfo:false,
selitem:"TODO" selitem:"TODO"
@ -160,6 +182,7 @@
}, },
clear(){ clear(){
this.query.from=null; this.query.from=null;
this.query.until=null;
this.query.keyword=null; this.query.keyword=null;
this.query.page=0; this.query.page=0;
}, },
@ -174,8 +197,8 @@
}, },
computed:{ computed:{
qtext(){ qtext(){
var k=this.query.keyword,f=this.query.from var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"") return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
} }
}, },
watch:{ watch:{
@ -190,14 +213,20 @@
} }
}, },
created:function(){ created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages() this.getImages()
HTTP.get("images/keywords") HTTP.get("images/keywords")
.then(r=>{ .then(r=>{
this.keywords=r.data.items this.keywords=r.data.items
}) })
},
mounted:function(){
console.log("images mount")
} }
} }
</script> </script>

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

@ -4,17 +4,11 @@
: @author Andy Bunce may-2017 : @author Andy Bunce may-2017
:) :)
module namespace vue-api = 'quodatum:vue.api.images'; module namespace vue-api = 'quodatum:vue.api.images';
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
import module namespace fw="quodatum:file.walker"; 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: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"); declare variable $vue-api:entity:=$entity:list("thumbnail");
(:~ (:~
: do a thumbnail : do a thumbnail
@ -39,17 +33,18 @@ declare
%rest:produces("application/json") %rest:produces("application/json")
%rest:query-param("page", "{$page}",0) %rest:query-param("page", "{$page}",0)
%rest:query-param("from", "{$from}") %rest:query-param("from", "{$from}")
%rest:query-param("until", "{$until}")
%rest:query-param("keyword", "{$keyword}") %rest:query-param("keyword", "{$keyword}")
%output:method("json") %output:method("json")
function vue-api:list( $page as xs:integer, function vue-api:list( $page as xs:integer,
$from, $from,$until,
$keyword $keyword
) )
{ {
let $a:=trace(($from,$keyword),"----------")
let $rowsPerPage:=24 let $rowsPerPage:=24
let $images:=$vue-api:entity("data")() let $images:=$vue-api: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($until)then $images[datetaken le $until] 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)
@ -90,8 +85,8 @@ as element(*)*
let $id:=$vue-api:entity?access?id($image) let $id:=$vue-api:entity?access?id($image)
let $path:=$vue-api:entity?access?path($image) let $path:=$vue-api:entity?access?path($image)
let $name:=$vue-api:entity?access?name($image) let $name:=$vue-api:entity?access?name($image)
let $thumb:= $vue-api:THUMBDIR || $path let $thumb:= $cfg:THUMBDIR || $path
let $thumb:=if(file:exists($thumb)) then $thumb else $vue-api:THUMBDIR || "missing.jpg" let $thumb:=if(file:exists($thumb)) then $thumb else $cfg: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>

13
src/vue-poc/features/select.vue
View file

@ -9,8 +9,9 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn> <v-btn flat icon @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
</v-toolbar> </v-toolbar>
<v-layout> <qd-panel :show="showInfo">
<v-flex>
<v-flex slot="body">
<v-layout> <v-layout>
<v-flex xs6> <v-flex xs6>
@ -28,8 +29,8 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-flex> </v-flex>
<v-flex v-if="showInfo" xs4>
<v-card flat> <v-card slot="aside" flat>
<v-card-actions > <v-card-actions >
<v-toolbar-title >test</v-toolbar-title> <v-toolbar-title >test</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -37,8 +38,8 @@
</v-card-actions> </v-card-actions>
<v-card-text> blah blah protocol: </v-card-text> <v-card-text> blah blah protocol: </v-card-text>
</v-card> </v-card>
</v-flex> </qd-panel>
</v-layout>
</v-card-text> </v-card-text>
<v-card> <v-card>
</v-container> </v-container>

74
src/vue-poc/history.xml
View file

@ -1,38 +1,38 @@
<history next-id="13" xmlns="urn:quodatum:vue-poc.history" > <history next-id="13" xmlns="urn:quodatum:vue-poc.history">
<event id="1" user="admin" when=""> <event id="1" user="admin" when="">
<file mode="webfile" url="/vue-poc/vue-poc.xqm"/> <file mode="webfile" url="/vue-poc/vue-poc.xqm" />
</event> </event>
<event id="2"> <event id="2">
<file mode="webfile" url="/vue-poc/data/vue-poc/ch4d1.xml"/> <file mode="webfile" url="/vue-poc/data/vue-poc/samples/ch4d1.xml" />
</event> </event>
<event id="3"> <event id="3">
<file mode="webfile" url="/vue-poc/static/app-gen.js"/> <file mode="webfile" url="/vue-poc/static/app-gen.js" />
</event> </event>
<event id="4"> <event id="4">
<file mode="webfile" url="/vue-poc/static/app.html"/> <file mode="webfile" url="/vue-poc/static/app.html" />
</event> </event>
<event id="5"> <event id="5">
<file mode="webfile" url="/vue-poc/static/app.css"/> <file mode="webfile" url="/vue-poc/static/app.css" />
</event> </event>
<event id="6"> <event id="6">
<file mode="webfile" url="/vue-poc/logo.svg"/> <file mode="webfile" url="/vue-poc/logo.svg" />
</event> </event>
<event id="7"> <event id="7">
<file mode="webfile" url="/vue-poc/static/resources/semantic/sparql.rq"/> <file mode="webfile" url="/vue-poc/static/resources/semantic/sparql.rq" />
</event> </event>
<event id="8"> <event id="8">
<file mode="webfile" url="/vue-poc/static/resources/semantic/turtle.ttl"/> <file mode="webfile" url="/vue-poc/static/resources/semantic/turtle.ttl" />
</event> </event>
<event id="9"> <event id="9">
<file mode="webfile" url="/vue-poc/static/resources/task.xsd"/> <file mode="webfile" url="/vue-poc/static/resources/task.xsd" />
</event> </event>
<event id="10"> <event id="10">
<file mode="webfile" url="/vue-poc/static/resources/schematron/ark/ark.sch"/> <file mode="webfile" url="/vue-poc/static/resources/schematron/ark.sch" />
</event> </event>
<event id="11"> <event id="11">
<file mode="basexdb" url="/abide/abide.xml"/> <file mode="basexdb" url="/abide/abide.xml" />
</event> </event>
<event id="12"> <event id="12">
<collection mode="basexdb" url="/vue-poc"/> <collection mode="basexdb" url="/vue-poc" />
</event> </event>
</history> </history>

14
src/vue-poc/mimetypes.xml Normal file
View file

@ -0,0 +1,14 @@
<mimetypes xmlns="urn:quodatum:vue-poc.mimetypes">
<type name="xquery">
<mime type="application/xquery" ext="xq xqm" />
</type>
<type name="javascript">
<mime type="text/ecmascript" ext="js" />
</type>
<type name="xml">
<mime type="text/xml" ext="xml xsd" />
</type>
<type name="sparql">
<mime type="application/sparql-query" ext="rq" />
</type>
</mimetypes>

4
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-09T12:18:41.183+01:00 : auto generated from xml files in entities folder at: 2017-08-13T22:21:05.468+01:00
:) :)
module namespace entity = 'quodatum.models.generated'; module namespace entity = 'quodatum.models.generated';
@ -92,7 +92,7 @@ declare variable $entity:list:=map {
} }, } },
"data": function() as element(h:event)* "data": function() as element(h:event)*
{ doc("history.xml")/h:history/h:event }, { doc("history.xml")/h:history/h:event[h:file] },
"views": map{ "views": map{

2
src/vue-poc/models/filehistory.xml
View file

@ -27,5 +27,5 @@
<views> <views>
</views> </views>
<iconclass>fa fa-calendar</iconclass> <iconclass>fa fa-calendar</iconclass>
<data type="element(h:event)">doc("history.xml")/h:history/h:event</data> <data type="element(h:event)">doc("history.xml")/h:history/h:event[h:file]</data>
</entity> </entity>

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

@ -1,4 +1,4 @@
// generated 2017-08-13T11:45:59.085+01:00 // generated 2017-08-15T22:45:31.814+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>
`, `,
@ -40,12 +40,12 @@
</v-list-tile> </v-list-tile>
<template v-for="(child, i) in item.children"> <template v-for="(child, i) in item.children">
<v-list-tile :to="child.href" :key="i" ripple=""> <v-list-tile :to="child.href" :key="i" ripple="">
<v-list-tile-action v-if="child.icon"> <v-list-tile-action>
<v-icon>{{ child.icon }}</v-icon> <v-icon></v-icon>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title> <v-list-tile-title>
&nbsp;{{ child.text }} <v-icon>{{ child.icon }}</v-icon>&nbsp;{{ child.text }}
</v-list-tile-title> </v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
@ -70,6 +70,25 @@
props: ['items'] props: ['items']
} }
);
Vue.component('qd-panel',{template:`
<v-layout>
<v-flex>
<slot name="body"></slot>
</v-flex>
<v-flex v-if="show" xs4="" grey="" lighten-3="">
<slot name="aside"></slot>
</v-flex>
</v-layout>
`,
props: ['show'],
created:function(){
console.log("qd-panel");
}
}
); );
Vue.component('vis-time-line',{template:` Vue.component('vis-time-line',{template:`
<div></div> <div></div>
@ -147,7 +166,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 indigo accent-3"> 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.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<p> <p>
This is a experiment in using This is a experiment in using
<code>vue.js</code> <code>vue.js</code>
@ -319,14 +338,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
props:["protocol"], props:["protocol"],
data: function(){ data: function(){
return { return {
url:"", url: "",
folders:[], folders: [],
files:[], files: [],
items:["root"], items: ["root"],
q:"", q: "",
busy:false, busy: false,
showInfo:false, showInfo: false,
selected:null selected: null
} }
}, },
methods:{ methods:{
@ -903,51 +922,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
const Images=Vue.extend({template:` const Images=Vue.extend({template:`
<v-card> <v-card>
<v-toolbar light=""> <v-toolbar class="green white--text">
<v-btn @click.stop="showFilter = true" icon=""><v-icon>search</v-icon></v-btn>
<v-toolbar-title>{{ qtext }}</v-toolbar-title>
<v-menu :close-on-content-click="false" v-model="showFilter" transition="scale-transition" offset-y="" full-width=""> <v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
<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-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-date-picker v-model="query.from" scrollable="" actions="">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat="" primary="" @click="cancel()">Cancel</v-btn>
<v-btn flat="" primary="" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" primary="">Apply</v-btn>
</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-icon>clear</v-icon>
</v-btn> </v-btn>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
<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="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>
</v-btn> </v-btn>
<v-btn @click="query.page+=1" icon="" primary=""> <v-btn @click.stop="query.page+=1" icon="" primary="">
<v-icon>arrow_forward</v-icon> <v-icon>arrow_forward</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
@ -957,7 +945,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<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">
<v-card-media :src="src(image)" @click="go(image)" height="80px" :contain="true"></v-card-media> <v-card-media :src="src(image)" @click="go(image)" height="80px" :contain="true"></v-card-media>
<v-card-actions v-tooltip:top="{ html: image.id + ' '+image.name }"> <v-card-actions v-tooltip:top="{ html: ' '+image.path }">
<v-btn icon="" small=""> <v-btn icon="" small="">
<v-icon>favorite</v-icon> <v-icon>favorite</v-icon>
@ -974,16 +962,67 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
<v-navigation-drawer left="" light="" temporary="" v-model="showInfo">
<v-card> <v-navigation-drawer left="" persistent="" v-model="showFilter" :disable-route-watcher="true">
<v-toolbar class="green white--text"> <v-card>
<v-toolbar-title>{{selitem.name}}</v-toolbar-title> <v-toolbar class="green white--text">
<v-spacer></v-spacer> <v-toolbar-title>Set filter...</v-toolbar-title>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn> <v-spacer></v-spacer>
</v-toolbar> <v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
<v-card-text> blah blah </v-card-text> </v-toolbar>
</v-card>
<v-card-text>
<v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" autocomplete=""></v-select>
<v-btn @click="query.keyword=null" :disabled="!query.keyword">
<v-icon>close</v-icon>Clear keyword
</v-btn>
<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-date-picker v-model="query.from" scrollable="" actions="">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat="" primary="" @click="cancel()">Cancel</v-btn>
<v-btn flat="" primary="" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker></v-menu>
<v-menu lazy="" :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
<v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly=""></v-text-field>
<v-date-picker v-model="query.until" scrollable="" actions="">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat="" primary="" @click="cancel()">Cancel</v-btn>
<v-btn flat="" primary="" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" primary="">Apply</v-btn>
</v-card-actions>
</v-card>
</v-navigation-drawer> </v-navigation-drawer>
<v-navigation-drawer left="" persistent="" v-model="showInfo" :disable-route-watcher="true">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title>{{selitem.name}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> blah blah </v-card-text>
</v-card>
</v-navigation-drawer>
</v-card> </v-card>
`, `,
@ -992,12 +1031,13 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
images:[], images:[],
query:{page:0, // current page query:{page:0, // current page
from:null, from:null,
until:null,
keyword:null keyword:null
}, },
modal:false, // showing datepicker
showFilter:false, showFilter:false,
busy:false, busy:false,
menu2:false, menu2:false,
showUntil:false,
keywords:[], keywords:[],
showInfo:false, showInfo:false,
selitem:"TODO" selitem:"TODO"
@ -1016,6 +1056,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}, },
clear(){ clear(){
this.query.from=null; this.query.from=null;
this.query.until=null;
this.query.keyword=null; this.query.keyword=null;
this.query.page=0; this.query.page=0;
}, },
@ -1030,8 +1071,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}, },
computed:{ computed:{
qtext(){ qtext(){
var k=this.query.keyword,f=this.query.from var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"") return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
} }
}, },
watch:{ watch:{
@ -1046,14 +1087,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
}, },
created:function(){ created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages() this.getImages()
HTTP.get("images/keywords") HTTP.get("images/keywords")
.then(r=>{ .then(r=>{
this.keywords=r.data.items this.keywords=r.data.items
}) })
},
mounted:function(){
console.log("images mount")
} }
} }
@ -1449,8 +1496,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn> <v-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
</v-toolbar> </v-toolbar>
<v-layout> <qd-panel :show="showInfo">
<v-flex>
<v-flex slot="body">
<v-layout> <v-layout>
<v-flex xs6=""> <v-flex xs6="">
@ -1466,8 +1514,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-flex> </v-flex>
<v-flex v-if="showInfo" xs4="">
<v-card flat=""> <v-card slot="aside" flat="">
<v-card-actions> <v-card-actions>
<v-toolbar-title>test</v-toolbar-title> <v-toolbar-title>test</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -1475,8 +1523,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</v-card-actions> </v-card-actions>
<v-card-text> blah blah protocol: </v-card-text> <v-card-text> blah blah protocol: </v-card-text>
</v-card> </v-card>
</v-flex> </qd-panel>
</v-layout>
<v-card> <v-card>
</v-card></v-card></v-container> </v-card></v-card></v-container>

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

@ -9,7 +9,7 @@
<title>Vue Router Test</title> <title>Vue Router Test</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <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="//fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vuetify@0.14.11/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"> <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@ -19,7 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script> <script src="https://unpkg.com/vuetify@0.14.11/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script> <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>

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

@ -55,8 +55,6 @@ declare function vue-poc:get-file($file)
declare function vue-poc:get-filex($file) declare function vue-poc:get-filex($file)
{ {
let $path := resolve-uri( 'static/' || $file,static-base-uri()) let $path := resolve-uri( 'static/' || $file,static-base-uri())
return return
try{ try{

27
tests/locust/locustfile.py Normal file
View file

@ -0,0 +1,27 @@
"""
vue-poc performance locust script
@author Andy Bunce
@since 2017-08-03
"""
from locust import HttpLocust, TaskSet, task
auth=("ArcadianUser","**password**")
user={"username":"admin", "password":"uksapl"}
class UserBehavior(TaskSet):
# images
@task(2)
def images(self):
self.client.get("/vue-poc/api/images/list")
@task(1)
def keyword(self):
self.client.get("/vue-poc/api/images/list?page=0&from&keyword=albania", name="keyword=albania")
class WebsiteUser(HttpLocust):
host = "http://localhost:8984"
task_set = UserBehavior
min_wait = 5000
max_wait = 10000

BIN
tests/locust/locustfile.pyc Normal file
View file

Binary file not shown.