diff --git a/src/vue-poc/build.xq b/src/vue-poc/build.xq deleted file mode 100644 index fb9a851..0000000 --- a/src/vue-poc/build.xq +++ /dev/null @@ -1,12 +0,0 @@ -let $head:="" -let $app:="" -return ``[ - - - `{$head}` - - `{$app}` - - - -]`` \ No newline at end of file diff --git a/src/vue-poc/components/core.js b/src/vue-poc/components/core.js index b623cce..1d170ce 100644 --- a/src/vue-poc/components/core.js +++ b/src/vue-poc/components/core.js @@ -2,29 +2,21 @@ localforage.config({ name: 'vuepoc' }); +const AXIOS_CONFIG={ + baseURL: "/vue-poc/api/", + headers: { + 'X-Custom-Header': 'vue-poc', + accept: 'application/json' + }, + paramsSerializer: function(params) { + return Qs.stringify(params) + } + }; // errors displayed by interceptor -const HTTP = axios.create({ - baseURL: "/vue-poc/api/", - headers: { - 'X-Custom-Header': 'vue-poc', - accept: 'application/json' - }, - paramsSerializer: function(params) { - return Qs.stringify(params) - } -}); +const HTTP = axios.create(AXIOS_CONFIG); // errors hidden -const HTTPNE = axios.create({ - baseURL: "/vue-poc/api/", - headers: { - 'X-Custom-Header': 'vue-poc', - accept: 'application/json' - }, - paramsSerializer: function(params) { - return Qs.stringify(params) - } -}); +const HTTPNE = axios.create(AXIOS_CONFIG); const axios_json={ headers: {accept: 'application/json'}}; const Auth={ @@ -40,13 +32,13 @@ Vue.use(Auth); // read and write settings // https://vuejs.org/v2/guide/state-management.html var settings = { - debug: true, + debug: false, getItem (key) { if (this.debug) console.log('getItem',key); return new Promise((resolve, reject) => { localforage.getItem(key) .then((value) => { - console.log('GET setting', key,value); + //console.log('GET setting', key,value); resolve(value) }).catch((err) => { console.log('GET failed'); @@ -59,7 +51,7 @@ var settings = { return new Promise((resolve, reject) => { localforage.setItem(key, value) .then((value) => { - console.log('SET ',key, value); + //console.log('SET ',key, value); return new Promise((resolve, reject) => {resolve(value);}) }).catch((err) => { console.log('set failed'); @@ -133,194 +125,5 @@ const Fullscreen={ }) } }; Vue.use(Fullscreen); - - -const router = new VueRouter({ - base:"/vue-poc/ui/", - mode: 'history', - routes: [ - { path: '/', component: Home, meta:{title:"Home"} }, - { path: '/session', component: Session ,meta: {title:"Session"}}, - {path: '/images', redirect: '/images/item' }, - { path: '/images/item', name:'images', component: Images, meta:{title: "Images"} }, - { path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}}, - { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}}, - { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} }, - { path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} }, - { path: '/images/dates', component: Dates, meta:{title:"Image dates"} }, - { 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: '/server/users', component: Users,meta:{title:"Users"} }, - { path: '/server/repo', component: Repo,meta:{title:"Repository"} }, - { 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: '/acesettings', component: Acesettings, meta:{title:"Editor settings"} }, - { path: '/history', component: History, meta:{title:"File History"} }, - { path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} }, - { path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} }, - { path: '/logs', component: Log, meta:{title:"Server logs"} }, - { path: '/tasks', component: Task, meta:{title:"Runnable tasks"} }, - { path: '/tasks/model', component: Model, meta:{title:"build model"} }, - { path: '/tasks/xqdoc', component: Xqdoc, meta:{title:"build xqdoc"} }, - { path: '/tasks/vuecompile', component: Vuecompile, meta:{title:"vue compile"} }, - { path: '/jobs', component: Jobs, meta:{title:"Jobs running"} }, - { path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} }, - { path: '/timeline', component: Timeline,meta:{title:"timeline"} }, - { path: '/about', component: About,meta:{title:"About Vue-poc"} }, - { path: '*', component: Notfound,meta:{title:"Page not found"} } - ], -}); -router.afterEach(function(route) { - document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc"; -}); - -router.beforeEach((to, from, next) => { - if (to.matched.some(record => record.meta.requiresAuth)) { - // this route requires auth, check if logged in - // if not, redirect to login page. - if ("admin"==Auth.permission) { - next({ - path: '/login', - query: { redirect: to.fullPath } - }) - } else { - next() - } - } else { - next() // make sure to always call next()! - } -}); - Vue.use(Vuetify); - -const app = new Vue({ - router, - data:function(){return { - q:"", - status:{}, - drawer:true, - mini: false, - dark: false, - alert:{show:false,msg:"Hello"}, - items:[ - {href: '/',text: 'Home', icon: 'home' }, - { - icon: 'folder_open', - text: 'Collections' , - model: false, - children: [ - {href: '/database', text: 'Databases',icon: 'developer_mode' }, - {href: '/files', text: 'File system',icon: 'folder' }, - {href: '/edit',text: 'Edit',icon: 'mode_edit'}, - {href: '/history',text: 'history',icon: 'history'} - ]}, - { - icon: 'directions_run', - text: 'Actions' , - model: false, - children: [ - {href: '/eval',text: 'Query',icon: 'play_circle_outline'}, - {href: '/tasks',text: 'Tasks',icon: 'history'} - ]}, - { - icon: 'cast_connected', - text: 'Server' , - model: false, - children: [ - {href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, - {href: '/logs',text: 'Server logs',icon: 'dns'}, - {href: '/server/users',text: 'Users',icon: 'supervisor_account'}, - {href: '/server/repo',text: 'Server code repository',icon: 'local_library'}, - {href: '/ping',text: 'Ping',icon: 'update'} - ]}, - { - icon: 'camera_roll', - text: 'Images' , - model: false, - children: [ - {href: '/images/item',text: 'Collection',icon: 'photo_camera'}, - {href: '/images/keywords',text: 'Keywords',icon: 'label'}, - {href: '/images/dates',text: 'Date taken',icon: 'date_range'}, - {href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'}, - {href: '/images/report',text: 'Reports',icon: 'report'} - ]}, - { - icon: 'more_horiz', - text: 'More' , - model: false, - children: [ - {href: '/session',text: 'Session',icon: 'person'}, - {href: '/select',text: 'Select',icon: 'extension'}, - {href: '/puzzle',text: 'Puzzle',icon: 'extension'}, - {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, - {href: '/timeline',text: 'Time line',icon: 'timelapse'} - ]}, - - {href: '/settings',text: 'Settings',icon: 'settings' }, - {href: '/about',text: 'About', icon: 'help' }, - ] - - }}, - methods: { - session(){ - this.$router.push({path: '/session'}) - }, - search(){ - this.$router.push({path: '/search',query: { q: this.q }}) - }, - logout(){ - HTTP.get("logout").then(r=>{ - alert("logout") - }) - }, - showAlert(msg){ - this.alert.msg=moment().format()+" "+ msg - this.alert.show=true - }, - onDark(dark){ - this.dark=dark - alert("theme") - } - }, - - created(){ - - console.log("create-----------") - Vue.config.errorHandler = function (err, vm, info) { - // handle error - // `info` is a Vue-specific error info, e.g. which lifecycle hook - console.error(err, vm, info); - this.showAlert("vue error:\n"+err) - alert("vue error"); - }; - // Add a response interceptor - - HTTP.interceptors.response.use( - (response)=> { - // Do something with response data - return response; - }, - (error) =>{ - // interupt restxq single - console.log("$$$$$$$$$$$",error) - if(460 != error.response.status)this.showAlert("http error:\n"+error.response.data) - return Promise.reject(error); - }); - - HTTP.get("status") - .then(r=>{ - console.log("status",r.data) - Object.assign(Auth,r.data) - this.$forceUpdate() - }) - }, - beforeDestroy(){ - console.log("destory-----------") - - } - }).$mount('#app'); +new Vuepoc().$mount('#app') diff --git a/src/vue-poc/components/router.js b/src/vue-poc/components/router.js new file mode 100644 index 0000000..3ecac73 --- /dev/null +++ b/src/vue-poc/components/router.js @@ -0,0 +1,60 @@ +const router = new VueRouter({ + base:"/vue-poc/ui/", + mode: 'history', + routes: [ + { path: '/', component: Home, meta:{title:"Home"} }, + { path: '/session', component: Session ,meta: {title:"Session"}}, + {path: '/images', redirect: '/images/item' }, + { path: '/images/item', name:'images', component: Images, meta:{title: "Images"} }, + { path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}}, + { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}}, + { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} }, + { path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} }, + { path: '/images/dates', component: Dates, meta:{title:"Image dates"} }, + { 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: '/server/users', component: Users,meta:{title:"Users"} }, + { path: '/server/repo', component: Repo,meta:{title:"Repository"} }, + { 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: '/acesettings', component: Acesettings, meta:{title:"Editor settings"} }, + { path: '/history', component: History, meta:{title:"File History"} }, + { path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} }, + { path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} }, + { path: '/logs', component: Log, meta:{title:"Server logs"} }, + { path: '/tasks', component: Task, meta:{title:"Runnable tasks"} }, + { path: '/tasks/model', component: Model, meta:{title:"build model"} }, + { path: '/tasks/xqdoc', component: Xqdoc, meta:{title:"build xqdoc"} }, + { path: '/tasks/vuecompile', component: Vuecompile, meta:{title:"vue compile"} }, + { path: '/jobs', component: Jobs, meta:{title:"Jobs running"} }, + { path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} }, + { path: '/timeline', component: Timeline,meta:{title:"timeline"} }, + { path: '/about', component: About,meta:{title:"About Vue-poc"} }, + { path: '*', component: Notfound,meta:{title:"Page not found"} } + ], +}); +router.afterEach(function(route) { + document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc"; +}); + +router.beforeEach((to, from, next) => { + if (to.matched.some(record => record.meta.requiresAuth)) { + // this route requires auth, check if logged in + // if not, redirect to login page. + if ("admin"==Auth.permission) { + next({ + path: '/login', + query: { redirect: to.fullPath } + }) + } else { + next() + } + } else { + next() // make sure to always call next()! + } +}); \ No newline at end of file diff --git a/src/vue-poc/data/vue-poc/ping.xml b/src/vue-poc/data/vue-poc/ping.xml new file mode 100644 index 0000000..d4ba18d --- /dev/null +++ b/src/vue-poc/data/vue-poc/ping.xml @@ -0,0 +1,3 @@ + + 3 + \ No newline at end of file diff --git a/src/vue-poc/data/vue-poc/state.xml b/src/vue-poc/data/vue-poc/state.xml index d4ba18d..887f9ab 100644 --- a/src/vue-poc/data/vue-poc/state.xml +++ b/src/vue-poc/data/vue-poc/state.xml @@ -1,3 +1,4 @@ + 0 3 \ No newline at end of file diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue index fc04a42..eb294f1 100644 --- a/src/vue-poc/features/eval/eval.vue +++ b/src/vue-poc/features/eval/eval.vue @@ -4,10 +4,26 @@ - Run - - play_circle_outline - Submit + + + + + play_circle_outline + Run + + + Submit + + + + Run + + + Show query plan + + + + library_books @@ -167,7 +183,7 @@ }, plan(){ this.awaitResult(false) - HTTP.post("eval/plan",Qs.stringify({xq:this.xq})) + HTTPNE.post("eval/plan",Qs.stringify({xq:this.xq})) .then(r=>{ this.result=r.data.result }) diff --git a/src/vue-poc/features/ping/ping.xqm b/src/vue-poc/features/ping/ping.xqm index d27c152..2d7a182 100644 --- a/src/vue-poc/features/ping/ping.xqm +++ b/src/vue-poc/features/ping/ping.xqm @@ -1,5 +1,5 @@ module namespace ping = 'quodatum.test.ping'; -declare variable $ping:db as xs:string:="doc-doc"; +declare variable $ping:db as xs:string:="vue-poc"; declare variable $ping:state as element(state):=db:open($ping:db,"/state.xml")/state; (:~ @@ -10,8 +10,8 @@ declare %updating %output:method("text") function ping:dopost() { - (replace value of node $ping:state/hits with 1+$ping:state/hits, - db:output(1+$ping:state/hits)) + (replace value of node $ping:state/ping with 1+$ping:state/ping, + db:output(1+$ping:state/ping)) }; (:~ @@ -22,5 +22,5 @@ declare %rest:GET %rest:path("/vue-poc/api/ping") function ping:dostate() { - $ping:state/hits + $ping:state/ping }; \ No newline at end of file diff --git a/src/vue-poc/features/vue-poc.vue b/src/vue-poc/features/vue-poc.vue deleted file mode 100644 index dfabb9a..0000000 --- a/src/vue-poc/features/vue-poc.vue +++ /dev/null @@ -1,224 +0,0 @@ - - - - diff --git a/src/vue-poc/lib/vue-compile/vue-compile.xqm b/src/vue-poc/lib/vue-compile/vue-compile.xqm index 7aecc7d..31d481b 100644 --- a/src/vue-poc/lib/vue-compile/vue-compile.xqm +++ b/src/vue-poc/lib/vue-compile/vue-compile.xqm @@ -64,12 +64,14 @@ declare function vue:capitalize-first concat(upper-case(substring($arg,1,1)), substring($arg,2)) }; +(: filename of features:) declare function vue:feature-files($proj) as xs:string* { let $FEATURES:="features/"=>file:resolve-path($proj) - return fw:directory-list($FEATURES,map{"include-filter":".*\.vue"}) + let $files:= fw:directory-list($FEATURES,map{"include-filter":".*\.vue"}) //c:file/@name/resolve-uri(.,base-uri(.)) + return $files }; declare function vue:feature-build($url as xs:string,$isComp as xs:boolean) @@ -88,8 +90,9 @@ let $FEATURES:="features/"=>file:resolve-path($proj=>trace("proj:")) let $COMPONENTS:="components/"=>file:resolve-path($proj) let $CORE:="components/core.js"=>file:resolve-path($proj) let $FILTERS:="components/filters.js"=>file:resolve-path($proj) +let $ROUTER:="components/router.js"=>file:resolve-path($proj) let $DEST:="static/app-gen.js"=>file:resolve-path($proj) - +let $APP:="vue-poc.vue"=>file:resolve-path($proj) let $files:=vue:feature-files($proj) let $feats:=$files!vue:feature-build(.,false()) @@ -102,5 +105,7 @@ return file:write-text($DEST,string-join(($comment, $comps, fetch:text($FILTERS), $feats, + fetch:text($ROUTER), + $APP!vue:feature-build(.,false()), fetch:text($CORE)))) }; \ No newline at end of file diff --git a/src/vue-poc/models/query.xml b/src/vue-poc/models/query.xml new file mode 100644 index 0000000..ceda7d1 --- /dev/null +++ b/src/vue-poc/models/query.xml @@ -0,0 +1,33 @@ + + An replx query + + + + + unique id + @id + + + date + created + + + query + query + + + result + substring(result,0,1000) + + + result + string-length(result) + + + + name description + + fa fa-file-code-o + collection("replx/queries")/query + + \ No newline at end of file diff --git a/src/vue-poc/models/search-result.xml b/src/vue-poc/models/search-result.xml new file mode 100644 index 0000000..275a21c --- /dev/null +++ b/src/vue-poc/models/search-result.xml @@ -0,0 +1,23 @@ + + About a search result. + + + title + title + + + type + type + + + link to result + uri + + + ui-router ui-sref data + "app.item.index({'name':'benchx'})" + + + fa fa-question-circle + + \ No newline at end of file diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js index 1b5ac75..c8847bf 100644 --- a/src/vue-poc/static/app-gen.js +++ b/src/vue-poc/static/app-gen.js @@ -1,4 +1,4 @@ -// generated 2017-09-05T15:21:42.951+01:00 +// generated 2017-09-07T22:40:46.775+01:00 Vue.component('qd-fullscreen',{template:` {{ fullscreenIcon }} @@ -936,10 +936,26 @@ Vue.filter('round', function(value, decimals) { - Run - - play_circle_outline - Submit + + + + + play_circle_outline + Run + + + Submit + + + + Run + + + Show query plan + + + + library_books @@ -1095,7 +1111,7 @@ Vue.filter('round', function(value, decimals) { }, plan(){ this.awaitResult(false) - HTTP.post("eval/plan",Qs.stringify({xq:this.xq})) + HTTPNE.post("eval/plan",Qs.stringify({xq:this.xq})) .then(r=>{ this.result=r.data.result }) @@ -2849,365 +2865,7 @@ users todo } ); - const Vuepoc=Vue.extend({template:` - - - - - - - - - - - - Vue PoC - - - - chevron_left - - - - - - - - - - - {{$route.meta.title}} - - - - - {{$auth.user}} - - - - - - logout - - - permission: {{$auth.permission}} - - - - - - {{ fullscreenIcon }} - - - -
- - 
{{ alert.msg }}
- - - - -
- - - `, - - // router, - data:function(){return { - q:"", - status:{}, - drawer:true, - mini: false, - alert:{show:false,msg:"Hello"}, - items:[ - {href: '/',text: 'Home', icon: 'home' }, - { - icon: 'folder_open', - text: 'Collections' , - model: false, - children: [ - {href: '/database', text: 'Databases',icon: 'developer_mode' }, - {href: '/files', text: 'File system',icon: 'folder' }, - {href: '/edit',text: 'Edit',icon: 'mode_edit'}, - {href: '/history',text: 'history',icon: 'history'} - ]}, - { - icon: 'directions_run', - text: 'Actions' , - model: false, - children: [ - {href: '/eval',text: 'Query',icon: 'play_circle_outline'}, - {href: '/tasks',text: 'Tasks',icon: 'history'} - ]}, - { - icon: 'cast_connected', - text: 'Server' , - model: false, - children: [ - {href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, - {href: '/logs',text: 'Server logs',icon: 'dns'}, - {href: '/ping',text: 'Ping',icon: 'update'} - ]}, - { - icon: 'camera_roll', - text: 'Images' , - model: false, - children: [ - {href: '/images/item',text: 'Collection',icon: 'photo_camera'}, - {href: '/images/keywords',text: 'Keywords',icon: 'label'}, - {href: '/images/dates',text: 'Date taken',icon: 'date_range'}, - {href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'}, - {href: '/images/report',text: 'Reports',icon: 'report'} - ]}, - { - icon: 'more_horiz', - text: 'More' , - model: false, - children: [ - {href: '/session',text: 'Session',icon: 'person'}, - {href: '/select',text: 'Select',icon: 'extension'}, - {href: '/puzzle',text: 'Puzzle',icon: 'extension'}, - {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}, - {href: '/timeline',text: 'Time line',icon: 'timelapse'} - ]}, - - {href: '/settings',text: 'Settings',icon: 'settings' }, - {href: '/about',text: 'About', icon: 'help' }, - ] - - }}, - methods: { - session(){ - this.$router.push({path: '/session'}) - }, - search(){ - this.$router.push({path: '/search',query: { q: this.q }}) - }, - logout(){ - HTTP.get("logout").then(r=>{ - alert("logout") - }) - }, - showAlert(msg){ - this.alert.msg=moment().format()+" "+ msg - this.alert.show=true - }, - fullscreenEnabled(){ - return document.fullscreenEnabled - }, - isInFullScreen(){ - return (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null) - }, - fullscreen(){ - // https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript - var isInFullScreen = this.isInFullScreen(); - alert(isInFullScreen); - var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } - } - }, - computed:{ - fullscreenIcon(){ return this.isInFullScreen()?'fullscreen_exit':'fullscreen'} - }, - - created(){ - - console.log("create-----------") - Vue.config.errorHandler = function (err, vm, info) { - // handle error - // `info` is a Vue-specific error info, e.g. which lifecycle hook - console.error(err, vm, info); - this.showAlert("vue error:\n"+err) - alert("vue error"); - }; - // Add a response interceptor - - HTTP.interceptors.response.use( - (response)=> { - // Do something with response data - return response; - }, - (error) =>{ - // interupt restxq single - if(460 != error.response.status)this.showAlert("http error:\n"+error.response.data) - return Promise.reject(error); - }); - - HTTP.get("status") - .then(r=>{ - console.log("status",r.data) - Object.assign(Auth,r.data) - this.$forceUpdate() - }) - }, - beforeDestroy(){ - console.log("destory-----------") - - } -} - - ); - // base ----------------------- -localforage.config({ - name: 'vuepoc' -}); - -// errors displayed by interceptor -const HTTP = axios.create({ - baseURL: "/vue-poc/api/", - headers: { - 'X-Custom-Header': 'vue-poc', - accept: 'application/json' - }, - paramsSerializer: function(params) { - return Qs.stringify(params) - } -}); -// errors hidden -const HTTPNE = axios.create({ - baseURL: "/vue-poc/api/", - headers: { - 'X-Custom-Header': 'vue-poc', - accept: 'application/json' - }, - paramsSerializer: function(params) { - return Qs.stringify(params) - } -}); -const axios_json={ headers: {accept: 'application/json'}}; - -const Auth={ - user:"guest", - permission:null, - install: function(Vue){ - Object.defineProperty(Vue.prototype, '$auth', { - get () { return Auth } - }) } -}; -Vue.use(Auth); - -// read and write settings -// https://vuejs.org/v2/guide/state-management.html -var settings = { - debug: true, - getItem (key) { - if (this.debug) console.log('getItem',key); - return new Promise((resolve, reject) => { - localforage.getItem(key) - .then((value) => { - console.log('GET setting', key,value); - resolve(value) - }).catch((err) => { - console.log('GET failed'); - reject(err) - }); - }); - }, - setItem (key,value) { - if (this.debug) console.log('setItem',key,value); - return new Promise((resolve, reject) => { - localforage.setItem(key, value) - .then((value) => { - console.log('SET ',key, value); - return new Promise((resolve, reject) => {resolve(value);}) - }).catch((err) => { - console.log('set failed'); - return new Promise((resolve, reject) => {reject(err);}) - }); - }) -}, - keys(){ - return localforage.keys() // returns array of keys - - }, - clear(){ - localforage.clear() - } -}; - - - -//Returns a function, that, as long as it continues to be invoked, will not -//be triggered. The function will be called after it stops being called for -//N milliseconds. If `immediate` is passed, trigger the function on the -//leading edge, instead of the trailing. https://gist.github.com/nmsdvid/8807205 -function debounce(func, wait, immediate) { - var timeout; - return function() { - var context = this, args = arguments; - clearTimeout(timeout); - timeout = setTimeout(function() { - timeout = null; - if (!immediate) func.apply(context, args); - }, wait); - if (immediate && !timeout) func.apply(context, args); - }; -}; - -// https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript -const Fullscreen={ - isInFullScreen(){ - return (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null); - }, - toggle(){ - var docElm = document.documentElement; - if (!this.isInFullScreen()) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } - }, - install: function(Vue){ - Object.defineProperty(Vue.prototype, '$fullscreen', { - get () { return Fullscreen } - }) } -}; -Vue.use(Fullscreen); - - -const router = new VueRouter({ + const router = new VueRouter({ base:"/vue-poc/ui/", mode: 'history', routes: [ @@ -3266,11 +2924,65 @@ router.beforeEach((to, from, next) => { } else { next() // make sure to always call next()! } -}); +});const Vuepoc=Vue.extend({template:` + + + -Vue.use(Vuetify); + + + + + + + + Vue PoC + + + + chevron_left + + + -const app = new Vue({ + + + + + + + {{$route.meta.title}} + + + + + {{$auth.user}} + + + + + + logout + + + permission: {{$auth.permission}} + + + + + + +
+ + 
{{ alert.msg }}
+ + + + +
+ + `, + router, data:function(){return { q:"", @@ -3395,4 +3107,137 @@ const app = new Vue({ console.log("destory-----------") } - }).$mount('#app'); + } + + ); + // base ----------------------- +localforage.config({ + name: 'vuepoc' +}); +const AXIOS_CONFIG={ + baseURL: "/vue-poc/api/", + headers: { + 'X-Custom-Header': 'vue-poc', + accept: 'application/json' + }, + paramsSerializer: function(params) { + return Qs.stringify(params) + } + }; + +// errors displayed by interceptor +const HTTP = axios.create(AXIOS_CONFIG); +// errors hidden +const HTTPNE = axios.create(AXIOS_CONFIG); +const axios_json={ headers: {accept: 'application/json'}}; + +const Auth={ + user:"guest", + permission:null, + install: function(Vue){ + Object.defineProperty(Vue.prototype, '$auth', { + get () { return Auth } + }) } +}; +Vue.use(Auth); + +// read and write settings +// https://vuejs.org/v2/guide/state-management.html +var settings = { + debug: true, + getItem (key) { + if (this.debug) console.log('getItem',key); + return new Promise((resolve, reject) => { + localforage.getItem(key) + .then((value) => { + console.log('GET setting', key,value); + resolve(value) + }).catch((err) => { + console.log('GET failed'); + reject(err) + }); + }); + }, + setItem (key,value) { + if (this.debug) console.log('setItem',key,value); + return new Promise((resolve, reject) => { + localforage.setItem(key, value) + .then((value) => { + console.log('SET ',key, value); + return new Promise((resolve, reject) => {resolve(value);}) + }).catch((err) => { + console.log('set failed'); + return new Promise((resolve, reject) => {reject(err);}) + }); + }) +}, + keys(){ + return localforage.keys() // returns array of keys + + }, + clear(){ + localforage.clear() + } +}; + + + +//Returns a function, that, as long as it continues to be invoked, will not +//be triggered. The function will be called after it stops being called for +//N milliseconds. If `immediate` is passed, trigger the function on the +//leading edge, instead of the trailing. https://gist.github.com/nmsdvid/8807205 +function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + clearTimeout(timeout); + timeout = setTimeout(function() { + timeout = null; + if (!immediate) func.apply(context, args); + }, wait); + if (immediate && !timeout) func.apply(context, args); + }; +}; + +// https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript +const Fullscreen={ + isInFullScreen(){ + return (document.fullscreenElement && document.fullscreenElement !== null) || + (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || + (document.mozFullScreenElement && document.mozFullScreenElement !== null) || + (document.msFullscreenElement && document.msFullscreenElement !== null); + }, + toggle(){ + var docElm = document.documentElement; + if (!this.isInFullScreen()) { + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + } + }, + install: function(Vue){ + Object.defineProperty(Vue.prototype, '$fullscreen', { + get () { return Fullscreen } + }) } +}; +Vue.use(Fullscreen); + + +Vue.use(Vuetify); +new Vuepoc().$mount('#app') diff --git a/src/vue-poc/static/app.css b/src/vue-poc/static/app.css index a3c5557..307de57 100644 --- a/src/vue-poc/static/app.css +++ b/src/vue-poc/static/app.css @@ -1,6 +1,57 @@ /* app.css */ -body { - overflow-y:hidden!; + +/* http://tobiasahlin.com/spinkit/ */ +.spinner { + margin: 100px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; +} + +.spinner > div { + background-color: #0000a0; + height: 100%; + width: 6px; + display: inline-block; + + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; + animation: sk-stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes sk-stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes sk-stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } } .fade-enter-active, .fade-leave-active { transition-property: opacity; diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html index 5ac7f07..149374c 100644 --- a/src/vue-poc/static/app.html +++ b/src/vue-poc/static/app.html @@ -15,6 +15,22 @@ + + + + + + +
+ +
+ @@ -30,71 +46,7 @@ - - - - - - - - - - - - - - - - Vue PoC - - - - chevron_left - - - - - - - - - - - {{$route.meta.title}} - - - - - {{$auth.user}} - - - - - - logout - - - permission: {{$auth.permission}} - - - - - - -
- - 
{{ alert.msg }}
- - - - -
- - - \ No newline at end of file diff --git a/src/vue-poc/collection.xq b/src/vue-poc/tasks/collection.xq similarity index 69% rename from src/vue-poc/collection.xq rename to src/vue-poc/tasks/collection.xq index fc5a6b5..8948686 100644 --- a/src/vue-poc/collection.xq +++ b/src/vue-poc/tasks/collection.xq @@ -1,6 +1,6 @@ declare namespace fw="quodatum:collection.walker"; declare namespace c="http://www.w3.org/ns/xproc-step"; -import module namespace tree="quodatum.data.tree" at "lib/tree.xqm"; +import module namespace tree="quodatum.data.tree" at "../lib/tree.xqm"; let $paths:=uri-collection("/ALO") return tree:build($paths) \ No newline at end of file diff --git a/src/vue-poc/tasks/create-db.xq b/src/vue-poc/tasks/create-db.xq new file mode 100644 index 0000000..3b554d3 --- /dev/null +++ b/src/vue-poc/tasks/create-db.xq @@ -0,0 +1,13 @@ +(:~ + : create vue-poc db + :) +import module namespace dbtools = 'quodatum.dbtools' at "../lib/dbtools.xqm"; + +declare variable $target-db:="vue-poc"; + +declare variable $data-uri:=resolve-uri("../data/vue-poc/"); +(dbtools:sync-from-files( + $target-db + ,$data-uri + ,file:list($data-uri,fn:true()) + ,hof:id#1)) \ No newline at end of file diff --git a/src/vue-poc/vue-api2.xqm b/src/vue-poc/vue-api2.xqm index 8ae91dc..43708ba 100644 --- a/src/vue-poc/vue-api2.xqm +++ b/src/vue-poc/vue-api2.xqm @@ -12,7 +12,18 @@ declare namespace c="http://www.w3.org/ns/xproc-step"; declare namespace wadl="http://wadl.dev.java.net/2009/02"; - +(:~ + : get status + :) +declare +%rest:GET %rest:path("/vue-poc/api/start") + function vue-api:start( ) +{ + if(db:exists("vue-poc")) then + () + else + () +}; (:~ : Returns a query result. diff --git a/src/vue-poc/vue-poc.vue b/src/vue-poc/vue-poc.vue new file mode 100644 index 0000000..f18fe33 --- /dev/null +++ b/src/vue-poc/vue-poc.vue @@ -0,0 +1,190 @@ + + + + diff --git a/src/vue-poc/vue-poc.xqm b/src/vue-poc/vue-poc.xqm index 42d54f5..44a93f4 100644 --- a/src/vue-poc/vue-poc.xqm +++ b/src/vue-poc/vue-poc.xqm @@ -40,7 +40,9 @@ function vue-poc:file( }; - +(:~ + :web serve $file if it exists otherwise serve $vue-poc:index + :) declare function vue-poc:get-file($file) { let $path := resolve-uri( 'static/' || $file,static-base-uri())