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>
<template v-for="(child, i) in item.children" >
<v-list-tile :to="child.href" :key="i" ripple>
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
<v-list-tile-action >
<v-icon></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
&nbsp;{{ child.text }}
<v-icon>{{ child.icon }}</v-icon>&nbsp;{{ child.text }}
</v-list-tile-title>
</v-list-tile-content>
</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
height="200px" class="pa-5 indigo accent-3">
<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>
This is a experiment in using
<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 $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") :)
return dice:response($items,$entity,web:dice())
};

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

@ -87,14 +87,14 @@
props:["protocol"],
data: function(){
return {
url:"",
folders:[],
files:[],
items:["root"],
q:"",
busy:false,
showInfo:false,
selected:null
url: "",
folders: [],
files: [],
items: ["root"],
q: "",
busy: false,
showInfo: false,
selected: null
}
},
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/";
:)

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

@ -6,39 +6,72 @@
<template id="images">
<v-card>
<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-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-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
v-if="query.keyword || query.from || query.until">
<v-icon>clear</v-icon>
</v-btn>
<v-spacer></v-spacer>
<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-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.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-title>
Set filter...
<v-toolbar class="green white--text">
<v-toolbar-title >Set filter...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
</v-card-title>
<v-card-text>
</v-toolbar>
<v-card-text>
<v-select
v-bind:items="keywords"
v-model="query.keyword"
label="Keyword"
autocomplete
></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
:close-on-content-click="false"
v-model="menu2"
@ -63,6 +96,36 @@
<v-btn flat primary @click="save()">Save</v-btn>
</v-card-actions>
</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-menu>
</v-card-text>
@ -73,62 +136,20 @@
<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-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 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>
</template>
<script>{
@ -136,12 +157,13 @@
images:[],
query:{page:0, // current page
from:null,
until:null,
keyword:null
},
modal:false, // showing datepicker
showFilter:false,
busy:false,
menu2:false,
showUntil:false,
keywords:[],
showInfo:false,
selitem:"TODO"
@ -160,6 +182,7 @@
},
clear(){
this.query.from=null;
this.query.until=null;
this.query.keyword=null;
this.query.page=0;
},
@ -174,8 +197,8 @@
},
computed:{
qtext(){
var k=this.query.keyword,f=this.query.from
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")
var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
}
},
watch:{
@ -190,14 +213,20 @@
}
},
created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages()
HTTP.get("images/keywords")
.then(r=>{
this.keywords=r.data.items
})
},
mounted:function(){
console.log("images mount")
}
}
</script>

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

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

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

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

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

@ -1,38 +1,38 @@
<history next-id="13" xmlns="urn:quodatum:vue-poc.history" >
<event id="1" user="admin" when="">
<file mode="webfile" url="/vue-poc/vue-poc.xqm"/>
</event>
<event id="2">
<file mode="webfile" url="/vue-poc/data/vue-poc/ch4d1.xml"/>
</event>
<event id="3">
<file mode="webfile" url="/vue-poc/static/app-gen.js"/>
</event>
<event id="4">
<file mode="webfile" url="/vue-poc/static/app.html"/>
</event>
<event id="5">
<file mode="webfile" url="/vue-poc/static/app.css"/>
</event>
<event id="6">
<file mode="webfile" url="/vue-poc/logo.svg"/>
</event>
<event id="7">
<file mode="webfile" url="/vue-poc/static/resources/semantic/sparql.rq"/>
</event>
<event id="8">
<file mode="webfile" url="/vue-poc/static/resources/semantic/turtle.ttl"/>
</event>
<event id="9">
<file mode="webfile" url="/vue-poc/static/resources/task.xsd"/>
</event>
<event id="10">
<file mode="webfile" url="/vue-poc/static/resources/schematron/ark/ark.sch"/>
</event>
<event id="11">
<file mode="basexdb" url="/abide/abide.xml"/>
</event>
<event id="12">
<collection mode="basexdb" url="/vue-poc"/>
</event>
<history next-id="13" xmlns="urn:quodatum:vue-poc.history">
<event id="1" user="admin" when="">
<file mode="webfile" url="/vue-poc/vue-poc.xqm" />
</event>
<event id="2">
<file mode="webfile" url="/vue-poc/data/vue-poc/samples/ch4d1.xml" />
</event>
<event id="3">
<file mode="webfile" url="/vue-poc/static/app-gen.js" />
</event>
<event id="4">
<file mode="webfile" url="/vue-poc/static/app.html" />
</event>
<event id="5">
<file mode="webfile" url="/vue-poc/static/app.css" />
</event>
<event id="6">
<file mode="webfile" url="/vue-poc/logo.svg" />
</event>
<event id="7">
<file mode="webfile" url="/vue-poc/static/resources/semantic/sparql.rq" />
</event>
<event id="8">
<file mode="webfile" url="/vue-poc/static/resources/semantic/turtle.ttl" />
</event>
<event id="9">
<file mode="webfile" url="/vue-poc/static/resources/task.xsd" />
</event>
<event id="10">
<file mode="webfile" url="/vue-poc/static/resources/schematron/ark.sch" />
</event>
<event id="11">
<file mode="basexdb" url="/abide/abide.xml" />
</event>
<event id="12">
<collection mode="basexdb" url="/vue-poc" />
</event>
</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
: 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';
@ -92,7 +92,7 @@ declare variable $entity:list:=map {
} },
"data": function() as element(h:event)*
{ doc("history.xml")/h:history/h:event },
{ doc("history.xml")/h:history/h:event[h:file] },
"views": map{

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

@ -27,5 +27,5 @@
<views>
</views>
<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>

194
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:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`,
@ -40,12 +40,12 @@
</v-list-tile>
<template v-for="(child, i) in item.children">
<v-list-tile :to="child.href" :key="i" ripple="">
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
<v-list-tile-action>
<v-icon></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
&nbsp;{{ child.text }}
<v-icon>{{ child.icon }}</v-icon>&nbsp;{{ child.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
@ -70,6 +70,25 @@
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:`
<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">
<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>
This is a experiment in using
<code>vue.js</code>
@ -319,14 +338,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
props:["protocol"],
data: function(){
return {
url:"",
folders:[],
files:[],
items:["root"],
q:"",
busy:false,
showInfo:false,
selected:null
url: "",
folders: [],
files: [],
items: ["root"],
q: "",
busy: false,
showInfo: false,
selected: null
}
},
methods:{
@ -903,51 +922,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
const Images=Vue.extend({template:`
<v-card>
<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-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-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-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
<v-icon>clear</v-icon>
</v-btn>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
<v-spacer></v-spacer>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
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-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-btn>
</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-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-card-actions v-tooltip:top="{ html: ' '+image.path }">
<v-btn icon="" small="">
<v-icon>favorite</v-icon>
@ -974,30 +962,82 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</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-card>
<v-navigation-drawer left="" persistent="" v-model="showFilter" :disable-route-watcher="true">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title>Set filter...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
</v-toolbar>
<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 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>
`,
data: () => ({
images:[],
query:{page:0, // current page
from:null,
until:null,
keyword:null
},
modal:false, // showing datepicker
showFilter:false,
busy:false,
menu2:false,
showUntil:false,
keywords:[],
showInfo:false,
selitem:"TODO"
@ -1016,6 +1056,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
},
clear(){
this.query.from=null;
this.query.until=null;
this.query.keyword=null;
this.query.page=0;
},
@ -1030,8 +1071,8 @@ 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:"")
var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
}
},
watch:{
@ -1046,14 +1087,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}
},
created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages()
HTTP.get("images/keywords")
.then(r=>{
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-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
</v-toolbar>
<v-layout>
<v-flex>
<qd-panel :show="showInfo">
<v-flex slot="body">
<v-layout>
<v-flex xs6="">
@ -1466,8 +1514,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</v-flex>
</v-layout>
</v-flex>
<v-flex v-if="showInfo" xs4="">
<v-card flat="">
<v-card slot="aside" flat="">
<v-card-actions>
<v-toolbar-title>test</v-toolbar-title>
<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-text> blah blah protocol: </v-card-text>
</v-card>
</v-flex>
</v-layout>
</qd-panel>
<v-card>
</v-card></v-card></v-container>

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

@ -9,7 +9,7 @@
<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/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="/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/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://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://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>

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)
{
let $path := resolve-uri( 'static/' || $file,static-base-uri())
return
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.