From 2c253b93e889aca09d0ebf84928d21af879b3cd8 Mon Sep 17 00:00:00 2001
From: andy
Date: Fri, 8 Sep 2017 11:36:47 +0100
Subject: [PATCH] loader
---
src/vue-poc/build.xq | 12 -
src/vue-poc/components/core.js | 229 +-------
src/vue-poc/components/router.js | 60 ++
src/vue-poc/data/vue-poc/ping.xml | 3 +
src/vue-poc/data/vue-poc/state.xml | 1 +
src/vue-poc/features/eval/eval.vue | 26 +-
src/vue-poc/features/ping/ping.xqm | 8 +-
src/vue-poc/features/vue-poc.vue | 224 --------
src/vue-poc/lib/vue-compile/vue-compile.xqm | 9 +-
src/vue-poc/models/query.xml | 33 ++
src/vue-poc/models/search-result.xml | 23 +
src/vue-poc/static/app-gen.js | 583 +++++++-------------
src/vue-poc/static/app.css | 55 +-
src/vue-poc/static/app.html | 80 +--
src/vue-poc/{ => tasks}/collection.xq | 2 +-
src/vue-poc/tasks/create-db.xq | 13 +
src/vue-poc/vue-api2.xqm | 13 +-
src/vue-poc/vue-poc.vue | 190 +++++++
src/vue-poc/vue-poc.xqm | 4 +-
19 files changed, 670 insertions(+), 898 deletions(-)
delete mode 100644 src/vue-poc/build.xq
create mode 100644 src/vue-poc/components/router.js
create mode 100644 src/vue-poc/data/vue-poc/ping.xml
delete mode 100644 src/vue-poc/features/vue-poc.vue
create mode 100644 src/vue-poc/models/query.xml
create mode 100644 src/vue-poc/models/search-result.xml
rename src/vue-poc/{ => tasks}/collection.xq (69%)
create mode 100644 src/vue-poc/tasks/create-db.xq
create mode 100644 src/vue-poc/vue-poc.vue
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 @@
-
-
-
-
-
-
-
-
-
- 
-
-
-
- Vue PoC
-
-
-
- chevron_left
-
-
-
-
-
-
-
-
-
-
- {{$route.meta.title}}
-
-
-
-
- {{$auth.user}}
-
-
-
-
-
- logout
-
-
- permission: {{$auth.permission}}
-
-
-
-
-
- {{ fullscreenIcon }}
-
-
-
-
-
- {{ alert.msg }}
-
-
-
-
-
-
-
-
-
-
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 }}
-
-
-
-
-
-
-
-