diff --git a/src/vue-poc/expath-pkg.xml b/src/vue-poc/expath-pkg.xml index f5b0c0e..610de0f 100644 --- a/src/vue-poc/expath-pkg.xml +++ b/src/vue-poc/expath-pkg.xml @@ -1,15 +1,18 @@ vue-poc test of vue.js. - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/src/vue-poc/login.xqm b/src/vue-poc/login.xqm new file mode 100644 index 0000000..20ff323 --- /dev/null +++ b/src/vue-poc/login.xqm @@ -0,0 +1,86 @@ +(:~ + : Code for logging in and out. + : + :) +module namespace vue-login = 'vue-poc/login'; + +import module namespace Session = 'http://basex.org/modules/session'; + +(:~ Session key. :) +declare variable $vue-login:SESSION-KEY := "vue-poc"; +(:~ Current session. :) +declare variable $vue-login:SESSION-VALUE := Session:get($vue-login:SESSION-KEY); + +(:~ + : Checks the user input and redirects to the main page, or back to the login page. + : @param $name user name + : @param $pass password + : @param $path path to redirect to (optional) + : @return redirect + :) +declare + %rest:path("/vue-poc/api/login-check") + %rest:query-param("name", "{$name}") + %rest:query-param("pass", "{$pass}") + %rest:query-param("redirect", "{$path}") +function vue-login:login( + $name as xs:string, + $pass as xs:string, + $path as xs:string? +) as element(rest:response) { + try { + user:check($name, $pass), + if(false() and user:list-details($name)/@permission ) then ( + vue-login:reject($name, 'Admin credentials required.', $path) + ) else ( + vue-login:accept($name, $pass, $path) + ) + } catch user:* { + vue-login:reject($name, 'Please check your login data.', $path) + } +}; + +(:~ + : Ends a session and redirects to the login page. + : @return redirect + :) +declare + %rest:path("/vue-poc/api/logout") +function vue-login:logout( +) as element(rest:response) { + admin:write-log('vue-poc user was logged out: ' || $vue-login:SESSION-VALUE), + web:redirect("/vue-poc/login", map { 'name': $vue-login:SESSION-VALUE }), + Session:delete($vue-login:SESSION-KEY) +}; + +(:~ + : Accepts a user and redirects to the main page. + : @param $name entered user name + : @param $path path to redirect to + : @return redirect + :) +declare %private function vue-login:accept( + $name as xs:string, + $pass as xs:string, + $path as xs:string? +) { + Session:set($vue-login:SESSION-KEY, $name), + admin:write-log('VUEPOC user was logged in: ' || $name), + web:redirect(if($path) then $path else "/") +}; + +(:~ + : Rejects a user and redirects to the login page. + : @param $name entered user name + : @param $message error message + : @param $path path to redirect to + : @return redirect + :) +declare %private function vue-login:reject( + $name as xs:string, + $message as xs:string, + $path as xs:string? +) as element(rest:response) { + admin:write-log('DBA login was denied: ' || $name), + web:redirect("login", map { 'name': $name, 'error': $message, 'path': $path }) +}; diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js index a04bdf5..a4a9e97 100644 --- a/src/vue-poc/static/app-gen.js +++ b/src/vue-poc/static/app-gen.js @@ -1,65 +1,93 @@ -// generated 2017-06-01T12:41:01.376+01:00 - const Edit=Vue.extend({ - template: ` +// generated 2017-06-04T17:31:45.572+01:00 + const Edit=Vue.extend({template:` - folder -{{ name }} {{ mode }} - {{dirty}} + + folder +{{ name }} +* +. + {{ mode }} + + + + navigate_next + + {{annotations && annotations.error}} + {{annotations && annotations.warning}} + {{annotations && annotations.info}} + star - - navigate_before - - - navigate_next - + + vertical_align_center - - settings - - + + wrap_text - - keyboard - + file_upload + format_align_center delete - + + + help + + + + + + settings + + Show settings + + + + + + + keyboard + + Show keyboard commands + + + + + more_vert - + - load xquery + load xquery - + - load xml + load xml - + - load js + load js @@ -95,10 +123,13 @@ -`, + `, + data () { return { - contentA: 'declare function local:query($q as xs:string)\n { \n }', + contentA: `declare function local:query($q as xs:string) +{ +};`, mode:'xquery', url:'', name:'', @@ -113,7 +144,8 @@ "application/xml":"xml", "application/xquery":"xquery", "text/ecmascript":"javascript", - "text/html":"html" + "text/html":"html", + "text/css":"css" } } }, @@ -188,6 +220,7 @@ }, annotation(counts){ this.annotations=counts + console.log("annotations: ",counts) }, acetype(mime){ var r=this.mimemap[mime] @@ -217,8 +250,7 @@ } ); -const Files=Vue.extend({ - template: ` +const Files=Vue.extend({template:` @@ -248,7 +280,7 @@ const Files=Vue.extend({ {{ item.name }} - modified: {{ item.modified }} size: {{ item.size }} + modified: {{ item.modified | formatDate}} size: {{ item.size | any}} @@ -266,7 +298,7 @@ const Files=Vue.extend({ {{ item.name }} - modified: {{ item.modified }} size: {{ item.size }} + modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }} @@ -278,7 +310,8 @@ const Files=Vue.extend({ -`, + `, + data: function(){ return { crumbs:[], @@ -325,7 +358,14 @@ const Files=Vue.extend({ }, info(){ alert("info") - } + }, + readablizeBytes(v){ + return Vue.filter('readablizeBytes')(v) + }, + formatDate(v){ + return Vue.filter('formatDate')(v) + } + }, computed: { url: { @@ -347,8 +387,7 @@ const Files=Vue.extend({ } ); -const Home=Vue.extend({ - template: ` +const Home=Vue.extend({template:` @@ -373,11 +412,12 @@ const Home=Vue.extend({ REPLACED -`} + `, + +} ); -const Login=Vue.extend({ - template: ` +const Login=Vue.extend({template:` @@ -399,7 +439,8 @@ const Login=Vue.extend({ -`, + `, + data () { return { e1: true, @@ -409,14 +450,18 @@ const Login=Vue.extend({ }, methods:{ go () { - alert("not yet") - } + HTTP.post("login-check",axios_json) + .then(r=>{ + alert("loh") + }).catch(error=> { + alert("err") + }) } } +} ); -const Options=Vue.extend({ - template: ` +const Options=Vue.extend({template:` @@ -453,7 +498,8 @@ const Options=Vue.extend({ -`, + `, + data: function(){ return { snackbar:false @@ -462,8 +508,7 @@ const Options=Vue.extend({ } ); -const People=Vue.extend({ - template: ` +const People=Vue.extend({template:` Look at all the people who work here! Reverse Message @@ -479,7 +524,8 @@ const People=Vue.extend({ -`, + `, + data: function(){ return {message: 'Hello Vue.js!'} }, @@ -492,12 +538,12 @@ const People=Vue.extend({ ); -const Search=Vue.extend({ - template: ` +const Search=Vue.extend({template:` -`, + `, + data: function(){ return { message: 'Hello Vue.js!', @@ -510,8 +556,7 @@ const Search=Vue.extend({ } ); -const Select=Vue.extend({ - template: ` +const Select=Vue.extend({template:` @@ -538,7 +583,8 @@ const Select=Vue.extend({ -`, + `, + components: { multiselect: VueMultiselect.Multiselect}, data: function(){ return { @@ -571,50 +617,70 @@ const Select=Vue.extend({ ); -const Stepper=Vue.extend({ - template: ` +const Stepper=Vue.extend({template:` - - - Select an image location - http or server file - - + + + Select image location + + Set thumbnail details + + Result + + + - url + - Continue - Cancel + Next - Configure analytics for this app - + + - Continue - Back - - Select an ad format and name ad unit - + + + + Back + Next + + + - Continue - Back - - View setup instructions - - - Continue - Back - + output todo + + + Back + go + -`, - data: function(){ - return {e6: 0} + `, + + data(){ + return { + image:"http://images.metmuseum.org/CRDImages/ep/original/DT46.jpg", + step: 0, + taskxml:"" + } + }, + methods:{ + onChange (val) { + if (this.taskxml !== val) this.taskxml = val; + }, + go(){ + alert("post") + HTTP.post("thumbnail",Qs.stringify({task: this.taskxml,url:this.image})) + .then(function(r){ + console.log(r) + alert("not yet:"+r); + }) + } } + } ); -const Tabs=Vue.extend({ - template: ` +const Tabs=Vue.extend({template:` @@ -647,7 +713,8 @@ const Tabs=Vue.extend({ -`, + `, + data () { return { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' @@ -657,6 +724,9 @@ const Tabs=Vue.extend({ ); // base ----------------------- +localforage.config({ + name: 'vuepoc' +}); const HTTP = axios.create({ baseURL: "/vue-poc/api/", headers: { @@ -666,12 +736,29 @@ const HTTP = axios.create({ }); const axios_json={ headers: {accept: 'application/json'}}; +//Define the date time format filter +Vue.filter("formatDate", function(date) { + return moment(date).format("MMMM D, YYYY") +}); +Vue.filter('readablizeBytes', function (bytes,decimals) { + if(bytes == 0) return '0 Bytes'; + var k = 1000, + dm = decimals || 2, + sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], + i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; +}); +Vue.filter("any", function(any) { + return "ANY" +}); + Vue.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); alert("vue error"); }; + Vue.component('my-component', { template: '
A custom component!
', created:function(){ @@ -691,7 +778,7 @@ const router = new VueRouter({ { path: '/options', component: Options,meta:{title:"Options"} }, { path: '/select', component: Select,meta:{title:"Select"} }, { path: '/search', component: Search,meta:{title:"Search"} }, - { path: '/tabs', component: Tabs,meta:{title:"tab test"} }, + { 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: '/stepper', component: Stepper,meta:{title:"Stepper"} }, @@ -702,14 +789,31 @@ 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 (true) { + 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:"", - user:{}, + status:{}, drawer:true, - title:"my title", + title:"my title2", mini: false, items: [{ href: '/', @@ -769,5 +873,17 @@ const app = new Vue({ search(){ this.$router.push({path: 'search',query: { q: this.q }}) } + }, + created(){ + console.log("create-----------") + HTTP.get("status") + .then(r=>{ + console.log("status",r) + this.status=r.data + }) + }, + beforeDestroy(){ + console.log("destory-----------") + } }).$mount('#app'); diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html index db96275..bfebdb8 100644 --- a/src/vue-poc/static/app.html +++ b/src/vue-poc/static/app.html @@ -9,7 +9,7 @@ Vue Router Test - + @@ -19,7 +19,7 @@ - + @@ -28,6 +28,7 @@ + @@ -76,6 +77,7 @@ + {{status.user}}
diff --git a/src/vue-poc/static/core.js b/src/vue-poc/static/core.js index 6e221f6..f9b0171 100644 --- a/src/vue-poc/static/core.js +++ b/src/vue-poc/static/core.js @@ -1,4 +1,7 @@ // base ----------------------- +localforage.config({ + name: 'vuepoc' +}); const HTTP = axios.create({ baseURL: "/vue-poc/api/", headers: { @@ -8,12 +11,29 @@ const HTTP = axios.create({ }); const axios_json={ headers: {accept: 'application/json'}}; +//Define the date time format filter +Vue.filter("formatDate", function(date) { + return moment(date).format("MMMM D, YYYY") +}); +Vue.filter('readablizeBytes', function (bytes,decimals) { + if(bytes == 0) return '0 Bytes'; + var k = 1000, + dm = decimals || 2, + sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], + i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; +}); +Vue.filter("any", function(any) { + return "ANY" +}); + Vue.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); alert("vue error"); }; + Vue.component('my-component', { template: '
A custom component!
', created:function(){ @@ -33,7 +53,7 @@ const router = new VueRouter({ { path: '/options', component: Options,meta:{title:"Options"} }, { path: '/select', component: Select,meta:{title:"Select"} }, { path: '/search', component: Search,meta:{title:"Search"} }, - { path: '/tabs', component: Tabs,meta:{title:"tab test"} }, + { 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: '/stepper', component: Stepper,meta:{title:"Stepper"} }, @@ -44,14 +64,31 @@ 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 (true) { + 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:"", - user:{}, + status:{}, drawer:true, - title:"my title", + title:"my title2", mini: false, items: [{ href: '/', @@ -111,5 +148,17 @@ const app = new Vue({ search(){ this.$router.push({path: 'search',query: { q: this.q }}) } + }, + created(){ + console.log("create-----------") + HTTP.get("status") + .then(r=>{ + console.log("status",r) + this.status=r.data + }) + }, + beforeDestroy(){ + console.log("destory-----------") + } }).$mount('#app'); diff --git a/src/vue-poc/static/vue-ace.js b/src/vue-poc/static/vue-ace.js index 98d862f..bb98936 100644 --- a/src/vue-poc/static/vue-ace.js +++ b/src/vue-poc/static/vue-ace.js @@ -2,7 +2,13 @@ //https://jsfiddle.net/bc_rikko/gbpw2q9x/3/ Vue.component('vue-ace', { template: '
', - props: ['editorId', 'content', 'mode', 'theme','wrap','readOnly'], + props: ['editorId', + 'content', + 'mode', + 'theme', + 'wrap', + 'readOnly' + ], data () { return { editor: Object, @@ -45,6 +51,12 @@ Vue.component('vue-ace', { const mode = this.mode || 'text' const theme = this.theme || 'github' const wrap = this.wrap || false + + const aceSettings={ + snippets:true, + basicAutocompletion:true, + liveAutocompletion:true} + const readOnly = this.readOnly || false ace.config.set("workerPath", "/vue-poc/ui/ace-workers") this.editor = window.ace.edit(this.editorId) @@ -58,9 +70,9 @@ Vue.component('vue-ace', { session.setUseWrapMode(wrap) this.editor.setTheme(`ace/theme/${theme}`) this.editor.setOptions({ readOnly:this.readOnly, - enableSnippets : true, - enableBasicAutocompletion : true, - enableLiveAutocompletion : true + enableSnippets : aceSettings.snippets, + enableBasicAutocompletion : aceSettings.basicAutocompletion, + enableLiveAutocompletion : aceSettings.liveAutocompletion }); this.editor.commands.addCommand({ name: "showKeyboardShortcuts", diff --git a/src/vue-poc/templates/edit.vue b/src/vue-poc/templates/edit.vue index 38a3c7f..11a218a 100644 --- a/src/vue-poc/templates/edit.vue +++ b/src/vue-poc/templates/edit.vue @@ -5,60 +5,91 @@ - folder -{{ name }} {{ mode }} - {{dirty}} + + folder +{{ name }} +* +. + {{ mode }} + + + + navigate_next + + {{annotations && annotations.error}} + {{annotations && annotations.warning}} + {{annotations && annotations.info}} + star - - navigate_before - - - navigate_next - + + vertical_align_center - - settings - - + + wrap_text - - keyboard - + file_upload + format_align_center delete - + + + help + + + + + + settings + + Show settings + + + + + + + keyboard + + Show keyboard commands + + + + + more_vert - + - load xquery + load xquery - + - load xml + load xml - + - load js + load js @@ -99,10 +130,11 @@ v-on:annotation="annotation"> diff --git a/src/vue-poc/templates/login.vue b/src/vue-poc/templates/login.vue index 44ec942..ffb47e0 100644 --- a/src/vue-poc/templates/login.vue +++ b/src/vue-poc/templates/login.vue @@ -39,7 +39,6 @@ diff --git a/src/vue-poc/templates/options.vue b/src/vue-poc/templates/options.vue index 984ead9..a362ff4 100644 --- a/src/vue-poc/templates/options.vue +++ b/src/vue-poc/templates/options.vue @@ -42,7 +42,6 @@ diff --git a/src/vue-poc/templates/tabs.vue b/src/vue-poc/templates/tabs.vue index ec40eb1..805ed82 100644 --- a/src/vue-poc/templates/tabs.vue +++ b/src/vue-poc/templates/tabs.vue @@ -43,7 +43,6 @@