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

vuetify 0.16.4

Browse source
This commit is contained in:
Andy Bunce 2017-10-09 10:27:33 +01:00
parent cae80cde19
commit e8d00c7d19
34 changed files with 834 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/vue-poc/components/qd-confirm.vue
View file

@ -3,24 +3,24 @@
ok cancel dialog
-->
<template id="qd-confirm">
<v-dialog v-model="showDialog" >
<v-dialog v-model="value" >
<v-card >
<v-toolbar class="lime darken-1">
<v-toolbar class="orange darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-text>
<slot>Test message</slot>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-on:click="$emit('cancel')">Cancel</v-btn>
<v-btn v-on:click="$emit('ok')">Ok</v-btn>
<v-btn v-on:click="$emit('confirm',false)">Cancel</v-btn>
<v-btn v-on:click="$emit('confirm',true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>{
data(){
return {showDialog:false}
},
props: ['value']
}
</script>

6
src/vue-poc/components/vue-ace.vue
View file

@ -45,7 +45,7 @@ ace editor for vue.js
var session=this.editor.getSession()
session.setUseWrapMode(value)
},
'settings' (value) {
'setting' (value) {
console.log("--settings--",value)
this.applySettings(value)
}
@ -69,7 +69,7 @@ ace editor for vue.js
},
applySettings(aceSettings){
console.log("apply: ",aceSettings)
console.log("apply: ",aceSettings.theme)
this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
@ -122,7 +122,7 @@ ace editor for vue.js
}
}
//console.log(this.annots)
this.$emit('annotation',this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0})
});
if(this.events){
this.events.$on('eventFired', (cmd) => {

15
src/vue-poc/core.js
View file

@ -83,7 +83,22 @@ var settings = {
}
};
// error help
// https://stackoverflow.com/questions/18391212/is-it-not-possible-to-stringify-an-error-using-json-stringify/18391400#18391400
if (!('toJSON' in Error.prototype))
Object.defineProperty(Error.prototype, 'toJSON', {
value: function () {
var alt = {};
Object.getOwnPropertyNames(this).forEach(function (key) {
alt[key] = this[key];
}, this);
return alt;
},
configurable: true,
writable: true
});
//Returns a function, that, as long as it continues to be invoked, will not
//be triggered. The function will be called after it stops being called for

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

@ -2,9 +2,9 @@
<template id="log">
<v-container fluid>
<v-card >
<v-toolbar light>
<v-toolbar >
<v-btn
light icon
icon
:loading="loading"
@click="getItems()"
:disabled="loading"

21
src/vue-poc/features/edit/edit.vue
View file

@ -11,7 +11,7 @@
<v-tooltip top >
<v-menu slot="activator">
<v-btn primary icon dark slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
<v-btn color="primary" icon slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
<v-list>
<v-list-tile v-for="item in path" :key="item">
<v-list-tile-content @click="showfiles()">
@ -33,8 +33,7 @@
<span>Changed?</span>
</v-tooltip>
<v-tooltip top>
<v-menu left transition="v-fade-transition" slot="activator">
<v-menu left transition="v-fade-transition" >
<v-chip label small slot="activator" >{{ mode }}</v-chip>
<v-list dense>
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
@ -42,8 +41,6 @@
</v-list-tile>
</v-list>
</v-menu>
<span v-text="mimetype"></span>
</v-tooltip>
<v-tooltip top>
<v-chip @click="acecmd('goToNextError')" slot="activator" >
@ -127,19 +124,7 @@ v-on:annotation="annotation"></vue-ace>
</v-flex>
</v-card-text>
</v-card>
<v-dialog v-model="clearDialog" >
<v-card >
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="reset(false)">Cancel</v-btn>
<v-btn @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<qd-confirm v-model="clearDialog" @confirm="reset">Delete all edit text?</qd-confirm>
</v-container>
</template>

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

@ -32,7 +32,7 @@
<v-icon>label</v-icon>
Namespaces</v-btn>
<v-menu offset-y>
<v-btn icon primary slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-btn icon color="primary" slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-list dense>
<v-list-tile @click="plan">Show query plan</v-list-tile>
</v-list>

2
src/vue-poc/features/images/dates.vue
View file

@ -22,7 +22,7 @@
:key="year.year">
<v-flex v-text="year.year"></v-flex>
<v-flex v-for="(m,i) in year.months"
:key="i"><v-btn icon primary :disabled="0==m" @click="go(year.year,i)">{{m}}</v-btn></v-flex>
:key="i"><v-btn icon color="primary" :disabled="0==m" @click="go(year.year,i)">{{m}}</v-btn></v-flex>
</v-layout>
</v-container>
<v-layout>

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

@ -21,10 +21,10 @@
<v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
Page:{{ query.page+1 }}
<v-btn @click.stop="pageBack()" :disabled="query.page==0" icon primary>
<v-btn @click.stop="pageBack()" :disabled="query.page==0" icon color="primary">
<v-icon>arrow_back</v-icon>
</v-btn>
<v-btn @click.stop="pageNext()" icon primary>
<v-btn @click.stop="pageNext()" icon color="primary">
<v-icon>arrow_forward</v-icon>
</v-btn>
</span>
@ -39,23 +39,31 @@
>
<v-card class="grey lighten-2 pt-1">
<v-card-media :src="src(image)" @dblclick="go(image)"
height="80px" contain></v-card-media>
<v-tooltip top>
<v-card-actions slot="activator">
height="80px" contain>
<v-layout :justify-end="true">
<v-flex>
<v-icon class="green--text">check_circle</v-icon>
</v-flex>
</v-layout>
</v-card-media>
<v-card-actions >
<span>#</span>
<v-btn icon small>
<v-icon>favorite</v-icon>
<v-icon>place</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon small>
<v-icon>bookmark</v-icon>
<v-tooltip bottom >
<v-btn icon small slot="activator">
<v-icon>info</v-icon>
</v-btn>
<span v-text="image.path"></span>
</v-tooltip>
<v-btn icon small @click="selected(image)">
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
<span v-text="image.path"></span>
</v-tooltip>
</v-card>
</v-flex>
</v-layout>
@ -84,9 +92,6 @@
</template>
</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"
@ -108,8 +113,8 @@
<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-btn flat color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
@ -138,8 +143,8 @@
<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-btn flat color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
@ -152,7 +157,7 @@
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" primary>Apply</v-btn>
<v-btn @click="showFilter = false" color="primary" >Apply</v-btn>
</v-card-actions>
</v-card>
</v-navigation-drawer>

4
src/vue-poc/features/images/keywords.vue
View file

@ -19,12 +19,12 @@
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-container v-if="!busy" fluid grid-list-md>
<v-layout row wrap v-touch="{ left: () => pageNext(), right: () => pageBack()}">
<v-flex height="80px"
<v-flex height="80px" @click="show(keyword)"
xs3
v-for="keyword in items"
:key="keyword.text"
>
<v-card class="grey lighten-2 pt-1" @click="show(keyword)">
<v-card class="grey lighten-2 pt-1" >
<v-toolbar>
<v-card-title v-text="keyword.text"></v-card-title>
<v-spacer></v-spacer>

4
src/vue-poc/features/job/job.vue
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<template id="job">
<v-card >
<v-toolbar light>
<v-toolbar >
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-toolbar-title>{{ job }}</v-toolbar-title>
@ -20,7 +20,7 @@
<v-chip class="green white--text">
<v-avatar ><v-icon>timer</v-icon></v-avatar>
{{ jobstate.duration }}</v-chip>
<v-btn light icon :loading="loading" @click="getJob()" :disabled="loading || finished">
<v-btn icon :loading="loading" @click="getJob()" :disabled="loading || finished">
<v-icon>refresh</v-icon>
</v-btn>
</v-toolbar>

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<template id="jobs">
<v-card >
<v-toolbar light>
<v-toolbar >
<v-btn
@ -18,7 +18,7 @@
<v-spacer></v-spacer>
<v-btn
light icon
icon
:loading="loading"
@click="getJobs()"
@dblclick="autorefresh = !autorefresh"

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

@ -33,7 +33,7 @@
<v-divider></v-divider>
<v-card-actions class="blue-grey darken-1 mt-0">
<v-btn primary @click="go()">Continue</v-btn>
<v-btn color="primary" @click="go()">Continue</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>

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

@ -2,7 +2,7 @@
<template id="ping">
<v-container fluid>
<v-card>
<v-toolbar light>
<v-toolbar >
<v-toolbar-title>Simple performance measure</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="reset()">Reset</v-btn>

58
src/vue-poc/features/repository.vue
View file

@ -1,14 +1,67 @@
<!DOCTYPE html>
<template id="repo">
<v-container fluid>
repository todo
<v-card >
<v-toolbar >
<v-text-field
append-icon="search"
label="Filter repo"
single-line
hide-details
v-model="search"
></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
<v-data-table
:headers="headers"
:items="items"
:search="search"
v-model="selected"
select-all
class="elevation-1"
no-data-text="No repo found @todo"
>
<template slot="items" scope="props">
<td class="vtop">
<v-checkbox
primary
hide-details
v-model="props.selected"
></v-checkbox>
</td>
<td class="vtop">{{ props.item.name }}</td>
<td class="vtop "><div>{{ props.item.permission }}</div>
</template>
</v-data-table>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
message: 'bad route!'
loading: false,
items: [],
search: null,
selected: [],
headers: [
{
text: 'Name',
left: true,
value: 'id'
},
{ text: 'Permission', value: 'state' }
]
}
},
methods:{
getUsers(){
this.loading=true;
HTTP.get("repo")
.then(r=>{
this.loading=false
this.items=r.data
})
}
},
created:function(){
@ -16,3 +69,4 @@ repository todo
}
}
</script>

26
src/vue-poc/features/settings/acesettings.vue
View file

@ -9,10 +9,10 @@
<v-container fluid>
<v-layout row>
<v-flex xs4>
<v-subheader>Theme</v-subheader>
</v-flex>
<v-flex xs8>
<v-flex xs6 class="pa-3">
<v-layout row >
<v-flex >
<v-select
v-bind:items="themes"
v-model="ace.theme"
@ -20,11 +20,10 @@
></v-select>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Key binding</v-subheader>
</v-flex>
<v-flex xs8>
<v-flex >
<v-select
v-bind:items="keybindings"
v-model="ace.keybinding"
@ -34,16 +33,19 @@
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Font size</v-subheader>
</v-flex>
<v-flex xs8>
<v-flex >
<v-text-field
label="Font size (px)"
v-model="ace.fontsize"
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs6 style="height:30vh" class="grey pa-3" fill-height>
<vue-ace mode="xquery" content="test" :settings="ace"></vue-ace>
</v-flex>
</v-layout>
<v-divider ></v-divider>

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

@ -41,7 +41,7 @@
if(confirm("wipe localstorage? "+this.keys.length)) settings.clear();
},
theme(){
this.$emit("theme",this.dark)
this.$root.$emit("theme",this.dark)
}
},
created(){

18
src/vue-poc/features/svg.vue Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<template id="svg">
<v-container fluid>
svg
</v-container>
</template>
<script>{
data: function(){
return {
message: 'bad route!'
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
</script>

2
src/vue-poc/features/tasks/model.build/model.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">Generate <code>model.gen.xqm</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click="submit()" :loading="waiting"
<v-btn color="primary" @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>

2
src/vue-poc/features/tasks/vue-compile/vuecompile.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">compile</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click="submit()" :loading="waiting"
<v-btn color="primary" @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>

2
src/vue-poc/features/tasks/xqdoc/xqdoc.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">Task: Generate <code>xqdoc</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click="submit()" :loading="waiting"
<v-btn color="primary" @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>

8
src/vue-poc/features/thumbnail/thumbnail.vue
View file

@ -20,7 +20,7 @@
required
></v-text-field>
</v-card>
<v-btn primary @click="step = 2">Next</v-btn>
<v-btn color="primary" @click="step = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2" non-linear>
@ -31,8 +31,8 @@
</v-card>
<v-btn flat @click="step -= 1">Back</v-btn>
<v-btn primary @click="validate()">Validate</v-btn>
<v-btn primary @click="step = 3">Next</v-btn>
<v-btn color="primary" @click="validate()">Validate</v-btn>
<v-btn color="primary" @click="step = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3" non-linear>
@ -41,7 +41,7 @@
</v-card>
<v-btn flat @click="step -= 1">Back</v-btn>
<v-btn primary @click="go()">go</v-btn>
<v-btn color="primary" @click="go()">go</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>

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

@ -9,7 +9,7 @@
</v-toolbar>
<v-card-text>
<vis-time-line :items="vueState.data1" :events="Events"
:options="{editable: true, clickToUse: false" @select="select"></vis-time-line>
:options="{editable: true, clickToUse: false}" @select="select"></vis-time-line>
</v-card-text>
</v-card>

57
src/vue-poc/features/users.vue
View file

@ -1,14 +1,67 @@
<!DOCTYPE html>
<template id="users">
<v-container fluid>
users todo
<v-card >
<v-toolbar >
<v-text-field
append-icon="search"
label="Filter user"
single-line
hide-details
v-model="search"
></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
<v-data-table
:headers="headers"
:items="items"
:search="search"
v-model="selected"
select-all
class="elevation-1"
no-data-text="No users found @todo"
>
<template slot="items" scope="props">
<td class="vtop">
<v-checkbox
primary
hide-details
v-model="props.selected"
></v-checkbox>
</td>
<td class="vtop">{{ props.item.name }}</td>
<td class="vtop "><div>{{ props.item.permission }}</div>
</template>
</v-data-table>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
message: 'bad route!'
loading: false,
items: [],
search: null,
selected: [],
headers: [
{
text: 'Name',
left: true,
value: 'id'
},
{ text: 'Permission', value: 'state' }
]
}
},
methods:{
getUsers(){
this.loading=true;
HTTP.get("user")
.then(r=>{
this.loading=false
this.items=r.data
})
}
},
created:function(){

39
src/vue-poc/features/validate/rq-validate.xqm Normal file
View file

@ -0,0 +1,39 @@
(:~
: XSLT transform handler
: @author andy bunce
: @since oct 2017
:)
module namespace tx = 'quodatum:vue.api.transform';
(:~
: xslt
:)
declare
%rest:POST %rest:path("/vue-poc/api/xslt")
%rest:query-param("xml", "{$xml}")
%rest:query-param("xslt", "{$xslt}")
%output:method("json")
%updating
function tx:xslt($xml,$xslt) {
let $result:=try{
let $x:=fn:parse-xml($xml)
let $s:=fn:parse-xml($xslt)
let $t:=fn:trace($xml,"xml")
let $t:=fn:trace($xslt,"xml")
let $r:=xslt:transform($x,$s)
return
<json objects="json">
<rc>0</rc>
<result>{fn:serialize($r)}</result>
</json>
}
catch *{
<json objects="json">
<rc>1</rc>
<info>{$err:description}</info>
</json>
}
return db:output($result)
};

18
src/vue-poc/features/validate/validate.vue Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<template id="validate">
<v-container fluid>
validate
</v-container>
</template>
<script>{
data: function(){
return {
message: 'bad route!'
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
</script>

39
src/vue-poc/features/xslt/rq-xslt.xqm Normal file
View file

@ -0,0 +1,39 @@
(:~
: validation handler
: @author andy bunce
: @since oct 2017
:)
module namespace tx = 'quodatum:vue.api.validate';
(:~
: validate
:)
declare
%rest:POST %rest:path("/vue-poc/api/validate")
%rest:query-param("xml", "{$xml}")
%rest:query-param("schema", "{$schema}")
%output:method("json")
%updating
function tx:validate($xml,$schema) {
let $xslt:="fixme"
let $result:=try{
let $x:=fn:parse-xml($xml)
let $s:=fn:parse-xml($xslt)
let $t:=fn:trace($xml,"xml")
let $t:=fn:trace($xslt,"xml")
let $r:=xslt:transform($x,$s)
return
<json objects="json">
<rc>0</rc>
<result>{fn:serialize($r)}</result>
</json>
}
catch *{
<json objects="json">
<rc>1</rc>
<info>{$err:description}</info>
</json>
}
return db:output($result)
};

107
src/vue-poc/features/xslt/transform.vue Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html>
<template id="transform">
<v-container fluid>
<v-card>
<v-toolbar >
<v-btn @click="transform" :loading="loading"
:disabled="loading"
><v-icon>play_circle_outline</v-icon>Run</v-btn>
<v-spacer></v-spacer>
<v-btn-toggle v-model="showOptions" multiple>
<v-icon>visibility</v-icon>
<v-btn flat value="result" >
<span :class="resultValid?'':'red'">Result</span>
</v-btn>
<v-btn flat value="xml">
<span :class="xmlValid?'':'red'">XML</span>
</v-btn>
<v-btn flat value="xslt">
<span :class="xslValid?'':'red'">XSLT</span>
</v-btn>
</v-btn-toggle>
<v-btn icon><v-icon>settings</v-icon></v-btn>
</v-toolbar>
<v-card-text >
<v-card-text v-if="showOptions.includes('result')">
<v-layout style="height:200px" fill-height >
<v-flex >
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
</v-flex>
</v-layout>
</v-card-text>
<v-layout style="height:200px" fill-height >
<v-flex v-if="showOptions.includes('xml')" class="pa-1">
<vue-ace :content="xml" mode="xml" wrap="true"
v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 && a.warning===0"
:settings="aceSettings"></vue-ace>
</v-flex>
<v-flex v-if="showOptions.includes('xslt')" class="pa-1">
<vue-ace :content="xslt" mode="xml" wrap="true"
v-on:change-content="v => this.xslt=v" v-on:annotation="a => this.xslValid=a.error===0 && a.warning===0"
:settings="aceSettings"></vue-ace>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
xml:"<foo />",
xmlValid: true,
xslt:'<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n</xsl:stylesheet>',
xslValid: true,
aceSettings: {},
result: "(result here)",
resultValid: true,
showOptions: ["xml","xslt"],
loading: false
}
},
methods:{
transform(){
localforage.setItem('transform/xml', this.xml)
localforage.setItem('transform/xslt', this.xslt)
if(!this.showOptions.includes("result"))this.showOptions.push("result")
this.loading=true
this.resultValid=true
HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
.then(r=>{
console.log(r)
this.loading=false
if(r.data.rc==0){
this.result=r.data.result
}else{
this.result=r.data.info
this.resultValid=false
}
})
.catch(r=> {
console.log("error",r)
this.result=r.response.data.info
this.loading=false
});
}
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{
next(vm => {
console.log('eval settings: ',v);
vm.aceSettings = v;
})})
},
created:function(){
console.log("transform")
localforage.getItem('transform/xml').then((value) => { this.xml=value || this.xml});
localforage.getItem('transform/xslt').then((value) => { this.xslt=value || this.xslt});
}
}
</script>

3
src/vue-poc/router.js
View file

@ -28,6 +28,9 @@ const router = new VueRouter({
{ path: '/acesettings', component: Acesettings, meta:{title:"Editor settings"} },
{ path: '/history', component: History, meta:{title:"File History"} },
{ path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
{ path: '/svg', component: Svg, meta:{title:"SVG"} },
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
{ path: '/validate', component: Validate, meta:{title:"Validate"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/logs', component: Log, meta:{title:"Server logs"} },
{ path: '/tasks', component: Task, meta:{title:"Runnable tasks"} },

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

@ -1,23 +1,23 @@
// generated 2017-10-06T15:15:26.236+01:00
// generated 2017-10-09T10:18:05.74+01:00
Vue.component('qd-confirm',{template:`
<v-dialog v-model="showDialog">
<v-dialog v-model="value">
<v-card>
<v-toolbar class="lime darken-1">
<v-toolbar class="orange darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-text>
<slot>Test message</slot>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-on:click="$emit('cancel')">Cancel</v-btn>
<v-btn v-on:click="$emit('ok')">Ok</v-btn>
<v-btn v-on:click="$emit('confirm',false)">Cancel</v-btn>
<v-btn v-on:click="$emit('confirm',true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
`,
data(){
return {showDialog:false}
},
props: ['value']
}
);
@ -203,7 +203,7 @@
var session=this.editor.getSession()
session.setUseWrapMode(value)
},
'settings' (value) {
'setting' (value) {
console.log("--settings--",value)
this.applySettings(value)
}
@ -227,7 +227,7 @@
},
applySettings(aceSettings){
console.log("apply: ",aceSettings)
console.log("apply: ",aceSettings.theme)
this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
@ -280,7 +280,7 @@
}
}
//console.log(this.annots)
this.$emit('annotation',this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0})
});
if(this.events){
this.events.$on('eventFired', (cmd) => {
@ -760,7 +760,7 @@ Vue.filter('round', function(value, decimals) {
<v-tooltip top="">
<v-menu slot="activator">
<v-btn primary="" icon="" dark="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
<v-btn color="primary" icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
<v-list>
<v-list-tile v-for="item in path" :key="item">
<v-list-tile-content @click="showfiles()">
@ -782,8 +782,7 @@ Vue.filter('round', function(value, decimals) {
<span>Changed?</span>
</v-tooltip>
<v-tooltip top="">
<v-menu left="" transition="v-fade-transition" slot="activator">
<v-menu left="" transition="v-fade-transition">
<v-chip label="" small="" slot="activator">{{ mode }}</v-chip>
<v-list dense="">
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
@ -791,8 +790,6 @@ Vue.filter('round', function(value, decimals) {
</v-list-tile>
</v-list>
</v-menu>
<span v-text="mimetype"></span>
</v-tooltip>
<v-tooltip top="">
<v-chip @click="acecmd('goToNextError')" slot="activator">
@ -873,19 +870,7 @@ Vue.filter('round', function(value, decimals) {
</v-flex>
</v-card-text>
</v-card>
<v-dialog v-model="clearDialog">
<v-card>
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="reset(false)">Cancel</v-btn>
<v-btn @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<qd-confirm v-model="clearDialog" @confirm="reset">Delete all edit text?</qd-confirm>
</v-container>
`,
@ -1082,7 +1067,7 @@ Vue.filter('round', function(value, decimals) {
<v-icon>label</v-icon>
Namespaces</v-btn>
<v-menu offset-y="">
<v-btn icon="" primary="" slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-btn icon="" color="primary" slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-list dense="">
<v-list-tile @click="plan">Show query plan</v-list-tile>
</v-list>
@ -1333,7 +1318,7 @@ Vue.filter('round', function(value, decimals) {
<v-container v-if="!busy" fluid="">
<v-layout v-for="year in items" :key="year.year">
<v-flex v-text="year.year"></v-flex>
<v-flex v-for="(m,i) in year.months" :key="i"><v-btn icon="" primary="" :disabled="0==m" @click="go(year.year,i)">{{m}}</v-btn></v-flex>
<v-flex v-for="(m,i) in year.months" :key="i"><v-btn icon="" color="primary" :disabled="0==m" @click="go(year.year,i)">{{m}}</v-btn></v-flex>
</v-layout>
</v-container>
<v-layout>
@ -1450,10 +1435,10 @@ Vue.filter('round', function(value, decimals) {
<v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
Page:{{ query.page+1 }}
<v-btn @click.stop="pageBack()" :disabled="query.page==0" icon="" primary="">
<v-btn @click.stop="pageBack()" :disabled="query.page==0" icon="" color="primary">
<v-icon>arrow_back</v-icon>
</v-btn>
<v-btn @click.stop="pageNext()" icon="" primary="">
<v-btn @click.stop="pageNext()" icon="" color="primary">
<v-icon>arrow_forward</v-icon>
</v-btn>
</span>
@ -1463,23 +1448,31 @@ Vue.filter('round', function(value, decimals) {
<v-layout row="" wrap="" v-touch="{ left: () => pageNext(), right: () => pageBack()}">
<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)" @dblclick="go(image)" height="80px" contain=""></v-card-media>
<v-tooltip top="">
<v-card-actions slot="activator">
<v-card-media :src="src(image)" @dblclick="go(image)" height="80px" contain="">
<v-layout :justify-end="true">
<v-flex>
<v-icon class="green--text">check_circle</v-icon>
</v-flex>
</v-layout>
</v-card-media>
<v-card-actions>
<span>#</span>
<v-btn icon="" small="">
<v-icon>favorite</v-icon>
<v-icon>place</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon="" small="">
<v-icon>bookmark</v-icon>
<v-tooltip bottom="">
<v-btn icon="" small="" slot="activator">
<v-icon>info</v-icon>
</v-btn>
<span v-text="image.path"></span>
</v-tooltip>
<v-btn icon="" small="" @click="selected(image)">
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
<span v-text="image.path"></span>
</v-tooltip>
</v-card>
</v-flex>
</v-layout>
@ -1503,17 +1496,14 @@ Vue.filter('round', function(value, decimals) {
</template>
</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-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat="" color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
@ -1527,8 +1517,8 @@ Vue.filter('round', function(value, decimals) {
<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-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat="" color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
@ -1541,7 +1531,7 @@ Vue.filter('round', function(value, decimals) {
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" primary="">Apply</v-btn>
<v-btn @click="showFilter = false" color="primary">Apply</v-btn>
</v-card-actions>
</v-card>
</v-navigation-drawer>
@ -1710,8 +1700,8 @@ body
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-container v-if="!busy" fluid="" grid-list-md="">
<v-layout row="" wrap="" v-touch="{ left: () => pageNext(), right: () => pageBack()}">
<v-flex height="80px" xs3="" v-for="keyword in items" :key="keyword.text">
<v-card class="grey lighten-2 pt-1" @click="show(keyword)">
<v-flex height="80px" @click="show(keyword)" xs3="" v-for="keyword in items" :key="keyword.text">
<v-card class="grey lighten-2 pt-1">
<v-toolbar>
<v-card-title v-text="keyword.text"></v-card-title>
<v-spacer></v-spacer>
@ -1960,7 +1950,7 @@ people
<v-divider></v-divider>
<v-card-actions class="blue-grey darken-1 mt-0">
<v-btn primary="" @click="go()">Continue</v-btn>
<v-btn color="primary" @click="go()">Continue</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
@ -2268,13 +2258,48 @@ people
);
const Repo=Vue.extend({template:`
<v-container fluid="">
repository todo
<v-card>
<v-toolbar light="">
<v-text-field append-icon="search" label="Filter repo" single-line="" hide-details="" v-model="search"></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
<v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No repo found @todo">
<template slot="items" scope="props">
<td class="vtop">
<v-checkbox primary="" hide-details="" v-model="props.selected"></v-checkbox>
</td>
<td class="vtop">{{ props.item.name }}</td>
<td class="vtop "><div>{{ props.item.permission }}</div>
</td></template>
</v-data-table>
</v-card>
</v-container>
`,
data: function(){
return {
message: 'bad route!'
loading: false,
items: [],
search: null,
selected: [],
headers: [
{
text: 'Name',
left: true,
value: 'id'
},
{ text: 'Permission', value: 'state' }
]
}
},
methods:{
getUsers(){
this.loading=true;
HTTP.get("repo")
.then(r=>{
this.loading=false
this.items=r.data
})
}
},
created:function(){
@ -2509,30 +2534,32 @@ repository todo
<v-container fluid="">
<v-layout row="">
<v-flex xs4="">
<v-subheader>Theme</v-subheader>
</v-flex>
<v-flex xs8="">
<v-flex xs6="" class="pa-3">
<v-layout row="">
<v-flex>
<v-select v-bind:items="themes" v-model="ace.theme" label="Theme"></v-select>
</v-flex>
</v-layout>
<v-layout row="">
<v-flex xs4="">
<v-subheader>Key binding</v-subheader>
</v-flex>
<v-flex xs8="">
<v-flex>
<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-flex>
<v-text-field label="Font size (px)" v-model="ace.fontsize"></v-text-field>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs6="" style="height:30vh" class="grey pa-3" fill-height="">
<vue-ace mode="xquery" content="test" :settings="ace"></vue-ace>
</v-flex>
</v-layout>
<v-divider></v-divider>
@ -2665,7 +2692,7 @@ repository todo
if(confirm("wipe localstorage? "+this.keys.length)) settings.clear();
},
theme(){
this.$emit("theme",this.dark)
this.$root.$emit("theme",this.dark)
}
},
created(){
@ -2678,6 +2705,23 @@ repository todo
}
}
);
const Svg=Vue.extend({template:`
<v-container fluid="">
svg
</v-container>
`,
data: function(){
return {
message: 'bad route!'
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
);
const Tabs=Vue.extend({template:`
<v-tabs scroll-bars="">
@ -2736,7 +2780,7 @@ repository todo
<span class="white--text">Generate <code>model.gen.xqm</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-btn color="primary" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -2844,7 +2888,7 @@ repository todo
<span class="white--text">compile</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-btn color="primary" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -2919,7 +2963,7 @@ repository todo
<span class="white--text">Task: Generate <code>xqdoc</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-btn color="primary" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -3009,7 +3053,7 @@ repository todo
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
<v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required=""></v-text-field>
</v-card>
<v-btn primary="" @click="step = 2">Next</v-btn>
<v-btn color="primary" @click="step = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2" non-linear="">
@ -3018,8 +3062,8 @@ repository todo
</v-card>
<v-btn flat="" @click="step -= 1">Back</v-btn>
<v-btn primary="" @click="validate()">Validate</v-btn>
<v-btn primary="" @click="step = 3">Next</v-btn>
<v-btn color="primary" @click="validate()">Validate</v-btn>
<v-btn color="primary" @click="step = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3" non-linear="">
@ -3028,7 +3072,7 @@ repository todo
</v-card>
<v-btn flat="" @click="step -= 1">Back</v-btn>
<v-btn primary="" @click="go()">go</v-btn>
<v-btn color="primary" @click="go()">go</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
@ -3073,7 +3117,7 @@ repository todo
<v-btn @click="fit">fit</v-btn>
</v-toolbar>
<v-card-text>
<vis-time-line :items="vueState.data1" :events="Events" :options="{editable: true, clickToUse: true}" @select="select"></vis-time-line>
<vis-time-line :items="vueState.data1" :events="Events" :options="{editable: true, clickToUse: false}" @select="select"></vis-time-line>
</v-card-text>
</v-card>
@ -3115,7 +3159,59 @@ created(){
);
const Users=Vue.extend({template:`
<v-container fluid="">
users todo
<v-card>
<v-toolbar light="">
<v-text-field append-icon="search" label="Filter user" single-line="" hide-details="" v-model="search"></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
<v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No users found @todo">
<template slot="items" scope="props">
<td class="vtop">
<v-checkbox primary="" hide-details="" v-model="props.selected"></v-checkbox>
</td>
<td class="vtop">{{ props.item.name }}</td>
<td class="vtop "><div>{{ props.item.permission }}</div>
</td></template>
</v-data-table>
</v-card>
</v-container>
`,
data: function(){
return {
loading: false,
items: [],
search: null,
selected: [],
headers: [
{
text: 'Name',
left: true,
value: 'id'
},
{ text: 'Permission', value: 'state' }
]
}
},
methods:{
getUsers(){
this.loading=true;
HTTP.get("user")
.then(r=>{
this.loading=false
this.items=r.data
})
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
);
const Validate=Vue.extend({template:`
<v-container fluid="">
validate
</v-container>
`,
@ -3129,6 +3225,106 @@ users todo
}
}
);
const Transform=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-toolbar>
<v-btn @click="transform" :loading="loading" :disabled="loading"><v-icon>play_circle_outline</v-icon>Run</v-btn>
<v-spacer></v-spacer>
<v-btn-toggle v-model="showOptions" multiple="">
<v-icon>visibility</v-icon>
<v-btn flat="" value="result">
<span :class="resultValid?'':'red'">Result</span>
</v-btn>
<v-btn flat="" value="xml">
<span :class="xmlValid?'':'red'">XML</span>
</v-btn>
<v-btn flat="" value="xslt">
<span :class="xslValid?'':'red'">XSLT</span>
</v-btn>
</v-btn-toggle>
<v-btn icon=""><v-icon>settings</v-icon></v-btn>
</v-toolbar>
<v-card-text>
<v-card-text v-if="showOptions.includes('result')">
<v-layout style="height:200px" fill-height="">
<v-flex>
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
</v-flex>
</v-layout>
</v-card-text>
<v-layout style="height:200px" fill-height="">
<v-flex v-if="showOptions.includes('xml')" class="pa-1">
<vue-ace :content="xml" mode="xml" wrap="true" v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 &amp;&amp; a.warning===0" :settings="aceSettings"></vue-ace>
</v-flex>
<v-flex v-if="showOptions.includes('xslt')" class="pa-1">
<vue-ace :content="xslt" mode="xml" wrap="true" v-on:change-content="v => this.xslt=v" v-on:annotation="a => this.xslValid=a.error===0 &amp;&amp; a.warning===0" :settings="aceSettings"></vue-ace>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-container>
`,
data: function(){
return {
xml:"<foo />",
xmlValid: true,
xslt:'<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n</xsl:stylesheet>',
xslValid: true,
aceSettings: {},
result: "(result here)",
resultValid: true,
showOptions: ["xml","xslt"],
loading: false
}
},
methods:{
transform(){
localforage.setItem('transform/xml', this.xml)
localforage.setItem('transform/xslt', this.xslt)
if(!this.showOptions.includes("result"))this.showOptions.push("result")
this.loading=true
this.resultValid=true
HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
.then(r=>{
console.log(r)
this.loading=false
if(r.data.rc==0){
this.result=r.data.result
}else{
this.result=r.data.info
this.resultValid=false
}
})
.catch(r=> {
console.log("error",r)
this.result=r.response.data.info
this.loading=false
});
}
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{
next(vm => {
console.log('eval settings: ',v);
vm.aceSettings = v;
})})
},
created:function(){
console.log("transform")
localforage.getItem('transform/xml').then((value) => { this.xml=value || this.xml});
localforage.getItem('transform/xslt').then((value) => { this.xslt=value || this.xslt});
}
}
);
const router = new VueRouter({
base:"/vue-poc/ui/",
@ -3160,6 +3356,9 @@ users todo
{ path: '/acesettings', component: Acesettings, meta:{title:"Editor settings"} },
{ path: '/history', component: History, meta:{title:"File History"} },
{ path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
{ path: '/svg', component: Svg, meta:{title:"SVG"} },
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
{ path: '/validate', component: Validate, meta:{title:"Validate"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/logs', component: Log, meta:{title:"Server logs"} },
{ path: '/tasks', component: Task, meta:{title:"Runnable tasks"} },
@ -3194,8 +3393,20 @@ router.beforeEach((to, from, next) => {
next() // make sure to always call next()!
}
});const Vuepoc=Vue.extend({template:`
<v-app id="app" :dark="dark" @theme="onDark">
<v-navigation-drawer persistent="" app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" class="grey lighten-4 pb-0">
<v-app id="app" :dark="dark">
<v-navigation-drawer persistent="" v-model="drawerRight" right="" clipped="" :disable-route-watcher="true" app="">
<v-card>
<v-toolbar class="teal white--text">
<v-toolbar-title>Notifications</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="drawerRight = false" icon=""><v-icon>close</v-icon></v-btn>
</v-toolbar>
<v-card-text>
TODO
</v-card-text>
</v-card>
</v-navigation-drawer>
<v-navigation-drawer persistent="" app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true">
<v-list class="pa-0">
<v-list-tile avatar="" tag="div">
@ -3267,6 +3478,7 @@ router.beforeEach((to, from, next) => {
q: "",
status: {},
drawer: true,
drawerRight: false,
mini: false,
dark: false,
alert: {show:false,msg:"Hello"},
@ -3288,6 +3500,8 @@ router.beforeEach((to, from, next) => {
children: [
{href: '/eval',text: 'Query',icon: 'play_circle_outline'},
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/validate',text: 'Validate',icon: 'playlist_add_check'},
{href: '/transform',text: 'XSLT Transform',icon: 'input'},
{href: '/tasks',text: 'Tasks',icon: 'history'}
]},
{
@ -3297,6 +3511,7 @@ router.beforeEach((to, from, next) => {
children: [
{href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
{href: '/logs',text: 'Server logs',icon: 'dns'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/server/users',text: 'Users',icon: 'supervisor_account'},
{href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
{href: '/ping',text: 'Ping',icon: 'update'}
@ -3322,8 +3537,8 @@ router.beforeEach((to, from, next) => {
{href: '/session',text: 'Session',icon: 'person'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'}
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
]},
{href: '/settings',text: 'Settings',icon: 'settings' },
@ -3349,13 +3564,12 @@ router.beforeEach((to, from, next) => {
},
onDark(dark){
this.dark=dark
alert("theme")
},
favorite(){
alert("@TODO")
},
notifications(){
alert("@TODO")
this.drawerRight=true
}
},
@ -3363,12 +3577,14 @@ router.beforeEach((to, from, next) => {
console.log("create-----------")
var that=this
this.$on("theme",this.onDark)
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
console.error(err, vm, info);
that.showAlert("vue error:\n"+err)
alert("vue error");
var msg=JSON.stringify(err)
that.showAlert("vue error:\n"+msg)
//alert("vue error");
};
// Add a response interceptor
@ -3483,7 +3699,22 @@ var settings = {
}
};
// error help
// https://stackoverflow.com/questions/18391212/is-it-not-possible-to-stringify-an-error-using-json-stringify/18391400#18391400
if (!('toJSON' in Error.prototype))
Object.defineProperty(Error.prototype, 'toJSON', {
value: function () {
var alt = {};
Object.getOwnPropertyNames(this).forEach(function (key) {
alt[key] = this[key];
}, this);
return alt;
},
configurable: true,
writable: true
});
//Returns a function, that, as long as it continues to be invoked, will not
//be triggered. The function will be called after it stops being called for

8
src/vue-poc/static/app.css
View file

@ -1,5 +1,11 @@
/* app.css */
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* http://tobiasahlin.com/spinkit/ */
.spinner {
margin: 100px auto;

6
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.16.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vuetify@0.16.4/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 rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
@ -40,7 +40,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/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.16.1/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vuetify@0.16.4/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>
@ -48,7 +48,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.4.3/localforage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"

38
src/vue-poc/vue-api2.xqm
View file

@ -49,6 +49,7 @@ function vue-api:search($q )
return dice:response($items,$entity,web:dice())
};
(:~
: Returns test list for select.
:)
@ -66,8 +67,6 @@ function vue-api:test-select($q )
</json>
};
(:~
: Returns wadl.
:)
@ -78,3 +77,38 @@ function vue-api:wadl()
rest:wadl()
};
(:~
: user list
:)
declare
%rest:GET %rest:path("/vue-poc/api/user")
%output:method("json")
function vue-api:user()
as element(json)
{
let $jlist:=user:list
return <json type="array">
{for $j in $jlist
return <_ type="object">
<name>{$j}</name>
</_>
}</json>
};
(:~
: repo list
:)
declare
%rest:GET %rest:path("/vue-poc/api/repo")
%output:method("json")
function vue-api:repo()
as element(json)
{
let $jlist:=repo:list()
return <json type="array">
{for $j in $jlist
return <_ type="object">
<name>{$j}</name>
</_>
}</json>
};

40
src/vue-poc/vue-poc.vue
View file

@ -1,8 +1,27 @@
<!DOCTYPE html>
<template id="vuepoc">
<v-app id="app" :dark="dark" @theme="onDark">
<v-app id="app" :dark="dark" >
<v-navigation-drawer
persistent
v-model="drawerRight"
right
clipped
:disable-route-watcher="true"
app
>
<v-card>
<v-toolbar class="teal white--text">
<v-toolbar-title >Notifications</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="drawerRight = false" icon><v-icon>close</v-icon></v-btn>
</v-toolbar>
<v-card-text>
TODO
</v-card-text>
</v-card>
</v-navigation-drawer>
<v-navigation-drawer persistent app :mini-variant.sync="mini" v-model="drawer"
:disable-route-watcher="true" class="grey lighten-4 pb-0">
:disable-route-watcher="true" >
<v-list class="pa-0">
<v-list-tile avatar tag="div">
@ -76,6 +95,7 @@
q: "",
status: {},
drawer: true,
drawerRight: false,
mini: false,
dark: false,
alert: {show:false,msg:"Hello"},
@ -97,6 +117,8 @@
children: [
{href: '/eval',text: 'Query',icon: 'play_circle_outline'},
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/validate',text: 'Validate',icon: 'playlist_add_check'},
{href: '/transform',text: 'XSLT Transform',icon: 'input'},
{href: '/tasks',text: 'Tasks',icon: 'history'}
]},
{
@ -106,6 +128,7 @@
children: [
{href: '/jobs',text: 'Running jobs',icon: 'dashboard'},
{href: '/logs',text: 'Server logs',icon: 'dns'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/server/users',text: 'Users',icon: 'supervisor_account'},
{href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
{href: '/ping',text: 'Ping',icon: 'update'}
@ -131,8 +154,8 @@
{href: '/session',text: 'Session',icon: 'person'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'}
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
]},
{href: '/settings',text: 'Settings',icon: 'settings' },
@ -158,13 +181,12 @@
},
onDark(dark){
this.dark=dark
alert("theme")
},
favorite(){
alert("@TODO")
},
notifications(){
alert("@TODO")
this.drawerRight=true
}
},
@ -172,12 +194,14 @@
console.log("create-----------")
var that=this
this.$on("theme",this.onDark)
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
console.error(err, vm, info);
that.showAlert("vue error:\n"+err)
alert("vue error");
var msg=JSON.stringify(err)
that.showAlert("vue error:\n"+msg)
//alert("vue error");
};
// Add a response interceptor