vuetify 0.13.1
This commit is contained in:
parent
8d841ad7cb
commit
efc929ca69
24 changed files with 1128 additions and 449 deletions
|
|
@ -27,84 +27,7 @@ Vue.config.errorHandler = function (err, vm, info) {
|
|||
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({});
|
||||
|
||||
|
|
@ -115,15 +38,15 @@ const router = new VueRouter({
|
|||
routes: [
|
||||
{ path: '/', component: Home,meta:{title:"Home"} },
|
||||
{ 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: '/search', component: Search,meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
{ path: '/login', component: Login,meta:{title:"login"} },
|
||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
||||
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
|
||||
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
|
||||
{ path: '/ping', component: Ping,meta:{title:"Ping"} },
|
||||
{ path: '/settings', component: Settings,meta:{title:"Settings"} },
|
||||
{ path: '/history', component: History,meta:{title:"File History"} },
|
||||
|
|
@ -171,7 +94,8 @@ const app = new Vue({
|
|||
text: 'Collections' ,
|
||||
model: false,
|
||||
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: 'history',text: 'history',icon: 'history'},
|
||||
{href: 'logs',text: 'Server logs',icon: 'dns'}
|
||||
|
|
@ -181,8 +105,8 @@ const app = new Vue({
|
|||
text: 'Actions' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'},
|
||||
{href: 'jobs',text: 'Jobs',icon: 'dashboard'},
|
||||
{href: 'eval',text: 'Query',icon: 'play_circle_outline'},
|
||||
{href: 'jobs',text: 'Running jobs',icon: 'dashboard'},
|
||||
{href: 'tasks',text: 'Tasks',icon: 'history'},
|
||||
]},
|
||||
{
|
||||
|
|
@ -193,7 +117,7 @@ const app = new Vue({
|
|||
{href: 'people',text: 'People',icon: 'person'},
|
||||
{href: 'select',text: 'select',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: 'ping',text: 'ping',icon: 'update'},
|
||||
{href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</v-layout>
|
||||
<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-icon>{{ item.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
|
@ -34,11 +34,8 @@
|
|||
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<template
|
||||
v-for="(child, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<v-list-tile :href="child.href" router ripple>
|
||||
<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>
|
||||
|
|
@ -51,7 +48,7 @@
|
|||
</template>
|
||||
</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-icon>{{ item.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
|
|
|
|||
28
src/vue-poc/features/about.vue
Normal file
28
src/vue-poc/features/about.vue
Normal 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>
|
||||
|
|
@ -9,6 +9,41 @@ import module namespace fw="quodatum:file.walker";
|
|||
import module namespace ufile = 'vue-poc/file' at "../../lib/file.xqm";
|
||||
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
|
||||
|
|
@ -19,20 +54,13 @@ declare
|
|||
%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/logo.svg',
|
||||
'/vue-poc/static/resources/sparql.rq',
|
||||
'/vue-poc/static/resources/turtle.ttl'
|
||||
)
|
||||
|
||||
let $h:=doc("history.xml")/history/entry
|
||||
return <json type="object" >
|
||||
<items type="array">
|
||||
{$h!(<_ type="object"><url>{.}</url></_>)}
|
||||
{$h!(<_ type="object">
|
||||
<url>{@url/string()}</url>
|
||||
<mode>{@mode/string()}</mode>
|
||||
</_>)}
|
||||
</items>
|
||||
</json>
|
||||
};
|
||||
|
|
@ -44,35 +72,34 @@ function vue-api:history( )
|
|||
declare
|
||||
%rest:path("/vue-poc/api/file")
|
||||
%rest:query-param("url", "{$url}")
|
||||
%rest:query-param("protocol", "{$protocol}")
|
||||
%rest:produces("application/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 ")
|
||||
return if( file:exists($path))then
|
||||
let $items:=fw:directory-list($path,map{"max-depth":1,"include-info":true()})
|
||||
|
||||
return <json type="object" >
|
||||
<folders type="array">
|
||||
{for $f in $items/c:directory
|
||||
order by $f/@name/lower-case(.)
|
||||
return <_ type="object">
|
||||
{vue-api:details($f,"folder")}
|
||||
</_>
|
||||
}
|
||||
</folders>
|
||||
<files type="array">
|
||||
{for $f in $items/c:file
|
||||
order by $f/@name/lower-case(.)
|
||||
return <_ type="object">
|
||||
{vue-api:details($f,"insert_drive_file")}
|
||||
</_>
|
||||
}
|
||||
</files>
|
||||
</json>
|
||||
else
|
||||
error(xs:QName('vue-api:raw'),$path)
|
||||
};
|
||||
let $mode:=if(map:contains($vue-api:MODE,string($protocol)))then $protocol else "webfile"
|
||||
let $reader:=$vue-api:MODE($mode)
|
||||
let $items:=$reader($url)
|
||||
return <json type="object" >
|
||||
<folders type="array">
|
||||
{for $f in $items/c:directory
|
||||
order by $f/@name/lower-case(.)
|
||||
return <_ type="object">
|
||||
{vue-api:details($f,"folder")}
|
||||
</_>
|
||||
}
|
||||
</folders>
|
||||
<files type="array">
|
||||
{for $f in $items/c:file
|
||||
order by $f/@name/lower-case(.)
|
||||
return <_ type="object">
|
||||
{vue-api:details($f,"insert_drive_file")}
|
||||
</_>
|
||||
}
|
||||
</files>
|
||||
</json>
|
||||
};
|
||||
|
||||
declare function vue-api:details($f as element(*),$icon as xs:string)
|
||||
as element(*)*
|
||||
|
|
@ -83,3 +110,25 @@ as element(*)*
|
|||
,<size type="number">{$f/@size/string()}</size>
|
||||
,<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))
|
||||
}
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@
|
|||
<v-card>
|
||||
<v-toolbar>
|
||||
<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>
|
||||
<template v-for="item in crumbs">
|
||||
<v-list-tile :key="item">
|
||||
<v-list-tile v-for="item in crumbs" :key="item">
|
||||
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<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-list v-if="!busy" two-line subheader>
|
||||
<v-subheader inset>Folders</v-subheader>
|
||||
<template v-for="item in folders">
|
||||
<v-list-tile v-bind:key="item.name" @click="folder(item.name)" avatar >
|
||||
<v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar >
|
||||
<v-list-tile-avatar >
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
|
||||
</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-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
|
|
@ -41,18 +38,16 @@
|
|||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
<v-subheader inset>Files</v-subheader>
|
||||
<template v-for="item in folders">
|
||||
<v-list-tile v-bind:key="item.name" @click="file(item.name)">
|
||||
<v-subheader inset>Files</v-subheader>
|
||||
<v-list-tile v-for="item in files" v-bind:key="item.name" >
|
||||
<v-list-tile-avatar>
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
|
||||
</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-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-action>
|
||||
<v-btn icon ripple @click.native.stop="info(item.name)">
|
||||
|
|
@ -60,17 +55,25 @@
|
|||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
</v-list>
|
||||
<v-navigation-drawer right light temporary v-model="infodraw"
|
||||
> <v-card> <v-card-title class="green white--text">
|
||||
Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card>
|
||||
<v-navigation-drawer right light temporary v-model="showInfo">
|
||||
<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-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
|
||||
props:["protocol"],
|
||||
data: function(){
|
||||
return {
|
||||
crumbs:[],
|
||||
|
|
@ -79,25 +82,22 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
items:["root"],
|
||||
q:"",
|
||||
busy:false,
|
||||
infodraw:false,
|
||||
showInfo:false,
|
||||
selected:""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
file (val) {
|
||||
// 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) {
|
||||
this.crumbs.push(val )
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
this.load(this.url)
|
||||
},
|
||||
load(url){
|
||||
this.busy=true
|
||||
HTTP.get("file?url="+url,axios_json)
|
||||
HTTP.get("file",{params:{url:url,protocol:this.protocol}})
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.folders=r.data.folders
|
||||
this.files=r.data.files
|
||||
this.busy=false
|
||||
|
|
@ -112,22 +112,15 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
root(){
|
||||
this.crumbs=[]
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
this.load(this.url)
|
||||
},
|
||||
filter(){
|
||||
console.log("TODO")
|
||||
},
|
||||
info(sel){
|
||||
this.selected=sel
|
||||
this.infodraw=true
|
||||
},
|
||||
readablizeBytes(v){
|
||||
return Vue.filter('readablizeBytes')(v)
|
||||
},
|
||||
formatDate(v){
|
||||
return Vue.filter('formatDate')(v)
|
||||
}
|
||||
|
||||
this.showInfo=true
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
|
|
@ -138,12 +131,24 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
// alert("set"+newValue)
|
||||
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(){
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/";
|
||||
console.log("files: ",this.$route.query.url)
|
||||
this.load(this.url)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,13 @@
|
|||
<template id="history">
|
||||
<v-container fluid>
|
||||
<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-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-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-avatar>
|
||||
<img v-bind:src="item.avatar"/>
|
||||
</v-list-tile-avatar>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-container>
|
||||
|
|
@ -32,9 +29,9 @@
|
|||
console.log("items",this.items)
|
||||
});
|
||||
},
|
||||
doEdit(url){
|
||||
console.log("DD"+url)
|
||||
router.push({ path: 'edit', query: { url: url }})
|
||||
doEdit(item){
|
||||
console.log("history: ",item)
|
||||
router.push({ path: 'edit', query: { url:item.url, mode:item.mode }})
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
|
|
|
|||
13
src/vue-poc/features/collection/history.xml
Normal file
13
src/vue-poc/features/collection/history.xml
Normal 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>
|
||||
|
|
@ -11,8 +11,10 @@
|
|||
<v-menu >
|
||||
<v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >folder</v-icon></v-btn>
|
||||
<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-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
|
@ -36,31 +38,31 @@
|
|||
<v-icon black >navigate_next</v-icon>
|
||||
</v-avatar>
|
||||
</v-chip>
|
||||
<v-btn dark icon @click.native="acecmd('outline')">
|
||||
<v-btn icon @click.native="acecmd('outline')">
|
||||
<v-icon>star</v-icon>
|
||||
</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-btn>
|
||||
|
||||
<v-btn dark icon @click.native="wrap=!wrap">
|
||||
<v-btn icon @click.native="wrap=!wrap">
|
||||
<v-icon>wrap_text</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark icon @click.native="save()">
|
||||
<v-btn icon @click.native="save()">
|
||||
<v-icon>file_upload</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark icon @click.native="beautify()">
|
||||
<v-btn icon @click.native="beautify()">
|
||||
<v-icon>format_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark icon @click.native="clearDialog = true">
|
||||
<v-btn icon @click.native="clearDialog = true">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
<v-menu left transition="v-fade-transition">
|
||||
<v-btn dark icon slot="activator">
|
||||
<v-btn icon slot="activator">
|
||||
<v-icon>help</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
|
|
@ -80,7 +82,7 @@
|
|||
</v-list>
|
||||
</v-menu>
|
||||
<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-btn>
|
||||
|
||||
|
|
@ -126,6 +128,7 @@ v-on:annotation="annotation"></vue-ace>
|
|||
};`,
|
||||
mode:'xquery',
|
||||
url:'',
|
||||
protocol:'webfile',
|
||||
name:'',
|
||||
path:[],
|
||||
mimetype:"",
|
||||
|
|
@ -166,16 +169,17 @@ v-on:annotation="annotation"></vue-ace>
|
|||
// load from url
|
||||
fetch(url){
|
||||
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=>{
|
||||
//console.log(r)
|
||||
this.mimetype=r.data.mimetype
|
||||
this.mode=this.acetype(r.data.mimetype)
|
||||
this.contentA=r.data.data
|
||||
var a=url.split("/")
|
||||
this.url=url
|
||||
this.name=a.pop()
|
||||
this.path=a
|
||||
|
||||
this.busy=false
|
||||
this.dirty=false
|
||||
//alert(mode)
|
||||
|
|
@ -197,6 +201,7 @@ v-on:annotation="annotation"></vue-ace>
|
|||
alert("TODO save: "+this.url);
|
||||
var data=Qs.stringify(
|
||||
{
|
||||
protocol:this.protocol,
|
||||
url: this.url, //gave the values directly for testing
|
||||
data: this.contentA
|
||||
})
|
||||
|
|
@ -249,6 +254,7 @@ v-on:annotation="annotation"></vue-ace>
|
|||
created(){
|
||||
//https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
|
||||
document.addEventListener('beforeunload', this.leaving);
|
||||
this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
|
||||
var url=this.$route.query.url
|
||||
console.log("Edit: ",url)
|
||||
if(url) this.fetch(url)
|
||||
|
|
|
|||
|
|
@ -18,9 +18,10 @@ declare namespace c="http://www.w3.org/ns/xproc-step";
|
|||
declare
|
||||
%rest:GET %rest:path("/vue-poc/api/edit")
|
||||
%rest:query-param("url", "{$url}")
|
||||
%rest:query-param("protocol", "{$protocol}")
|
||||
%rest:produces("application/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 ")
|
||||
return if( file:exists($path))then
|
||||
|
|
|
|||
|
|
@ -1,17 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="eval">
|
||||
<v-container fluid>
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5">
|
||||
|
||||
<v-card >
|
||||
|
||||
|
||||
<v-app-bar>
|
||||
<v-toolbar>
|
||||
<v-btn @click.native="run()">Run</v-btn>
|
||||
<v-btn @click.native="submit()">
|
||||
<v-icon>play_circle_outline</v-icon>
|
||||
Submit</v-btn>
|
||||
<v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow></v-btn-dropdown>
|
||||
</v-app-bar>
|
||||
<v-spacer></v-spacer>
|
||||
<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 >
|
||||
|
|
@ -56,6 +68,7 @@
|
|||
jobId:null,
|
||||
waiting:false,
|
||||
start:null,
|
||||
font:'Courier',
|
||||
dropdown_font: [
|
||||
{ text: 'Arial' },
|
||||
{ text: 'Calibri' },
|
||||
|
|
@ -129,6 +142,9 @@
|
|||
this.jobId=null
|
||||
this.show=true
|
||||
})
|
||||
},
|
||||
imports(){
|
||||
alert("imports")
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!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
|
||||
height="200px" class="pa-5 green lighten-1">
|
||||
<div class="display-1 white--text text-xs-center">VUE-POC</div>
|
||||
|
|
|
|||
76
src/vue-poc/features/images/images.vue
Normal file
76
src/vue-poc/features/images/images.vue
Normal 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
51
src/vue-poc/features/images/images.xqm
Normal 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>
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,6 +5,24 @@
|
|||
<v-btn light default v-on:click.native="reverseMessage">Reverse Message</v-btn>
|
||||
<p>{{ message }}</p>
|
||||
<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-card>
|
||||
<v-layout >
|
||||
|
|
@ -20,6 +38,8 @@
|
|||
<v-card-media :src="img" height="60px"></v-card-media>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,8 +47,12 @@
|
|||
data: function(){
|
||||
return {
|
||||
message: 'Hello Vue.js!',
|
||||
fieldValue:"",
|
||||
list:[],
|
||||
search:"",
|
||||
data:[],
|
||||
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reverseMessage() {
|
||||
|
|
@ -36,6 +60,9 @@
|
|||
},
|
||||
logout(){
|
||||
alert("TODU")
|
||||
},
|
||||
handleSelected(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="puzzle">
|
||||
<v-container fluid>
|
||||
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
|
||||
<v-layout >
|
||||
|
||||
<table>
|
||||
|
|
@ -22,6 +21,7 @@
|
|||
</tr>
|
||||
</table>
|
||||
</v-layout>
|
||||
Loosely inspired by <a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
128
src/vue-poc/lib/dice.xqm
Normal file
128
src/vue-poc/lib/dice.xqm
Normal 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
22
src/vue-poc/models/thumbnail.xml
Normal 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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
||||
|
|
@ -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:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -60,13 +159,11 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-card>
|
||||
<v-toolbar>
|
||||
<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>
|
||||
<template v-for="item in crumbs">
|
||||
<v-list-tile :key="item">
|
||||
<v-list-tile v-for="item in crumbs" :key="item">
|
||||
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<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-list v-if="!busy" two-line="" subheader="">
|
||||
<v-subheader inset="">Folders</v-subheader>
|
||||
<template v-for="item in folders">
|
||||
<v-list-tile v-bind:key="item.name" @click="folder(item.name)" avatar="">
|
||||
<v-list-tile v-for="item in folders" v-bind:key="item.name" @click="folder(item.name)" avatar="">
|
||||
<v-list-tile-avatar>
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
|
||||
</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-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
|
|
@ -95,18 +191,16 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
<v-divider inset=""></v-divider>
|
||||
<v-subheader inset="">Files</v-subheader>
|
||||
<template v-for="item in folders">
|
||||
<v-list-tile v-bind:key="item.name" @click="file(item.name)">
|
||||
<v-subheader inset="">Files</v-subheader>
|
||||
<v-list-tile v-for="item in files" v-bind:key="item.name">
|
||||
<v-list-tile-avatar>
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ item.icon }}</v-icon>
|
||||
</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-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-action>
|
||||
<v-btn icon="" ripple="" @click.native.stop="info(item.name)">
|
||||
|
|
@ -114,15 +208,24 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-btn>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
</v-list>
|
||||
<v-navigation-drawer right="" light="" temporary="" v-model="infodraw"> <v-card> <v-card-title class="green white--text">
|
||||
Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-text> </v-card>
|
||||
<v-navigation-drawer right="" light="" temporary="" v-model="showInfo">
|
||||
<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-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
|
||||
props:["protocol"],
|
||||
data: function(){
|
||||
return {
|
||||
crumbs:[],
|
||||
|
|
@ -131,25 +234,22 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
items:["root"],
|
||||
q:"",
|
||||
busy:false,
|
||||
infodraw:false,
|
||||
showInfo:false,
|
||||
selected:""
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
file (val) {
|
||||
// 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) {
|
||||
this.crumbs.push(val )
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
this.load(this.url)
|
||||
},
|
||||
load(url){
|
||||
this.busy=true
|
||||
HTTP.get("file?url="+url,axios_json)
|
||||
HTTP.get("file",{params:{url:url,protocol:this.protocol}})
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.folders=r.data.folders
|
||||
this.files=r.data.files
|
||||
this.busy=false
|
||||
|
|
@ -164,22 +264,15 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
root(){
|
||||
this.crumbs=[]
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
this.load(this.url)
|
||||
},
|
||||
filter(){
|
||||
console.log("TODO")
|
||||
},
|
||||
info(sel){
|
||||
this.selected=sel
|
||||
this.infodraw=true
|
||||
},
|
||||
readablizeBytes(v){
|
||||
return Vue.filter('readablizeBytes')(v)
|
||||
},
|
||||
formatDate(v){
|
||||
return Vue.filter('formatDate')(v)
|
||||
}
|
||||
|
||||
this.showInfo=true
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
|
|
@ -190,12 +283,24 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
// alert("set"+newValue)
|
||||
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(){
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/";
|
||||
console.log("files: ",this.$route.query.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:`
|
||||
<v-container fluid="">
|
||||
<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-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-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-avatar>
|
||||
<img v-bind:src="item.avatar">
|
||||
</v-list-tile-avatar>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</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)
|
||||
});
|
||||
},
|
||||
doEdit(url){
|
||||
console.log("DD"+url)
|
||||
router.push({ path: 'edit', query: { url: url }})
|
||||
doEdit(item){
|
||||
console.log("history: ",item)
|
||||
router.push({ path: 'edit', query: { url:item.url, mode:item.mode }})
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
|
|
@ -257,8 +359,10 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
<v-menu>
|
||||
<v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>folder</v-icon></v-btn>
|
||||
<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-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</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-avatar>
|
||||
</v-chip>
|
||||
<v-btn dark="" icon="" @click.native="acecmd('outline')">
|
||||
<v-btn icon="" @click.native="acecmd('outline')">
|
||||
<v-icon>star</v-icon>
|
||||
</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-btn>
|
||||
|
||||
<v-btn dark="" icon="" @click.native="wrap=!wrap">
|
||||
<v-btn icon="" @click.native="wrap=!wrap">
|
||||
<v-icon>wrap_text</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark="" icon="" @click.native="save()">
|
||||
<v-btn icon="" @click.native="save()">
|
||||
<v-icon>file_upload</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark="" icon="" @click.native="beautify()">
|
||||
<v-btn icon="" @click.native="beautify()">
|
||||
<v-icon>format_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark="" icon="" @click.native="clearDialog = true">
|
||||
<v-btn icon="" @click.native="clearDialog = true">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
<v-menu left="" transition="v-fade-transition">
|
||||
<v-btn dark="" icon="" slot="activator">
|
||||
<v-btn icon="" slot="activator">
|
||||
<v-icon>help</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
|
|
@ -324,7 +428,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
</v-list>
|
||||
</v-menu>
|
||||
<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-btn>
|
||||
|
||||
|
|
@ -367,6 +471,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
};`,
|
||||
mode:'xquery',
|
||||
url:'',
|
||||
protocol:'webfile',
|
||||
name:'',
|
||||
path:[],
|
||||
mimetype:"",
|
||||
|
|
@ -407,16 +512,17 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
// load from url
|
||||
fetch(url){
|
||||
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=>{
|
||||
//console.log(r)
|
||||
this.mimetype=r.data.mimetype
|
||||
this.mode=this.acetype(r.data.mimetype)
|
||||
this.contentA=r.data.data
|
||||
var a=url.split("/")
|
||||
this.url=url
|
||||
this.name=a.pop()
|
||||
this.path=a
|
||||
|
||||
this.busy=false
|
||||
this.dirty=false
|
||||
//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);
|
||||
var data=Qs.stringify(
|
||||
{
|
||||
protocol:this.protocol,
|
||||
url: this.url, //gave the values directly for testing
|
||||
data: this.contentA
|
||||
})
|
||||
|
|
@ -490,6 +597,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
created(){
|
||||
//https://forum.vuejs.org/t/detect-browser-close/5001/3 @fixme
|
||||
document.addEventListener('beforeunload', this.leaving);
|
||||
this.protocol=this.$route.query.protocol?this.$route.query.protocol:this.protocol
|
||||
var url=this.$route.query.url
|
||||
console.log("Edit: ",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:`
|
||||
<v-container fluid="">
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5">
|
||||
|
||||
<v-card>
|
||||
|
||||
|
||||
<v-app-bar>
|
||||
<v-toolbar>
|
||||
<v-btn @click.native="run()">Run</v-btn>
|
||||
<v-btn @click.native="submit()">
|
||||
<v-icon>play_circle_outline</v-icon>
|
||||
Submit</v-btn>
|
||||
<v-btn-dropdown v-bind:options="dropdown_font" max-height="auto" overflow=""></v-btn-dropdown>
|
||||
</v-app-bar>
|
||||
<v-spacer></v-spacer>
|
||||
<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>
|
||||
|
|
@ -557,6 +677,7 @@ Some info here {{selected}} </v-card-title> <v-card-text> blah blah </v-card-tex
|
|||
jobId:null,
|
||||
waiting:false,
|
||||
start:null,
|
||||
font:'Courier',
|
||||
dropdown_font: [
|
||||
{ text: 'Arial' },
|
||||
{ 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.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>
|
||||
v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
|
||||
<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:`
|
||||
<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:`
|
||||
<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>
|
||||
<p>{{ message }}</p>
|
||||
<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-card>
|
||||
<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-flex>
|
||||
</v-layout>
|
||||
|
||||
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
message: 'Hello Vue.js!',
|
||||
fieldValue:"",
|
||||
list:[],
|
||||
search:"",
|
||||
data:[],
|
||||
img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reverseMessage() {
|
||||
|
|
@ -902,6 +1076,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
|
|||
},
|
||||
logout(){
|
||||
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:`
|
||||
<v-container fluid="">
|
||||
<a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
|
||||
<v-layout>
|
||||
|
||||
<table>
|
||||
|
|
@ -1058,6 +1234,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
|
|||
</tr>
|
||||
</tbody></table>
|
||||
</v-layout>
|
||||
Loosely inspired by <a href="http://homepages.cwi.nl/~steven/Talks/2017/06-10-iot/game-demo.html">demo</a>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
|
|
@ -1429,84 +1606,7 @@ Vue.config.errorHandler = function (err, vm, info) {
|
|||
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({});
|
||||
|
||||
|
|
@ -1517,15 +1617,15 @@ const router = new VueRouter({
|
|||
routes: [
|
||||
{ path: '/', component: Home,meta:{title:"Home"} },
|
||||
{ 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: '/search', component: Search,meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
{ path: '/login', component: Login,meta:{title:"login"} },
|
||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
||||
{ path: '/thumbnail', component: Thumbnail,meta:{title:"Thumbnail generator"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"} },
|
||||
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
|
||||
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} },
|
||||
{ path: '/ping', component: Ping,meta:{title:"Ping"} },
|
||||
{ path: '/settings', component: Settings,meta:{title:"Settings"} },
|
||||
{ path: '/history', component: History,meta:{title:"File History"} },
|
||||
|
|
@ -1573,7 +1673,8 @@ const app = new Vue({
|
|||
text: 'Collections' ,
|
||||
model: false,
|
||||
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: 'history',text: 'history',icon: 'history'},
|
||||
{href: 'logs',text: 'Server logs',icon: 'dns'}
|
||||
|
|
@ -1583,8 +1684,8 @@ const app = new Vue({
|
|||
text: 'Actions' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: 'eval',text: 'Evaluate',icon: 'play_circle_outline'},
|
||||
{href: 'jobs',text: 'Jobs',icon: 'dashboard'},
|
||||
{href: 'eval',text: 'Query',icon: 'play_circle_outline'},
|
||||
{href: 'jobs',text: 'Running jobs',icon: 'dashboard'},
|
||||
{href: 'tasks',text: 'Tasks',icon: 'history'},
|
||||
]},
|
||||
{
|
||||
|
|
@ -1595,7 +1696,7 @@ const app = new Vue({
|
|||
{href: 'people',text: 'People',icon: 'person'},
|
||||
{href: 'select',text: 'select',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: 'ping',text: 'ping',icon: 'update'},
|
||||
{href: 'thumbnail',text: 'thumbnail',icon: 'touch_app'}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<title>Vue Router Test</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link href="https://unpkg.com/vuetify@0.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="/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/axios/0.16.1/axios.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
||||
<script src="https://unpkg.com/vuetify@0.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://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>
|
||||
|
|
|
|||
262
src/vue-poc/static/resources/task.xsd
Normal file
262
src/vue-poc/static/resources/task.xsd
Normal 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>
|
||||
|
|
@ -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()))
|
||||
|
|
@ -2,7 +2,12 @@
|
|||
:)
|
||||
import module namespace fw="quodatum:file.walker";
|
||||
declare namespace c="http://www.w3.org/ns/xproc-step";
|
||||
let $opt:=map{"include-filter":".*\.xsd",
|
||||
"max-depth":-1,
|
||||
"include-info":true()}
|
||||
return fw:directory-list("/",$opt)
|
||||
declare variable $SRC:="P:/pictures/Pictures/";
|
||||
(: declare variable $DEST:="c:\tmp\pics2.xml"; :)
|
||||
declare variable $DEST:="/pics.xml";
|
||||
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)
|
||||
|
|
@ -26,7 +26,12 @@ let $script:= $p?script=>substring-after("{")
|
|||
|
||||
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}` `,
|
||||
`{$script}`
|
||||
);
|
||||
|
|
@ -61,6 +66,7 @@ let $comps:=$files!(fetch:text(.)=>html5:doc()=>local:feature(true()))
|
|||
|
||||
let $comment:="// generated " || current-dateTime() || "

"
|
||||
return file:write-text($DEST,string-join(($comment,
|
||||
$comps,
|
||||
fetch:text($FILTERS),
|
||||
$feats,
|
||||
fetch:text($CORE))))
|
||||
Loading…
Add table
Reference in a new issue