vuetify 1 beta 6
This commit is contained in:
parent
df59344aca
commit
ce199830a8
19 changed files with 764 additions and 143 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<template id="vuepoc">
|
||||
<v-app id="app" :dark="dark" >
|
||||
<v-navigation-drawer
|
||||
absolute
|
||||
stateless
|
||||
v-model="showNotifications"
|
||||
right
|
||||
:disable-route-watcher="true"
|
||||
|
|
@ -46,7 +46,9 @@
|
|||
<v-list-tile avatar tag="div">
|
||||
<v-list-tile-avatar >
|
||||
<v-btn icon @click="session">
|
||||
<v-avatar size="36">
|
||||
<img src="/vue-poc/ui/quodatum.gif" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
|
|
@ -100,8 +102,20 @@
|
|||
</v-card>
|
||||
</v-menu>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q"
|
||||
hide-details single-line dark @keyup.enter="search"></v-text-field>
|
||||
<v-select
|
||||
placeholder="Search..." prepend-icon="search"
|
||||
autocomplete
|
||||
:loading="loading"
|
||||
combobox
|
||||
clearable
|
||||
cache-items
|
||||
:items="items2"
|
||||
@keyup.enter="goSearch"
|
||||
:search-input.sync="si"
|
||||
v-model="q"
|
||||
></v-select>
|
||||
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu left transition="v-fade-transition">
|
||||
|
|
@ -145,6 +159,10 @@
|
|||
router,
|
||||
data:function(){return {
|
||||
q: "",
|
||||
loading: false,
|
||||
searchItems:[],
|
||||
si: '',
|
||||
items2:["todo","set","search"],
|
||||
status: {},
|
||||
drawer: true,
|
||||
showNotifications: false,
|
||||
|
|
@ -229,15 +247,24 @@
|
|||
]},
|
||||
|
||||
{href: '/settings',text: 'Settings',icon: 'settings' },
|
||||
{href: '/about',text: 'About (v1.1.1)' , icon: 'help' },
|
||||
{href: '/about',text: 'About (v1.1.3)' , icon: 'help' },
|
||||
]
|
||||
|
||||
}},
|
||||
methods: {
|
||||
querySelections (v) {
|
||||
this.loading = true
|
||||
// Simulated ajax query
|
||||
setTimeout(() => {
|
||||
this.items2 = ["aa","bb",this.si],
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
session(){
|
||||
this.$router.push({path: '/session'})
|
||||
},
|
||||
search(){
|
||||
goSearch(){
|
||||
this.$router.push({path: '/search',query: { q: this.q }})
|
||||
},
|
||||
logout(){
|
||||
|
|
@ -260,8 +287,16 @@
|
|||
showNotifications: function (val) {
|
||||
console.log("showNotifications",val);
|
||||
if(!val)this.$notification.unseen=0;
|
||||
},
|
||||
search (val) {
|
||||
val && this.querySelections(val)
|
||||
},
|
||||
si:function(val){
|
||||
console.log("si: ",val);
|
||||
this.querySelections();
|
||||
}
|
||||
},
|
||||
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
var that=this
|
||||
|
|
@ -275,6 +310,19 @@
|
|||
//alert("vue error");
|
||||
};
|
||||
|
||||
// Add a response interceptor
|
||||
HTTP.interceptors.response.use(
|
||||
(response)=> {
|
||||
// Do something with response data
|
||||
return response;
|
||||
},
|
||||
(error) =>{
|
||||
// interupt restxq single
|
||||
console.log("HTTP.interceptors.response.use ",error)
|
||||
if(460 != error.response.status)this.showAlert("http error:\n"+error.response.data)
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
HTTP.get("status")
|
||||
.then(r=>{
|
||||
console.log("status",r.data)
|
||||
|
|
@ -282,6 +330,7 @@
|
|||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy(){
|
||||
console.log("destory-----------")
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
-->
|
||||
<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>
|
||||
|
|
@ -28,15 +29,15 @@
|
|||
</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 :content="query" mode="xquery" wrap="true" :read-only="true"
|
||||
|
||||
></vue-ace>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
<!-- result -->
|
||||
<v-card-text >
|
||||
<v-flex xs12 fill-height>
|
||||
<vue-ace :content="aresult" mode="xquery" min-lines="1" wrap="true" read-only="true" ></vue-ace>
|
||||
<v-flex xs12 style="height:60px;" fill-height>
|
||||
<vue-ace :content="result" mode="xquery" min-lines="1" wrap="true" read-only="true" ></vue-ace>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -47,23 +48,26 @@
|
|||
props: ['job',
|
||||
'result',
|
||||
'jobState',
|
||||
'elapsed'],
|
||||
'elapsed',
|
||||
'query'
|
||||
],
|
||||
data:function(){
|
||||
return {
|
||||
query: "(:to do:)",
|
||||
error: null
|
||||
error: null,
|
||||
res1: "??"
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
result:function(a){
|
||||
console.log("result");
|
||||
if(this.res1 === "???"){ this.res1=a};
|
||||
console.log("vp-result:",a);
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
aresult:function(){return this.result || "none"}
|
||||
aresult:function(){return this.res1 || "none"}
|
||||
},
|
||||
created:function(){
|
||||
console.log("vp-job");
|
||||
console.log("vp-job: ", this.job,this.result);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ event fired cmd outline
|
|||
this.editor = window.ace.edit(this.$el)
|
||||
this.applySettings(this.aceSettings)
|
||||
this.editor.$blockScrolling = Infinity
|
||||
console.log("setValue: ",this.content)
|
||||
this.editor.setValue(this.content, 1)
|
||||
this.editor.setOptions({ readOnly:this.readOnly });
|
||||
if(this.minLines){
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const AXIOS_CONFIG={
|
|||
// Add a response interceptor
|
||||
axios.interceptors.response.use(function (response) {
|
||||
// Do something with response data
|
||||
console.log("AXIOS",response);
|
||||
//console.log("AXIOS",response);
|
||||
return response;
|
||||
}, function (error) {
|
||||
// Do something with response error
|
||||
|
|
@ -35,7 +35,7 @@ HTTP.interceptors.response.use((response) => {
|
|||
var s=Math.floor(performance.now() - response.config.qdStartTime);
|
||||
var c=response.config;
|
||||
var url=response.config.url + "?" + c.paramsSerializer(c.params);
|
||||
console.log("interceptors time:",s, response.config);
|
||||
//console.log("interceptors time:",s, response.config);
|
||||
Notification.add(s +" "+ url );
|
||||
}
|
||||
return response;
|
||||
|
|
|
|||
BIN
src/vue-poc/data/vuetif.zip
Normal file
BIN
src/vue-poc/data/vuetif.zip
Normal file
Binary file not shown.
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="entity">
|
||||
<v-container fluid>
|
||||
Entities
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -55,12 +55,14 @@
|
|||
|
||||
|
||||
</v-toolbar>
|
||||
|
||||
|
||||
<v-card-text v-if="done">
|
||||
BEFORE<vp-job :job="job" :result:="result" :query="xq"
|
||||
:job-state="jobState" :elapsed="elapsed" >IN</vp-job>AFTER
|
||||
</v-card-text>
|
||||
<v-card-text >
|
||||
<v-flex xs12 style="height:200px" fill-height>
|
||||
<vue-ace :content="xq" mode="xquery" wrap="true"
|
||||
v-on:change-content="onChange" :settings="aceSettings"
|
||||
:settings="aceSettings" v-on:change-content="onChange"
|
||||
></vue-ace>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
|
|
@ -96,10 +98,7 @@
|
|||
</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>
|
||||
|
||||
|
|
@ -111,7 +110,8 @@
|
|||
data: function(){
|
||||
return {
|
||||
xq: '(: type your XQuery :)\n',
|
||||
result: null,
|
||||
result: '',
|
||||
done: false,
|
||||
elapsed: null,
|
||||
show: false,
|
||||
showError: false,
|
||||
|
|
@ -151,21 +151,16 @@
|
|||
submit(){
|
||||
this.showError=this.showResult=this.show=false
|
||||
this.start = performance.now();
|
||||
HTTPNE.post("eval/submit",Qs.stringify({xq:this.xq}))
|
||||
console.log("*****",Qs.stringify({xq:this.xq}));
|
||||
HTTP.post("eval/submit",Qs.stringify({xq:this.xq}))
|
||||
.then(r=>{
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.job=r.data
|
||||
this.show=true
|
||||
this.pollState()
|
||||
|
||||
})
|
||||
.catch(r=> {
|
||||
alert("catch")
|
||||
console.log("error",r)
|
||||
this.job=r.response.job
|
||||
this.showError=true;
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
pollState(){
|
||||
if(this.destroyed)return;
|
||||
|
|
@ -187,12 +182,14 @@
|
|||
HTTPNE.post("eval/result/"+this.job.job)
|
||||
.then(r=>{
|
||||
this.result=r.data.result+" "
|
||||
this.done= true;
|
||||
console.log("$$$$$",this.result);
|
||||
}).catch(r=> {
|
||||
// alert("catch")
|
||||
console.log("error",r)
|
||||
this.result=r.response.data
|
||||
this.showError=true;
|
||||
|
||||
this.done= true;
|
||||
});
|
||||
},
|
||||
hitme(){
|
||||
|
|
@ -221,6 +218,7 @@
|
|||
},
|
||||
awaitResult(show){
|
||||
// ace slow when setting large text while hidden
|
||||
|
||||
this.showError= false
|
||||
this.show= show
|
||||
this.result= "(Please wait..)"
|
||||
|
|
|
|||
82
src/vue-poc/features/model/entity.vue
Normal file
82
src/vue-poc/features/model/entity.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="entity">
|
||||
<v-card>
|
||||
<v-toolbar >
|
||||
<v-toolbar-title>Entities</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="reset()">Reset</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-container fluid grid-list-md>
|
||||
|
||||
<v-data-iterator
|
||||
content-tag="v-layout"
|
||||
row
|
||||
wrap
|
||||
:items="items"
|
||||
:rows-per-page-items="rowsPerPageItems"
|
||||
:pagination.sync="pagination"
|
||||
>
|
||||
<v-flex
|
||||
slot="item"
|
||||
slot-scope="props"
|
||||
xs12
|
||||
sm6
|
||||
md4
|
||||
lg3
|
||||
>
|
||||
<v-card>
|
||||
|
||||
<v-card-title>
|
||||
<router-link :to="{path:'entity/'+ props.item.name}">
|
||||
<h4>
|
||||
<v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
|
||||
</h4>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>{{ props.item.description }}</<v-card-text>
|
||||
<v-card-actions>
|
||||
<v-list dense>
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>Fields:</v-list-tile-content>
|
||||
<v-list-tile-content class="align-end">{{ props.item.nfields }}</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-data-iterator>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function(){
|
||||
return {
|
||||
q: 'filter',
|
||||
items: [],
|
||||
loading: false,
|
||||
rowsPerPageItems: [4, 8, 20],
|
||||
pagination: {
|
||||
rowsPerPage: 20
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getItems(){
|
||||
this.loading=true
|
||||
HTTP.get("data/entity",{params:this.q})
|
||||
.then(r=>{
|
||||
this.loading=false
|
||||
//console.log(r.data)
|
||||
//var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
|
||||
this.items=r.data.items
|
||||
})
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.getItems()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
61
src/vue-poc/features/model/rxq-entity.xqm
Normal file
61
src/vue-poc/features/model/rxq-entity.xqm
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
(:~
|
||||
: entity rest interface
|
||||
: defines urls below vue-poc/data/entity/
|
||||
: @author andy bunce
|
||||
: @since jun 2013
|
||||
:)
|
||||
|
||||
module namespace model-rest = 'quodatum.model.rest';
|
||||
declare default function namespace 'quodatum.model.rest';
|
||||
|
||||
import module namespace entity ='quodatum.models.generated' at "../../models.gen.xqm";
|
||||
import module namespace dice = 'quodatum.web.dice/v4' at "../../lib/dice.xqm";
|
||||
import module namespace web = 'quodatum.web.utils4' at "../../lib/webutils.xqm";
|
||||
declare namespace ent="https://github.com/Quodatum/app-doc/entity";
|
||||
|
||||
declare variable $model-rest:models:=db:open("vue-poc")//ent:entity;
|
||||
|
||||
(:~
|
||||
: return list of entities
|
||||
:)
|
||||
declare
|
||||
%rest:GET %rest:path("vue-poc/api/data/entity")
|
||||
%rest:query-param("q", "{$q}")
|
||||
%output:method("json")
|
||||
function model-list($q) {
|
||||
let $entity:=$entity:list("entity")
|
||||
let $items:=$entity?data()
|
||||
let $items:=if($q)then $items[fn:contains($entity("access")("name")(.),$q)] else $items
|
||||
return dice:response($items,$entity,web:dice())
|
||||
};
|
||||
|
||||
(:~
|
||||
: details of the entity $entity
|
||||
:)
|
||||
declare
|
||||
%rest:GET %rest:path("vue-poc/api/data/entity/{$entity}")
|
||||
%output:method("json")
|
||||
function model($entity) {
|
||||
let $this:=$entity:list("entity")
|
||||
let $items:=$this?data()
|
||||
let $fields:=$this?json
|
||||
let $item:=$items[@name=$entity]
|
||||
(: just one :)
|
||||
return <json objects="json">{dice:json-flds($item,$fields)/*}</json>
|
||||
|
||||
};
|
||||
|
||||
(:~
|
||||
: field list for model
|
||||
:)
|
||||
declare
|
||||
%rest:GET %rest:path("vue-poc/api/data/entity/{$entity}/field")
|
||||
%output:method("json")
|
||||
function field-list($entity) {
|
||||
let $dentity:=$entity:list("entity")
|
||||
let $items:=$dentity?data()
|
||||
let $items:=$items[@name=$entity]/ent:fields/ent:field
|
||||
let $fentity:=$entity:list("entity.field")
|
||||
return dice:response($items,$fentity,web:dice())
|
||||
|
||||
};
|
||||
|
|
@ -3,17 +3,44 @@
|
|||
<v-container fluid>
|
||||
<div id="canvasqPWKOg" class="canvas"></div>
|
||||
<button id="resetButtonqPWKOg">Reset</button>
|
||||
<div>
|
||||
<svg width="500" height="300"></svg>
|
||||
<br>
|
||||
<input
|
||||
type="range"
|
||||
v-model="circleSize"
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
message: 'bad route!',
|
||||
circleSize: 50
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
},
|
||||
mounted: function(createElement) {
|
||||
var svg = d3.select(this.$el).select('svg');
|
||||
this.circle = svg
|
||||
.append('circle')
|
||||
.attr('cx', '250')
|
||||
.attr('cy', '150')
|
||||
.attr('r', this.circleSize)
|
||||
},
|
||||
watch: {
|
||||
circleSize: function(newValue) {
|
||||
this.circle
|
||||
.attr('r', newValue)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
(:~
|
||||
: Update `generated/models.xqm` from files in `data/models`
|
||||
: using file:///C:/Users/andy/workspace/app-doc/src/doc/data/doc/models
|
||||
: $efolder:="file:///C:/Users/andy/workspace/app-doc/src/doc/data/doc/models"
|
||||
: $target:="file:///C:/Users/andy/workspace/app-doc/src/doc/generated/models.xqm"
|
||||
: Generate html for for XQuery sources
|
||||
:)
|
||||
module namespace vue-api = 'quodatum:vue.api';
|
||||
import module namespace xqd = 'quodatum:build.xqdoc' at "../../../lib/xqdoc/xqdoc-proj.xqm";
|
||||
|
|
@ -22,8 +19,9 @@ declare
|
|||
%updating
|
||||
function vue-api:model($efolder ,$target )
|
||||
{
|
||||
let $project:=tokenize($efolder,"[/\\]")[last()]=>trace("DDD")
|
||||
let $files:= fw:directory-list($efolder,map{"include-filter":".*\.xqm"})
|
||||
let $op:=xqd:save-xq($files,$target)
|
||||
let $op:=xqd:save-xq($files,$target,map{"project":$project})
|
||||
return db:output(<json type="object"><msg> {$target}, {count($files//c:file)} files processed.</msg></json>)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -43,9 +43,20 @@
|
|||
<xsl:value-of select="$project" />
|
||||
</h1>
|
||||
<xsl:call-template name="toc" />
|
||||
|
||||
<div id="file">
|
||||
<h1>Files</h1>
|
||||
<ul>
|
||||
<xsl:apply-templates select=".//c:file" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="ns">
|
||||
<h1>Namespace</h1>
|
||||
<ul>
|
||||
<xsl:apply-templates select=".//c:file" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p style="text-align:right">
|
||||
|
|
@ -56,7 +67,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@ declare variable $xqd:index-xslt external :="html-index.xsl";
|
|||
(:~ save documentation for files to target
|
||||
:
|
||||
:)
|
||||
declare function xqd:save-xq($files,$target)
|
||||
declare function xqd:save-xq($files,$target,$params as map(*))
|
||||
{
|
||||
let $params:=map{
|
||||
"project":"project" }
|
||||
let $f:= document{$files} transform with { delete node //c:directory[not(.//c:file)]}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
(: entity access maps
|
||||
: auto generated from xml files in entities folder at: 2018-01-03T10:05:58.06Z
|
||||
: auto generated from xml files in entities folder at: 2018-02-05T23:02:18.036Z
|
||||
:)
|
||||
|
||||
module namespace entity = 'quodatum.models.generated';
|
||||
import module namespace cfg = "quodatum:media.image.configure" at "features/images/config.xqm";declare namespace h='urn:quodatum:vue-poc.history';
|
||||
import module namespace cfg = "quodatum:media.image.configure" at "features/images/config.xqm";declare namespace ent='https://github.com/Quodatum/app-doc/entity';
|
||||
declare namespace h='urn:quodatum:vue-poc.history';
|
||||
declare namespace xqdoc='http://www.xqdoc.org/1.0';
|
||||
declare namespace c='http://www.w3.org/ns/xproc-step';
|
||||
|
||||
|
|
@ -54,6 +55,127 @@ declare variable $entity:list:=map {
|
|||
|
||||
"views": map{
|
||||
|
||||
}
|
||||
},
|
||||
"entity.field": map{
|
||||
"name": "entity.field",
|
||||
"description": "About an entity field. ",
|
||||
"access": map{
|
||||
"description": function($_ as element()) as xs:string {$_/ent:description },
|
||||
"name": function($_ as element()) as xs:string {$_/@name },
|
||||
"parent": function($_ as element()) as xs:string {$_/../../@name },
|
||||
"type": function($_ as element()) as xs:string {$_/@type },
|
||||
"xpath": function($_ as element()) as xs:string {$_/ent:xpath } },
|
||||
|
||||
"filter": function($item,$q) as xs:boolean{
|
||||
some $e in ( $item/@name, $item/ent:description) satisfies
|
||||
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
|
||||
},
|
||||
"json": map{
|
||||
"description": function($_ as element()) as element(description)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/ent:description)!element description { .}
|
||||
},
|
||||
"name": function($_ as element()) as element(name)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/@name)!element name { .}
|
||||
},
|
||||
"parent": function($_ as element()) as element(parent)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/../../@name)!element parent { .}
|
||||
},
|
||||
"type": function($_ as element()) as element(type)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/@type)!element type { .}
|
||||
},
|
||||
"xpath": function($_ as element()) as element(xpath)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/ent:xpath)!element xpath { .}
|
||||
} },
|
||||
|
||||
"data": function() as element(ent:field)*
|
||||
{ collection("doc-doc")//ent:field },
|
||||
|
||||
"views": map{
|
||||
'filter': 'name description'
|
||||
}
|
||||
},
|
||||
"entity": map{
|
||||
"name": "entity",
|
||||
"description": "About an entity i.e. something described in this framework
|
||||
",
|
||||
"access": map{
|
||||
"code": function($_ as element()) as xs:string? {$_/ent:data },
|
||||
"description": function($_ as element()) as xs:string {$_/ent:description },
|
||||
"fieldslink": function($_ as element()) as xs:string {$_/fn:concat("/data/entity/",@name,"/field") },
|
||||
"iconclass": function($_ as element()) as xs:string {$_/ent:iconclass },
|
||||
"modules": function($_ as element()) as xs:string? {$_/ent:module/concat("import module namespace ",@prefix,"='",@namespace,"';
|
||||
")=>string-join() },
|
||||
"name": function($_ as element()) as xs:string {$_/@name },
|
||||
"namespaces": function($_ as element()) as xs:string? {$_/ent:namespace/concat("declare namespace ",@prefix,"='",@uri,"';
|
||||
")=>string-join() },
|
||||
"nfields": function($_ as element()) as xs:integer {$_/fn:count(ent:fields/ent:field) },
|
||||
"parent": function($_ as element()) as xs:string? {$_/ent:parent/@name },
|
||||
"parentlink": function($_ as element()) as xs:string? {$_/fn:concat("/data/entity/",ent:parent/@name) },
|
||||
"type": function($_ as element()) as xs:string {$_/ent:data/@type } },
|
||||
|
||||
"filter": function($item,$q) as xs:boolean{
|
||||
some $e in ( $item/@name, $item/ent:description) satisfies
|
||||
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
|
||||
},
|
||||
"json": map{
|
||||
"code": function($_ as element()) as element(code)? {
|
||||
(: xs:string? :)
|
||||
fn:data($_/ent:data)!element code { .}
|
||||
},
|
||||
"description": function($_ as element()) as element(description)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/ent:description)!element description { .}
|
||||
},
|
||||
"fieldslink": function($_ as element()) as element(fieldslink)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/fn:concat("/data/entity/",@name,"/field"))!element fieldslink { .}
|
||||
},
|
||||
"iconclass": function($_ as element()) as element(iconclass)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/ent:iconclass)!element iconclass { .}
|
||||
},
|
||||
"modules": function($_ as element()) as element(modules)? {
|
||||
(: xs:string? :)
|
||||
fn:data($_/ent:module/concat("import module namespace ",@prefix,"='",@namespace,"';
|
||||
")=>string-join())!element modules { .}
|
||||
},
|
||||
"name": function($_ as element()) as element(name)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/@name)!element name { .}
|
||||
},
|
||||
"namespaces": function($_ as element()) as element(namespaces)? {
|
||||
(: xs:string? :)
|
||||
fn:data($_/ent:namespace/concat("declare namespace ",@prefix,"='",@uri,"';
|
||||
")=>string-join())!element namespaces { .}
|
||||
},
|
||||
"nfields": function($_ as element()) as element(nfields)? {
|
||||
(: xs:integer :)
|
||||
fn:data($_/fn:count(ent:fields/ent:field))!element nfields { attribute type {'number'}, .}
|
||||
},
|
||||
"parent": function($_ as element()) as element(parent)? {
|
||||
(: xs:string? :)
|
||||
fn:data($_/ent:parent/@name)!element parent { .}
|
||||
},
|
||||
"parentlink": function($_ as element()) as element(parentlink)? {
|
||||
(: xs:string? :)
|
||||
fn:data($_/fn:concat("/data/entity/",ent:parent/@name))!element parentlink { .}
|
||||
},
|
||||
"type": function($_ as element()) as element(type)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/ent:data/@type)!element type { .}
|
||||
} },
|
||||
|
||||
"data": function() as element(ent:entity)*
|
||||
{ collection("vue-poc")//ent:entity },
|
||||
|
||||
"views": map{
|
||||
'filter': 'name description'
|
||||
}
|
||||
},
|
||||
"filehistory": map{
|
||||
|
|
@ -126,7 +248,8 @@ declare variable $entity:list:=map {
|
|||
} },
|
||||
|
||||
"data": function() as element(namespace)*
|
||||
{ collection("vuepoc")/namespaces/namespace },
|
||||
{ collection("vuepoc")/namespaces/namespace
|
||||
},
|
||||
|
||||
"views": map{
|
||||
'filter': 'xmlns description'
|
||||
|
|
@ -169,7 +292,8 @@ declare variable $entity:list:=map {
|
|||
} },
|
||||
|
||||
"data": function() as element(query)*
|
||||
{ collection("replx/queries")/query },
|
||||
{ collection("replx/queries")/query
|
||||
},
|
||||
|
||||
"views": map{
|
||||
'filter': 'name description'
|
||||
|
|
@ -211,6 +335,50 @@ declare variable $entity:list:=map {
|
|||
|
||||
"views": map{
|
||||
|
||||
}
|
||||
},
|
||||
"task": map{
|
||||
"name": "task",
|
||||
"description": "A task",
|
||||
"access": map{
|
||||
"created": function($_ as element()) as xs:string {$_/json/dateTime },
|
||||
"id": function($_ as element()) as xs:string {$_/@id },
|
||||
"query": function($_ as element()) as xs:string {$_/query },
|
||||
"result": function($_ as element()) as xs:string {$_/substring(result,0,1000) },
|
||||
"resultlength": function($_ as element()) as xs:integer {$_/string-length(result) } },
|
||||
|
||||
"filter": function($item,$q) as xs:boolean{
|
||||
some $e in ( ) satisfies
|
||||
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
|
||||
},
|
||||
"json": map{
|
||||
"created": function($_ as element()) as element(created)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/json/dateTime)!element created { .}
|
||||
},
|
||||
"id": function($_ as element()) as element(id)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/@id)!element id { .}
|
||||
},
|
||||
"query": function($_ as element()) as element(query)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/query)!element query { .}
|
||||
},
|
||||
"result": function($_ as element()) as element(result)? {
|
||||
(: xs:string :)
|
||||
fn:data($_/substring(result,0,1000))!element result { .}
|
||||
},
|
||||
"resultlength": function($_ as element()) as element(resultlength)? {
|
||||
(: xs:integer :)
|
||||
fn:data($_/string-length(result))!element resultlength { attribute type {'number'}, .}
|
||||
} },
|
||||
|
||||
"data": function() as element(task)*
|
||||
{ collection("vue-poc/tasks")/task
|
||||
},
|
||||
|
||||
"views": map{
|
||||
'filter': 'name description'
|
||||
}
|
||||
},
|
||||
"thumbnail": map{
|
||||
|
|
|
|||
33
src/vue-poc/models/entity.field.xml
Normal file
33
src/vue-poc/models/entity.field.xml
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<entity name="entity.field" xmlns="https://github.com/Quodatum/app-doc/entity">
|
||||
<has-a name="entity"/>
|
||||
<description>About an entity field. </description>
|
||||
<namespace prefix="ent"
|
||||
uri="https://github.com/Quodatum/app-doc/entity" />
|
||||
<fields>
|
||||
<field name="name" type="xs:string">
|
||||
<description>name</description>
|
||||
<xpath>@name</xpath>
|
||||
</field>
|
||||
<field name="type" type="xs:string">
|
||||
<description>type</description>
|
||||
<xpath>@type</xpath>
|
||||
</field>
|
||||
<field name="description" type="xs:string">
|
||||
<description>description</description>
|
||||
<xpath>ent:description</xpath>
|
||||
</field>
|
||||
<field name="xpath" type="xs:string">
|
||||
<description>xpath</description>
|
||||
<xpath>ent:xpath</xpath>
|
||||
</field>
|
||||
<field name="parent" type="xs:string">
|
||||
<description>containing entity</description>
|
||||
<xpath>../../@name</xpath>
|
||||
</field>
|
||||
</fields>
|
||||
<views>
|
||||
<view name="filter">name description</view>
|
||||
</views>
|
||||
<iconclass>glyphicon glyphicon-minus</iconclass>
|
||||
<data type="element(ent:field)">collection("doc-doc")//ent:field</data>
|
||||
</entity>
|
||||
63
src/vue-poc/models/entity.xml
Normal file
63
src/vue-poc/models/entity.xml
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<entity name="entity" xmlns="https://github.com/Quodatum/app-doc/entity">
|
||||
<description>About an entity i.e. something described in this framework
|
||||
</description>
|
||||
<namespace prefix="ent"
|
||||
uri="https://github.com/Quodatum/app-doc/entity" />
|
||||
<fields>
|
||||
<field name="name" type="xs:string">
|
||||
<description>name</description>
|
||||
<xpath>@name</xpath>
|
||||
</field>
|
||||
<field name="type" type="xs:string">
|
||||
<description>xquery type. Just xs:?? for now</description>
|
||||
<xpath>ent:data/@type</xpath>
|
||||
</field>
|
||||
<field name="code" type="xs:string?">
|
||||
<description>XQuery code to access items</description>
|
||||
<xpath>ent:data</xpath>
|
||||
</field>
|
||||
<field name="namespaces" type="xs:string?">
|
||||
<description>XQuery code to declare namespaces</description>
|
||||
<xpath>ent:namespace/concat("declare namespace ",@prefix,"='",@uri,"'; ")=>string-join()</xpath>
|
||||
</field>
|
||||
<field name="modules" type="xs:string?">
|
||||
<description>XQuery code for module imports</description>
|
||||
<xpath>ent:module/concat("import module namespace ",@prefix,"='",@namespace,"'; ")=>string-join()</xpath>
|
||||
</field>
|
||||
<field name="description" type="xs:string">
|
||||
<description>description</description>
|
||||
<xpath>ent:description</xpath>
|
||||
</field>
|
||||
<field name="iconclass" type="xs:string">
|
||||
<description>css class for icon</description>
|
||||
<xpath>ent:iconclass</xpath>
|
||||
</field>
|
||||
<field name="nfields" type="xs:integer">
|
||||
<description>The number of fields for this entity</description>
|
||||
<xpath>fn:count(ent:fields/ent:field)</xpath>
|
||||
</field>
|
||||
<field name="fieldslink" type="xs:string">
|
||||
<description>Links for fields description</description>
|
||||
<xpath>fn:concat("/data/entity/",@name,"/field")</xpath>
|
||||
</field>
|
||||
<field name="parent" type="xs:string?">
|
||||
<description>parent entity, if any</description>
|
||||
<xpath>ent:parent/@name</xpath>
|
||||
</field>
|
||||
<field name="parentlink" type="xs:string?">
|
||||
<description>parent entity link if any</description>
|
||||
<xpath>fn:concat("/data/entity/",ent:parent/@name)</xpath>
|
||||
</field>
|
||||
<!--
|
||||
<field name="fields" entity="field">
|
||||
<description>parent entity link if any</description>
|
||||
<xpath>ent:fields/ent:field</xpath>
|
||||
</field>
|
||||
-->
|
||||
</fields>
|
||||
<views>
|
||||
<view name="filter">name description</view>
|
||||
</views>
|
||||
<iconclass>glyphicon glyphicon-list-alt</iconclass>
|
||||
<data type="element(ent:entity)">collection("vue-poc")//ent:entity</data>
|
||||
</entity>
|
||||
33
src/vue-poc/models/task.xml
Normal file
33
src/vue-poc/models/task.xml
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<entity name="task" xmlns="https://github.com/Quodatum/app-doc/entity">
|
||||
<description>A task</description>
|
||||
<namespace prefix="xqdoc" uri="http://www.xqdoc.org/1.0"/>
|
||||
|
||||
<fields>
|
||||
<field name="id" type="xs:string">
|
||||
<description>unique id</description>
|
||||
<xpath>@id</xpath>
|
||||
</field>
|
||||
<field name="created" type="xs:string">
|
||||
<description>date</description>
|
||||
<xpath>json/dateTime</xpath>
|
||||
</field>
|
||||
<field name="query" type="xs:string">
|
||||
<description>query</description>
|
||||
<xpath>query</xpath>
|
||||
</field>
|
||||
<field name="result" type="xs:string">
|
||||
<description>result</description>
|
||||
<xpath>substring(result,0,1000)</xpath>
|
||||
</field>
|
||||
<field name="resultlength" type="xs:integer">
|
||||
<description>result</description>
|
||||
<xpath>string-length(result)</xpath>
|
||||
</field>
|
||||
</fields>
|
||||
<views>
|
||||
<view name="filter">name description</view>
|
||||
</views>
|
||||
<iconclass>fa fa-file-code-o</iconclass>
|
||||
<data type="element(task)">collection("vue-poc/tasks")/task
|
||||
</data>
|
||||
</entity>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// generated 2018-01-29T09:41:19.232Z
|
||||
// generated 2018-02-07T09:51:14.046Z
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
|
||||
Vue.component('qd-confirm',{template:`
|
||||
|
|
@ -213,6 +213,7 @@ Vue.component('vis-time-line',{template:`
|
|||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-job.vue
|
||||
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>
|
||||
|
|
@ -235,13 +236,13 @@ Vue.component('vp-job',{template:`
|
|||
</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>
|
||||
<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="" fill-height="">
|
||||
<vue-ace :content="aresult" mode="xquery" min-lines="1" wrap="true" read-only="true"></vue-ace>
|
||||
<v-flex xs12="" style="height:60px;" fill-height="">
|
||||
<vue-ace :content="result" mode="xquery" min-lines="1" wrap="true" read-only="true"></vue-ace>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -251,23 +252,26 @@ Vue.component('vp-job',{template:`
|
|||
props: ['job',
|
||||
'result',
|
||||
'jobState',
|
||||
'elapsed'],
|
||||
'elapsed',
|
||||
'query'
|
||||
],
|
||||
data:function(){
|
||||
return {
|
||||
query: "(:to do:)",
|
||||
error: null
|
||||
error: null,
|
||||
res1: "??"
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
result:function(a){
|
||||
console.log("result");
|
||||
if(this.res1 === "???"){ this.res1=a};
|
||||
console.log("vp-result:",a);
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
aresult:function(){return this.result || "none"}
|
||||
aresult:function(){return this.res1 || "none"}
|
||||
},
|
||||
created:function(){
|
||||
console.log("vp-job");
|
||||
console.log("vp-job: ", this.job,this.result);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -375,6 +379,7 @@ Vue.component('vue-ace',{template:`
|
|||
this.editor = window.ace.edit(this.$el)
|
||||
this.applySettings(this.aceSettings)
|
||||
this.editor.$blockScrolling = Infinity
|
||||
console.log("setValue: ",this.content)
|
||||
this.editor.setValue(this.content, 1)
|
||||
this.editor.setOptions({ readOnly:this.readOnly });
|
||||
if(this.minLines){
|
||||
|
|
@ -1323,25 +1328,6 @@ const Edit=Vue.extend({template:`
|
|||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/entity.vue
|
||||
const Entity=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
Entities
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/eval/eval.vue
|
||||
const Eval=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -1399,11 +1385,12 @@ const Eval=Vue.extend({template:`
|
|||
|
||||
|
||||
</v-toolbar>
|
||||
|
||||
|
||||
<v-card-text v-if="done">
|
||||
BEFORE<vp-job :job="job" :result:="result" :query="xq" :job-state="jobState" :elapsed="elapsed">IN</vp-job>AFTER
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-flex xs12="" style="height:200px" fill-height="">
|
||||
<vue-ace :content="xq" mode="xquery" wrap="true" v-on:change-content="onChange" :settings="aceSettings"></vue-ace>
|
||||
<vue-ace :content="xq" mode="xquery" wrap="true" :settings="aceSettings" v-on:change-content="onChange"></vue-ace>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
|
||||
|
|
@ -1437,9 +1424,7 @@ const Eval=Vue.extend({template:`
|
|||
</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>
|
||||
|
||||
|
|
@ -1450,7 +1435,8 @@ const Eval=Vue.extend({template:`
|
|||
data: function(){
|
||||
return {
|
||||
xq: '(: type your XQuery :)\n',
|
||||
result: null,
|
||||
result: '',
|
||||
done: false,
|
||||
elapsed: null,
|
||||
show: false,
|
||||
showError: false,
|
||||
|
|
@ -1490,21 +1476,16 @@ const Eval=Vue.extend({template:`
|
|||
submit(){
|
||||
this.showError=this.showResult=this.show=false
|
||||
this.start = performance.now();
|
||||
HTTPNE.post("eval/submit",Qs.stringify({xq:this.xq}))
|
||||
console.log("*****",Qs.stringify({xq:this.xq}));
|
||||
HTTP.post("eval/submit",Qs.stringify({xq:this.xq}))
|
||||
.then(r=>{
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.job=r.data
|
||||
this.show=true
|
||||
this.pollState()
|
||||
|
||||
})
|
||||
.catch(r=> {
|
||||
alert("catch")
|
||||
console.log("error",r)
|
||||
this.job=r.response.job
|
||||
this.showError=true;
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
pollState(){
|
||||
if(this.destroyed)return;
|
||||
|
|
@ -1526,12 +1507,14 @@ const Eval=Vue.extend({template:`
|
|||
HTTPNE.post("eval/result/"+this.job.job)
|
||||
.then(r=>{
|
||||
this.result=r.data.result+" "
|
||||
this.done= true;
|
||||
console.log("$$$$$",this.result);
|
||||
}).catch(r=> {
|
||||
// alert("catch")
|
||||
console.log("error",r)
|
||||
this.result=r.response.data
|
||||
this.showError=true;
|
||||
|
||||
this.done= true;
|
||||
});
|
||||
},
|
||||
hitme(){
|
||||
|
|
@ -1560,6 +1543,7 @@ const Eval=Vue.extend({template:`
|
|||
},
|
||||
awaitResult(show){
|
||||
// ace slow when setting large text while hidden
|
||||
|
||||
this.showError= false
|
||||
this.show= show
|
||||
this.result= "(Please wait..)"
|
||||
|
|
@ -2436,6 +2420,75 @@ const Login=Vue.extend({template:`
|
|||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/entity.vue
|
||||
const Entity=Vue.extend({template:`
|
||||
<v-card>
|
||||
<v-toolbar>
|
||||
<v-toolbar-title>Entities</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="reset()">Reset</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-container fluid="" grid-list-md="">
|
||||
|
||||
<v-data-iterator content-tag="v-layout" row="" wrap="" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination">
|
||||
<v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3="">
|
||||
<v-card>
|
||||
|
||||
<v-card-title>
|
||||
<router-link :to="{path:'entity/'+ props.item.name}">
|
||||
<h4>
|
||||
<v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
|
||||
</h4>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>{{ props.item.description }}<!--<v-card-text-->
|
||||
<v-card-actions>
|
||||
<v-list dense="">
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>Fields:</v-list-tile-content>
|
||||
<v-list-tile-content class="align-end">{{ props.item.nfields }}</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card-actions>
|
||||
</v-card-text></v-card>
|
||||
</v-flex>
|
||||
</v-data-iterator>
|
||||
</v-container>
|
||||
</v-card>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
q: 'filter',
|
||||
items: [],
|
||||
loading: false,
|
||||
rowsPerPageItems: [4, 8, 20],
|
||||
pagination: {
|
||||
rowsPerPage: 20
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getItems(){
|
||||
this.loading=true
|
||||
HTTP.get("data/entity",{params:this.q})
|
||||
.then(r=>{
|
||||
this.loading=false
|
||||
//console.log(r.data)
|
||||
//var items=r.data.items.filter(item=>{return item.text!="[GET] http://localhost:8984/vue-poc/api/log"})
|
||||
this.items=r.data.items
|
||||
})
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.getItems()
|
||||
},
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/namespace.vue
|
||||
const Namespace=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -3162,17 +3215,38 @@ const Svg=Vue.extend({template:`
|
|||
<v-container fluid="">
|
||||
<div id="canvasqPWKOg" class="canvas"></div>
|
||||
<button id="resetButtonqPWKOg">Reset</button>
|
||||
<div>
|
||||
<svg width="500" height="300"></svg>
|
||||
<br>
|
||||
<input type="range" v-model="circleSize" min="1" max="100" step="1">
|
||||
</div>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
message: 'bad route!',
|
||||
circleSize: 50
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
},
|
||||
mounted: function(createElement) {
|
||||
var svg = d3.select(this.$el).select('svg');
|
||||
this.circle = svg
|
||||
.append('circle')
|
||||
.attr('cx', '250')
|
||||
.attr('cy', '150')
|
||||
.attr('r', this.circleSize)
|
||||
},
|
||||
watch: {
|
||||
circleSize: function(newValue) {
|
||||
this.circle
|
||||
.attr('r', newValue)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
|
@ -4024,7 +4098,7 @@ router.beforeEach((to, from, next) => {
|
|||
// src: C:\Users\andy\git\vue-poc\src\vue-poc\app.vue
|
||||
const Vuepoc=Vue.extend({template:`
|
||||
<v-app id="app" :dark="dark">
|
||||
<v-navigation-drawer absolute="" v-model="showNotifications" right="" :disable-route-watcher="true" app="" width="500">
|
||||
<v-navigation-drawer stateless="" v-model="showNotifications" right="" :disable-route-watcher="true" app="" width="500">
|
||||
<v-card>
|
||||
<v-toolbar class="amber white--text">
|
||||
<v-toolbar-title>Notifications </v-toolbar-title>
|
||||
|
|
@ -4061,7 +4135,9 @@ const Vuepoc=Vue.extend({template:`
|
|||
<v-list-tile avatar="" tag="div">
|
||||
<v-list-tile-avatar>
|
||||
<v-btn icon="" @click="session">
|
||||
<v-avatar size="36">
|
||||
<img src="/vue-poc/ui/quodatum.gif">
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
|
|
@ -4104,7 +4180,9 @@ const Vuepoc=Vue.extend({template:`
|
|||
</v-card>
|
||||
</v-menu>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q" hide-details="" single-line="" dark="" @keyup.enter="search"></v-text-field>
|
||||
<v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select>
|
||||
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu left="" transition="v-fade-transition">
|
||||
|
|
@ -4147,6 +4225,10 @@ const Vuepoc=Vue.extend({template:`
|
|||
router,
|
||||
data:function(){return {
|
||||
q: "",
|
||||
loading: false,
|
||||
searchItems:[],
|
||||
si: '',
|
||||
items2:["todo","set","search"],
|
||||
status: {},
|
||||
drawer: true,
|
||||
showNotifications: false,
|
||||
|
|
@ -4231,15 +4313,24 @@ const Vuepoc=Vue.extend({template:`
|
|||
]},
|
||||
|
||||
{href: '/settings',text: 'Settings',icon: 'settings' },
|
||||
{href: '/about',text: 'About (v1.1.1)' , icon: 'help' },
|
||||
{href: '/about',text: 'About (v1.1.3)' , icon: 'help' },
|
||||
]
|
||||
|
||||
}},
|
||||
methods: {
|
||||
querySelections (v) {
|
||||
this.loading = true
|
||||
// Simulated ajax query
|
||||
setTimeout(() => {
|
||||
this.items2 = ["aa","bb",this.si],
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
session(){
|
||||
this.$router.push({path: '/session'})
|
||||
},
|
||||
search(){
|
||||
goSearch(){
|
||||
this.$router.push({path: '/search',query: { q: this.q }})
|
||||
},
|
||||
logout(){
|
||||
|
|
@ -4262,8 +4353,16 @@ const Vuepoc=Vue.extend({template:`
|
|||
showNotifications: function (val) {
|
||||
console.log("showNotifications",val);
|
||||
if(!val)this.$notification.unseen=0;
|
||||
},
|
||||
search (val) {
|
||||
val && this.querySelections(val)
|
||||
},
|
||||
si:function(val){
|
||||
console.log("si: ",val);
|
||||
this.querySelections();
|
||||
}
|
||||
},
|
||||
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
var that=this
|
||||
|
|
@ -4277,6 +4376,19 @@ const Vuepoc=Vue.extend({template:`
|
|||
//alert("vue error");
|
||||
};
|
||||
|
||||
// Add a response interceptor
|
||||
HTTP.interceptors.response.use(
|
||||
(response)=> {
|
||||
// Do something with response data
|
||||
return response;
|
||||
},
|
||||
(error) =>{
|
||||
// interupt restxq single
|
||||
console.log("HTTP.interceptors.response.use ",error)
|
||||
if(460 != error.response.status)this.showAlert("http error:\n"+error.response.data)
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
HTTP.get("status")
|
||||
.then(r=>{
|
||||
console.log("status",r.data)
|
||||
|
|
@ -4284,6 +4396,7 @@ const Vuepoc=Vue.extend({template:`
|
|||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy(){
|
||||
console.log("destory-----------")
|
||||
|
||||
|
|
@ -4311,7 +4424,7 @@ const AXIOS_CONFIG={
|
|||
// Add a response interceptor
|
||||
axios.interceptors.response.use(function (response) {
|
||||
// Do something with response data
|
||||
console.log("AXIOS",response);
|
||||
//console.log("AXIOS",response);
|
||||
return response;
|
||||
}, function (error) {
|
||||
// Do something with response error
|
||||
|
|
@ -4330,7 +4443,7 @@ HTTP.interceptors.response.use((response) => {
|
|||
var s=Math.floor(performance.now() - response.config.qdStartTime);
|
||||
var c=response.config;
|
||||
var url=response.config.url + "?" + c.paramsSerializer(c.params);
|
||||
console.log("interceptors time:",s, response.config);
|
||||
//console.log("interceptors time:",s, response.config);
|
||||
Notification.add(s +" "+ url );
|
||||
}
|
||||
return response;
|
||||
|
|
|
|||
|
|
@ -9,6 +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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="https://unpkg.com/vuetify@1.0.0-beta.5/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/vue-form-generator@2.1.0/dist/vfg.css"/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue