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

timeline

Browse source
This commit is contained in:
Andy Bunce 2017-08-27 11:43:08 +01:00
parent 65f868fae4
commit dff6a79747
15 changed files with 247 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/vue-poc/components/vis-time-line.vue
View file

@ -6,17 +6,25 @@ for vis-time-line
<div></div>
</template>
<script>{
props: ['items', 'groups', 'options'],
props: ['items', 'groups', 'options','events'],
data(){
return {timeline:Object}
},
methods:{
select(properties){
//alert('selected items: ' + properties.items);
this.$emit('select',properties.items);
}
},
mounted: function () {
var items = new vis.DataSet(this.items);
var options = this.options;
var groups = this.groups;
var timeline = new vis.Timeline(this.$el, items, groups, options);
timeline.on('select', this.select);
this.timeline = new vis.Timeline(this.$el, items, groups, options);
this.timeline.on('select', this.select);
if(this.events){
this.events.$on('fit', (cmd) => {
this.timeline.fit(true)
})
}
}
}</script>

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

@ -2,7 +2,7 @@ xquery version "3.1";
(:~ data locations for image feature :)
module namespace cfg = "quodatum:media.image.configure";
declare variable $cfg:DB-IMAGE:="vue-poc";
declare variable $cfg:DB-IMAGE:="media-images";
declare variable $cfg:IMAGEDIR:="P:/pictures/Pictures/";
declare variable $cfg:THUMBDIR:="C:/tmp/";

3
src/vue-poc/features/images/pics-01-store-directory.xq
View file

@ -7,8 +7,9 @@ declare namespace c="http://www.w3.org/ns/xproc-step";
(: declare variable $DEST:="c:\tmp\pics2.xml"; :)
declare variable $DEST:="/pics.xml";
declare %updating function local:put($data,$path){
db:replace("vue-poc",$path,$data)
db:replace($cfg:DB-IMAGE,$path,$data)
};
let $opt:=map{"include-info":true()}

8
src/vue-poc/features/images/pics-02-store-meta.xq
View file

@ -6,11 +6,11 @@
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $CHUNK:=1000;
let $done:=uri-collection("vue-poc/meta")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $done:=uri-collection($cfg:DB-IMAGE || "/meta")
let $files:= doc($cfg:DB-IMAGE || "/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
@ -19,5 +19,5 @@ return (for $f in subsequence($todo,1, $CHUNK)
let $spath:=$cfg:IMAGEDIR || "../" || $f
let $dbpath:="meta/" || $f || "/meta.xml"
let $meta:=imgmeta:read($spath)
return db:replace($DB,$dbpath,$meta),
return db:replace($cfg:DB-IMAGE,$dbpath,$meta),
db:output($todo=>count()))

4
src/vue-poc/features/images/pics-03-store-image.xq
View file

@ -4,7 +4,7 @@
:)
import module namespace metadata = 'expkg-zone58:image.metadata';
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
for $meta in collection("/vue-poc/meta")/metadata
for $meta in collection($cfg:DB-IMAGE || "/meta")/metadata
let $loc:=db:path($meta)=>tokenize("/")
let $name:=$loc[count($loc)-1]
let $path:= subsequence($loc,1,count($loc)-1)=>string-join("/")
@ -15,4 +15,4 @@ for $meta in collection("/vue-poc/meta")/metadata
metadata:keywords($meta)
} </image>
let $target:="image/"|| $path || "/image.xml"
return db:replace("vue-poc",$target,$image)
return db:replace($cfg:DB-IMAGE,$target,$image)

4
src/vue-poc/features/images/pics-04-store-thumbs.xq
View file

@ -5,7 +5,7 @@
import module namespace t="expkg-zone58:image.thumbnailator";
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $CHUNK:=1000;
declare %updating function local:store-thumb($f as xs:string)
@ -30,7 +30,7 @@ declare %updating function local:write-binary($data,$url as xs:string)
)
};
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $files:= doc($cfg:DB-IMAGE || "/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $relpath:=filter($relpath,function($f){

6
src/vue-poc/features/images/pics-05-set-original.xq
View file

@ -1,4 +1,6 @@
(: set original:)
for $i in collection("/vue-poc/image")/image
(:~ set original:)
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
for $i in collection($cfg:DB-IMAGE || "/image")/image
where $i[file/@path=>contains('original')]
return insert node attribute { 'original' } { true() } into $i

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

@ -131,8 +131,9 @@
})
},
reset(){
this.getValues.clear();
this.postValues.clear();
Object.assign(this.getValues,this.getValues.clear());
Object.assign(this.postValues,this.postValues.clear());
this.$forceUpdate()
}
},
computed: {

5
src/vue-poc/features/search.vue
View file

@ -2,14 +2,15 @@
<template id="search">
<v-container fluid>
<v-text-field label="Search..." v-model="q"></v-text-field>
<v-alert warning value="true">TODO</v-alert>
</v-container>
</template>
<script>{
data: function(){
return {
message: 'Hello Vue.js!',
q:this.$route.query.q
q: this.$route.query.q,
results: []
}
},
created:function(){

76
src/vue-poc/features/settings.vue
View file

@ -3,7 +3,7 @@
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-alert warning value="true">Not fully implemented</v-alert>
<v-list two-line subheader>
<v-subheader>Ace editor settings</v-subheader>
@ -23,7 +23,7 @@
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>enableBasicAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
<v-list-tile-sub-title>Autocompletion via control-space</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
@ -33,11 +33,52 @@
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>enableLiveAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
<v-list-tile-sub-title>Autocompletion while typing</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-card-text>
<v-divider ></v-divider>
<v-container fluid>
<v-layout row>
<v-flex xs4>
<v-subheader>Theme</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
label="Theme"
v-model="ace.theme"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Key binding</v-subheader>
</v-flex>
<v-flex xs8>
<v-select
v-bind:items="keybindings"
v-model="ace.keybinding"
label="Key binding"
></v-select>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Font size</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
label="Font size (px)"
v-model="ace.fontsize"
></v-text-field>
</v-flex>
</v-layout>
<v-divider ></v-divider>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
@ -46,20 +87,27 @@
<script>{
data () {
return {
ace: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
}
}
ace: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
theme: "github",
keybinding: "Ace",
fontsize: "14px"
},
keybindings:[ 'Ace', 'Vim', 'Emacs' ]
}
},
created: function () {
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then((v)=>{
console.log("AAAA",v)
this.ace=v
next(vm => vm.ace=v)
})
},
created: function () {
},
watch: {"ace":{
handler:function(v){

48
src/vue-poc/features/timeline.vue
View file

@ -2,17 +2,21 @@
<template id="timeline">
<v-container fluid>
<v-card>
<v-card-title class="lime darken-1">Line 1</v-card-title>
<v-toolbar class="lime darken-1">
<v-card-title >Line 1</v-card-title>
<v-spacer></v-spacer>
<v-btn @click="fit">fit</v-btn>
</v-toolbar>
<v-card-text>
<vis-time-line :items="vueState.data1"></vis-time-line>
<vis-time-line :items="vueState.data1" :events="Events"
:options="{editable: true, clickToUse: true}" @select="select"></vis-time-line>
</v-card-text>
</v-card>
<v-card>
<v-card-title class="deep-orange">Line 2</v-card-title>
<v-card-text>
<vis-time-line :items="vueState.data2"></vis-time-line>
</v-card-text>
<v-card-text>
{{msg}}
</v-card-text>
</v-card>
</v-container>
</template>
@ -21,23 +25,27 @@
data(){
return {
vueState: {
data1: [
{ id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' },
{ id: 2, content: 'item 2', start: '2013-04-14' },
{ id: 3, content: 'item 3', start: '2013-04-18' },
{ id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' },
{ id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
{ id: 5, content: 'item 5', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }],
data2: [
{ id: 1, content: 'item 11', start: '2017-04-20' },
{ id: 2, content: 'item 12', start: '2017-04-14' },
{ id: 3, content: 'item 13', start: '2017-04-18' },
{ id: 4, content: 'item 14', start: '2017-04-16', end: '2017-04-19' },
{ id: 5, content: 'item 15', start: '2017-04-25' },
{ id: 6, content: 'item 16', start: '2017-04-27' }]
{ id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }]
},
Events: new Vue({}),
msg:"Item detail"
}
}
},
methods:{
fit(){
this.Events.$emit('fit');
},
select(items){
this.msg='Selected items: ' + items
}
},
created(){
console.log("timeline")
}
}</script>

12
src/vue-poc/mimetypes.xml
View file

@ -1,7 +1,10 @@
<mimetypes xmlns="urn:quodatum:vue-poc.mimetypes">
<type name="xquery">
<mime type="application/xquery" ext="xq xqm" />
</type>
<type name="css">
<mime type="css" ext="css" />
</type>
<type name="html">
<mime type="text/html" ext="htm html" />
</type>
<type name="javascript">
<mime type="text/ecmascript" ext="js" />
</type>
@ -11,4 +14,7 @@
<type name="sparql">
<mime type="application/sparql-query" ext="rq" />
</type>
<type name="xquery">
<mime type="application/xquery" ext="xq xqm" />
</type>
</mimetypes>

26
src/vue-poc/models/thumbnail.xml
View file

@ -1,29 +1,31 @@
<entity name="thumbnail" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>an image.</description>
<namespace prefix="c" uri="http://www.w3.org/ns/xproc-step"/>
<namespace prefix="c" uri="http://www.w3.org/ns/xproc-step" />
<fields>
<field name="id" type="xs:integer">
<description>Database Id.</description>
<xpath>db:node-id(.)</xpath>
</field>
<field name="id" type="xs:integer">
<description>Database Id.</description>
<xpath>db:node-id(.)</xpath>
</field>
<field name="name" type="xs:string">
<description>File name.</description>
<xpath>file/@name</xpath>
</field>
<field name="path" type="xs:string">
<description>File path. e.g. Pictures/2012/2012-06-23/skating.jpg</description>
<xpath>file/@path</xpath>
</field>
<description>File path. e.g. Pictures/2012/2012-06-23/skating.jpg
</description>
<xpath>file/@path</xpath>
</field>
<field name="size" type="xs:integer">
<description>file size.</description>
<xpath>0</xpath>
</field>
</fields>
<views>
<view name="filter">name</view>
</views>
<view name="filter">name</view>
</views>
<iconclass>fa fa-file</iconclass>
<data type="element(image)">collection($cfg:DB-IMAGE || "/image")/image</data>
</entity>

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

@ -1,4 +1,4 @@
// generated 2017-08-25T20:24:29.63+01:00
// generated 2017-08-27T11:38:03.302+01:00
Vue.component('qd-link',{template:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`,
@ -94,18 +94,26 @@
<div></div>
`,
props: ['items', 'groups', 'options'],
props: ['items', 'groups', 'options','events'],
data(){
return {timeline:Object}
},
methods:{
select(properties){
//alert('selected items: ' + properties.items);
this.$emit('select',properties.items);
}
},
mounted: function () {
var items = new vis.DataSet(this.items);
var options = this.options;
var groups = this.groups;
var timeline = new vis.Timeline(this.$el, items, groups, options);
timeline.on('select', this.select);
this.timeline = new vis.Timeline(this.$el, items, groups, options);
this.timeline.on('select', this.select);
if(this.events){
this.events.$on('fit', (cmd) => {
this.timeline.fit(true)
})
}
}
}
);
@ -1623,8 +1631,9 @@ body
})
},
reset(){
this.getValues.clear();
this.postValues.clear();
Object.assign(this.getValues,this.getValues.clear());
Object.assign(this.postValues,this.postValues.clear());
this.$forceUpdate()
}
},
computed: {
@ -1714,13 +1723,14 @@ body
const Search=Vue.extend({template:`
<v-container fluid="">
<v-text-field label="Search..." v-model="q"></v-text-field>
<v-alert warning="" value="true">TODO</v-alert>
</v-container>
`,
data: function(){
return {
message: 'Hello Vue.js!',
q:this.$route.query.q
q: this.$route.query.q,
results: []
}
},
created:function(){
@ -1878,7 +1888,7 @@ body
<v-layout row="">
<v-flex xs12="" sm6="" offset-sm3="">
<v-card>
<v-alert warning="" value="true">Not fully implemented</v-alert>
<v-list two-line="" subheader="">
<v-subheader>Ace editor settings</v-subheader>
@ -1898,7 +1908,7 @@ body
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>enableBasicAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
<v-list-tile-sub-title>Autocompletion via control-space</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
@ -1908,11 +1918,42 @@ body
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>enableLiveAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
<v-list-tile-sub-title>Autocompletion while typing</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-card-text>
<v-divider></v-divider>
<v-container fluid="">
<v-layout row="">
<v-flex xs4="">
<v-subheader>Theme</v-subheader>
</v-flex>
<v-flex xs8="">
<v-text-field label="Theme" v-model="ace.theme"></v-text-field>
</v-flex>
</v-layout>
<v-layout row="">
<v-flex xs4="">
<v-subheader>Key binding</v-subheader>
</v-flex>
<v-flex xs8="">
<v-select v-bind:items="keybindings" v-model="ace.keybinding" label="Key binding"></v-select>
</v-flex>
</v-layout>
<v-layout row="">
<v-flex xs4="">
<v-subheader>Font size</v-subheader>
</v-flex>
<v-flex xs8="">
<v-text-field label="Font size (px)" v-model="ace.fontsize"></v-text-field>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
@ -1920,20 +1961,27 @@ body
data () {
return {
ace: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
}
}
ace: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
theme: "github",
keybinding: "Ace",
fontsize: "14px"
},
keybindings:[ 'Ace', 'Vim', 'Emacs' ]
}
},
created: function () {
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then((v)=>{
console.log("AAAA",v)
this.ace=v
next(vm => vm.ace=v)
})
},
created: function () {
},
watch: {"ace":{
handler:function(v){
@ -2308,17 +2356,20 @@ body
const Timeline=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-card-title class="lime darken-1">Line 1</v-card-title>
<v-toolbar class="lime darken-1">
<v-card-title>Line 1</v-card-title>
<v-spacer></v-spacer>
<v-btn @click="fit">fit</v-btn>
</v-toolbar>
<v-card-text>
<vis-time-line :items="vueState.data1"></vis-time-line>
<vis-time-line :items="vueState.data1" :events="Events" :options="{editable: true, clickToUse: true}" @select="select"></vis-time-line>
</v-card-text>
</v-card>
<v-card>
<v-card-title class="deep-orange">Line 2</v-card-title>
<v-card-text>
<vis-time-line :items="vueState.data2"></vis-time-line>
</v-card-text>
<v-card-text>
{{msg}}
</v-card-text>
</v-card>
</v-container>
`,
@ -2326,24 +2377,28 @@ body
data(){
return {
vueState: {
data1: [
{ id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' },
{ id: 2, content: 'item 2', start: '2013-04-14' },
{ id: 3, content: 'item 3', start: '2013-04-18' },
{ id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' },
{ id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
{ id: 5, content: 'item 5', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }],
data2: [
{ id: 1, content: 'item 11', start: '2017-04-20' },
{ id: 2, content: 'item 12', start: '2017-04-14' },
{ id: 3, content: 'item 13', start: '2017-04-18' },
{ id: 4, content: 'item 14', start: '2017-04-16', end: '2017-04-19' },
{ id: 5, content: 'item 15', start: '2017-04-25' },
{ id: 6, content: 'item 16', start: '2017-04-27' }]
{ id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }]
},
Events: new Vue({}),
msg:"Item detail"
}
}
},
methods:{
fit(){
this.Events.$emit('fit');
},
select(items){
this.msg='Selected items: ' + items
}
},
created(){
console.log("timeline")
}
}
);

5
src/vue-poc/static/perf-stat.js
View file

@ -1,7 +1,7 @@
// performance monitoring. of value stream
// stores max min etc
function perfStat() {
this.data={count:0,max:null,min:null,total:0,median:0,last:null};
this.data={count:0,max:null,min:null,total:0,median:0,last:null,avg:null};
// add a value return updated stats
this.log=function(val){
var data=this.data
@ -28,7 +28,8 @@ function perfStat() {
};
// clear stats
this.clear=function(){
this.data={count:0,max:null,min:null,total:0};
this.data={count:0,max:null,min:null,total:0,median:0,last:null,avg:null};
return this.data
};
// return values
this.values=function(){