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

vuetify 0.13.1

Browse source
This commit is contained in:
Andy Bunce 2017-07-12 11:38:53 +01:00
parent 8d841ad7cb
commit efc929ca69
24 changed files with 1128 additions and 449 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/vue-poc/components/core.js
View file

@ -27,84 +27,7 @@ Vue.config.errorHandler = function (err, vm, info) {
alert("vue error"); alert("vue error");
}; };
Vue.component('my-component', {
props: ['href'],
template: '<a :href="href" :target="href" > {{href}}<v-icon>link</v-icon></a>',
created:function(){
console.log("my-component");
},
});
Vue.component('nav-list', {
props: ['items'],
template:`
<v-list dense>
<template v-for="(item, i) in items">
<v-layout
row
v-if="item.heading"
align-center
:key="i"
>
<v-flex xs6>
<v-subheader v-if="item.heading">
{{ item.heading }}
</v-subheader>
</v-flex>
<v-flex xs6 class="text-xs-center">
<a href="#!" class="body-2 black--text">EDIT</a>
</v-flex>
</v-layout>
<v-list-group v-else-if="item.children" v-model="item.model" no-action>
<v-list-tile slot="item" :href="item.href" router ripple>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
<v-spacer></v-spacer>
<v-list-tile-action>
<v-icon>{{ item.model ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
</v-list-tile-content>
</v-list-tile>
<template v-for="(child, i) in item.children">
<v-list-tile :key="i" :href="child.href" router ripple>
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ child.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list-group>
<v-list-tile v-else :href="item.href" router ripple>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>`,
created:function(){
console.log("my-component");
}
});
var Events = new Vue({}); var Events = new Vue({});
@ -115,15 +38,15 @@ const router = new VueRouter({
routes: [ routes: [
{ path: '/', component: Home,meta:{title:"Home"} }, { path: '/', component: Home,meta:{title:"Home"} },
{ path: '/people', component: People ,meta:{title:"People"}}, { path: '/people', component: People ,meta:{title:"People"}},
{ path: '/options', component: Options,meta:{title:"Options"} }, { path: '/images', component: Images,meta:{title:"Images"} },
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/select', component: Select,meta:{title:"Select"} },
{ path: '/search', component: Search,meta:{title:"Search"} }, { path: '/search', component: Search,meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
{ 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:"File system"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/files', component: Files,meta:{title:"File system"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
{ 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: '/history', component: History,meta:{title:"File History"} }, { path: '/history', component: History,meta:{title:"File History"} },
@ -171,7 +94,8 @@ const app = new Vue({
text: 'Collections' , text: 'Collections' ,
model: false, model: false,
children: [ children: [
{href: 'files', text: 'File system',icon: 'folder' }, {href: 'database', text: 'Databases',icon: 'account_balance' },
{href: 'files', text: 'File system',icon: 'folder' },
{href: 'edit',text: 'edit',icon: 'mode_edit'}, {href: 'edit',text: 'edit',icon: 'mode_edit'},
{href: 'history',text: 'history',icon: 'history'}, {href: 'history',text: 'history',icon: 'history'},
{href: 'logs',text: 'Server logs',icon: 'dns'} {href: 'logs',text: 'Server logs',icon: 'dns'}
@ -181,8 +105,8 @@ const app = new Vue({
text: 'Actions' , text: 'Actions' ,
model: false, model: false,
children: [ children: [
{href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'}, {href: 'eval',text: 'Query',icon: 'play_circle_outline'},
{href: 'jobs',text: 'Jobs',icon: 'dashboard'}, {href: 'jobs',text: 'Running jobs',icon: 'dashboard'},
{href: 'tasks',text: 'Tasks',icon: 'history'}, {href: 'tasks',text: 'Tasks',icon: 'history'},
]}, ]},
{ {
@ -193,7 +117,7 @@ const app = new Vue({
{href: 'people',text: 'People',icon: 'person'}, {href: 'people',text: 'People',icon: 'person'},
{href: 'select',text: 'select',icon: 'extension'}, {href: 'select',text: 'select',icon: 'extension'},
{href: 'puzzle',text: 'Puzzle',icon: 'extension'}, {href: 'puzzle',text: 'Puzzle',icon: 'extension'},
{href: 'options',text: 'options',icon: 'domain'}, {href: 'images',text: 'Images',icon: 'camera_roll'},
{href: 'tabs',text: 'tabs',icon: 'switch_camera'}, {href: 'tabs',text: 'tabs',icon: 'switch_camera'},
{href: 'ping',text: 'ping',icon: 'update'}, {href: 'ping',text: 'ping',icon: 'update'},
{href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'} {href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'}

11
src/vue-poc/components/nav-list.vue
View file

@ -19,7 +19,7 @@
</v-layout> </v-layout>
<v-list-group v-else-if="item.children" v-model="item.model" no-action> <v-list-group v-else-if="item.children" v-model="item.model" no-action>
<v-list-tile :href="item.href" router ripple slot="item"> <v-list-tile :to="item.href" ripple slot="item">
<v-list-tile-action> <v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon> <v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action> </v-list-tile-action>
@ -34,11 +34,8 @@
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
<template <template v-for="(child, i) in item.children" >
v-for="(child, i) in item.children" <v-list-tile :to="child.href" :key="i" ripple>
:key="i"
>
<v-list-tile :href="child.href" router ripple>
<v-list-tile-action v-if="child.icon"> <v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon> <v-icon>{{ child.icon }}</v-icon>
</v-list-tile-action> </v-list-tile-action>
@ -51,7 +48,7 @@
</template> </template>
</v-list-group> </v-list-group>
<v-list-tile v-else :href="item.href" router ripple> <v-list-tile v-else :to="item.href" ripple>
<v-list-tile-action> <v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon> <v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action> </v-list-tile-action>

28
src/vue-poc/features/about.vue Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<template id="home"> <v-layout class="ma-5"> <v-flex
xs4> <v-card hover raised> <v-card-title
height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4>
<p>
This is a experiment in using
<code>vue.js</code>
.
</p>
<ul>
<li><a href="https://vuetifyjs.com/vuetify/quick-start"
target="new">vuetifyjs</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" target="new"><s>vue-select</s></a></li>
<li><a href="https://github.com/beautify-web/js-beautify"
target="new">js-beautify</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>
</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component
href="/dba">REPLACED</my-component> </v-layout> </template>
<script>
{
}
</script>

125
src/vue-poc/features/collection/collections.xqm
View file

@ -9,6 +9,41 @@ import module namespace fw="quodatum:file.walker";
import module namespace ufile = 'vue-poc/file' at "../../lib/file.xqm"; import module namespace ufile = 'vue-poc/file' at "../../lib/file.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace c="http://www.w3.org/ns/xproc-step";
(:~ defines accessor functions for each collection type
:)
declare variable $vue-api:MODE:=map{
"webfile":
function($url)
as element(c:directory)
{
let $path := ufile:web( $url)=>trace("vue-api:web ")
return if( file:exists($path))then
fw:directory-list($path,map{"max-depth":1,"include-info":true()})
else
error(xs:QName('vue-api:badpath'),$path)
},
"basexdb":
function($url)
as element(c:directory)
{
<c:directory name="" xml:base="basexdb:/" last-modified="2017-07-01T13:39:38.98691Z" size="4096">{
if($url="/") then
db:list()!
<c:directory name="{db:property(.,'name')}"
last-modified="{db:property(.,'timestamp')}"
size="{db:property(.,'size')}"/>
else
let $map:=vue-api:collection-next($url)
for $name in map:keys($map)
(: db:list-details($db as xs:string, $path as xs:string) as element(resource)* :)
return if($map($name)="file") then
<c:file name="{$name}" size="0"/>
else
<c:directory name="{$name}" size="0"/>
}</c:directory>
}
};
(:~ (:~
: history list : history list
@ -19,20 +54,13 @@ declare
%output:method("json") %output:method("json")
function vue-api:history( ) function vue-api:history( )
{ {
let $h:=( let $h:=doc("history.xml")/history/entry
'/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/logo.svg',
'/vue-poc/static/resources/sparql.rq',
'/vue-poc/static/resources/turtle.ttl'
)
return <json type="object" > return <json type="object" >
<items type="array"> <items type="array">
{$h!(<_ type="object"><url>{.}</url></_>)} {$h!(<_ type="object">
<url>{@url/string()}</url>
<mode>{@mode/string()}</mode>
</_>)}
</items> </items>
</json> </json>
}; };
@ -44,35 +72,34 @@ function vue-api:history( )
declare declare
%rest:path("/vue-poc/api/file") %rest:path("/vue-poc/api/file")
%rest:query-param("url", "{$url}") %rest:query-param("url", "{$url}")
%rest:query-param("protocol", "{$protocol}")
%rest:produces("application/json") %rest:produces("application/json")
%output:method("json") %output:method("json")
function vue-api:file($url as xs:string) function vue-api:file($url as xs:string,$protocol as xs:string?)
as element(json)
{ {
let $path := ufile:web( $url)=>trace("vue-api:web ") let $mode:=if(map:contains($vue-api:MODE,string($protocol)))then $protocol else "webfile"
return if( file:exists($path))then let $reader:=$vue-api:MODE($mode)
let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()}) let $items:=$reader($url)
return <json type="object" >
return <json type="object" > <folders type="array">
<folders type="array"> {for $f in $items/c:directory
{for $f in $items/c:directory order by $f/@name/lower-case(.)
order by $f/@name/lower-case(.) return <_ type="object">
return <_ type="object"> {vue-api:details($f,"folder")}
{vue-api:details($f,"folder")} </_>
</_> }
} </folders>
</folders> <files type="array">
<files type="array"> {for $f in $items/c:file
{for $f in $items/c:file order by $f/@name/lower-case(.)
order by $f/@name/lower-case(.) return <_ type="object">
return <_ type="object"> {vue-api:details($f,"insert_drive_file")}
{vue-api:details($f,"insert_drive_file")} </_>
</_> }
} </files>
</files> </json>
</json> };
else
error(xs:QName('vue-api:raw'),$path)
};
declare function vue-api:details($f as element(*),$icon as xs:string) declare function vue-api:details($f as element(*),$icon as xs:string)
as element(*)* as element(*)*
@ -83,3 +110,25 @@ as element(*)*
,<size type="number">{$f/@size/string()}</size> ,<size type="number">{$f/@size/string()}</size>
,<mime>unknown</mime> ,<mime>unknown</mime>
}; };
(:~ return map of next level database contents
:@param $url a database base collection e.g /dbname/fred/
:)
declare function vue-api:collection-next($url as xs:string)
as map(*)
{
if(not(starts-with($url,"/")) or ends-with($url,"/")) then
error(xs:QName('vue-api:badpath'),$url)
else
fold-left(
uri-collection($url ),
map{},
function($acc,$this){
let $s:=substring-after($this ,$url || "/")
let $isDir:=contains($s,"/")
let $s:=if($isDir)then substring-before($s,"/") else $s
return map:merge((map:entry($s,if($isDir)then "directory" else "file"),$acc))
}
)
};

73
src/vue-poc/features/collection/files.vue
View file

@ -5,13 +5,11 @@
<v-card> <v-card>
<v-toolbar> <v-toolbar>
<v-menu bottom right> <v-menu bottom right>
<v-btn icon dark slot="activator"><v-icon >folder</v-icon></v-btn> <v-btn icon slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
<v-list> <v-list>
<template v-for="item in crumbs"> <v-list-tile v-for="item in crumbs" :key="item">
<v-list-tile :key="item">
<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>
</template>
</v-list> </v-list>
</v-menu> </v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title> <v-toolbar-title>{{ url }}</v-toolbar-title>
@ -26,12 +24,11 @@
<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>
<template v-for="item in folders"> <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar >
<v-list-tile v-bind:key="item.name" @click="folder(item.name)" avatar >
<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 @click="folder(item.name)">
<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>
@ -41,18 +38,16 @@
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</template>
<v-divider inset></v-divider> <v-divider inset></v-divider>
<v-subheader inset>Files</v-subheader> <v-subheader inset>Files</v-subheader>
<template v-for="item in folders"> <v-list-tile v-for="item in files" v-bind:key="item.name" >
<v-list-tile v-bind:key="item.name" @click="file(item.name)">
<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 @click="file(item.name)">
<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: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</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.stop="info(item.name)"> <v-btn icon ripple @click.native.stop="info(item.name)">
@ -60,17 +55,25 @@
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</template>
</v-list> </v-list>
<v-navigation-drawer right light temporary v-model="infodraw" <v-navigation-drawer right light temporary v-model="showInfo">
> <v-card> <v-card-title class="green white--text"> <v-card>
Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card> <v-toolbar class="green white--text">
<v-toolbar-title >{{selected}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> blah blah protocol: {{protocol}} </v-card-text>
</v-card>
</v-navigation-drawer> </v-navigation-drawer>
</v-card> </v-card>
</v-container> </v-container>
</template> </template>
<script>{ <script>{
props:["protocol"],
data: function(){ data: function(){
return { return {
crumbs:[], crumbs:[],
@ -79,25 +82,22 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
items:["root"], items:["root"],
q:"", q:"",
busy:false, busy:false,
infodraw:false, showInfo:false,
selected:"" selected:""
} }
}, },
methods:{ methods:{
file (val) { file (val) {
// with query, resulting in /register?plan=private // with query, resulting in /register?plan=private
router.push({ path: 'edit', query: { url: this.url+"/"+val }}) router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol }})
}, },
folder (val) { folder (val) {
this.crumbs.push(val ) this.crumbs.push(val )
this.$router.push({ query: { url: this.url }})
this.load(this.url)
}, },
load(url){ load(url){
this.busy=true this.busy=true
HTTP.get("file?url="+url,axios_json) HTTP.get("file",{params:{url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
console.log(r)
this.folders=r.data.folders this.folders=r.data.folders
this.files=r.data.files this.files=r.data.files
this.busy=false this.busy=false
@ -112,22 +112,15 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
root(){ root(){
this.crumbs=[] this.crumbs=[]
this.$router.push({ query: { url: this.url }}) this.$router.push({ query: { url: this.url }})
this.load(this.url)
}, },
filter(){ filter(){
console.log("TODO") console.log("TODO")
}, },
info(sel){ info(sel){
this.selected=sel this.selected=sel
this.infodraw=true this.showInfo=true
}, }
readablizeBytes(v){
return Vue.filter('readablizeBytes')(v)
},
formatDate(v){
return Vue.filter('formatDate')(v)
}
}, },
computed: { computed: {
url: { url: {
@ -138,12 +131,24 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
// alert("set"+newValue) // alert("set"+newValue)
this.crumbs=newValue.split("/").filter((a)=>a.length>0) this.crumbs=newValue.split("/").filter((a)=>a.length>0)
} }
},
icon(){
return (this.protocol=="basexdb")?"account_balance":"folder"
}
},
watch:{
url(v){
this.$router.push({ query: { url: this.url }})
},
$route(v){
var url=this.$route.query.url
this.url=url?url:"/";
this.load(this.url)
} }
}, },
created:function(){ created:function(){
var url=this.$route.query.url var url=this.$route.query.url
this.url=url?url:"/"; this.url=url?url:"/";
console.log("files: ",this.$route.query.url)
this.load(this.url) this.load(this.url)
} }
} }

15
src/vue-poc/features/collection/history.vue
View file

@ -2,16 +2,13 @@
<template id="history"> <template id="history">
<v-container fluid> <v-container fluid>
<v-list> <v-list>
<v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)" avatar> <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar>
<v-list-tile-action> <v-list-tile-action>
<v-icon v-if="item.icon" class="pink--text">star</v-icon> <v-chip v-text="item.mode">Example Chip</v-chip>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="doEdit(item.url)" v-text="item.url"></v-list-tile-title> <v-list-tile-title @click="doEdit(item)" v-text="item.url"></v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-avatar>
<img v-bind:src="item.avatar"/>
</v-list-tile-avatar>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-container> </v-container>
@ -32,9 +29,9 @@
console.log("items",this.items) console.log("items",this.items)
}); });
}, },
doEdit(url){ doEdit(item){
console.log("DD"+url) console.log("history: ",item)
router.push({ path: 'edit', query: { url: url }}) router.push({ path: 'edit', query: { url:item.url, mode:item.mode }})
} }
}, },
created:function(){ created:function(){

13
src/vue-poc/features/collection/history.xml Normal file
View file

@ -0,0 +1,13 @@
<history>
<entry mode="webfile" url='/vue-poc/vue-poc.xqm' />
<entry mode="webfile" url='/vue-poc/data/vue-poc/ch4d1.xml' />
<entry mode="webfile" url='/vue-poc/static/app-gen.js' />
<entry mode="webfile" url='/vue-poc/static/app.html' />
<entry mode="webfile" url='/vue-poc/static/app.css' />
<entry mode="webfile" url='/vue-poc/logo.svg' />
<entry mode="webfile" url='/vue-poc/static/resources/sparql.rq' />
<entry mode="webfile" url='/vue-poc/static/resources/turtle.ttl' />
<entry mode="webfile" url='/vue-poc/static/resources/task.xsd' />
<entry mode="basexdb" url='/abide/abide.xml' />
</history>

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

@ -11,8 +11,10 @@
<v-menu > <v-menu >
<v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >folder</v-icon></v-btn> <v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >folder</v-icon></v-btn>
<v-list> <v-list>
<v-list-tile v-for="item in path" :key="item" @click="showfiles()"> <v-list-tile v-for="item in path" :key="item">
<v-list-tile-content @click="showfiles()">
<v-list-tile-title >{{ item }}</v-list-tile-title> <v-list-tile-title >{{ item }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-menu> </v-menu>
@ -36,31 +38,31 @@
<v-icon black >navigate_next</v-icon> <v-icon black >navigate_next</v-icon>
</v-avatar> </v-avatar>
</v-chip> </v-chip>
<v-btn dark icon @click.native="acecmd('outline')"> <v-btn icon @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="acecmd('foldall')"> <v-btn icon @click.native="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="wrap=!wrap"> <v-btn icon @click.native="wrap=!wrap">
<v-icon>wrap_text</v-icon> <v-icon>wrap_text</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="save()"> <v-btn icon @click.native="save()">
<v-icon>file_upload</v-icon> <v-icon>file_upload</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="beautify()"> <v-btn icon @click.native="beautify()">
<v-icon>format_align_center</v-icon> <v-icon>format_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="clearDialog = true"> <v-btn icon @click.native="clearDialog = true">
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<v-menu left transition="v-fade-transition"> <v-menu left transition="v-fade-transition">
<v-btn dark icon slot="activator"> <v-btn icon slot="activator">
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
<v-list> <v-list>
@ -80,7 +82,7 @@
</v-list> </v-list>
</v-menu> </v-menu>
<v-menu left transition="v-fade-transition"> <v-menu left transition="v-fade-transition">
<v-btn dark icon slot="activator"> <v-btn icon slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
@ -126,6 +128,7 @@ v-on:annotation="annotation"></vue-ace>
};`, };`,
mode:'xquery', mode:'xquery',
url:'', url:'',
protocol:'webfile',
name:'', name:'',
path:[], path:[],
mimetype:"", mimetype:"",
@ -166,16 +169,17 @@ v-on:annotation="annotation"></vue-ace>
// load from url // load from url
fetch(url){ fetch(url){
this.busy=true this.busy=true
HTTP.get("edit?url="+url,axios_json) var a=url.split("/")
this.url=url
this.name=a.pop()
this.path=a
HTTP.get("edit",{params: {url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype 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("/")
this.url=url
this.name=a.pop()
this.path=a
this.busy=false this.busy=false
this.dirty=false this.dirty=false
//alert(mode) //alert(mode)
@ -197,6 +201,7 @@ v-on:annotation="annotation"></vue-ace>
alert("TODO save: "+this.url); alert("TODO save: "+this.url);
var data=Qs.stringify( var data=Qs.stringify(
{ {
protocol:this.protocol,
url: this.url, //gave the values directly for testing url: this.url, //gave the values directly for testing
data: this.contentA data: this.contentA
}) })
@ -249,6 +254,7 @@ v-on:annotation="annotation"></vue-ace>
created(){ created(){
//https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme //https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
document.addEventListener('beforeunload', this.leaving); document.addEventListener('beforeunload', this.leaving);
this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
var url=this.$route.query.url var url=this.$route.query.url
console.log("Edit: ",url) console.log("Edit: ",url)
if(url) this.fetch(url) if(url) this.fetch(url)

3
src/vue-poc/features/edit/edit.xqm
View file

@ -18,9 +18,10 @@ declare namespace c="http://www.w3.org/ns/xproc-step";
declare declare
%rest:GET %rest:path("/vue-poc/api/edit") %rest:GET %rest:path("/vue-poc/api/edit")
%rest:query-param("url", "{$url}") %rest:query-param("url", "{$url}")
%rest:query-param("protocol", "{$protocol}")
%rest:produces("application/json") %rest:produces("application/json")
%output:method("json") %output:method("json")
function vue-api:edit-get($url as xs:string) function vue-api:edit-get($url as xs:string,$protocol as xs:string)
{ {
let $path := ufile:web( $url)=>trace("path ") let $path := ufile:web( $url)=>trace("path ")
return if( file:exists($path))then return if( file:exists($path))then

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

@ -1,17 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="eval"> <template id="eval">
<v-container fluid> <v-container fluid>
<v-card class="grey lighten-1 z-depth-1 mb-5"> <v-card >
<v-toolbar>
<v-app-bar>
<v-btn @click.native="run()">Run</v-btn> <v-btn @click.native="run()">Run</v-btn>
<v-btn @click.native="submit()"> <v-btn @click.native="submit()">
<v-icon>play_circle_outline</v-icon> <v-icon>play_circle_outline</v-icon>
Submit</v-btn> Submit</v-btn>
<v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow></v-btn-dropdown> <v-spacer></v-spacer>
</v-app-bar> <v-btn @click.native="imports()">
<v-icon>play_circle_outline</v-icon>
Imports</v-btn>
<v-menu :nudge-width="100">
<v-toolbar-title slot="activator">
<span>{{font}}</span>
<v-icon >arrow_drop_down</v-icon>
</v-toolbar-title>
<v-list>
<v-list-tile v-for="item in dropdown_font" :key="item">
<v-list-tile-title v-text="item.text" @click="font=item.text"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
<v-card-text > <v-card-text >
@ -56,6 +68,7 @@
jobId:null, jobId:null,
waiting:false, waiting:false,
start:null, start:null,
font:'Courier',
dropdown_font: [ dropdown_font: [
{ text: 'Arial' }, { text: 'Arial' },
{ text: 'Calibri' }, { text: 'Calibri' },
@ -129,6 +142,9 @@
this.jobId=null this.jobId=null
this.show=true this.show=true
}) })
},
imports(){
alert("imports")
} }
}, },

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

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="home"> <v-layout class="ma-5"> <v-flex <template id="about"> <v-layout class="ma-5"> <v-flex
xs4> <v-card hover raised> <v-card-title xs4> <v-card hover raised> <v-card-title
height="200px" class="pa-5 green lighten-1"> 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>

76
src/vue-poc/features/images/images.vue Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<template id="images">
<v-card>
<v-card-actions>
<v-btn @click.native="page+=1">next</v-btn>
{{page}}
<v-btn @click.native="page-=1">back</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex height="80px"
xs2
v-for="image in images"
:key="image.name"
>
<v-card @click="selected()" class="grey lighten-2 pt-1">
<v-card-media :src="src(image)" height="80px" :contain="true"></v-card-media>
<v-card-actions v-tooltip:top="{ html: image.name }">
<v-btn icon small>
<v-icon>favorite</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon small>
<v-icon>bookmark</v-icon>
</v-btn>
<v-btn icon small>
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</template>
<script>{
data: () => ({
images:[],
page:0
}),
methods:{
src(item){
//return "https://unsplash.it/150/300?image="+Math.floor(Math.random() * 100) + 1
return "data:image/jpeg;base64,"+item.data
},
getImages(){
HTTP.get("images/list?page="+this.page)
.then(r=>{
this.images=r.data.items
})
},
selected(){
alert("not yet")
}
},
watch:{
page(v){
this.$router.push({ query: { page: this.page }})
},
$route(v){
this.getImages()
}
},
created:function(){
this.page=this.$route.query.page || this.page
this.getImages()
}
}
</script>

51
src/vue-poc/features/images/images.xqm Normal file
View file

@ -0,0 +1,51 @@
(:~
: vue-poc thumbnail api.
:
: @author Andy Bunce may-2017
:)
module namespace vue-api = 'quodatum:vue.api.images';
import module namespace thb="expkg-zone58:image.thumbnailator";
import module namespace rest = "http://exquery.org/ns/restxq";
import module namespace fw="quodatum:file.walker";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $vue-api:PICS:="c:\tmp\";
(:~
: do a thumbnail
:)
declare
%rest:GET %rest:path("/vue-poc/api/images/list")
%rest:produces("application/json")
%rest:query-param("page", "{$page}",0)
%output:method("json")
function vue-api:list( $page as xs:integer)
{
let $rowsPerPage:=24
let $opt:=map{"include-filter":".*\.jpg",
"max-depth":-1,
"include-info":true()}
let $d:= fw:directory-list($vue-api:PICS,$opt)
let $f:=$d//c:file/@name/resolve-uri(encode-for-uri(.),base-uri(.))
let $images:=subsequence($f,1+$rowsPerPage*$page,$rowsPerPage)
return <json type="object" >
<items type="array">{
for $f in $images
return <_ type="object">
{vue-api:get-image($f)}
</_>
}</items>
</json>
};
declare function vue-api:get-image($f as xs:string)
as element(*)*
{
<name>{$f}</name>
,<data>{fetch:binary($f)}</data>
,<mime>{fetch:content-type($f)}</mime>
};

49
src/vue-poc/features/options.vue
View file

@ -1,49 +0,0 @@
<!DOCTYPE html>
<template id="options">
<v-layout >
<v-flex xs2>
<v-card class="blue darken-4 white--text">
<v-card-title height="200px">
Featured Event: <br>
May 24, 2016 <br>
7-11pm
</v-card-title>
<v-card-actions>
<v-btn flat class="white--text" @click.native="snackbar = true" >Add to <br>Calendar</v-btn>
<v-spacer></v-spacer>
<v-btn icon dark @click.native="snackbar = true" >
<v-icon>event</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6>
<v-text-field
name="url"
label="Image location" :required=true :full-width=false
></v-text-field>
</v-flex>
<v-flex xs4>
<v-card-media img="music.jpg" height="300px"></v-card-media>
<v-btn block primary @click.native="snackbar = true" dark>Show Snackbar</v-btn>
<v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
</v-flex>
<v-snackbar v-model="snackbar">
Hello, I'm a snackbar
<v-btn flat class="pink--text" @click.native="snackbar = false">
<v-icon>highlight_off</v-icon>
</v-btn>
</v-snackbar>
</v-layout>
</template>
<script>{
data: function(){
return {
snackbar:false
}
}
}
</script>

29
src/vue-poc/features/people.vue
View file

@ -5,6 +5,24 @@
<v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn> <v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn>
<p>{{ message }}</p> <p>{{ message }}</p>
<v-btn light default v-on:click.native="logout">logout</v-btn> <v-btn light default v-on:click.native="logout">logout</v-btn>
<!--
<v-autocomplete :items="list"
v-model="fieldValue"
:search.sync="search"
label="Suburb" item-text="suburb"
item-value="suburb"
@selected="handleSelected"
strict="Unknown">
<template slot="item" scope="data">
<v-list-tile-content>
<v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
<template v-if="!data.item.generatedItem">
<v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
</template>
</v-list-tile-content>
</template>
</v-autocomplete>
-->
</v-layout> </v-layout>
<v-card> <v-card>
<v-layout > <v-layout >
@ -20,6 +38,8 @@
<v-card-media :src="img" height="60px"></v-card-media> <v-card-media :src="img" height="60px"></v-card-media>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
</template> </template>
@ -27,8 +47,12 @@
data: function(){ data: function(){
return { return {
message: 'Hello Vue.js!', message: 'Hello Vue.js!',
fieldValue:"",
list:[],
search:"",
data:[],
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
} }
}, },
methods: { methods: {
reverseMessage() { reverseMessage() {
@ -36,6 +60,9 @@
}, },
logout(){ logout(){
alert("TODU") alert("TODU")
},
handleSelected(){
} }
} }
} }

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

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="puzzle"> <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>
@ -22,6 +21,7 @@
</tr> </tr>
</table> </table>
</v-layout> </v-layout>
Loosely inspired by <a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
</v-container> </v-container>
</template> </template>

128
src/vue-poc/lib/dice.xqm Normal file
View file

@ -0,0 +1,128 @@
(:~
: dice utils - sort, filter, and serialize as json.
: can read parameters from request: sort,start,limit.
: @requires basex 8.6 for map:merge
: @author andy bunce
: @since mar 2013
:)
module namespace dice = 'quodatum.web.dice/v4';
declare default function namespace 'quodatum.web.dice/v4';
declare namespace restxq = 'http://exquery.org/ns/restxq';
declare variable $dice:default:=map{
"start" : 1, (: start index :)
"limit" : 30, (: max items :)
"sort" : ""
};
(:~
: sort items
: @param sort field name to sort on optional leading +/-
: @return sorted items
:)
declare function sort($items as item()*
,$fmap as map(*)
,$sort as xs:string?)
as item()*{
let $sort:=fn:normalize-space($sort)=>fn:trace("dice:sort")
let $ascending:=fn:not(fn:starts-with($sort,"-"))
let $fld:=fn:substring($sort,if(fn:substring($sort,1,1)=("+","-")) then 2 else 1)
return if(fn:not(map:contains($fmap, $fld))) then
$items
else if ($ascending) then
for $i in $items
(: let $i:=fn:trace($i,"feld " || $fld ) :)
order by $fmap($fld)($i) ascending collation "http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive"
return $i
else
for $i in $items
order by $fmap($fld)($i) descending collation "http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive"
return $i
};
(:~ generate item xml for all fields in map :)
declare function json-flds($item,$fldmap)
as element(_){
json-flds($item,$fldmap,map:keys($fldmap))
};
(:~ generate item xml for some fields in map :)
declare function json-flds($item as element(),
$fldmap as map(*),
$keys as xs:string*)
as element(_){
<_>
{for $key in $keys
return
try{
$fldmap($key)($item)
}catch * {
element {$key}{$err:description }
} }
</_>
};
(:~
: sort, slice, return json using request parameters
: @param $items sequence of source items
: @param $opts sort and slice values
:)
declare function response($items,
$entity as map(*),
$opts as map(*))
{
let $total:=fn:count($items)
let $opts:=map:merge(($opts,$dice:default))
let $items:= dice:sort($items,$entity?access,$opts?sort)
let $jsonf:= $entity?json
let $fields:=if ($opts?fields) then fn:tokenize($opts?fields) else map:keys($jsonf)
let $slice:= fn:subsequence($items,$opts?start,$opts?limit)
return
<json objects="json _" >
<total type="number">{$total}</total>
<range>{$opts?start}-{$opts?start+fn:count($slice)-1}/{$total}</range>
<entity>{$entity?name}</entity>
<items type="array">
{for $item in $slice
return <_ >{$fields!$jsonf(.)($item)}</_>}
</items>
</json>
};
(:~
: get data
:)
declare function get($entity as map(*),$name as xs:string)
as element(*){
let $results:=$entity("data")()
return $results[$name=$entity?access?name(.)]
};
(:~
: sort, slice, return json
:)
declare function response($items,$entity as map(*)){
response($items,$entity,map{})
};
(:~
: @return json for item
:)
declare function one($item,$entity as map(*))
{
one($item,$entity,map{})
};
(:~
: @return json for item
:)
declare function one($item,$entity as map(*),$opts as map(*))
{
let $jsonf:= map:get($entity,"json")
let $fields:=if ($opts?fields) then fn:tokenize($opts?fields) else map:keys($jsonf)=>fn:trace("FF")
return <json objects="json " >
{$fields!$jsonf(.)($item)}
</json>
};

22
src/vue-poc/models/thumbnail.xml Normal file
View file

@ -0,0 +1,22 @@
<entity name="thumbnail" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>an image.</description>
<namespace prefix="c" uri="http://www.w3.org/ns/xproc-step"/>
<module prefix="cmpx" namespace="quodatum.cmpx" />
<fields>
<field name="name" type="xs:string">
<description>File name.</description>
<xpath>@name</xpath>
</field>
<field name="size" type="xs:integer">
<description>file size.</description>
<xpath>@size</xpath>
</field>
</fields>
<views>
<view name="filter">name</view>
</views>
<iconclass>fa fa-file</iconclass>
<data type="element(*)">doc("/vue-poc/pics.xml")//c:file</data>
</entity>

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

@ -1,5 +1,83 @@
// generated 2017-07-05T23:03:36.134+01:00 // generated 2017-07-12T11:37:10.722+01:00
/** Vue.component('my-component',{template:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`,
props: ['href'],
created:function(){
console.log("my-component");
}
}
);
Vue.component('nav-list',{template:`
<v-list dense="">
<template v-for="(item, i) in items">
<v-layout row="" v-if="item.heading" align-center="" :key="i">
<v-flex xs6="">
<v-subheader v-if="item.heading">
{{ item.heading }}
</v-subheader>
</v-flex>
<v-flex xs6="" class="text-xs-center">
<a href="#!" class="body-2 black--text">EDIT</a>
</v-flex>
</v-layout>
<v-list-group v-else-if="item.children" v-model="item.model" no-action="">
<v-list-tile :to="item.href" ripple="" slot="item">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
<v-spacer></v-spacer>
<v-list-tile-action>
<v-icon>{{ item.model ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
</v-list-tile-content>
</v-list-tile>
<template v-for="(child, i) in item.children">
<v-list-tile :to="child.href" :key="i" ripple="">
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ child.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list-group>
<v-list-tile v-else="" :to="item.href" ripple="">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
`,
props: ['items'],
created:function(){
console.log("nav-lst");
}
}
);
/**
* vue filters * vue filters
*/ */
@ -53,6 +131,27 @@ Vue.filter('round', function(value, decimals) {
} }
} }
);
const Home=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 green lighten-1">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<p>
This is a experiment in using
<code>vue.js</code>
.
</p>
<ul>
<li><a href="https://vuetifyjs.com/vuetify/quick-start" target="new">vuetifyjs</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" target="new"><s>vue-select</s></a></li>
<li><a href="https://github.com/beautify-web/js-beautify" target="new">js-beautify</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>
</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <my-component href="/dba">REPLACED</my-component> </v-layout> `,
}
); );
const Files=Vue.extend({template:` const Files=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
@ -60,13 +159,11 @@ Vue.filter('round', function(value, decimals) {
<v-card> <v-card>
<v-toolbar> <v-toolbar>
<v-menu bottom="" right=""> <v-menu bottom="" right="">
<v-btn icon="" dark="" slot="activator"><v-icon>folder</v-icon></v-btn> <v-btn icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
<v-list> <v-list>
<template v-for="item in crumbs"> <v-list-tile v-for="item in crumbs" :key="item">
<v-list-tile :key="item">
<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>
</template>
</v-list> </v-list>
</v-menu> </v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title> <v-toolbar-title>{{ url }}</v-toolbar-title>
@ -80,12 +177,11 @@ Vue.filter('round', function(value, decimals) {
<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>
<template v-for="item in folders"> <v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar="">
<v-list-tile v-bind:key="item.name" @click="folder(item.name)" avatar="">
<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 @click="folder(item.name)">
<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>
@ -95,18 +191,16 @@ Vue.filter('round', function(value, decimals) {
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</template>
<v-divider inset=""></v-divider> <v-divider inset=""></v-divider>
<v-subheader inset="">Files</v-subheader> <v-subheader inset="">Files</v-subheader>
<template v-for="item in folders"> <v-list-tile v-for="item in files" v-bind:key="item.name">
<v-list-tile v-bind:key="item.name" @click="file(item.name)">
<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 @click="file(item.name)">
<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: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</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.stop="info(item.name)"> <v-btn icon="" ripple="" @click.native.stop="info(item.name)">
@ -114,15 +208,24 @@ Vue.filter('round', function(value, decimals) {
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</template>
</v-list> </v-list>
<v-navigation-drawer right="" light="" temporary="" v-model="infodraw"> <v-card> <v-card-title class="green white--text"> <v-navigation-drawer right="" light="" temporary="" v-model="showInfo">
Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card> <v-card>
<v-toolbar class="green white--text">
<v-toolbar-title>{{selected}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> blah blah protocol: {{protocol}} </v-card-text>
</v-card>
</v-navigation-drawer> </v-navigation-drawer>
</v-card> </v-card>
</v-container> </v-container>
`, `,
props:["protocol"],
data: function(){ data: function(){
return { return {
crumbs:[], crumbs:[],
@ -131,25 +234,22 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
items:["root"], items:["root"],
q:"", q:"",
busy:false, busy:false,
infodraw:false, showInfo:false,
selected:"" selected:""
} }
}, },
methods:{ methods:{
file (val) { file (val) {
// with query, resulting in /register?plan=private // with query, resulting in /register?plan=private
router.push({ path: 'edit', query: { url: this.url+"/"+val }}) router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol }})
}, },
folder (val) { folder (val) {
this.crumbs.push(val ) this.crumbs.push(val )
this.$router.push({ query: { url: this.url }})
this.load(this.url)
}, },
load(url){ load(url){
this.busy=true this.busy=true
HTTP.get("file?url="+url,axios_json) HTTP.get("file",{params:{url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
console.log(r)
this.folders=r.data.folders this.folders=r.data.folders
this.files=r.data.files this.files=r.data.files
this.busy=false this.busy=false
@ -164,22 +264,15 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
root(){ root(){
this.crumbs=[] this.crumbs=[]
this.$router.push({ query: { url: this.url }}) this.$router.push({ query: { url: this.url }})
this.load(this.url)
}, },
filter(){ filter(){
console.log("TODO") console.log("TODO")
}, },
info(sel){ info(sel){
this.selected=sel this.selected=sel
this.infodraw=true this.showInfo=true
}, }
readablizeBytes(v){
return Vue.filter('readablizeBytes')(v)
},
formatDate(v){
return Vue.filter('formatDate')(v)
}
}, },
computed: { computed: {
url: { url: {
@ -190,12 +283,24 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
// alert("set"+newValue) // alert("set"+newValue)
this.crumbs=newValue.split("/").filter((a)=>a.length>0) this.crumbs=newValue.split("/").filter((a)=>a.length>0)
} }
},
icon(){
return (this.protocol=="basexdb")?"account_balance":"folder"
}
},
watch:{
url(v){
this.$router.push({ query: { url: this.url }})
},
$route(v){
var url=this.$route.query.url
this.url=url?url:"/";
this.load(this.url)
} }
}, },
created:function(){ created:function(){
var url=this.$route.query.url var url=this.$route.query.url
this.url=url?url:"/"; this.url=url?url:"/";
console.log("files: ",this.$route.query.url)
this.load(this.url) this.load(this.url)
} }
} }
@ -204,16 +309,13 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
const History=Vue.extend({template:` const History=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<v-list> <v-list>
<v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item.url)" avatar=""> <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar="">
<v-list-tile-action> <v-list-tile-action>
<v-icon v-if="item.icon" class="pink--text">star</v-icon> <v-chip v-text="item.mode">Example Chip</v-chip>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="doEdit(item.url)" v-text="item.url"></v-list-tile-title> <v-list-tile-title @click="doEdit(item)" v-text="item.url"></v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-avatar>
<img v-bind:src="item.avatar">
</v-list-tile-avatar>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-container> </v-container>
@ -233,9 +335,9 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
console.log("items",this.items) console.log("items",this.items)
}); });
}, },
doEdit(url){ doEdit(item){
console.log("DD"+url) console.log("history: ",item)
router.push({ path: 'edit', query: { url: url }}) router.push({ path: 'edit', query: { url:item.url, mode:item.mode }})
} }
}, },
created:function(){ created:function(){
@ -257,8 +359,10 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
<v-menu> <v-menu>
<v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn> <v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn>
<v-list> <v-list>
<v-list-tile v-for="item in path" :key="item" @click="showfiles()"> <v-list-tile v-for="item in path" :key="item">
<v-list-tile-content @click="showfiles()">
<v-list-tile-title>{{ item }}</v-list-tile-title> <v-list-tile-title>{{ item }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-menu> </v-menu>
@ -280,31 +384,31 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
<v-icon black="">navigate_next</v-icon> <v-icon black="">navigate_next</v-icon>
</v-avatar> </v-avatar>
</v-chip> </v-chip>
<v-btn dark="" icon="" @click.native="acecmd('outline')"> <v-btn icon="" @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="acecmd('foldall')"> <v-btn icon="" @click.native="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="wrap=!wrap"> <v-btn icon="" @click.native="wrap=!wrap">
<v-icon>wrap_text</v-icon> <v-icon>wrap_text</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="save()"> <v-btn icon="" @click.native="save()">
<v-icon>file_upload</v-icon> <v-icon>file_upload</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="beautify()"> <v-btn icon="" @click.native="beautify()">
<v-icon>format_align_center</v-icon> <v-icon>format_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="clearDialog = true"> <v-btn icon="" @click.native="clearDialog = true">
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<v-menu left="" transition="v-fade-transition"> <v-menu left="" transition="v-fade-transition">
<v-btn dark="" icon="" slot="activator"> <v-btn icon="" slot="activator">
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
<v-list> <v-list>
@ -324,7 +428,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
</v-list> </v-list>
</v-menu> </v-menu>
<v-menu left="" transition="v-fade-transition"> <v-menu left="" transition="v-fade-transition">
<v-btn dark="" icon="" slot="activator"> <v-btn icon="" slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
@ -367,6 +471,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
};`, };`,
mode:'xquery', mode:'xquery',
url:'', url:'',
protocol:'webfile',
name:'', name:'',
path:[], path:[],
mimetype:"", mimetype:"",
@ -407,16 +512,17 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
// load from url // load from url
fetch(url){ fetch(url){
this.busy=true this.busy=true
HTTP.get("edit?url="+url,axios_json) var a=url.split("/")
this.url=url
this.name=a.pop()
this.path=a
HTTP.get("edit",{params: {url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype 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("/")
this.url=url
this.name=a.pop()
this.path=a
this.busy=false this.busy=false
this.dirty=false this.dirty=false
//alert(mode) //alert(mode)
@ -438,6 +544,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
alert("TODO save: "+this.url); alert("TODO save: "+this.url);
var data=Qs.stringify( var data=Qs.stringify(
{ {
protocol:this.protocol,
url: this.url, //gave the values directly for testing url: this.url, //gave the values directly for testing
data: this.contentA data: this.contentA
}) })
@ -490,6 +597,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
created(){ created(){
//https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme //https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
document.addEventListener('beforeunload', this.leaving); document.addEventListener('beforeunload', this.leaving);
this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
var url=this.$route.query.url var url=this.$route.query.url
console.log("Edit: ",url) console.log("Edit: ",url)
if(url) this.fetch(url) if(url) this.fetch(url)
@ -506,17 +614,29 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
); );
const Eval=Vue.extend({template:` const Eval=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<v-card class="grey lighten-1 z-depth-1 mb-5"> <v-card>
<v-toolbar>
<v-app-bar>
<v-btn @click.native="run()">Run</v-btn> <v-btn @click.native="run()">Run</v-btn>
<v-btn @click.native="submit()"> <v-btn @click.native="submit()">
<v-icon>play_circle_outline</v-icon> <v-icon>play_circle_outline</v-icon>
Submit</v-btn> Submit</v-btn>
<v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow=""></v-btn-dropdown> <v-spacer></v-spacer>
</v-app-bar> <v-btn @click.native="imports()">
<v-icon>play_circle_outline</v-icon>
Imports</v-btn>
<v-menu :nudge-width="100">
<v-toolbar-title slot="activator">
<span>{{font}}</span>
<v-icon>arrow_drop_down</v-icon>
</v-toolbar-title>
<v-list>
<v-list-tile v-for="item in dropdown_font" :key="item">
<v-list-tile-title v-text="item.text" @click="font=item.text"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
<v-card-text> <v-card-text>
@ -557,6 +677,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
jobId:null, jobId:null,
waiting:false, waiting:false,
start:null, start:null,
font:'Courier',
dropdown_font: [ dropdown_font: [
{ text: 'Arial' }, { text: 'Arial' },
{ text: 'Calibri' }, { text: 'Calibri' },
@ -630,6 +751,9 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
this.jobId=null this.jobId=null
this.show=true this.show=true
}) })
},
imports(){
alert("imports")
} }
}, },
@ -639,7 +763,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
} }
); );
const Home=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title height="200px" class="pa-5 green lighten-1"> const About=Vue.extend({template:` <v-layout class="ma-5"> <v-flex xs4=""> <v-card hover="" raised=""> <v-card-title 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.2 </v-card-title> </v-card> </v-flex> <v-flex xs4=""> v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<p> <p>
@ -659,6 +783,77 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
);
const Images=Vue.extend({template:`
<v-card>
<v-card-actions>
<v-btn @click.native="page+=1">next</v-btn>
{{page}}
<v-btn @click.native="page-=1">back</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
<v-container fluid="" grid-list-md="">
<v-layout row="" wrap="">
<v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
<v-card @click="selected()" class="grey lighten-2 pt-1">
<v-card-media :src="src(image)" height="80px" :contain="true"></v-card-media>
<v-card-actions v-tooltip:top="{ html: image.name }">
<v-btn icon="" small="">
<v-icon>favorite</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon="" small="">
<v-icon>bookmark</v-icon>
</v-btn>
<v-btn icon="" small="">
<v-icon>share</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
`,
data: () => ({
images:[],
page:0
}),
methods:{
src(item){
//return "https://unsplash.it/150/300?image="+Math.floor(Math.random() * 100) + 1
return "data:image/jpeg;base64,"+item.data
},
getImages(){
HTTP.get("images/list?page="+this.page)
.then(r=>{
this.images=r.data.items
})
},
selected(){
alert("not yet")
}
},
watch:{
page(v){
this.$router.push({ query: { page: this.page }})
},
$route(v){
this.getImages()
}
},
created:function(){
this.page=this.$route.query.page || this.page
this.getImages()
}
}
); );
const Job=Vue.extend({template:` const Job=Vue.extend({template:`
<v-card> <v-card>
@ -820,51 +1015,6 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
} }
);
const Options=Vue.extend({template:`
<v-layout>
<v-flex xs2="">
<v-card class="blue darken-4 white--text">
<v-card-title height="200px">
Featured Event: <br>
May 24, 2016 <br>
7-11pm
</v-card-title>
<v-card-actions>
<v-btn flat="" class="white--text" @click.native="snackbar = true">Add to <br>Calendar</v-btn>
<v-spacer></v-spacer>
<v-btn icon="" dark="" @click.native="snackbar = true">
<v-icon>event</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6="">
<v-text-field name="url" label="Image location" :required="true" :full-width="false"></v-text-field>
</v-flex>
<v-flex xs4="">
<v-card-media img="music.jpg" height="300px"></v-card-media>
<v-btn block="" primary="" @click.native="snackbar = true" dark="">Show Snackbar</v-btn>
<v-btn class="white--text" @click.native="snackbar = true">Snackbar?</v-btn>
</v-flex>
<v-snackbar v-model="snackbar">
Hello, I'm a snackbar
<v-btn flat="" class="pink--text" @click.native="snackbar = false">
<v-icon>highlight_off</v-icon>
</v-btn>
</v-snackbar>
</v-layout>
`,
data: function(){
return {
snackbar:false
}
}
}
); );
const People=Vue.extend({template:` const People=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
@ -872,6 +1022,24 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn> <v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
<p>{{ message }}</p> <p>{{ message }}</p>
<v-btn light="" default="" v-on:click.native="logout">logout</v-btn> <v-btn light="" default="" v-on:click.native="logout">logout</v-btn>
<!--
<v-autocomplete :items="list"
v-model="fieldValue"
:search.sync="search"
label="Suburb" item-text="suburb"
item-value="suburb"
@selected="handleSelected"
strict="Unknown">
<template slot="item" scope="data">
<v-list-tile-content>
<v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
<template v-if="!data.item.generatedItem">
<v-list-tile-sub-title>{{data.item.postcode}} - {{data.item.state}}</v-list-tile-sub-title>
</template>
</v-list-tile-content>
</template>
</v-autocomplete>
-->
</v-layout> </v-layout>
<v-card> <v-card>
<v-layout> <v-layout>
@ -887,14 +1055,20 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card-media :src="img" height="60px"></v-card-media> <v-card-media :src="img" height="60px"></v-card-media>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return { return {
message: 'Hello Vue.js!', message: 'Hello Vue.js!',
fieldValue:"",
list:[],
search:"",
data:[],
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
} }
}, },
methods: { methods: {
reverseMessage() { reverseMessage() {
@ -902,6 +1076,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}, },
logout(){ logout(){
alert("TODU") alert("TODU")
},
handleSelected(){
} }
} }
} }
@ -1037,7 +1214,6 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
); );
const Puzzle=Vue.extend({template:` const Puzzle=Vue.extend({template:`
<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>
@ -1058,6 +1234,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
</tr> </tr>
</tbody></table> </tbody></table>
</v-layout> </v-layout>
Loosely inspired by <a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
</v-container> </v-container>
`, `,
@ -1429,84 +1606,7 @@ Vue.config.errorHandler = function (err, vm, info) {
alert("vue error"); alert("vue error");
}; };
Vue.component('my-component', {
props: ['href'],
template: '<a :href="href" :target="href" > {{href}}<v-icon>link</v-icon></a>',
created:function(){
console.log("my-component");
},
});
Vue.component('nav-list', {
props: ['items'],
template:`
<v-list dense>
<template v-for="(item, i) in items">
<v-layout
row
v-if="item.heading"
align-center
:key="i"
>
<v-flex xs6>
<v-subheader v-if="item.heading">
{{ item.heading }}
</v-subheader>
</v-flex>
<v-flex xs6 class="text-xs-center">
<a href="#!" class="body-2 black--text">EDIT</a>
</v-flex>
</v-layout>
<v-list-group v-else-if="item.children" v-model="item.model" no-action>
<v-list-tile slot="item" :href="item.href" router ripple>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
<v-spacer></v-spacer>
<v-list-tile-action>
<v-icon>{{ item.model ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
</v-list-tile-content>
</v-list-tile>
<template v-for="(child, i) in item.children">
<v-list-tile :key="i" :href="child.href" router ripple>
<v-list-tile-action v-if="child.icon">
<v-icon>{{ child.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ child.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list-group>
<v-list-tile v-else :href="item.href" router ripple>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>`,
created:function(){
console.log("my-component");
}
});
var Events = new Vue({}); var Events = new Vue({});
@ -1517,15 +1617,15 @@ const router = new VueRouter({
routes: [ routes: [
{ path: '/', component: Home,meta:{title:"Home"} }, { path: '/', component: Home,meta:{title:"Home"} },
{ path: '/people', component: People ,meta:{title:"People"}}, { path: '/people', component: People ,meta:{title:"People"}},
{ path: '/options', component: Options,meta:{title:"Options"} }, { path: '/images', component: Images,meta:{title:"Images"} },
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/select', component: Select,meta:{title:"Select"} },
{ path: '/search', component: Search,meta:{title:"Search"} }, { path: '/search', component: Search,meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
{ 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:"File system"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/files', component: Files,meta:{title:"File system"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
{ 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: '/history', component: History,meta:{title:"File History"} }, { path: '/history', component: History,meta:{title:"File History"} },
@ -1573,7 +1673,8 @@ const app = new Vue({
text: 'Collections' , text: 'Collections' ,
model: false, model: false,
children: [ children: [
{href: 'files', text: 'File system',icon: 'folder' }, {href: 'database', text: 'Databases',icon: 'account_balance' },
{href: 'files', text: 'File system',icon: 'folder' },
{href: 'edit',text: 'edit',icon: 'mode_edit'}, {href: 'edit',text: 'edit',icon: 'mode_edit'},
{href: 'history',text: 'history',icon: 'history'}, {href: 'history',text: 'history',icon: 'history'},
{href: 'logs',text: 'Server logs',icon: 'dns'} {href: 'logs',text: 'Server logs',icon: 'dns'}
@ -1583,8 +1684,8 @@ const app = new Vue({
text: 'Actions' , text: 'Actions' ,
model: false, model: false,
children: [ children: [
{href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'}, {href: 'eval',text: 'Query',icon: 'play_circle_outline'},
{href: 'jobs',text: 'Jobs',icon: 'dashboard'}, {href: 'jobs',text: 'Running jobs',icon: 'dashboard'},
{href: 'tasks',text: 'Tasks',icon: 'history'}, {href: 'tasks',text: 'Tasks',icon: 'history'},
]}, ]},
{ {
@ -1595,7 +1696,7 @@ const app = new Vue({
{href: 'people',text: 'People',icon: 'person'}, {href: 'people',text: 'People',icon: 'person'},
{href: 'select',text: 'select',icon: 'extension'}, {href: 'select',text: 'select',icon: 'extension'},
{href: 'puzzle',text: 'Puzzle',icon: 'extension'}, {href: 'puzzle',text: 'Puzzle',icon: 'extension'},
{href: 'options',text: 'options',icon: 'domain'}, {href: 'images',text: 'Images',icon: 'camera_roll'},
{href: 'tabs',text: 'tabs',icon: 'switch_camera'}, {href: 'tabs',text: 'tabs',icon: 'switch_camera'},
{href: 'ping',text: 'ping',icon: 'update'}, {href: 'ping',text: 'ping',icon: 'update'},
{href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'} {href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'}

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

@ -9,7 +9,7 @@
<title>Vue Router Test</title> <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/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/vuetify@0.13.0/dist/vuetify.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vuetify@0.13.1/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"> <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@ -19,7 +19,7 @@
<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.13.0/dist/vuetify.min.js"></script> <script src="https://unpkg.com/vuetify@0.13.1/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.7/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.7/ext-language_tools.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>

262
src/vue-poc/static/resources/task.xsd Normal file
View file

@ -0,0 +1,262 @@
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<!-- thumbnail schema apb apr 2017 -->
<xs:element name="thumbnail">
<xs:annotation>
<xs:documentation>Root container</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:sequence>
<xs:choice>
<xs:element ref="size" />
<xs:element ref="scale" />
</xs:choice>
<xs:element ref="region" minOccurs="0" />
<xs:element ref="constrain" minOccurs="0" />
<xs:element ref="filters" minOccurs="0" />
<xs:element ref="output" minOccurs="0" />
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="size">
<xs:annotation>
<xs:documentation>size of thumbnail to create</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="width" type="PxType" />
<xs:attribute name="height" type="PxType" />
</xs:complexType>
</xs:element>
<xs:element name="scale">
<xs:annotation>
<xs:documentation>scale thumbnail from source size</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="x" type="ScaleType" />
<xs:attribute name="y" type="ScaleType" />
</xs:complexType>
</xs:element>
<xs:element name="region">
<xs:annotation>
<xs:documentation>region of source image to use for thumbnail.
default all
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="height" type="PxType" />
<xs:attribute name="width" type="PxType" />
<xs:attribute name="position" type="PositionType" />
</xs:complexType>
</xs:element>
<xs:element name="filters">
<xs:annotation>
<xs:documentation>contain for filters to be applied to thumbnail
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:choice maxOccurs="unbounded">
<xs:element ref="canvas" minOccurs="0" />
<xs:element ref="caption" minOccurs="0" />
<xs:element ref="colorize" minOccurs="0" />
<xs:element ref="flip" minOccurs="0" />
<xs:element ref="rotate" minOccurs="0" />
<xs:element ref="watermark" minOccurs="0" />
</xs:choice>
</xs:complexType>
</xs:element>
<xs:element name="canvas">
<xs:annotation>
<xs:documentation>create a filled enclosing background for thumbnail
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="height" type="PxType" />
<xs:attribute name="width" type="PxType" />
<xs:attribute name="color" type="ColorType" />
<xs:attribute name="position" type="PositionType" />
</xs:complexType>
</xs:element>
<xs:element name="colorize">
<xs:annotation>
<xs:documentation>tint thumbnail</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="color" type="ColorType" />
<xs:attribute name="alpha" type="AlphaType" />
</xs:complexType>
</xs:element>
<xs:element name="caption">
<xs:annotation>
<xs:documentation>add text to thumbnail</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="size" type="xs:int" />
<xs:attribute name="font" type="xs:string" />
<xs:attribute name="color" type="ColorType" />
<xs:attribute name="position" type="PositionType" />
<xs:attribute name="insets"
type="xs:int">
</xs:attribute>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
<xs:element name="flip">
<xs:annotation>
<xs:documentation>flip thumbnail horizontally or vertically.
**Ignored if exif-orientation is true **
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="axis" type="AxisType" />
</xs:complexType>
</xs:element>
<xs:element name="rotate">
<xs:annotation>
<xs:documentation>rotate the thumbnail</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="angle" type="xs:float" use="required" />
</xs:complexType>
</xs:element>
<xs:element name="watermark">
<xs:annotation>
<xs:documentation>Add image to thumbnail as a watermark
</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="src" type="xs:string" />
<xs:attribute name="position" type="PositionType" />
<xs:attribute name="alpha" type="AlphaType" />
</xs:complexType>
</xs:element>
<xs:simpleType name="AxisType">
<xs:annotation>
<xs:documentation>Axis of flip</xs:documentation>
</xs:annotation>
<xs:restriction base="xs:string">
<xs:enumeration value="horizontal" />
<xs:enumeration value="vertical" />
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="PositionType">
<xs:annotation>
<xs:documentation>Region of image to use</xs:documentation>
</xs:annotation>
<xs:restriction base="xs:string">
<xs:enumeration value="TOP_LEFT" />
<xs:enumeration value="TOP_CENTER" />
<xs:enumeration value="TOP_RIGHT" />
<xs:enumeration value="MIDDLE_LEFT" />
<xs:enumeration value="CENTER" />
<xs:enumeration value="MIDDLE_RIGHT" />
<xs:enumeration value="BOTTOM_LEFT" />
<xs:enumeration value="BOTTOM_CENTER" />
<xs:enumeration value="BOTTOM_RIGHT" />
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="PxType">
<xs:annotation>
<xs:documentation>A size in pixels</xs:documentation>
</xs:annotation>
<xs:restriction base="xs:int">
<xs:minInclusive value="0"></xs:minInclusive>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="ScaleType">
<xs:restriction base="xs:double">
<xs:minExclusive value="0"></xs:minExclusive>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="AlphaType">
<xs:annotation>
<xs:documentation>Transparency alpha value</xs:documentation>
</xs:annotation>
<xs:restriction base="xs:double">
<xs:minInclusive value="0"></xs:minInclusive>
<xs:maxInclusive value="1"></xs:maxInclusive>
</xs:restriction>
</xs:simpleType>
<xs:element name="constrain">
<xs:annotation>
<xs:documentation>constraints on thumbnail</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="exif" type="xs:boolean" default="true">
<xs:annotation>
<xs:documentation> true if the Exif metadata should be used to
determine the orientation of the thumbnail,
false otherwise.
</xs:documentation>
</xs:annotation>
</xs:attribute>
<xs:attribute name="fit" type="xs:boolean" use="optional"
default="true">
<xs:annotation>
<xs:documentation>fit - true if the thumbnail should be sized to
fit within the specified dimensions,
if the thumbnail is going to
exceed those dimensions.
</xs:documentation>
</xs:annotation>
</xs:attribute>
<xs:attribute name="aspect" type="xs:boolean" use="optional"
default="true">
<xs:annotation>
<xs:documentation>keep aspect ratio</xs:documentation>
</xs:annotation>
</xs:attribute>
</xs:complexType>
</xs:element>
<xs:simpleType name="ColorType">
<xs:annotation>
<xs:documentation>Java colour name e.g. "red"
or Color.decode(value)
decimal, octal, or hexidecimal integer e.g
"#FF0096"
</xs:documentation>
</xs:annotation>
<xs:restriction base="xs:string"></xs:restriction>
</xs:simpleType>
<xs:element name="output" >
<xs:annotation>
<xs:documentation>Serialization details for output</xs:documentation>
</xs:annotation>
<xs:complexType>
<xs:attribute name="format" type="xs:string" use="optional">
<xs:annotation>
<xs:documentation>Output image format (JPEG, PNG, GIF, BMP and
WBMP). defaults to source format</xs:documentation>
</xs:annotation>
</xs:attribute>
</xs:complexType>
</xs:element>
</xs:schema>

16
src/vue-poc/tasks/createthumbs.xq
View file

@ -1 +1,15 @@
42 (:~ update image meta data docs :)
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
let $done:=uri-collection("vue-poc/Pictures")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
return ((for $f in subsequence($todo,1, 1000)
let $spath:="P:/pictures/" || $f
let $dbpath:=$f || "/meta.xml"
let $meta:=imgmeta:read($spath)
return db:replace($DB,$dbpath,$meta)),db:output($todo=>count()))

13
src/vue-poc/tasks/scanpics.xq
View file

@ -2,7 +2,12 @@
:) :)
import module namespace fw="quodatum:file.walker"; import module namespace fw="quodatum:file.walker";
declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace c="http://www.w3.org/ns/xproc-step";
let $opt:=map{"include-filter":".*\.xsd", declare variable $SRC:="P:/pictures/Pictures/";
"max-depth":-1, (: declare variable $DEST:="c:\tmp\pics2.xml"; :)
"include-info":true()} declare variable $DEST:="/pics.xml";
return fw:directory-list("/",$opt) declare %updating function local:put($data,$path){
db:replace("vue-poc",$path,$data)
};
let $opt:=map{"include-info":true()}
let $files:=fw:directory-list($SRC,$opt)
return $files=>local:put($DEST)

8
tools/compile.xq
View file

@ -26,7 +26,12 @@ let $script:= $p?script=>substring-after("{")
return if(empty($p?id)) then return if(empty($p?id)) then
() ()
else else if($isComp) then
``[Vue.component('`{$p?id}`',{template:` `{$p?template}` `,
`{$script}`
);
]``
else
``[const `{functx:capitalize-first($p?id)}`=Vue.extend({template:` `{$p?template}` `, ``[const `{functx:capitalize-first($p?id)}`=Vue.extend({template:` `{$p?template}` `,
`{$script}` `{$script}`
); );
@ -61,6 +66,7 @@ let $comps:=$files!(fetch:text(.)=>html5:doc()=>local:feature(true()))
let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;" let $comment:="// generated " || current-dateTime() || "&#xA;&#xD;"
return file:write-text($DEST,string-join(($comment, return file:write-text($DEST,string-join(($comment,
$comps,
fetch:text($FILTERS), fetch:text($FILTERS),
$feats, $feats,
fetch:text($CORE)))) fetch:text($CORE))))