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

ace add update ns

This commit is contained in:
Andy Bunce 2017-12-21 09:52:19 +00:00
parent 929f7c3ea0
commit a6332894cd
11 changed files with 441 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/vue-poc/components/vp-job.vue Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<!--
job component
job:{id:
job:
-->
<template id="vp-job">
<v-card >
<v-toolbar dense>
<v-card-title>Details:</v-card-title>
<v-chip class="primary white--text">{{job.id}}</v-chip>
<v-spacer></v-spacer>
<v-chip class="primary white--text">{{job.job}}</v-chip>
<v-chip label class="grey white--text">
<v-avatar class="red"> <v-icon>lock</v-icon>W</v-avatar>
{{ jobState.writes }}</v-chip>
<v-chip label class="grey white--text">
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-chip>{{ jobState.state }}</v-chip>
<v-chip class="primary white--text">
<v-avatar > <v-icon>timer</v-icon></v-avatar>
{{elapsed}}ms</v-chip>
</v-toolbar>
<v-card-text >
<v-flex xs12 style="height:60px;" fill-height>
<vue-ace :content="query" mode="xquery" wrap="true" read-only="true"
></vue-ace>
</v-flex>
</v-card-text>
<!-- result -->
<v-card-text >
<v-flex xs12 style="height:200px;" fill-height>
<vue-ace :content="aresult" mode="xquery" wrap="true" read-only="true" ></vue-ace>
</v-flex>
</v-card-text>
</v-card>
</template>
<script>{
props: ['job',
'result',
'jobState',
'elapsed'],
data:function(){
return {
query: "(:to do:)",
error: null
}
},
watch:{
result:function(a){
console.log("result");
}
},
computed:{
aresult:function(){return this.result || "none"}
},
created:function(){
console.log("vp-job");
}
}
</script>

17
src/vue-poc/components/vue-ace.vue
View File

@ -2,6 +2,8 @@
<!--
ace editor for vue.js
//https://jsfiddle.net/bc_rikko/gbpw2q9x/3/
events:
event fired cmd outline
-->
<template id="vue-ace">
<div style="width: 100%; height: 100%;"></div>
@ -31,6 +33,7 @@ ace editor for vue.js
}
}
},
watch: {
'content' (value) {
if (this.beforeContent !== value) {
@ -62,6 +65,14 @@ ace editor for vue.js
cm.exec(cmd, this.editor)
},
outline(){
var row = this.editor.selection.getCursor().row
var toks=this.editor.session.getTokens(row).filter(function(t) {
return true
})
console.log("tokens: ",toks);
},
testAnnotations(){
this.editor.getSession().setAnnotations([{
row: 1,
@ -129,11 +140,7 @@ ace editor for vue.js
if(this.events){
this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){
var row = this.editor.selection.getCursor().row
var toks=this.editor.session.getTokens(row).filter(function(t) {
return true
})
console.log(toks);
this.outline();
}else this.command(cmd);
});
}

109
src/vue-poc/features/brutusin.vue Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<template id="brutusin">
<v-container fluid>
<v-card>
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</v-card>
</v-container>
</template>
<script>{
components: {
"vue-form-generator": VueFormGenerator.component
},
data() {
return {
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
age: 35,
skills: ["Javascript", "VueJS"],
email: "john.doe@gmail.com",
status: true
},
schema: {
fields: [{
type: "input",
inputType: "text",
label: "ID",
model: "id",
readonly: true,
featured: false,
disabled: true
}, {
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "email",
label: "E-mail",
model: "email",
placeholder: "User's e-mail address",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
}, {
type: "switch",
label: "Status",
model: "status",
multi: true,
readonly: false,
featured: false,
disabled: false,
default: true,
textOn: "Active",
textOff: "Inactive"
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
},
methods:{
onResize(){
var el=this.$refs["page"]
console.log("top",el.offsetTop)
var h=Math.max(1,window.innerHeight - el.offsetTop)-60
console.log("h",h)
el.style.height=h +"px"
}
},
created:function(){
console.log("form")
}
}
</script>

2
src/vue-poc/features/edit/edit.vue
View File

@ -13,7 +13,7 @@
<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 v-for="(item,index) in path" :key="index">
<v-list-tile-content @click="showfiles()">
<v-list-tile-title >{{ item }}</v-list-tile-title>
</v-list-tile-content>

28
src/vue-poc/features/eval/eval.vue
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<template id="eval">
<v-container fluid>
<v-card >
<v-card @keyup.ctrl.enter="submit">
<v-toolbar dense>
<v-menu offset-x>
@ -27,7 +27,7 @@
</v-card>
</v-menu>
<v-spacer></v-spacer>
<v-btn @click="submit">
<v-btn @click="submit" >
<v-icon>play_circle_outline</v-icon>jobs:run
</v-btn>
<v-menu offset-y>
@ -66,15 +66,16 @@
</v-card-text>
<v-card-actions v-if="show" >
<v-chip class="primary white--text">{{job.result}}</v-chip>
<v-chip class="primary white--text">{{job.id}}</v-chip>
<v-chip class="primary white--text">{{job.job}}</v-chip>
<v-chip label class="grey white--text">
<v-avatar class="red"> <v-icon>lock</v-icon>W</v-avatar>
{{ jobState.writes }}</v-chip>
<v-chip label class="grey white--text">
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-spacer></v-spacer>
<v-progress-circular v-if="waiting" indeterminate class="primary--text"></v-progress-circular>
@ -93,21 +94,26 @@
></vue-ace>
</v-flex>
</v-card-text>
<v-card-text>
BEFORE<vp-job :job="job" :result:="result"
:job-state="jobState" :elapsed="elapsed">IN</vp-job>AFTER
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
xq: '(: type your XQuery :)\n',
result:'',
result: null,
elapsed: null,
show: false,
showError: false,
showResult: false, //
job: {}, // {id:"12",result:"job13"}
job: {}, // {id:"12",job:"job13", dateTime:""}
waiting: false,
destroyed: false,
start: null,
@ -161,7 +167,7 @@
pollState(){
if(this.destroyed)return;
this.waiting=true;
HTTP.get("job/"+this.job.result)
HTTP.get("job/"+this.job.job)
.then(r=>{
this.jobState=r.data
this.waiting=r.data.state!="cached";
@ -175,7 +181,7 @@
},
getResult(){
this.awaitResult(true)
HTTPNE.post("eval/result/"+this.job.result)
HTTPNE.post("eval/result/"+this.job.job)
.then(r=>{
this.result=r.data.result+" "
}).catch(r=> {
@ -218,6 +224,8 @@
this.showResult=true
}
},
computed: {
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{

13
src/vue-poc/features/eval/eval.xqm
View File

@ -22,7 +22,7 @@ declare
function vue-api:eval($xq )
{
let $r:=util:query($xq,())
return vue-api:response($r)
return vue-api:response($r,$xq)
};
(:~
@ -30,15 +30,20 @@ function vue-api:eval($xq )
:)
declare
%updating
function vue-api:response($r)
function vue-api:response($r,$query)
{
let $id:=$vue-api:id + 1
let $out:= <json type="object" >
<id>{ $id }</id>
<result>{$r}</result>
<job>{ $r }</job>
<dateTime>{ current-dateTime() }</dateTime>
</json>
let $task:=<task id="{$id}">{ $out }
<query>{$query}</query>
</task>
return (
replace value of node $vue-api:id with $id,
db:replace($vue-api:db,"/tasks/" || $id || ".xml",$task),
db:output($out)
)
};
@ -56,7 +61,7 @@ function vue-api:submit($xq )
let $bindings:=map{}
let $opts:=map{"cache":true()}
let $r:=jobs:eval($xq,$bindings,$opts)
return vue-api:response($r)
return vue-api:response($r,$xq)
};

1
src/vue-poc/router.js
View File

@ -55,6 +55,7 @@ const router = new VueRouter({
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/map', component: Map,meta:{title:"map"} },
{ path: '/form', component: Brutusin,meta:{title:"Form demo"} },
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
],

15
src/vue-poc/static/ace-workers/worker-xquery.js
View File

@ -6269,6 +6269,12 @@ exports.StaticContext = function (parent, pos) {
type: 'module',
override: true
};
namespaces['http://basex.org/modules/update'] = {
prefixes: ['update'],
pos: emptyPos,
type: 'module',
override: true
};
namespaces['http://basex.org/modules/prof'] = {
prefixes: ['prof'],
pos: emptyPos,
@ -6319,7 +6325,14 @@ exports.StaticContext = function (parent, pos) {
type: 'module',
override: true
};
namespaces['http://basex.org/modules/web'] = {
namespaces['http://basex.org/modules/json'] = {
prefixes: ['json'],
pos: emptyPos,
type: 'module',
override: true
};
namespaces['http://basex.org/modules/web'] = {
prefixes: ['web'],
pos: emptyPos,
type: 'module',

217
src/vue-poc/static/app-gen.js
View File

@ -1,4 +1,4 @@
// generated 2017-12-03T22:15:08.778Z
// generated 2017-12-19T21:14:02.131Z
Vue.component('qd-confirm',{template:`
<v-dialog v-model="value">
<v-card>
@ -218,6 +218,67 @@
}
}
}
);
Vue.component('vp-job',{template:`
<v-card>
<v-toolbar dense="">
<v-card-title>Details:</v-card-title>
<v-chip class="primary white--text">{{job.id}}</v-chip>
<v-spacer></v-spacer>
<v-chip class="primary white--text">{{job.job}}</v-chip>
<v-chip label="" class="grey white--text">
<v-avatar class="red"> <v-icon>lock</v-icon>W</v-avatar>
{{ jobState.writes }}</v-chip>
<v-chip label="" class="grey white--text">
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-chip>{{ jobState.state }}</v-chip>
<v-chip class="primary white--text">
<v-avatar> <v-icon>timer</v-icon></v-avatar>
{{elapsed}}ms</v-chip>
</v-toolbar>
<v-card-text>
<v-flex xs12="" style="height:60px;" fill-height="">
<vue-ace :content="query" mode="xquery" wrap="true" read-only="true"></vue-ace>
</v-flex>
</v-card-text>
<!-- result -->
<v-card-text>
<v-flex xs12="" style="height:200px;" fill-height="">
<vue-ace :content="aresult" mode="xquery" wrap="true" read-only="true"></vue-ace>
</v-flex>
</v-card-text>
</v-card>
`,
props: ['job',
'result',
'jobState',
'elapsed'],
data:function(){
return {
query: "(:to do:)",
error: null
}
},
watch:{
result:function(a){
console.log("result");
}
},
computed:{
aresult:function(){return this.result || "none"}
},
created:function(){
console.log("vp-job");
}
}
);
Vue.component('vue-ace',{template:`
<div style="width: 100%; height: 100%;"></div>
@ -247,6 +308,7 @@
}
}
},
watch: {
'content' (value) {
if (this.beforeContent !== value) {
@ -278,6 +340,14 @@
cm.exec(cmd, this.editor)
},
outline(){
var row = this.editor.selection.getCursor().row
var toks=this.editor.session.getTokens(row).filter(function(t) {
return true
})
console.log("tokens: ",toks);
},
testAnnotations(){
this.editor.getSession().setAnnotations([{
row: 1,
@ -345,11 +415,7 @@
if(this.events){
this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){
var row = this.editor.selection.getCursor().row
var toks=this.editor.session.getTokens(row).filter(function(t) {
return true
})
console.log(toks);
this.outline();
}else this.command(cmd);
});
}
@ -507,6 +573,114 @@ Vue.filter('round', function(value, decimals) {
}
}
);
const Brutusin=Vue.extend({template:`
<v-container fluid="">
<v-card>
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</v-card>
</v-container>
`,
components: {
"vue-form-generator": VueFormGenerator.component
},
data() {
return {
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
age: 35,
skills: ["Javascript", "VueJS"],
email: "john.doe@gmail.com",
status: true
},
schema: {
fields: [{
type: "input",
inputType: "text",
label: "ID",
model: "id",
readonly: true,
featured: false,
disabled: true
}, {
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "email",
label: "E-mail",
model: "email",
placeholder: "User's e-mail address",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
}, {
type: "switch",
label: "Status",
model: "status",
multi: true,
readonly: false,
featured: false,
disabled: false,
default: true,
textOn: "Active",
textOff: "Inactive"
}]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
};
},
methods:{
onResize(){
var el=this.$refs["page"]
console.log("top",el.offsetTop)
var h=Math.max(1,window.innerHeight - el.offsetTop)-60
console.log("h",h)
el.style.height=h +"px"
}
},
created:function(){
console.log("form")
}
}
);
const Files=Vue.extend({template:`
<v-container fluid="">
@ -838,7 +1012,7 @@ Vue.filter('round', function(value, decimals) {
<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 v-for="(item,index) in path" :key="index">
<v-list-tile-content @click="showfiles()">
<v-list-tile-title>{{ item }}</v-list-tile-title>
</v-list-tile-content>
@ -1117,7 +1291,7 @@ Entities
);
const Eval=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-card @keyup.ctrl.enter="submit">
<v-toolbar dense="">
<v-menu offset-x="">
@ -1180,15 +1354,16 @@ Entities
</v-card-text>
<v-card-actions v-if="show">
<v-chip class="primary white--text">{{job.result}}</v-chip>
<v-chip class="primary white--text">{{job.id}}</v-chip>
<v-chip class="primary white--text">{{job.job}}</v-chip>
<v-chip label="" class="grey white--text">
<v-avatar class="red"> <v-icon>lock</v-icon>W</v-avatar>
{{ jobState.writes }}</v-chip>
<v-chip label="" class="grey white--text">
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-avatar class="amber"> <v-icon>lock</v-icon>R</v-avatar>
{{ jobState.reads }}</v-chip>
<v-spacer></v-spacer>
<v-progress-circular v-if="waiting" indeterminate="" class="primary--text"></v-progress-circular>
@ -1206,20 +1381,24 @@ Entities
<vue-ace :content="result" mode="text" wrap="false" read-only="true" :settings="aceSettings"></vue-ace>
</v-flex>
</v-card-text>
<v-card-text>
BEFORE<vp-job :job="job" :result:="result" :job-state="jobState" :elapsed="elapsed">IN</vp-job>AFTER
</v-card-text>
</v-card>
</v-container>
`,
data: function(){
return {
xq: '(: type your XQuery :)\n',
result:'',
result: null,
elapsed: null,
show: false,
showError: false,
showResult: false, //
job: {}, // {id:"12",result:"job13"}
job: {}, // {id:"12",job:"job13", dateTime:""}
waiting: false,
destroyed: false,
start: null,
@ -1273,7 +1452,7 @@ Entities
pollState(){
if(this.destroyed)return;
this.waiting=true;
HTTP.get("job/"+this.job.result)
HTTP.get("job/"+this.job.job)
.then(r=>{
this.jobState=r.data
this.waiting=r.data.state!="cached";
@ -1287,7 +1466,7 @@ Entities
},
getResult(){
this.awaitResult(true)
HTTPNE.post("eval/result/"+this.job.result)
HTTPNE.post("eval/result/"+this.job.job)
.then(r=>{
this.result=r.data.result+" "
}).catch(r=> {
@ -1330,6 +1509,8 @@ Entities
this.showResult=true
}
},
computed: {
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{
@ -3643,6 +3824,7 @@ const router = new VueRouter({
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/map', component: Map,meta:{title:"map"} },
{ path: '/form', component: Brutusin,meta:{title:"Form demo"} },
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
],
@ -3851,7 +4033,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: '/svg',text: 'SVG',icon: 'extension'},
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
]},

9
src/vue-poc/static/app.html
View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/vue-form-generator@2.1.0/dist/vfg.css"/>
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
<link href="/vue-poc/ui/svg-pan-zoom.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
@ -34,7 +35,7 @@
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
@ -49,11 +50,13 @@
<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://cdn.jsdelivr.net/gh/brutusin/json-forms@1.6.3/dist/js/brutusin-json-forms.js"></script>
<script src="https://unpkg.com/vue-form-generator@2.1.1/dist/vfg.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script>
<script src="/vue-poc/ui/svg-pan-zoom.js"></script>
<script src="/vue-poc/ui/perf-stat.js"></script>
<script src="/vue-poc/ui/app-gen.js"></script>

3
src/vue-poc/vue-poc.vue
View File

@ -205,7 +205,8 @@
{href: '/session',text: 'Session',icon: 'person'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
{href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
]},