0.14.11
This commit is contained in:
parent
25848c5cd3
commit
f5af110ab2
@ -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>
|
||||
{{ child.text }}
|
||||
<v-icon>{{ child.icon }}</v-icon> {{ child.text }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
23
src/vue-poc/components/qd-panel.vue
Normal file
23
src/vue-poc/components/qd-panel.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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())
|
||||
};
|
||||
|
||||
@ -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
11
src/vue-poc/features/images/config.xqm
Normal 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/";
|
||||
:)
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
14
src/vue-poc/mimetypes.xml
Normal 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>
|
||||
@ -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{
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
{{ child.text }}
|
||||
<v-icon>{{ child.icon }}</v-icon> {{ 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
27
tests/locust/locustfile.py
Normal 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
BIN
tests/locust/locustfile.pyc
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user