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

puzzle parts

Browse source
This commit is contained in:
Andy Bunce 2017-06-21 18:09:52 +01:00
parent e608486453
commit c747404055
39 changed files with 2068 additions and 540 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/vue-poc/expath-pkg.xml
View file

@ -1,9 +1,9 @@
<package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml" <package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
abbrev="vue-poc" version="0.0.2" spec="1.0"> abbrev="vue-poc" version="0.0.3" spec="1.0">
<title>vue-poc test of vue.js.</title> <title>vue-poc test of vue.js.</title>
<dependency name="ace" version="1.2.6" /> <dependency name="ace" version="1.2.7" />
<dependency name="vuetify" version="0.12.5" /> <dependency name="vuetify" version="0.12.5" />
<dependency name="vue" version="2.3.3" /> <dependency name="vue" version="2.3.4" />
<dependency name="vue-router" version="2.5.3" /> <dependency name="vue-router" version="2.5.3" />
<dependency name="google-material" version="0.0.0" /> <dependency name="google-material" version="0.0.0" />
<dependency name="js-beautify" version="1.6.12" /> <dependency name="js-beautify" version="1.6.12" />

1287
src/vue-poc/lib/media-types.properties Normal file
View file

File diff suppressed because it is too large Load diff

60
src/vue-poc/lib/mimetype.xqm Normal file
View file

@ -0,0 +1,60 @@
xquery version "3.1";
module namespace mt = 'quodatum.data.mimetype';
declare namespace MediaType='java:org.basex.util.http.MediaType';
declare %basex:lazy variable $mt:lines:="media-types.properties"=>fn:unparsed-text-lines();
(:~
: fetch function for given data type "text","xml","binary"
: @return function()
:)
declare function mt:fetch-fn($treat as xs:string)
as function(*)
{
switch ($treat)
case "text"
return fetch:text(?)
case "xml"
return fetch:text(?)
default
return fetch:binary(?)
};
(:~ get mediatype and dataformat as map
: @return e.g. {type:"application/xml","treat-as":"xml"}
:)
declare function mt:type($filepath as xs:string)
as map(*)
{
let $f:="a." || mt:base-ext($filepath)
let $a:=MediaType:get($f)
let $type:= if($a="application/sparql-query") then
"text"
else if(MediaType:isXML($a)) then
"xml"
else if(MediaType:isText($a) or MediaType:isXQuery($a))then
"text"
else
"binary"
return map{"type":MediaType:type($a) ,"treat-as":$type}
};
(:~ treat as extension
:)
declare function mt:base-ext($filepath as xs:string)
{
let $ext:=file:name($filepath)=>substring-after(".")
let $types:=map{"vue":".html"}
return if($types($ext)) then $types($ext) else $ext
};
(:~
: map of keys:all mimetypes, values: extensions as array
:)
declare function mt:types(){
fold-left($mt:lines,
map{},
function($acc,$line){
let $p:=tokenize ($line,"=")
return map:merge(($acc,map{tail($p):head($p)}),map { 'duplicates': 'combine' })
})
};

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

@ -1,26 +1,95 @@
// generated 2017-06-16T23:13:22.444+01:00 // generated 2017-06-21T16:59:58.292+01:00
const Edit=Vue.extend({template:` /**
<v-container fluid=""> * vue filters
<v-layout row="" wrap=""> */
<v-flex xs12="">
<v-toolbar class="green">
<v-toolbar-title>
<v-btn @click.native="showfiles()" small="" icon="" v-tooltip:top="{ html: path.join('/') }">
<v-icon>folder</v-icon></v-btn>
<span>{{ name }}</span>
<v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
<v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
<v-chip small="" class="primary white--text">{{ mode }}</v-chip>
//Define the date time format filter
Vue.filter("formatDate", function(date) {
return moment(date).format("MMMM D, YYYY")
});
Vue.filter('readablizeBytes', function (bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1000,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
});
Vue.filter("any", function(any) {
return "ANY"
});
/**
* Vue filter to round the decimal to the given place.
* http://jsfiddle.net/bryan_k/3ova17y9/
*
* @param {String} value The value string.
* @param {Number} decimals The number of decimal places.
*/
Vue.filter('round', function(value, decimals) {
if(!value) {
value = 0;
}
if(!decimals) {
decimals = 0;
}
value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
return value;
});const Notfound=Vue.extend({template:`
<v-container fluid="">
Not found
</v-container>
`,
data: function(){
return {
message: 'bad route!'
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
);
const Edit=Vue.extend({template:`
<v-container fluid="">
<v-snackbar top="" error="" v-model="snackbar">
{{ message }}
<v-btn flat="" @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
</v-snackbar>
<v-card>
<v-app-bar>
<v-menu offset-y="">
<v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn>
<v-list>
<v-list-item v-for="item in path" :key="item">
<v-list-tile>
<v-list-tile-title @click="showfiles()">{{ item }}</v-list-tile-title>
</v-list-tile>
</v-list-item>
</v-list>
</v-menu>
<v-toolbar-title>
<span>{{ name }}</span>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items> <v-toolbar-items>
<v-chip @click.native="acecmd('goToNextError')" v-tooltip:right="{ html: 'Annotations: Errors,Warning and Info' }"> <span v-tooltip:top="{ html: 'Change' }">
<v-avatar> <v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
<v-icon right="">navigate_next</v-icon> <v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
</v-avatar> </span>
<v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar> <v-chip small="" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar> <v-chip @click.native="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
<v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar> <v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
<v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>
<v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>
<v-avatar>
<v-icon black="">navigate_next</v-icon>
</v-avatar>
</v-chip> </v-chip>
<v-btn dark="" icon="" @click.native="acecmd('outline')"> <v-btn dark="" icon="" @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
@ -75,38 +144,24 @@
</v-btn> </v-btn>
<v-list> <v-list>
<v-list-item @click="fetch('/vue-poc/vue-poc.xqm')"> <v-list-item>
<v-list-tile> <v-list-tile>
<v-list-tile-title>load xquery</v-list-tile-title> <v-list-tile-title>unused</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
<v-list-tile>
<v-list-tile-title>load xml</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
<v-list-tile>
<v-list-tile-title>load js</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.html')">load html</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.css')">load css</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-app-bar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-dialog v-model="clearDialog">
<v-card>
<v-flex xs12="" style="height:70vh" v-if="!busy" fill-height="">
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
<v-dialog v-model="clearDialog">
<v-card-row> <v-card-row>
<v-card-title>Clear?</v-card-title> <v-card-title>Clear?</v-card-title>
</v-card-row> </v-card-row>
@ -117,15 +172,9 @@
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn> <v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn> <v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
</v-card-row> </v-card-row>
</v-card> </v-dialog></v-flex></v-card>
</v-dialog>
</v-flex>
<v-flex xs12="" style="height:70vh" v-if="!busy" fill-height="">
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
</v-flex>
</v-layout>
</v-container> </v-container>
`, `,
@ -139,16 +188,20 @@
url:'', url:'',
name:'', name:'',
path:[], path:[],
mimetype:"",
wrap:false, wrap:false,
busy:false, busy:false,
clearDialog:false, clearDialog:false,
annotations:null, annotations:null,
dirty:false, dirty:false,
snackbar:false,
message:"Cant do that",
mimemap:{ mimemap:{
"text/xml":"xml", "text/xml":"xml",
"application/xml":"xml", "application/xml":"xml",
"application/xquery":"xquery", "application/xquery":"xquery",
"text/ecmascript":"javascript", "text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html", "text/html":"html",
"text/css":"css" "text/css":"css"
} }
@ -171,9 +224,10 @@
// load from url // load from url
fetch(url){ fetch(url){
this.busy=true this.busy=true
HTTP.get("raw?url="+url,axios_json) HTTP.get("edit?url="+url,axios_json)
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype
this.mode=this.acetype(r.data.mimetype) this.mode=this.acetype(r.data.mimetype)
this.contentA=r.data.data this.contentA=r.data.data
var a=url.split("/") var a=url.split("/")
@ -218,7 +272,8 @@
a=css_beautify(a, { indent_size: 2 }) a=css_beautify(a, { indent_size: 2 })
break; break;
default: default:
alert("beaut: " + this.mode) this.message="No beautify yet for "+this.mode
this.snackbar=true
} }
this.contentA=a this.contentA=a
this.busy=false this.busy=false
@ -255,82 +310,65 @@
} }
); );
const Extension=Vue.extend({template:` const Eval=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<v-layout> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
<vue-ace editor-id="editorA" :content="xq" mode="xquery" wrap="true" v-on:change-content="onChange"></vue-ace>
<table> </v-card>
<tbody><tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:3em;" @click="click(row,col)">{{cell}}</td>
</tr>
</tbody></table>
</v-layout>
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return {grid: [ return {
[1,5,8,12], xq: '(:~ do something :)'
[2,6,9,13], }
[3,7,10,14], },
[4,null,11,15] methods:{
], onChange(){
empty:[3,1] console.log("go")
} }
}, },
methods: { created:function(){
click: function (row,col) { console.log("notfound",this.$route.query.q)
var g=this.grid
var h=g[row][col]
g[row][col]=null
g[this.empty[0]][this.empty[1]]=h
var e=[row,col]
this.empty=e
this.grid= g
console.log("click",this.grid,e)
this.$forceUpdate()
}
} }
} }
); );
const Files=Vue.extend({template:` const Files=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<v-card> <v-card>
<v-toolbar class="green"> <v-app-bar>
<v-menu offset-y=""> <v-menu offset-y="">
<v-btn primary="" icon="" dark="" slot="activator"><v-icon>folder</v-icon></v-btn> <v-btn icon="" dark="" slot="activator"><v-icon>folder</v-icon></v-btn>
<v-list> <v-list>
<v-list-item v-for="item in crumbs" :key="item"> <v-list-item v-for="item in crumbs" :key="item">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title> <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title> <v-toolbar-title>{{ url }}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" dark="" @keyup.native.enter="filter"></v-text-field> <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" dark="" @keyup.native.enter="filter"></v-text-field>
<v-icon>view_module</v-icon> <v-icon>view_module</v-icon>
</v-toolbar> </v-app-bar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
<v-list v-if="!busy" two-line="" subheader=""> <v-list v-if="!busy" two-line="" subheader="">
<v-subheader inset="">Folders</v-subheader> <v-subheader inset="">Folders</v-subheader>
<v-list-item v-for="item in folders" v-bind:key="item.name"> <v-list-item v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)">
<v-list-tile avatar=""> <v-list-tile avatar="">
<v-list-tile-avatar @click="folder(item.name)"> <v-list-tile-avatar>
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content @click="folder(item.name)"> <v-list-tile-content>
<v-list-tile-title>{{ item.name }}</v-list-tile-title> <v-list-tile-title>{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon="" ripple="" @click.native="info(item.name)"> <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
@ -338,23 +376,24 @@ const Files=Vue.extend({template:`
</v-list-item> </v-list-item>
<v-divider inset=""></v-divider> <v-divider inset=""></v-divider>
<v-subheader inset="">Files</v-subheader> <v-subheader inset="">Files</v-subheader>
<v-list-item v-for="item in files" v-bind:key="item.name"> <v-list-item v-for="item in files" v-bind:key="item.name" @click="file(item.name)">
<v-list-tile> <v-list-tile>
<v-list-tile-avatar> <v-list-tile-avatar>
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title> <v-list-tile-title>{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon="" ripple=""> <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-navigation-drawer right="" light="" temporary="" v-model="infodraw">Some info here {{selected}}</v-navigation-drawer>
</v-card> </v-card>
</v-container> </v-container>
`, `,
@ -366,7 +405,9 @@ const Files=Vue.extend({template:`
files:[], files:[],
items:["root"], items:["root"],
q:"", q:"",
busy:false busy:false,
infodraw:false,
selected:""
} }
}, },
methods:{ methods:{
@ -403,8 +444,9 @@ const Files=Vue.extend({template:`
filter(){ filter(){
console.log("TODO") console.log("TODO")
}, },
info(){ info(sel){
alert("info") this.selected=sel
this.infodraw=true
}, },
readablizeBytes(v){ readablizeBytes(v){
return Vue.filter('readablizeBytes')(v) return Vue.filter('readablizeBytes')(v)
@ -433,6 +475,52 @@ const Files=Vue.extend({template:`
} }
} }
);
const History=Vue.extend({template:`
<v-container fluid="">
<v-list>
<v-list-item v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)">
<v-list-tile avatar="">
<v-list-tile-action>
<v-icon v-if="item.icon" class="pink--text">star</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.url"></v-list-tile-title>
</v-list-tile-content>
<v-list-tile-avatar>
<img v-bind:src="item.avatar">
</v-list-tile-avatar>
</v-list-tile>
</v-list-item>
</v-list>
</v-container>
`,
data: function(){
return {
message: 'Hello Vue.js!',
items:[]
}
},
methods:{
get() {
HTTP.get('history')
.then((res) => {
this.items = res.data.items;
console.log("items",this.items)
});
},
doEdit(url){
console.log("DD"+url)
router.push({ path: 'edit', query: { url: url }})
}
},
created:function(){
this.get()
console.log("history")
}
}
); );
const Home=Vue.extend({template:` const Home=Vue.extend({template:`
<v-layout class="ma-5"> <v-layout class="ma-5">
@ -440,7 +528,7 @@ const Home=Vue.extend({template:`
<v-card hover="" raised=""> <v-card hover="" raised="">
<v-card-row height="200px" class="pa-5 green lighten-1"> <v-card-row height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.1 v0.0.2
</v-card-row> </v-card-row>
</v-card> </v-card>
</v-flex> </v-flex>
@ -448,11 +536,11 @@ const Home=Vue.extend({template:`
<p>This is a experiment in using <code>vue.js</code>.</p> <p>This is a experiment in using <code>vue.js</code>.</p>
<ul> <ul>
<li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li> <li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
<li><a href="https://github.com/monterail/vue-multiselect">vue-multiselect</a></li> <li><a href="https://github.com/monterail/vue-multiselect" target="new">vue-multiselect</a></li>
<li><a href="https://github.com/sagalbot/vue-select"><s>vue-select</s></a></li> <li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
<li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li> <li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</a></li>
<li><a href="http://localhost:8984/doc/#/data/app/vue-poc">doc</a></li> <li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
<li><a href="/dba" target="new">DBA app</a></li>
</ul> </ul>
</v-flex> </v-flex>
<v-btn floating="floating"> <v-btn floating="floating">
@ -577,17 +665,20 @@ const People=Vue.extend({template:`
</v-layout> </v-layout>
<v-layout> <v-layout>
<v-flex xs5=""> <v-flex xs5="">
<v-card-row img="music.jpg" height="300px"></v-card-row> <v-card-row img="resources/music.jpg" height="300px"></v-card-row>
</v-flex> </v-flex>
<v-flex xs5=""> <v-flex xs1="">
<v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row> <v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="60px"></v-card-row>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return {message: 'Hello Vue.js!'} return {
message: 'Hello Vue.js!',
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
}
}, },
methods: { methods: {
reverseMessage: function () { reverseMessage: function () {
@ -609,11 +700,12 @@ const Ping=Vue.extend({template:`
<th>Repeat</th> <th>Repeat</th>
<th>Last</th> <th>Last</th>
<th>Count</th> <th>Count</th>
<th>Median</th>
<th>Avg</th> <th>Avg</th>
<th>min</th> <th>min</th>
<th>max</th> <th>max</th>
<th>Median</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -632,9 +724,7 @@ const Ping=Vue.extend({template:`
<td> <td>
<span>{{getValues.count}}</span> <span>{{getValues.count}}</span>
</td> </td>
<td>
<span>{{getValues.median}}</span>
</td>
<td> <td>
<span>{{getValues.avg | round(2)}}</span> <span>{{getValues.avg | round(2)}}</span>
</td> </td>
@ -645,6 +735,9 @@ const Ping=Vue.extend({template:`
<td> <td>
<span>{{getValues.max}}</span> <span>{{getValues.max}}</span>
</td> </td>
<td>
<span>{{getValues.median}}</span>
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -686,7 +779,7 @@ const Ping=Vue.extend({template:`
getValues: new perfStat(), getValues: new perfStat(),
postValues: new perfStat(), postValues: new perfStat(),
repeat:{get:false,post:false}, repeat:{get:false,post:false},
counter:0 counter:null
} }
}, },
methods:{ methods:{
@ -722,6 +815,47 @@ const Ping=Vue.extend({template:`
} }
} }
);
const Puzzle=Vue.extend({template:`
<v-container fluid="">
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
<v-layout>
<table>
<tbody><tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:3em;" @click="click(row,col)">{{cell}}</td>
</tr>
</tbody></table>
</v-layout>
</v-container>
`,
data: function(){
return {grid: [
[1,5,8,12],
[2,6,9,13],
[3,7,10,14],
[4,null,11,15]
],
empty:[3,1]
}
},
methods: {
click: function (row,col) {
var g=this.grid
var h=g[row][col]
g[row][col]=null
g[this.empty[0]][this.empty[1]]=h
var e=[row,col]
this.empty=e
this.grid= g
console.log("click",this.grid,e)
this.$forceUpdate()
}
}
}
); );
const Search=Vue.extend({template:` const Search=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
@ -812,47 +946,37 @@ const Settings=Vue.extend({template:`
<v-list-item> <v-list-item>
<v-list-tile avatar=""> <v-list-tile avatar="">
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.notifications"></v-checkbox> <v-checkbox v-model="ace.enableSnippets"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Notifications</v-list-tile-title> <v-list-tile-title>enableSnippets</v-list-tile-title>
<v-list-tile-sub-title>Allow notifications</v-list-tile-sub-title> <v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<v-list-tile avatar=""> <v-list-tile avatar="">
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.sound"></v-checkbox> <v-checkbox v-model="ace.enableBasicAutocompletion"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Sound</v-list-tile-title> <v-list-tile-title>enableBasicAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>Hangouts message</v-list-tile-sub-title> <v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<v-list-tile avatar=""> <v-list-tile avatar="">
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.video"></v-checkbox> <v-checkbox v-model="ace.enableLiveAutocompletion"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Video sounds</v-list-tile-title> <v-list-tile-title>enableLiveAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>Hangouts vidoe call</v-list-tile-sub-title> <v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile avatar="">
<v-list-tile-action>
<v-checkbox v-model="ace.invites"></v-checkbox>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Invites</v-list-tile-title>
<v-list-tile-sub-title>Notify when receiving invites</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card> </v-card>
</v-flex> </v-flex>
@ -862,10 +986,9 @@ const Settings=Vue.extend({template:`
data () { data () {
return { return {
ace: { ace: {
notifications: false, enableSnippets: true,
sound: false, enableBasicAutocompletion: true,
video: false, enableLiveAutocompletion: true
invites: false
} }
} }
}, },
@ -1020,42 +1143,7 @@ const HTTP = axios.create({
}); });
const axios_json={ headers: {accept: 'application/json'}}; const axios_json={ headers: {accept: 'application/json'}};
// Filters:
//Define the date time format filter
Vue.filter("formatDate", function(date) {
return moment(date).format("MMMM D, YYYY")
});
Vue.filter('readablizeBytes', function (bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1000,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
});
Vue.filter("any", function(any) {
return "ANY"
});
/**
* Vue filter to round the decimal to the given place.
* http://jsfiddle.net/bryan_k/3ova17y9/
*
* @param {String} value The value string.
* @param {Number} decimals The number of decimal places.
*/
Vue.filter('round', function(value, decimals) {
if(!value) {
value = 0;
}
if(!decimals) {
decimals = 0;
}
value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
return value;
});
Vue.config.errorHandler = function (err, vm, info) { Vue.config.errorHandler = function (err, vm, info) {
// handle error // handle error
@ -1087,10 +1175,14 @@ const router = new VueRouter({
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} }, { path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
{ path: '/files', component: Files,meta:{title:"Files"} }, { path: '/files', component: Files,meta:{title:"File system"} },
{ path: '/files', component: Files,meta:{title:"File system"} },
{ path: '/ping', component: Ping,meta:{title:"Ping"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} },
{ path: '/settings', component: Settings,meta:{title:"Settings"} }, { path: '/settings', component: Settings,meta:{title:"Settings"} },
{ path: '/extension', component: Extension,meta:{title:"Xform"} } { path: '/history', component: History,meta:{title:"File History"} },
{ path: '/puzzle', component: Puzzle,meta:{title:"Jigsaw"} },
{ path: '/eval', component: Eval,meta:{title:"Evaluate XQuery"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
], ],
}); });
router.afterEach(function(route) { router.afterEach(function(route) {
@ -1121,74 +1213,22 @@ const app = new Vue({
q:"", q:"",
status:{}, status:{},
drawer:true, drawer:true,
title:"@TODO title",
mini: false, mini: false,
items: [{ items: [
href: '/', {href: '/',title: 'Home', icon: 'home' },
router: true, {href: 'files', title: 'File system',icon: 'folder' },
title: 'Home', {href: 'edit',title: 'edit',icon: 'mode_edit'},
icon: 'home' {href: 'history',title: 'history',icon: 'history'},
}, { {href: 'eval',title: 'Evaluate',icon: 'cake'},
href: 'files', {href: 'people',title: 'People',icon: 'person'},
router: true, {href: 'select',title: 'select',icon: 'extension'},
title: 'files', {href: 'puzzle',title: 'Puzzle',icon: 'extension'},
icon: 'folder' {href: 'options',title: 'options',icon: 'domain'},
}, { {href: 'tabs',title: 'tabs',icon: 'switch_camera'},
href: 'edit', {href: 'ping',title: 'ping',icon: 'update'},
router: true, {href: 'thumbnail',title: 'thumbnail',icon: 'touch_app'},
title: 'edit', {href: 'settings',title: 'settings',icon: 'settings' }
icon: 'mode_edit' ]
}, {
href: 'search',
router: true,
title: 'search',
icon: 'search'
}, {
href: 'people',
router: true,
title: 'People',
icon: 'person'
}, {
href: 'select',
router: true,
title: 'select',
icon: 'extension'
}, {
href: 'options',
router: true,
title: 'options',
icon: 'domain'
}, {
href: 'tabs',
router: true,
title: 'tabs',
icon: 'switch_camera'
}, {
href: 'login',
router: true,
title: 'login',
icon: 'account_balance'
}, {
href: 'ping',
router: true,
title: 'ping',
icon: 'update'
},{
href: 'thumbnail',
router: true,
title: 'thumbnail',
icon: 'touch_app'
},{
href: 'settings',
router: true,
title: 'settings',
icon: 'settings'
},{
href: 'extension',
router: true,
title: 'extension',
icon: 'extension'
}]
}}, }},
methods: { methods: {

10
src/vue-poc/static/app.html
View file

@ -15,14 +15,14 @@
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"> <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/> <link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/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://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="https://unpkg.com/vuetify@0.12.7/dist/vuetify.min.js"></script> <script src="https://unpkg.com/vuetify@0.12.7/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://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.6/ace.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.6/ext-language_tools.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
<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.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-css.js"></script>
@ -73,13 +73,15 @@
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
<v-toolbar class="blue" > <v-toolbar class="green lighten-1" >
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon> <v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon>
<v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title> <v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Search..." v-model="q" <v-text-field prepend-icon="search" label="Search..." v-model="q"
hide-details single-line dark @keyup.native.enter="search"></v-text-field> hide-details single-line dark @keyup.native.enter="search"></v-text-field>
<v-avatar>
{{status.user}} {{status.user}}
</v-avatar>
</v-toolbar> </v-toolbar>
<main> <main>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">

125
src/vue-poc/static/core.js
View file

@ -11,42 +11,7 @@ const HTTP = axios.create({
}); });
const axios_json={ headers: {accept: 'application/json'}}; const axios_json={ headers: {accept: 'application/json'}};
// Filters:
//Define the date time format filter
Vue.filter("formatDate", function(date) {
return moment(date).format("MMMM D, YYYY")
});
Vue.filter('readablizeBytes', function (bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1000,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
});
Vue.filter("any", function(any) {
return "ANY"
});
/**
* Vue filter to round the decimal to the given place.
* http://jsfiddle.net/bryan_k/3ova17y9/
*
* @param {String} value The value string.
* @param {Number} decimals The number of decimal places.
*/
Vue.filter('round', function(value, decimals) {
if(!value) {
value = 0;
}
if(!decimals) {
decimals = 0;
}
value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
return value;
});
Vue.config.errorHandler = function (err, vm, info) { Vue.config.errorHandler = function (err, vm, info) {
// handle error // handle error
@ -78,10 +43,14 @@ const router = new VueRouter({
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} }, { path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
{ path: '/files', component: Files,meta:{title:"Files"} }, { path: '/files', component: Files,meta:{title:"File system"} },
{ path: '/files', component: Files,meta:{title:"File system"} },
{ path: '/ping', component: Ping,meta:{title:"Ping"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} },
{ path: '/settings', component: Settings,meta:{title:"Settings"} }, { path: '/settings', component: Settings,meta:{title:"Settings"} },
{ path: '/extension', component: Extension,meta:{title:"Xform"} } { path: '/history', component: History,meta:{title:"File History"} },
{ path: '/puzzle', component: Puzzle,meta:{title:"Jigsaw"} },
{ path: '/eval', component: Eval,meta:{title:"Evaluate XQuery"} },
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
], ],
}); });
router.afterEach(function(route) { router.afterEach(function(route) {
@ -112,74 +81,22 @@ const app = new Vue({
q:"", q:"",
status:{}, status:{},
drawer:true, drawer:true,
title:"@TODO title",
mini: false, mini: false,
items: [{ items: [
href: '/', {href: '/',title: 'Home', icon: 'home' },
router: true, {href: 'files', title: 'File system',icon: 'folder' },
title: 'Home', {href: 'edit',title: 'edit',icon: 'mode_edit'},
icon: 'home' {href: 'history',title: 'history',icon: 'history'},
}, { {href: 'eval',title: 'Evaluate',icon: 'cake'},
href: 'files', {href: 'people',title: 'People',icon: 'person'},
router: true, {href: 'select',title: 'select',icon: 'extension'},
title: 'files', {href: 'puzzle',title: 'Puzzle',icon: 'extension'},
icon: 'folder' {href: 'options',title: 'options',icon: 'domain'},
}, { {href: 'tabs',title: 'tabs',icon: 'switch_camera'},
href: 'edit', {href: 'ping',title: 'ping',icon: 'update'},
router: true, {href: 'thumbnail',title: 'thumbnail',icon: 'touch_app'},
title: 'edit', {href: 'settings',title: 'settings',icon: 'settings' }
icon: 'mode_edit' ]
}, {
href: 'search',
router: true,
title: 'search',
icon: 'search'
}, {
href: 'people',
router: true,
title: 'People',
icon: 'person'
}, {
href: 'select',
router: true,
title: 'select',
icon: 'extension'
}, {
href: 'options',
router: true,
title: 'options',
icon: 'domain'
}, {
href: 'tabs',
router: true,
title: 'tabs',
icon: 'switch_camera'
}, {
href: 'login',
router: true,
title: 'login',
icon: 'account_balance'
}, {
href: 'ping',
router: true,
title: 'ping',
icon: 'update'
},{
href: 'thumbnail',
router: true,
title: 'thumbnail',
icon: 'touch_app'
},{
href: 'settings',
router: true,
title: 'settings',
icon: 'settings'
},{
href: 'extension',
router: true,
title: 'extension',
icon: 'extension'
}]
}}, }},
methods: { methods: {

39
src/vue-poc/static/filters.js Normal file
View file

@ -0,0 +1,39 @@
/**
* vue filters
*/
//Define the date time format filter
Vue.filter("formatDate", function(date) {
return moment(date).format("MMMM D, YYYY")
});
Vue.filter('readablizeBytes', function (bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1000,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
});
Vue.filter("any", function(any) {
return "ANY"
});
/**
* Vue filter to round the decimal to the given place.
* http://jsfiddle.net/bryan_k/3ova17y9/
*
* @param {String} value The value string.
* @param {Number} decimals The number of decimal places.
*/
Vue.filter('round', function(value, decimals) {
if(!value) {
value = 0;
}
if(!decimals) {
decimals = 0;
}
value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
return value;
});

0
src/vue-poc/static/music.jpg → src/vue-poc/static/resources/music.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 193 KiB

After

Width:  |  Height:  |  Size: 193 KiB

8
src/vue-poc/static/resources/sparql.rq Normal file
View file

@ -0,0 +1,8 @@
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
PREFIX card: <http://www.w3.org/People/Berners-Lee/card#>
SELECT ?homepage
FROM <http://www.w3.org/People/Berners-Lee/card>
WHERE {
card:i foaf:knows ?known .
?known foaf:homepage ?homepage .
}

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-0-0.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-0-1.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-0-2.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-0-3.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-1-0.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-1-1.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-1-2.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-1-3.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-2-0.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-2-1.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-2-2.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-2-3.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-3-0.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-3-1.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-3-2.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/vue-poc/static/resources/tiles/music [www.imagesplitter.net]-3-3.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

65
src/vue-poc/static/resources/turtle.ttl Normal file
View file

@ -0,0 +1,65 @@
@prefix fuseki: <http://jena.apache.org/fuseki#> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix tdb: <http://jena.hpl.hp.com/2008/tdb#> .
@prefix ja: <http://jena.hpl.hp.com/2005/11/Assembler#> .
## ---------------------------------------------------------------
[] ja:loadClass "org.apache.jena.tdb.TDB" .
tdb:DatasetTDB rdfs:subClassOf ja:RDFDataset .
tdb:GraphTDB rdfs:subClassOf ja:Model .
[] rdf:type fuseki:Server ;
# Timeout - server-wide default: milliseconds.
# Format 1: "1000" -- 1 second timeout
# Format 2: "10000,60000" -- 10s timeout to first result, then 60s
timeout for the rest of query.
# See java doc for ARQ.queryTimeout
# ja:context [ ja:cxtName "arq:queryTimeout" ; ja:cxtValue "10000" ] ;
# ja:loadClass "your.code.Class" ;
fuseki:services (
<#reminer1>
) .
## ---------------------------------------------------------------
## Updatable in-memory dataset.
<#reminer1> rdf:type fuseki:Service ;
# URI of the dataset -- http://host:port/reminer1
fuseki:name "/test" ;
fuseki:serviceQuery "sparql" ;
fuseki:serviceQuery "query" ;
fuseki:serviceUpdate "update" ;
fuseki:serviceUpload "upload" ;
fuseki:serviceReadWriteGraphStore "data" ;
fuseki:serviceReadGraphStore "get" ;
fuseki:dataset <#rdf_dataset> ;
.
## In-memory, initially empty.
## This database set-up allows OWL inference.
<#rdf_dataset> rdf:type ja:RDFDataset ;
ja:defaultGraph <#infGraph>;
##ja:defaultGraph <#modelDft>;
.
<#infGraph> rdf:type ja:InfModel ;
ja:reasoner [ ja:reasonerURL <http://jena.hpl.hp.com/2003/
GenericRuleReasoner> ];
ja:rules: [ja:rulesFrom <file:./../rules/graphTest.rules>; ];
ja:baseModel <#tdbGraph>;
.
<#tdbGraph> rdf:type tdb:GraphTDB ;
tdb:dataset <#tdb_datset> ;
tdb:graphName <Graph_Test>;
.
<#tdb_datset> rdf:type tdb:DatasetTDB ;
tdb:location "db" ;
tdb:unionDefaultGraph true ;
.
## ---------------------------------------------------------------

28
src/vue-poc/static/vue-ace.js
View file

@ -13,8 +13,14 @@ Vue.component('vue-ace', {
return { return {
editor: Object, editor: Object,
beforeContent: '', beforeContent: '',
annots:{error:0,warning:0,info:0} aceSettings:{
} enableSnippets:true,
enableBasicAutocompletion:true,
enableLiveAutocompletion:true},
annots:{
error:0,warning:0,info:0
}
}
}, },
watch: { watch: {
'content' (value) { 'content' (value) {
@ -32,13 +38,15 @@ Vue.component('vue-ace', {
} }
}, },
methods:{ methods:{
command(cmd){ command(cmd){
//alert("fold") //alert("fold")
var cm = this.editor.commands var cm = this.editor.commands
//console.log(cm.commands) //console.log(cm.commands)
cm.exec(cmd, this.editor) cm.exec(cmd, this.editor)
}, },
set(){
testAnnotations(){
this.editor.getSession().setAnnotations([{ this.editor.getSession().setAnnotations([{
row: 1, row: 1,
column: 0, column: 0,
@ -47,15 +55,13 @@ Vue.component('vue-ace', {
}]); }]);
} }
}, },
mounted () { mounted () {
const mode = this.mode || 'text' const mode = this.mode || 'text'
const theme = this.theme || 'github' const theme = this.theme || 'github'
const wrap = this.wrap || false const wrap = this.wrap || false
const aceSettings={ const aceSettings=this.aceSettings
snippets:true,
basicAutocompletion:true,
liveAutocompletion:true}
const readOnly = this.readOnly || false const readOnly = this.readOnly || false
ace.config.set("workerPath", "/vue-poc/ui/ace-workers") ace.config.set("workerPath", "/vue-poc/ui/ace-workers")
@ -70,9 +76,11 @@ Vue.component('vue-ace', {
session.setUseWrapMode(wrap) session.setUseWrapMode(wrap)
this.editor.setTheme(`ace/theme/${theme}`) this.editor.setTheme(`ace/theme/${theme}`)
this.editor.setOptions({ readOnly:this.readOnly, this.editor.setOptions({ readOnly:this.readOnly,
enableSnippets : aceSettings.snippets, enableSnippets : aceSettings.enableSnippets,
enableBasicAutocompletion : aceSettings.basicAutocompletion, enableBasicAutocompletion : aceSettings.enableBasicAutocompletion,
enableLiveAutocompletion : aceSettings.liveAutocompletion enableLiveAutocompletion : aceSettings.enableLiveAutocompletion,
tabSize: 2,
useSoftTabs: true
}); });
this.editor.commands.addCommand({ this.editor.commands.addCommand({
name: "showKeyboardShortcuts", name: "showKeyboardShortcuts",

18
src/vue-poc/templates/404.vue Normal file
View file

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

104
src/vue-poc/templates/edit.vue
View file

@ -1,28 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="edit"> <template id="edit">
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-snackbar top error v-model="snackbar">
<v-flex xs12> {{ message }}
<v-toolbar class="green"> <v-btn flat @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
<v-toolbar-title> </v-snackbar>
<v-btn @click.native="showfiles()" small icon v-tooltip:top="{ html: path.join('/') }"> <v-card>
<v-icon>folder</v-icon></v-btn>
<span >{{ name }}</span>
<v-chip v-if="dirty" label small class="red white--text">*</v-chip>
<v-chip v-if="!dirty" label small class="green white--text">.</v-chip>
<v-chip small class="primary white--text">{{ mode }}</v-chip>
<v-app-bar>
<v-menu offset-y>
<v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >folder</v-icon></v-btn>
<v-list>
<v-list-item v-for="item in path" :key="item">
<v-list-tile>
<v-list-tile-title @click="showfiles()">{{ item }}</v-list-tile-title>
</v-list-tile>
</v-list-item>
</v-list>
</v-menu>
<v-toolbar-title >
<span >{{ name }}</span>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items> <v-toolbar-items>
<span v-tooltip:top="{ html: 'Changed?' }">
<v-chip v-if="dirty" label small class="red white--text">*</v-chip>
<v-chip v-if="!dirty" label small class="green white--text">.</v-chip>
</span>
<v-chip small v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-chip @click.native="acecmd('goToNextError')" <v-chip @click.native="acecmd('goToNextError')"
v-tooltip:right="{ html: 'Annotations: Errors,Warning and Info' }" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
> >
<v-avatar>
<v-icon right >navigate_next</v-icon>
</v-avatar>
<v-avatar class="red " small>{{annotations && annotations.error}}</v-avatar>
<v-avatar class="yellow ">{{annotations && annotations.warning}}</v-avatar>
<v-avatar class="green ">{{annotations && annotations.info}}</v-avatar> <v-avatar class="green ">{{annotations && annotations.info}}</v-avatar>
<v-avatar class="yellow ">{{annotations && annotations.warning}}</v-avatar>
<v-avatar class="red " small>{{annotations && annotations.error}}</v-avatar>
<v-avatar>
<v-icon black >navigate_next</v-icon>
</v-avatar>
</v-chip> </v-chip>
<v-btn dark icon @click.native="acecmd('outline')"> <v-btn dark icon @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
@ -77,38 +91,26 @@
</v-btn> </v-btn>
<v-list> <v-list>
<v-list-item @click="fetch('/vue-poc/vue-poc.xqm')"> <v-list-item >
<v-list-tile> <v-list-tile>
<v-list-tile-title >load xquery</v-list-tile-title> <v-list-tile-title >unused</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
<v-list-tile>
<v-list-tile-title >load xml</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
<v-list-tile>
<v-list-tile-title >load js</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.html')">load html</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.css')">load css</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-app-bar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-dialog v-model="clearDialog" >
<v-card>
<v-flex xs12 style="height:70vh" v-if="!busy" fill-height>
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap"
v-on:change-content="changeContentA"
v-on:annotation="annotation"></vue-ace>
<v-dialog v-model="clearDialog" >
<v-card-row> <v-card-row>
<v-card-title>Clear?</v-card-title> <v-card-title>Clear?</v-card-title>
</v-card-row> </v-card-row>
@ -121,15 +123,7 @@
</v-card-row> </v-card-row>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-flex> </v-card>
<v-flex xs12 style="height:70vh" v-if="!busy" fill-height>
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap"
v-on:change-content="changeContentA"
v-on:annotation="annotation"></vue-ace>
</v-flex>
</v-layout>
</v-container> </v-container>
</template> </template>
@ -144,16 +138,20 @@ v-on:annotation="annotation"></vue-ace>
url:'', url:'',
name:'', name:'',
path:[], path:[],
mimetype:"",
wrap:false, wrap:false,
busy:false, busy:false,
clearDialog:false, clearDialog:false,
annotations:null, annotations:null,
dirty:false, dirty:false,
snackbar:false,
message:"Cant do that",
mimemap:{ mimemap:{
"text/xml":"xml", "text/xml":"xml",
"application/xml":"xml", "application/xml":"xml",
"application/xquery":"xquery", "application/xquery":"xquery",
"text/ecmascript":"javascript", "text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html", "text/html":"html",
"text/css":"css" "text/css":"css"
} }
@ -176,9 +174,10 @@ v-on:annotation="annotation"></vue-ace>
// load from url // load from url
fetch(url){ fetch(url){
this.busy=true this.busy=true
HTTP.get("raw?url="+url,axios_json) HTTP.get("edit?url="+url,axios_json)
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype
this.mode=this.acetype(r.data.mimetype) this.mode=this.acetype(r.data.mimetype)
this.contentA=r.data.data this.contentA=r.data.data
var a=url.split("/") var a=url.split("/")
@ -223,7 +222,8 @@ v-on:annotation="annotation"></vue-ace>
a=css_beautify(a, { indent_size: 2 }) a=css_beautify(a, { indent_size: 2 })
break; break;
default: default:
alert("beaut: " + this.mode) this.message="No beautify yet for "+this.mode
this.snackbar=true
} }
this.contentA=a this.contentA=a
this.busy=false this.busy=false

27
src/vue-poc/templates/eval.vue Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<template id="eval">
<v-container fluid>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
<vue-ace editor-id="editorA" :content="xq" mode="xquery" wrap="true"
v-on:change-content="onChange"
></vue-ace>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
xq: '(:~ do something :)'
}
},
methods:{
onChange(){
console.log("go")
}
},
created:function(){
console.log("notfound",this.$route.query.q)
}
}
</script>

50
src/vue-poc/templates/files.vue
View file

@ -3,37 +3,38 @@
<v-container fluid> <v-container fluid>
<v-card> <v-card>
<v-toolbar class="green"> <v-app-bar>
<v-menu offset-y> <v-menu offset-y>
<v-btn primary icon dark slot="activator"><v-icon >folder</v-icon></v-btn> <v-btn icon dark slot="activator"><v-icon >folder</v-icon></v-btn>
<v-list> <v-list>
<v-list-item v-for="item in crumbs" :key="item"> <v-list-item v-for="item in crumbs" :key="item">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title> <v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title> <v-toolbar-title>{{ url }}</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
hide-details single-line dark @keyup.native.enter="filter"></v-text-field> hide-details single-line dark @keyup.native.enter="filter"></v-text-field>
<v-icon>view_module</v-icon> <v-icon>view_module</v-icon>
</v-toolbar> </v-app-bar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
<v-list v-if="!busy" two-line subheader> <v-list v-if="!busy" two-line subheader>
<v-subheader inset>Folders</v-subheader> <v-subheader inset>Folders</v-subheader>
<v-list-item v-for="item in folders" v-bind:key="item.name" > <v-list-item v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)">
<v-list-tile avatar > <v-list-tile avatar >
<v-list-tile-avatar @click="folder(item.name)"> <v-list-tile-avatar >
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content @click="folder(item.name)"> <v-list-tile-content >
<v-list-tile-title>{{ item.name }}</v-list-tile-title> <v-list-tile-title>{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon ripple @click.native="info(item.name)"> <v-btn icon ripple @click.native.stop="info(item.name)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
@ -41,23 +42,25 @@
</v-list-item> </v-list-item>
<v-divider inset></v-divider> <v-divider inset></v-divider>
<v-subheader inset>Files</v-subheader> <v-subheader inset>Files</v-subheader>
<v-list-item v-for="item in files" v-bind:key="item.name"> <v-list-item v-for="item in files" v-bind:key="item.name" @click="file(item.name)">
<v-list-tile> <v-list-tile>
<v-list-tile-avatar> <v-list-tile-avatar>
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon> <v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title> <v-list-tile-title >{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon ripple> <v-btn icon ripple @click.native.stop="info(item.name)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-navigation-drawer right light temporary v-model="infodraw"
>Some info here {{selected}}</v-navigation-drawer>
</v-card> </v-card>
</v-container> </v-container>
</template> </template>
@ -70,7 +73,9 @@
files:[], files:[],
items:["root"], items:["root"],
q:"", q:"",
busy:false busy:false,
infodraw:false,
selected:""
} }
}, },
methods:{ methods:{
@ -107,8 +112,9 @@
filter(){ filter(){
console.log("TODO") console.log("TODO")
}, },
info(){ info(sel){
alert("info") this.selected=sel
this.infodraw=true
}, },
readablizeBytes(v){ readablizeBytes(v){
return Vue.filter('readablizeBytes')(v) return Vue.filter('readablizeBytes')(v)

48
src/vue-poc/templates/history.vue Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<template id="history">
<v-container fluid>
<v-list>
<v-list-item v-for="item in items" v-bind:key="item.title"
@click="doEdit(item.url)">
<v-list-tile avatar>
<v-list-tile-action>
<v-icon v-if="item.icon" class="pink--text">star</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.url"></v-list-tile-title>
</v-list-tile-content>
<v-list-tile-avatar>
<img v-bind:src="item.avatar"/>
</v-list-tile-avatar>
</v-list-tile>
</v-list-item>
</v-list>
</v-container>
</template>
<script>{
data: function(){
return {
message: 'Hello Vue.js!',
items:[]
}
},
methods:{
get() {
HTTP.get('history')
.then((res) => {
this.items = res.data.items;
console.log("items",this.items)
});
},
doEdit(url){
console.log("DD"+url)
router.push({ path: 'edit', query: { url: url }})
}
},
created:function(){
this.get()
console.log("history")
}
}
</script>

12
src/vue-poc/templates/home.vue
View file

@ -5,7 +5,7 @@
<v-card hover raised> <v-card hover raised>
<v-card-row height="200px" class="pa-5 green lighten-1"> <v-card-row height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div> <div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.1 v0.0.2
</v-card-row> </v-card-row>
</v-card> </v-card>
</v-flex> </v-flex>
@ -13,11 +13,11 @@
<p>This is a experiment in using <code>vue.js</code>.</p> <p>This is a experiment in using <code>vue.js</code>.</p>
<ul> <ul>
<li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li> <li><a href="https://vuetifyjs.com/" target="new">vuetifyjs</a></li>
<li><a href="https://github.com/monterail/vue-multiselect">vue-multiselect</a></li> <li><a href="https://github.com/monterail/vue-multiselect" target="new">vue-multiselect</a></li>
<li><a href="https://github.com/sagalbot/vue-select"><s>vue-select</s></a></li> <li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
<li><a href="https://github.com/beautify-web/js-beautify">js-beautify</a></li> <li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</a></li>
<li><a href="http://localhost:8984/doc/#/data/app/vue-poc">doc</a></li> <li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
<li><a href="/dba" target="new">DBA app</a></li>
</ul> </ul>
</v-flex> </v-flex>
<v-btn floating="floating"> <v-btn floating="floating">

11
src/vue-poc/templates/people.vue
View file

@ -8,10 +8,10 @@
</v-layout> </v-layout>
<v-layout> <v-layout>
<v-flex xs5> <v-flex xs5>
<v-card-row img="music.jpg" height="300px"></v-card-row> <v-card-row img="resources/music.jpg" height="300px"></v-card-row>
</v-flex> </v-flex>
<v-flex xs5> <v-flex xs1>
<v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="300px"></v-card-row> <v-card-row img="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" height="60px"></v-card-row>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
@ -19,7 +19,10 @@
<script>{ <script>{
data: function(){ data: function(){
return {message: 'Hello Vue.js!'} return {
message: 'Hello Vue.js!',
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
}
}, },
methods: { methods: {
reverseMessage: function () { reverseMessage: function () {

12
src/vue-poc/templates/ping.vue
View file

@ -10,11 +10,12 @@
<th >Repeat</th> <th >Repeat</th>
<th >Last</th> <th >Last</th>
<th >Count</th> <th >Count</th>
<th >Median</th>
<th >Avg</th> <th >Avg</th>
<th >min</th> <th >min</th>
<th >max</th> <th >max</th>
<th >Median</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -33,9 +34,7 @@
<td> <td>
<span >{{getValues.count}}</span> <span >{{getValues.count}}</span>
</td> </td>
<td>
<span >{{getValues.median}}</span>
</td>
<td> <td>
<span >{{getValues.avg | round(2)}}</span> <span >{{getValues.avg | round(2)}}</span>
</td> </td>
@ -46,6 +45,9 @@
<td> <td>
<span >{{getValues.max}}</span> <span >{{getValues.max}}</span>
</td> </td>
<td>
<span >{{getValues.median}}</span>
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -88,7 +90,7 @@
getValues: new perfStat(), getValues: new perfStat(),
postValues: new perfStat(), postValues: new perfStat(),
repeat:{get:false,post:false}, repeat:{get:false,post:false},
counter:0 counter:null
} }
}, },
methods:{ methods:{

5
src/vue-poc/templates/extension.vue → src/vue-poc/templates/puzzle.vue
View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="extension"> <template id="puzzle">
<v-container fluid> <v-container fluid>
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
<v-layout > <v-layout >
<table> <table>
@ -9,8 +10,6 @@
</tr> </tr>
</table> </table>
</v-layout> </v-layout>
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
</v-container> </v-container>
</template> </template>

37
src/vue-poc/templates/settings.vue
View file

@ -9,47 +9,37 @@
<v-list-item> <v-list-item>
<v-list-tile avatar> <v-list-tile avatar>
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.notifications"></v-checkbox> <v-checkbox v-model="ace.enableSnippets"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Notifications</v-list-tile-title> <v-list-tile-title>enableSnippets</v-list-tile-title>
<v-list-tile-sub-title>Allow notifications</v-list-tile-sub-title> <v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<v-list-tile avatar> <v-list-tile avatar>
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.sound"></v-checkbox> <v-checkbox v-model="ace.enableBasicAutocompletion"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Sound</v-list-tile-title> <v-list-tile-title>enableBasicAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>Hangouts message</v-list-tile-sub-title> <v-list-tile-sub-title>enableBasicAutocompletion</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<v-list-tile avatar> <v-list-tile avatar>
<v-list-tile-action> <v-list-tile-action>
<v-checkbox v-model="ace.video"></v-checkbox> <v-checkbox v-model="ace.enableLiveAutocompletion"></v-checkbox>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>Video sounds</v-list-tile-title> <v-list-tile-title>enableLiveAutocompletion</v-list-tile-title>
<v-list-tile-sub-title>Hangouts vidoe call</v-list-tile-sub-title> <v-list-tile-sub-title>enableLiveAutocompletion</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item>
<v-list-item>
<v-list-tile avatar>
<v-list-tile-action>
<v-checkbox v-model="ace.invites"></v-checkbox>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Invites</v-list-tile-title>
<v-list-tile-sub-title>Notify when receiving invites</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card> </v-card>
</v-flex> </v-flex>
@ -60,10 +50,9 @@
data () { data () {
return { return {
ace: { ace: {
notifications: false, enableSnippets: true,
sound: false, enableBasicAutocompletion: true,
video: false, enableLiveAutocompletion: true
invites: false
} }
} }
}, },

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

@ -7,10 +7,10 @@ module namespace vue-api = 'quodatum:vue.api';
import module namespace rest = "http://exquery.org/ns/restxq"; import module namespace rest = "http://exquery.org/ns/restxq";
import module namespace fw="quodatum:file.walker"; import module namespace fw="quodatum:file.walker";
import module namespace mt = 'quodatum.data.mimetype' at "lib/mimetype.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace c="http://www.w3.org/ns/xproc-step";
declare namespace wadl="http://wadl.dev.java.net/2009/02"; declare namespace wadl="http://wadl.dev.java.net/2009/02";
declare namespace MediaType='java:org.basex.util.http.MediaType';
declare variable $vue-api:index:=file:base-dir() || 'static/' || "app.html"; declare variable $vue-api:index:=file:base-dir() || 'static/' || "app.html";
@ -67,6 +67,32 @@ function vue-api:thumbnail($url,$task )
</json> </json>
}; };
(:~
: history list
:)
declare
%rest:GET %rest:path("/vue-poc/api/history")
%rest:produces("application/json")
%output:method("json")
function vue-api:history( )
{
let $h:=(
'/vue-poc/vue-poc.xqm',
'/vue-poc/data/vue-poc/ch4d1.xml',
'/vue-poc/static/app-gen.js',
'/vue-poc/static/app.html',
'/vue-poc/static/app.css',
'/vue-poc/static/resources/sparql.rq',
'/vue-poc/static/resources/turtle.ttl'
)
return <json type="object" >
<items type="array">
{$h!(<_ type="object"><url>{.}</url></_>)}
</items>
</json>
};
(:~ (:~
: Returns wadl. : Returns wadl.
:) :)
@ -81,16 +107,40 @@ function vue-api:wadl()
: Returns a file content. : Returns a file content.
:) :)
declare declare
%rest:path("/vue-poc/api/raw") %rest:GET %rest:path("/vue-poc/api/edit")
%rest:query-param("url", "{$url}") %rest:query-param("url", "{$url}")
%rest:produces("application/json") %rest:produces("application/json")
%output:method("json") %output:method("json")
function vue-api:raw($url as xs:string) function vue-api:edit-get($url as xs:string)
{ {
let $path := vue-api:web( $url)=>trace("path ") let $path := vue-api:web( $url)=>trace("path ")
return if( file:exists($path))then return if( file:exists($path))then
let $type:=vue-api:type($path) let $type:=mt:type($path)
let $fetch:=vue-api:fetch-fn($type("treat-as")) let $fetch:=mt:fetch-fn($type("treat-as"))
return <json type="object" >
<url>{$url}</url>
<mimetype>{$type?type}</mimetype>
<data>{$fetch($path)}</data>
</json>
else
error(xs:QName('vue-api:raw'),$path)
};
(:~
: Update a file content. @TODO
:)
declare
%rest:POST %rest:path("/vue-poc/api/edit")
%rest:form-param("url", "{$url}")
%rest:form-param("data", "{$data}")
%rest:produces("application/json")
%output:method("json")
function vue-api:edit-post($url as xs:string,$data)
{
let $path := vue-api:web( $url)=>trace("path ")
return if( file:exists($path))then
let $type:=mt:type($path)
let $fetch:=mt:fetch-fn($type("treat-as"))
return <json type="object" > return <json type="object" >
<url>{$url}</url> <url>{$url}</url>
<mimetype>{$type?type}</mimetype> <mimetype>{$type?type}</mimetype>
@ -111,8 +161,6 @@ declare
function vue-api:file($url as xs:string) function vue-api:file($url as xs:string)
{ {
let $path := vue-api:web( $url)=>trace("vue-api:web ") let $path := vue-api:web( $url)=>trace("vue-api:web ")
return if( file:exists($path))then return if( file:exists($path))then
let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()}) let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()})
@ -160,45 +208,3 @@ as xs:string
return file:resolve-path($file,$webroot) return file:resolve-path($file,$webroot)
}; };
(:~
: fetch function for given data type "text","xml","binary"
: @return function()
:)
declare function vue-api:fetch-fn($treat as xs:string)
as function(*)
{
switch ($treat)
case "text"
return fetch:text(?)
case "xml"
return fetch:text(?)
default
return fetch:binary(?)
};
(:~ classify file as binary/text/xml
:)
declare function vue-api:type($filepath as xs:string)
as map(*)
{
let $f:=vue-api:base-ext($filepath)
let $a:=MediaType:get($f)
let $type:= if(MediaType:isXML($a)) then
"xml"
else if(MediaType:isText($a) or MediaType:isXQuery($a))then
"text"
else
"binary"
return map{"type":MediaType:type($a) ,"treat-as":$type}
};
(:~ change file to have baseextension
:)
declare function vue-api:base-ext($filepath as xs:string)
{
let $ext:=replace ($filepath,'^.*\.','')
let $ext:=if(contains($filepath,"/"))then '' else $ext
let $types:=map{"vue":".html"}
return if($types($ext)) then $types($ext) else $filepath
};

6
tools/compile.xq
View file

@ -11,6 +11,7 @@ declare namespace Node="java:ch.digitalfondue.jfiveparse.Node";
declare namespace functx = "http://www.functx.com"; declare namespace functx = "http://www.functx.com";
declare variable $SRC:="C:/Users/andy/git/vue-poc/src/vue-poc/templates/"; declare variable $SRC:="C:/Users/andy/git/vue-poc/src/vue-poc/templates/";
declare variable $CORE:="C:/Users/andy/git/vue-poc/src/vue-poc/static/core.js"; declare variable $CORE:="C:/Users/andy/git/vue-poc/src/vue-poc/static/core.js";
declare variable $FILTERS:="C:/Users/andy/git/vue-poc/src/vue-poc/static/filters.js";
declare variable $DEST:="C:/Users/andy/git/vue-poc/src/vue-poc/static/app-gen.js"; declare variable $DEST:="C:/Users/andy/git/vue-poc/src/vue-poc/static/app-gen.js";
(:~ (:~
@ -42,4 +43,7 @@ let $files:= fw:directory-list($SRC,map{"include-filter":".*\.vue"})
//c:file/@name/resolve-uri(.,base-uri(.)) //c:file/@name/resolve-uri(.,base-uri(.))
let $docs:=$files!(fetch:text(.)=>html5:doc()=>local:process()) let $docs:=$files!(fetch:text(.)=>html5:doc()=>local:process())
let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;" let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;"
return file:write-text($DEST,string-join(($comment,$docs,fetch:text($CORE)))) return file:write-text($DEST,string-join(($comment,
fetch:text($FILTERS),
$docs,
fetch:text($CORE))))