From d23694ceb0a606e842a7a6943e033ebb24319f37 Mon Sep 17 00:00:00 2001 From: andy bunce Date: Wed, 13 Sep 2017 18:06:19 +0200 Subject: [PATCH] collection icons (coded on android) --- src/vue-poc/features/collection/files.vue | 10 +- src/vue-poc/static/app-gen.js | 4262 +++++++++++---------- src/vue-poc/static/app.html | 4 +- 3 files changed, 2144 insertions(+), 2132 deletions(-) diff --git a/src/vue-poc/features/collection/files.vue b/src/vue-poc/features/collection/files.vue index 24eccc8..01799b9 100644 --- a/src/vue-poc/features/collection/files.vue +++ b/src/vue-poc/features/collection/files.vue @@ -15,6 +15,10 @@ + + search + search + @@ -142,8 +146,10 @@ console.log(r.data) this.$router.push({ name: 'jobShow', params: {job:job }}) }) - } - + }, + search(){ + alert("search") + } }, computed: { icon(){ diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js index 4acbac5..6a17c8a 100644 --- a/src/vue-poc/static/app-gen.js +++ b/src/vue-poc/static/app-gen.js @@ -1,4 +1,4 @@ -// generated 2017-09-10T22:43:59.216+01:00 +// generated 2017-09-13T16:57:35.141+01:00 Vue.component('qd-fullscreen',{template:` {{ fullscreenIcon }} @@ -31,113 +31,6 @@ } } - ); - Vue.component('qd-navlist',{template:` - - - - `, - - props: ['items'] -} - - ); - Vue.component('qd-panel',{template:` - - - - - - - - - - `, - - props: ['show'], - created:function(){ - console.log("qd-panel"); - } -} - - ); - Vue.component('vis-time-line',{template:` -
- `, - - props: ['items', 'groups', 'options','events'], - data(){ - return {timeline:Object} - }, - methods:{ - select(properties){ - this.$emit('select',properties.items); - } - }, - mounted: function () { - var items = new vis.DataSet(this.items); - var options = this.options; - var groups = this.groups; - this.timeline = new vis.Timeline(this.$el, items, groups, options); - this.timeline.on('select', this.select); - if(this.events){ - this.events.$on('fit', (cmd) => { - this.timeline.fit(true) - }) - } - } -} ); Vue.component('vue-ace',{template:`
@@ -273,6 +166,113 @@ } } } + ); + Vue.component('vis-time-line',{template:` +
+ `, + + props: ['items', 'groups', 'options','events'], + data(){ + return {timeline:Object} + }, + methods:{ + select(properties){ + this.$emit('select',properties.items); + } + }, + mounted: function () { + var items = new vis.DataSet(this.items); + var options = this.options; + var groups = this.groups; + this.timeline = new vis.Timeline(this.$el, items, groups, options); + this.timeline.on('select', this.select); + if(this.events){ + this.events.$on('fit', (cmd) => { + this.timeline.fit(true) + }) + } + } +} + ); + Vue.component('qd-panel',{template:` + + + + + + + + + + `, + + props: ['show'], + created:function(){ + console.log("qd-panel"); + } +} + + ); + Vue.component('qd-navlist',{template:` + + + + `, + + props: ['items'] +} + ); /** * vue filters @@ -312,52 +312,235 @@ Vue.filter('round', function(value, decimals) { value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals); return value; -});const Notfound=Vue.extend({template:` +});const Thumbnail=Vue.extend({template:` - Not found + + + Select image location + + Set thumbnail details + + Result + + + + + + + Next + + + + + + + + Back + Validate + Next + + + + + output todo + + + Back + go + + `, - data: function(){ + data(){ return { - message: 'bad route!' + image:"http://images.metmuseum.org/CRDImages/ep/original/DT46.jpg", + step: 0, + taskxml:"" } }, - created:function(){ - console.log("notfound",this.$route.query.q) + methods:{ + onChange (val) { + if (this.taskxml !== val) this.taskxml = val; + }, + validate(){ + alert("validate") + HTTP.post("thumbnail/validate",Qs.stringify({task: this.taskxml})) + .then(r=>{alert("gg")}) + }, + 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 Job=Vue.extend({template:` + + + arrow_back + {{ job }} + + Stop + Result + {{ jobstate.state }} + + lock{{ jobstate.writes }} + lock{{ jobstate.reads }} + + + + account_circle + + {{ jobstate.user }} + + timer + {{ jobstate.duration }} + + refresh + + + + + {{ result }} + + + + {{ jobstate.text }} + + + + `, + + props: ['job'], + data: function(){ + return { + jobstate:{state:"?",user:"?",duration:"?"}, + result:null, + loading:false + } + }, + methods:{ + getJob(){ + this.loading=true; + HTTP.get("job/" + this.job ) + .then(r=>{ + this.loading=false + this.jobstate=r.data + if(!this.jobstate.id) this.jobstate={state:"cached", text:"Job not found"} + if(!this.finished)setTimeout(()=>{ this.getJob() }, 10000); + }) + + }, + getResult(){ + HTTP.post("eval/result/"+this.job) + .then(r=>{ + this.result=r.data.result + }) + }, + stop(){ + alert("todo stop" + this.job) + } + }, + computed: { + finished(){ + return this.jobstate.state == 'cached' + } + }, + created(){ + this.getJob() } } ); - const About=Vue.extend({template:` - - - - - - - -

- This is a experiment in using - vue.js - . -

- - add REPLACED - - - - `, + const Jobs=Vue.extend({template:` + + + + + Stop + + + + {{ autorefresh?'refresh':'arrow_downward' }} + + + + + + + `, + + data: function(){ + return { + headers: [ + { + text: 'Job id', + left: true, + value: 'id' + }, + { text: 'State', value: 'state' }, + { text: 'Duration', value: 'duration' }, + { text: 'WriteL', value: 'writes' }, + { text: 'ReadL', value: 'reads' }, + { text: 'User', value: 'user' }, + { text: 'Query', value: 'text' } + ], + items:[ + ], + selected: [], + search: "", + loading: false, + autorefresh: true + } + }, + methods:{ + getJobs(){ + this.loading=true; + HTTP.get("job") + .then(r=>{ + this.loading=false + this.items=r.data + if(this.autorefresh) setTimeout(()=>{ this.getJobs() }, 10000); + }) + + }, + stop(){ + var s=this.selected.map((j)=>{return j.id}).join(",") + console.log("AAA",this.selected) + alert(s) + } + }, + computed: { + // a computed getter + noSelection: function () { + // `this` points to the vm instance + return this.selected.length==0 + }, + }, + created(){ + this.getJobs() } +} ); const Log=Vue.extend({template:` @@ -426,223 +609,1623 @@ Vue.filter('round', function(value, decimals) { } ); - const Files=Vue.extend({template:` + const Model=Vue.extend({template:` - - - - - - {{icon}} - - - - - {{ item.name }} - - - + + + arrow_back + + Generate model.gen.xqm + - - - - view_module - - - - - - - - - - - Folders ({{ folders.length }}) - - - - {{ item.icon }} - - - {{ item.name }} - modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}} - - - - info - - - - - - - Files ({{ files.length }}) - - - - {{ item.icon }} - - - {{ item.name }} - modified: {{item.modified | formatDate}} size: {{item.size|readablizeBytes }} - - - - info - - - - - - - - - - - - {{ selected && selected.name }} - - highlight_off + + play_circle_outline + Run - Things to do with - - runrun - - - - - + + + + + + + + + + + + + {{code}} + + + + + + + + {{ snackbar.msg }} + Close + + `, - - props:["protocol"], data: function(){ - return { - url: "", - folders: [], - files: [], - q: "", - busy: false, - showInfo: false, - selected: null + return { + params:{ + efolder:"C:/Users/andy/git/vue-poc/src/vue-poc/models", + target:"C:/Users/andy/git/vue-poc/src/vue-poc/models.gen.xqm" + }, + waiting:false, + snackbar:{show:false,msg:"",context:"success"}, } }, methods:{ - file (val) { - // with query, resulting in /register?plan=private - router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol }}) - }, - folder (item) { - this.url=this.url+item.name+"/" - }, - load(url){ - this.busy=true - HTTP.get("collection",{params:{url:url,protocol:this.protocol}}) + submit(){ + this.waiting=true + HTTP.post("tasks/model",Qs.stringify(this.params)) .then(r=>{ - this.folders=r.data.folders - this.files=r.data.files - this.busy=false - }) - .catch(error=> { - console.log(error); - this.busy=false - alert("Get query error"+url) - }); - - }, - - setfilter(){ - console.log("TODO",this.q) - this.$router.push({ query: {url:this.url,q:this.q }}) - }, - info(item){ - this.selected=item - this.showInfo=true - }, - invoke(){ - HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selected.name})) - .then(r=>{ - var job=r.data.job + this.waiting=false + this.snackbar={show:true,msg:r.data.msg,context:"success"} console.log(r.data) - this.$router.push({ name: 'jobShow', params: {job:job }}) }) - } - + .catch(error=>{ + this.waiting=false + this.snackbar={show:true,msg:"Problem",context:"error"} + console.log(error); + }); + } }, - computed: { - icon(){ - return (this.protocol=="basexdb")?"developer_mode":"folder" - }, - // array of {name:"that", path:"/this/that/"} for url - crumbs(){ - var parts=this.url.split("/").filter((a)=>a.length>0) - var a=parts.map( - function(v,i,a){return {name:v, path:"/"+a.slice(0,i+1).join("/")+"/"}} - ) - return a - } - }, - watch:{ - url(v){ - this.$router.push({ query: { url: this.url }}) - }, - $route(vnew,vold){ - //console.log("ROUTE",vnew,vold) - var url=this.$route.query.url - this.url=url?url:"/"; - if(vnew.query.url != vold.query.url) this.load(this.url) - } - }, - created:function(){ - var url=this.$route.query.url - this.url=url?url:"/"; - this.q=this.$route.query.q || this.q - this.load(this.url) + computed:{ + code(){return 'import module namespace entity = "quodatum.models.generated" at "'+this.params.target+'";'} } } ); - const History=Vue.extend({template:` + const Xqdoc=Vue.extend({template:` - - - - Example Chip - - - - - - + + + arrow_back + + Task: Generate xqdoc + + + + play_circle_outline + Run + + + + + + + + + + + + + + + + + + + + + {{alert.timestamp}}:{{alert.msg}} + + + {{alert.timestamp}}:{{alert.msg}} + + + {{code}} + + `, + + data: function(){ + return { + params:{ + efolder:"C:/Users/andy/git/graphxq/src", + target:"C:/tmp/xqdoc/" + }, + waiting:false, + alert:{msg:"",success:false,error:false}, + } + }, + methods:{ + submit(){ + this.waiting=true + this.alert={msg:"Loading..",success:false,error:false} + HTTP.post("tasks/xqdoc",Qs.stringify(this.params)) + .then(r=>{ + this.waiting=false + this.alert={msg:r.data.msg,success:true,error:false} + console.log(r.data) + settings.setItem('tasks/xqdoc',this.params) + }) + .catch(error=>{ + this.waiting=false + this.alert={msg:error.response.data,success:false,error:true} + console.log(error); + alert("bad") + }); + } + }, + created: function () { + settings.getItem('tasks/xqdoc') + .then((v)=>{ + if(v)this.params=v + }) + }, + + computed:{ + code(){return 'generate xqdoc'} + } +} + + ); + const Vuecompile=Vue.extend({template:` + + + + arrow_back + + compile + + + + play_circle_outline + Run + + + + + + + + + + + {{code}} + + + + + + + + {{ snackbar.msg }} + Close + + + + `, + + data: function(){ + return { + params:{ + proj:"C:/Users/andy/git/vue-poc/src/vue-poc/" + }, + waiting:false, + snackbar:{show:false,msg:"",context:"success"}, + } + }, + methods:{ + submit(){ + this.waiting=true + HTTP.post("tasks/vue-compile",Qs.stringify(this.params)) + .then(r=>{ + this.waiting=false + this.snackbar={show:true,msg:r.data.msg,context:"success"} + console.log(r.data) + }) + .catch(error=>{ + this.waiting=false + this.snackbar={show:true,msg:"Problem",context:"error"} + console.log(error); + }); + } + }, + computed:{ + code(){return 'code here'} + } +} + + ); + const Task=Vue.extend({template:` + +

Tasks

+ `, data: function(){ return { message: 'Hello Vue.js!', - items:[] + q:this.$route.query.q + } + } +} + + ); + const Report=Vue.extend({template:` + + + + arrow_back + + todo + + + + + + +body + + + + `, + + + } + + ); + const Dates=Vue.extend({template:` + + + + arrow_back + + Images by year and month + + + + + + + + + + + {{m}} + + + + + + + `, + + data: ()=>({ + busy: false, + total: 0, + items: [], + elapsed: null, + months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + }), + + methods:{ + getDatetaken(){ + this.busy=true + var t0 = performance.now(); + HTTP.get("images/datetaken") + .then(r=>{ + this.busy=false + this.total=r.data.total + this.items=r.data.items + var t1 = performance.now(); + this.elapsed= 0.001 *(t1 - t0) + }) + }, + go(year,month){ + + month=("0" + (1+month)).slice(-2) + // alert("year: "+year+" "+month) + var from=year + "-" + month + "-01" + var lastday=new Date(year, month, 0).getDate() + var until=year + "-" + month + "-"+ lastday + this.$router.push({ name: 'images', query: { from:from, until:until }}) + } + }, + created:function(){ + console.log("create datetaken") + this.getDatetaken() + } + } + + ); + const Keywords=Vue.extend({template:` + + + + arrow_back + + click to show + + + + + + + + + + + + + + + {{keyword.count}} + + + + + + + + + `, + + data: ()=>({ + busy: false, + total: 0, + items: [], + elapsed: null + }), + + methods:{ + getKeywords(){ + this.busy=true + var t0 = performance.now(); + HTTP.get("images/keywords2") + .then(r=>{ + this.busy=false + this.total=r.data.total + this.items=r.data.items + var t1 = performance.now(); + this.elapsed= 0.001 *(t1 - t0) + }) + }, + show(keyword){ + this.$router.push({ name: 'images', query: { keyword: keyword.text }}) + } + }, + created:function(){ + console.log("create keywords") + this.getKeywords() + } +} + ); + const Image=Vue.extend({template:` + + + + arrow_back + + {{ image.name }} + + {{ image.path }} + + Image: {{ id }} + file_download + + + + + 
{{ image.doc }}
+ full metadata + + + + + + + + + + `, + + props:["id"], + data: ()=>( { + image:{}, + loaded:false + }), + computed: { + path(){ + return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null + }, + meta(){ + return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/meta':null + } +}, + created:function(){ + var id=this._props.id + HTTP.get("images/list/"+id) + .then(r=>{ + this.image=r.data + this.loaded=true + }) + } + } + + ); + const Images=Vue.extend({template:` + + + + search + {{ qtext }} + + + clear + + + + + {{ total }} in {{ elapsed | round(2) }} secs + + Page:{{ query.page+1 }} + + arrow_back + + + arrow_forward + + + + + + + + + + + + + favorite + + + + bookmark + + + share + + + + + + + + + + + Show images with... + + close + + + + + + + + + closeClear keyword + + + + + + + + + + + + + + + + + + + + + + + + Apply + + + + + + + {{selitem.name}} + + highlight_off + + blah blah + + + + + + `, + + data: () => ({ + images:[], + query: {page:0, // current page + from:null, + until:null, + keyword:null + }, + total: null, + elapsed: null, + showFilter: false, + busy: false, + menu2: false, + showUntil: false, + keywords: [], + showInfo: false, + selitem: "TODO" + }), + methods:{ + src(item){ + return "data:image/jpeg;base64,"+item.data + }, + getImages(){ + this.busy=true + var t0 = performance.now(); + HTTP.get("images/list",{params:this.query}) + .then(r=>{ + this.busy=false + this.total=r.data.total + this.images=r.data.items + var t1 = performance.now(); + this.elapsed= 0.001 *(t1 - t0) + }) + }, + clear(){ + this.query.from=null; + this.query.until=null; + this.query.keyword=null; + this.query.page=0; + }, + selected(image){ + this.selitem=image; + this.showInfo=true; + }, + isChanged(vnew,vold){ + if(vnew.keyword != vold.keyword) return true + if(vnew.from != vold.from) return true + if(vnew.until != vold.until) return true + return false + }, + go(image){ + this.$router.push({ name: 'image', params: { id: image.id }}) + }, + pageBack(){ + this.query.page=Math.min(0,this.query.page-1) + }, + pageNext(){ + this.query.page+=1 + } + + }, + computed:{ + qtext(){ + var k=this.query.keyword,f=this.query.from, u=this.query.until + var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"") + return t?t:"(All)" + } + }, + watch:{ + "query":{ + handler:function(vnew,vold){ + var b=this.isChanged(vnew,vold) + console.log("watch",b,vnew,vold) + if(b) this.query.page=0 + this.$router.push({ query: this.query }) + }, + deep:true + }, + + $route(v){ + this.getImages() + }, + + showFilter(){ + if(this.keywords.length==0){ + HTTP.get("images/keywords2") + .then(r=>{ + this.keywords=r.data.items + }) + } + } + }, + created:function(){ + console.log("create images") + this.query.page=Number(this.$route.query.page) || this.query.page + this.query.keyword=this.$route.query.keyword || this.query.keyword + this.query.from=this.$route.query.from || this.query.from + this.query.until=this.$route.query.until || this.query.until + this.getImages() + + }, + mounted:function(){ + console.log("images mount") + + } + } + + ); + const Timeline=Vue.extend({template:` + + + + Line 1 + + fit + + + + + + + + + {{msg}} + + + + `, + + data(){ + return { + vueState: { + data1: [ + { id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' }, + { id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' }, + { id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' }, + { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', className: 'green' }, + { id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' }, + { id: 6, content: 'item 6', start: '2013-04-27' }] + }, + Events: new Vue({}), + msg:"Item detail" + } +}, +methods:{ + fit(){ + this.Events.$emit('fit'); + }, + select(items){ + this.msg='Selected items: ' + items + } +}, +created(){ + console.log("timeline") +} +} + ); + const Ping=Vue.extend({template:` + + + + Simple performance measure + + Reset + + +

Read or increment a database value.

+

Counter:{{counter}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionRepeatLastCountAvgminmaxMedian
+ Get count + + + + + {{getValues.last}} + + {{getValues.count}} + + {{getValues.avg | round(2)}} + + {{getValues.min}} + + {{getValues.max}} + + {{getValues.median}} +
+ Update count + + + + {{postValues.last}} + + {{postValues.count}} + + {{postValues.avg | round(2)}} + + {{postValues.min}} + + {{postValues.max}} + + {{postValues.median}} +
+ + + + + `, + + data: function(){ + return { + getValues: new perfStat(), + postValues: new perfStat(), + repeat:{get:false,post:false}, + counter:null + } + }, + methods:{ + update () { + var _start = performance.now(); + HTTP.post("ping",axios_json) + .then(r=>{ + var elapsed=Math.floor(performance.now() - _start); + this.counter=r.data + Object.assign(this.postValues,this.postValues.log(elapsed)) + if(this.repeat.post){ + this.update(); //does this leak?? + } + }) + }, + + get(){ + var _start = performance.now(); + HTTP.get("ping",axios_json) + .then(r=>{ + var elapsed=Math.floor(performance.now() - _start); + this.counter=r.data + Object.assign(this.getValues,this.getValues.log(elapsed)) + this.$forceUpdate() + if(this.repeat.get){ + this.get(); //does this leak?? + } + }) + }, + reset(){ + Object.assign(this.getValues,this.getValues.clear()); + Object.assign(this.postValues,this.postValues.clear()); + this.$forceUpdate() + } + }, + computed: { + + } +} + + ); + const Tabs=Vue.extend({template:` + + + + + menu + + Page Title + + + search + + + more_vert + + + + + + + + + favorite + + Item {{ i }} more + + + + + + + + + {{i}} - {{ text }} + + + + + `, + + 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.' + } + } + } + + ); + const Notfound=Vue.extend({template:` + + Not found + + `, + + data: function(){ + return { + message: 'bad route!' + } + }, + created:function(){ + console.log("notfound",this.$route.query.q) + } +} + + ); + const Search=Vue.extend({template:` + + Not finished + + + + + + + + + + + + {{ index }} {{ item.title }} + {{ item.uri }} + + + + info + + + + + + + + `, + + data: function(){ + return { + q: this.$route.query.q, + results: [], + busy: false, + selected: [] } }, methods:{ get() { - HTTP.get('history') + this.busy= true + console.log("q",this.q) + HTTP.get('search',{params:{q:this.q}}) .then((res) => { - this.items = res.data.items; - console.log("items",this.items) + this.busy=false + this.results = res.data.items; + this.selected=[false,true] }); }, - doEdit(item){ - console.log("history: ",item) - router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol }}) + send(e){ + if(e.keyCode==13){ + this.get() + } + }, + icon(index){ + return this.selected[index]?"check_circle":"search" + }, + search(item){ + alert(item.title) + }, + select(index){ + this.$set(this.selected,index,!this.selected[index]) + //alert(index) } }, created:function(){ + console.log("Serch",this.$route.query.q) this.get() - console.log("history") } } + ); + const Select=Vue.extend({template:` + + + + + Selection + + + info + + + + + + + +

some text

+ + 
{{$data.value }}
+ + + +

multi select

+ + 
{{$data.value2 }}
+ + + + + + + test + + highlight_off + + blah blah protocol: + + + + + + + `, + + components: { multiselect: VueMultiselect.Multiselect}, + data: function(){ + return { + value: null, + value2: null, + options: [], + isLoading: false, + showInfo:true + } + }, + created:function(){ + this.asyncFind("") + }, + methods: { + asyncFind: function(query){ + this.isLoading = true + that=this; + HTTP.get("test-select?q="+query,axios_json) + .then(function(r){ + that.isLoading = false + that.options=r.data.items; + }) + .catch(function (error) { + console.log(error); + this.isLoading = false + alert("Get query error") + }); + } + } +} + + + ); + const Login=Vue.extend({template:` + + + + Login + + + {{message}} + + + + + + + + + + + + Continue + + + + `, + + data () { + return { + hidepass: true, + name:'', + password: '', + redirect: this.$route.query.redirect, + message:"", + showMessage:false + } + }, + methods:{ + go () { + this.hidepass=true + this.showMessage=false + var data={ + username: this.name, //gave the values directly for testing + password: this.password, + redirect: this.redirect + } + HTTP.post("login-check",Qs.stringify( data)) + .then(r=>{ + console.log("login",r.data) + if(r.data.status){ + this.$auth.role="admin" + this.$router.replace(this.redirect) + }else{ + this.message=r.data.message + this.showMessage=true; + } + + }).catch(error=> { + alert("err login") + }) + } + } +} + + ); + const Acesettings=Vue.extend({template:` + + + + + + Not fully implemented + + + + + Theme + + + + + + + + Key binding + + + + + + + + + Font size + + + + + + + + + + Ace editor settings + + + + + + + enableSnippets + Allow + snippets + + + + + + + + + enableBasicAutocompletion + Autocompletion via control-space + + + + + + + + + enableLiveAutocompletion + Autocompletion while typing + + + + + + + + + + + + `, + + data () { + return { + xace: { + enableSnippets: true, + enableBasicAutocompletion: true, + enableLiveAutocompletion: true, + theme: "github", + keybinding: "ace", + fontsize: "14" + }, + ace: {}, + keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ], + themes: [ "github", "chaos","tomorrow"] + } + }, + methods:{ + extend(obj, src) { + Object.keys(src).forEach(function(key) { if(!obj[key]) obj[key] = src[key]; }); + return obj; + } + }, + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + next(vm => { vm.ace = v?v:vm.xace; }) + }) + }, + + mounted: function () { + // console.log(this.ace,this.xace) + // this.extend(this.storeace,this.storeace); + // console.log("$$$",this.ace) + }, + watch: {"ace":{ + handler:function(v){ + settings.setItem('settings/ace',this.ace) + }, + deep:true + } +} +} + + + ); + const Settings=Vue.extend({template:` + +

Settings are currently only stored locally in the browser, using localstorage

+ + + Available settings + + + + + Editor + + + + + System information + keys +
    +
  • + {{ key }} +
    • +
+ + + + Wipe + + + `, + + data(){return { + keys: ["?"], + showDev: false, + dark:false + } + }, + methods:{ + wipe(){ + if(confirm("wipe localstorage? "+this.keys.length)) settings.clear(); + }, + theme(){ + this.$emit("theme",this.dark) + } + }, + created(){ + console.log("settings") + settings.keys() + .then( v =>{ + this.keys=v + }) + + } +} + + ); + const Eval=Vue.extend({template:` + + + + + + + + + play_circle_outline + Run + + + Submit + + + + Run + + + Show query plan + + + + + + + library_books + Imports + + label + Namespaces + + more_vert + + Show query plan + + + hit me + + + + + + + + + + + + + + {{jobId}} + + + lockW + {{ jobState.writes }} + + lockR + {{ jobState.reads }} + + + + {{ jobState.state }} + + timer + {{elapsed}}ms + + + + Error + + + + + + + + + + `, + + data: function(){ + return { + xq: '(: type your XQuery :)\n', + result:'', + elapsed: null, + show: false, + showError: false, //unused + showResult: false, // + jobId: null, + waiting: false, + start: null, + jobState: {}, + aceSettings:{} + } + }, + methods:{ + onChange(val){ + if (this.xq !== val) { + this.xq = val + } + }, + + run(){ + this.awaitResult(false) + this.start = performance.now(); + HTTPNE.post("eval/execute",Qs.stringify({xq:this.xq})) + .then(r=>{ + this.elapsed=Math.floor(performance.now() - this.start); + this.result=r.data.result + this.jobId=null + }) + .catch(r=> { + console.log("error",r) + this.result=r.response.data + this.showError=true; + + }); + localforage.setItem('eval/xq', this.xq) + }, + submit(){ + this.showError=this.showResult=this.show=false + this.start = performance.now(); + HTTPNE.post("eval/submit",Qs.stringify({xq:this.xq})) + .then(r=>{ + this.elapsed=Math.floor(performance.now() - this.start); + this.jobId=r.data.job + this.show=true + this.pollState() + + }) + .catch(r=> { + alert("catch") + console.log("error",r) + this.jobId=r.response.job + this.showError=true; + + }); + }, + pollState(){ + this.waiting=true; + HTTP.get("job/"+this.jobId) + .then(r=>{ + this.jobState=r.data + this.waiting=r.data.state!="cached"; + this.elapsed=Math.floor(performance.now() - this.start); + if(this.waiting) { + setTimeout(()=>{ this.pollState() }, 5000); + }else{ + this.getResult() + } + }) + }, + getResult(){ + this.awaitResult(true) + HTTPNE.post("eval/result/"+this.jobId) + .then(r=>{ + this.result=r.data.result+" " + }).catch(r=> { + // alert("catch") + console.log("error",r) + this.result=r.response.data + this.showError=true; + + }); + }, + hitme(){ + this.showResult=true + setTimeout(()=>{this.result="123\n".repeat(20000); },10); + + }, + imports(){ + alert("@TODO imports") + }, + namespaces(){ + alert("@TODO namespaces") + }, + plan(){ + this.awaitResult(false) + HTTPNE.post("eval/plan",Qs.stringify({xq:this.xq})) + .then(r=>{ + this.result=r.data.result + }) + .catch(r=> { + console.log("error",r) + this.result=r.response.data + this.showError=true; + + }); + }, + awaitResult(show){ + // ace slow when setting large text while hidden + this.showError=false + this.show=show + this.result="(Please wait..)" + this.showResult=true + } + }, + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + + next(vm => { + console.log('eval settings: ',v); + vm.aceSettings = v; + })}) + }, + created:function(){ + localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); + } +} + + ); + const Puzzle=Vue.extend({template:` + + + + + + + +
+ {{cell}} +
+
+ + + + +
+ +
+ + Loosely inspired by demo + + `, + + data: function(){ + return {grid: [ + [1,5,8,12], + [2,6,9,13], + [3,7,10,14], + [4,null,11,15] + ], + empty:[3,1], + tiles:[{data:""}] + } + }, + methods: { + click(row,col) { + if(this.disabled(row,col))return; + var g=this.grid + var h=g[row][col] + g[row][col]=null + g[this.empty[0]][this.empty[1]]=h + var e=[row,col] + this.empty=e + this.grid= g + console.log("click",this.grid,e) + this.$forceUpdate() + }, + disabled(row,col){ + var ok=(row==this.empty[0]) && (col==this.empty[1]-1 ||col==this.empty[1]+1) + ok=ok || (col==this.empty[1]) && (row==this.empty[0]-1 ||row==this.empty[0]+1); + return !ok + }, + gettiles(){ + HTTP.get("thumbnail/images") + .then(r=>{ + this.tiles=r.data.items + this.$forceUpdate() + }) + + }, + src(row,col){ + var v=this.grid[row][col] + var d="" + if(typeof this.tiles[v] !== 'undefined') d=this.tiles[v].data + + return "data:image/jpeg;base64,"+d + } + + }, + created(){ + this.gettiles() + } +} + + ); const Edit=Vue.extend({template:` @@ -931,216 +2514,226 @@ Vue.filter('round', function(value, decimals) { } ); - const Eval=Vue.extend({template:` + const Files=Vue.extend({template:` - - - - - - - - play_circle_outline - Run - - - Submit - - - - Run - - - Show query plan - - - - - - - library_books - Imports - - label - Namespaces - - more_vert - - Show query plan - - - hit me - - - - - - - - - - - - - - {{jobId}} - - - lockW - {{ jobState.writes }} - - lockR - {{ jobState.reads }} - - - {{ jobState.state }} - - timer - {{elapsed}}ms - - - - Error - - - - - - - + + + + {{icon}} + + + + + {{ item.name }} + + + + + search + search + + + + + + view_module + + + + + + + + + + + Folders ({{ folders.length }}) + + + + {{ item.icon }} + + + {{ item.name }} + modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}} + + + + info + + + + + + + Files ({{ files.length }}) + + + + {{ item.icon }} + + + {{ item.name }} + modified: {{item.modified | formatDate}} size: {{item.size|readablizeBytes }} + + + + info + + + + + + + + + + + + {{ selected && selected.name }} + + highlight_off + + Things to do with + + runrun + + + + + + + `, + + + props:["protocol"], + data: function(){ + return { + url: "", + folders: [], + files: [], + q: "", + busy: false, + showInfo: false, + selected: null + } + }, + methods:{ + file (val) { + // with query, resulting in /register?plan=private + router.push({ path: 'edit', query: { url: this.url+"/"+val,protocol:this.protocol }}) + }, + folder (item) { + this.url=this.url+item.name+"/" + }, + load(url){ + this.busy=true + HTTP.get("collection",{params:{url:url,protocol:this.protocol}}) + .then(r=>{ + this.folders=r.data.folders + this.files=r.data.files + this.busy=false + }) + .catch(error=> { + console.log(error); + this.busy=false + alert("Get query error"+url) + }); + + }, + + setfilter(){ + console.log("TODO",this.q) + this.$router.push({ query: {url:this.url,q:this.q }}) + }, + info(item){ + this.selected=item + this.showInfo=true + }, + invoke(){ + HTTP.post("eval/invoke",Qs.stringify({path:this.url+this.selected.name})) + .then(r=>{ + var job=r.data.job + console.log(r.data) + this.$router.push({ name: 'jobShow', params: {job:job }}) + }) + }, + search(){ + alert("search") + } + }, + computed: { + icon(){ + return (this.protocol=="basexdb")?"developer_mode":"folder" + }, + // array of {name:"that", path:"/this/that/"} for url + crumbs(){ + var parts=this.url.split("/").filter((a)=>a.length>0) + var a=parts.map( + function(v,i,a){return {name:v, path:"/"+a.slice(0,i+1).join("/")+"/"}} + ) + return a + } + }, + watch:{ + url(v){ + this.$router.push({ query: { url: this.url }}) + }, + $route(vnew,vold){ + //console.log("ROUTE",vnew,vold) + var url=this.$route.query.url + this.url=url?url:"/"; + if(vnew.query.url != vold.query.url) this.load(this.url) + } + }, + created:function(){ + var url=this.$route.query.url + this.url=url?url:"/"; + this.q=this.$route.query.q || this.q + this.load(this.url) + } +} + + ); + const History=Vue.extend({template:` + + + + + Example Chip + + + + + + `, data: function(){ return { - xq: '(: type your XQuery :)\n', - result:'', - elapsed: null, - show: false, - showError: false, //unused - showResult: false, // - jobId: null, - waiting: false, - start: null, - jobState: {}, - aceSettings:{} + message: 'Hello Vue.js!', + items:[] } }, methods:{ - onChange(val){ - if (this.xq !== val) { - this.xq = val - } - }, - - run(){ - this.awaitResult(false) - this.start = performance.now(); - HTTPNE.post("eval/execute",Qs.stringify({xq:this.xq})) - .then(r=>{ - this.elapsed=Math.floor(performance.now() - this.start); - this.result=r.data.result - this.jobId=null - }) - .catch(r=> { - console.log("error",r) - this.result=r.response.data - this.showError=true; - - }); - localforage.setItem('eval/xq', this.xq) - }, - submit(){ - this.showError=this.showResult=this.show=false - this.start = performance.now(); - HTTPNE.post("eval/submit",Qs.stringify({xq:this.xq})) - .then(r=>{ - this.elapsed=Math.floor(performance.now() - this.start); - this.jobId=r.data.job - this.show=true - this.pollState() - - }) - .catch(r=> { - alert("catch") - console.log("error",r) - this.jobId=r.response.job - this.showError=true; - + get() { + HTTP.get('history') + .then((res) => { + this.items = res.data.items; + console.log("items",this.items) }); }, - pollState(){ - this.waiting=true; - HTTP.get("job/"+this.jobId) - .then(r=>{ - this.jobState=r.data - this.waiting=r.data.state!="cached"; - this.elapsed=Math.floor(performance.now() - this.start); - if(this.waiting) { - setTimeout(()=>{ this.pollState() }, 5000); - }else{ - this.getResult() - } - }) - }, - getResult(){ - this.awaitResult(true) - HTTPNE.post("eval/result/"+this.jobId) - .then(r=>{ - this.result=r.data.result+" " - }).catch(r=> { - // alert("catch") - console.log("error",r) - this.result=r.response.data - this.showError=true; - - }); - }, - hitme(){ - this.showResult=true - setTimeout(()=>{this.result="123\n".repeat(20000); },10); - - }, - imports(){ - alert("@TODO imports") - }, - namespaces(){ - alert("@TODO namespaces") - }, - plan(){ - this.awaitResult(false) - HTTPNE.post("eval/plan",Qs.stringify({xq:this.xq})) - .then(r=>{ - this.result=r.data.result - }) - .catch(r=> { - console.log("error",r) - this.result=r.response.data - this.showError=true; - - }); - }, - awaitResult(show){ - // ace slow when setting large text while hidden - this.showError=false - this.show=show - this.result="(Please wait..)" - this.showResult=true + doEdit(item){ + console.log("history: ",item) + router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol }}) } }, - beforeRouteEnter (to, from, next) { - settings.getItem('settings/ace') - .then( v =>{ - - next(vm => { - console.log('eval settings: ',v); - vm.aceSettings = v; - })}) - }, created:function(){ - localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); + this.get() + console.log("history") } } @@ -1197,878 +2790,35 @@ Vue.filter('round', function(value, decimals) { } ); - const Dates=Vue.extend({template:` - - - - arrow_back - - Images by year and month - - - - - - - - - - - {{m}} - - - - - - - `, - - data: ()=>({ - busy: false, - total: 0, - items: [], - elapsed: null, - months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - }), + const About=Vue.extend({template:` + + + + - methods:{ - getDatetaken(){ - this.busy=true - var t0 = performance.now(); - HTTP.get("images/datetaken") - .then(r=>{ - this.busy=false - this.total=r.data.total - this.items=r.data.items - var t1 = performance.now(); - this.elapsed= 0.001 *(t1 - t0) - }) - }, - go(year,month){ - - month=("0" + (1+month)).slice(-2) - // alert("year: "+year+" "+month) - var from=year + "-" + month + "-01" - var lastday=new Date(year, month, 0).getDate() - var until=year + "-" + month + "-"+ lastday - this.$router.push({ name: 'images', query: { from:from, until:until }}) - } - }, - created:function(){ - console.log("create datetaken") - this.getDatetaken() - } - } - - ); - const Image=Vue.extend({template:` - - - - arrow_back - - {{ image.name }} - - {{ image.path }} - - Image: {{ id }} - file_download - - - - - 
{{ image.doc }}
- full metadata - - - - - - - - - - `, - - props:["id"], - data: ()=>( { - image:{}, - loaded:false - }), - computed: { - path(){ - return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null - }, - meta(){ - return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/meta':null - } -}, - created:function(){ - var id=this._props.id - HTTP.get("images/list/"+id) - .then(r=>{ - this.image=r.data - this.loaded=true - }) - } - } - - ); - const Images=Vue.extend({template:` - - - - search - {{ qtext }} - - - clear - - - - - {{ total }} in {{ elapsed | round(2) }} secs - - Page:{{ query.page+1 }} - - arrow_back - - - arrow_forward - - - - - - - - - - - - - favorite - - - - bookmark - - - share - - - - - - - - - - - Show images with... - - close - - - - - - - - - closeClear keyword - - - - - - - - - - - - - - - - - - - - - - - - Apply - - - - - - - {{selitem.name}} - - highlight_off - - blah blah - - - - - - `, - - data: () => ({ - images:[], - query: {page:0, // current page - from:null, - until:null, - keyword:null - }, - total: null, - elapsed: null, - showFilter: false, - busy: false, - menu2: false, - showUntil: false, - keywords: [], - showInfo: false, - selitem: "TODO" - }), - methods:{ - src(item){ - return "data:image/jpeg;base64,"+item.data - }, - getImages(){ - this.busy=true - var t0 = performance.now(); - HTTP.get("images/list",{params:this.query}) - .then(r=>{ - this.busy=false - this.total=r.data.total - this.images=r.data.items - var t1 = performance.now(); - this.elapsed= 0.001 *(t1 - t0) - }) - }, - clear(){ - this.query.from=null; - this.query.until=null; - this.query.keyword=null; - this.query.page=0; - }, - selected(image){ - this.selitem=image; - this.showInfo=true; - }, - isChanged(vnew,vold){ - if(vnew.keyword != vold.keyword) return true - if(vnew.from != vold.from) return true - if(vnew.until != vold.until) return true - return false - }, - go(image){ - this.$router.push({ name: 'image', params: { id: image.id }}) - }, - pageBack(){ - this.query.page=Math.min(0,this.query.page-1) - }, - pageNext(){ - this.query.page+=1 - } - - }, - computed:{ - qtext(){ - var k=this.query.keyword,f=this.query.from, u=this.query.until - var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"") - return t?t:"(All)" - } - }, - watch:{ - "query":{ - handler:function(vnew,vold){ - var b=this.isChanged(vnew,vold) - console.log("watch",b,vnew,vold) - if(b) this.query.page=0 - this.$router.push({ query: this.query }) - }, - deep:true - }, - - $route(v){ - this.getImages() - }, - - showFilter(){ - if(this.keywords.length==0){ - HTTP.get("images/keywords2") - .then(r=>{ - this.keywords=r.data.items - }) - } - } - }, - created:function(){ - console.log("create images") - this.query.page=Number(this.$route.query.page) || this.query.page - this.query.keyword=this.$route.query.keyword || this.query.keyword - this.query.from=this.$route.query.from || this.query.from - this.query.until=this.$route.query.until || this.query.until - this.getImages() - - }, - mounted:function(){ - console.log("images mount") - - } - } - - ); - const Report=Vue.extend({template:` - - - - arrow_back - - todo - - - - - - -body - - - - `, - - - } - - ); - const Keywords=Vue.extend({template:` - - - - arrow_back - - click to show - - - - - - - - - - - - - - - {{keyword.count}} - - - - - - - - - `, - - data: ()=>({ - busy: false, - total: 0, - items: [], - elapsed: null - }), - - methods:{ - getKeywords(){ - this.busy=true - var t0 = performance.now(); - HTTP.get("images/keywords2") - .then(r=>{ - this.busy=false - this.total=r.data.total - this.items=r.data.items - var t1 = performance.now(); - this.elapsed= 0.001 *(t1 - t0) - }) - }, - show(keyword){ - this.$router.push({ name: 'images', query: { keyword: keyword.text }}) - } - }, - created:function(){ - console.log("create keywords") - this.getKeywords() - } -} - ); - const Job=Vue.extend({template:` - - - arrow_back - {{ job }} - - Stop - Result - {{ jobstate.state }} - - lock{{ jobstate.writes }} - lock{{ jobstate.reads }} - - - - account_circle - - {{ jobstate.user }} - - timer - {{ jobstate.duration }} - - refresh - - - - - {{ result }} - - - {{ jobstate.text }} - - - - `, - - props: ['job'], - data: function(){ - return { - jobstate:{state:"?",user:"?",duration:"?"}, - result:null, - loading:false - } - }, - methods:{ - getJob(){ - this.loading=true; - HTTP.get("job/" + this.job ) - .then(r=>{ - this.loading=false - this.jobstate=r.data - if(!this.jobstate.id) this.jobstate={state:"cached", text:"Job not found"} - if(!this.finished)setTimeout(()=>{ this.getJob() }, 10000); - }) - - }, - getResult(){ - HTTP.post("eval/result/"+this.job) - .then(r=>{ - this.result=r.data.result - }) - }, - stop(){ - alert("todo stop" + this.job) - } - }, - computed: { - finished(){ - return this.jobstate.state == 'cached' - } - }, - created(){ - this.getJob() - } -} - - ); - const Jobs=Vue.extend({template:` - - - - - Stop - - - - - {{ autorefresh?'refresh':'arrow_downward' }} - - - - - - - `, - - data: function(){ - return { - headers: [ - { - text: 'Job id', - left: true, - value: 'id' - }, - { text: 'State', value: 'state' }, - { text: 'Duration', value: 'duration' }, - { text: 'WriteL', value: 'writes' }, - { text: 'ReadL', value: 'reads' }, - { text: 'User', value: 'user' }, - { text: 'Query', value: 'text' } - ], - items:[ - ], - selected: [], - search: "", - loading: false, - autorefresh: true - } - }, - methods:{ - getJobs(){ - this.loading=true; - HTTP.get("job") - .then(r=>{ - this.loading=false - this.items=r.data - if(this.autorefresh) setTimeout(()=>{ this.getJobs() }, 10000); - }) - - }, - stop(){ - var s=this.selected.map((j)=>{return j.id}).join(",") - console.log("AAA",this.selected) - alert(s) - } - }, - computed: { - // a computed getter - noSelection: function () { - // `this` points to the vm instance - return this.selected.length==0 - }, - }, - created(){ - this.getJobs() - } -} - - ); - const Login=Vue.extend({template:` - - - - Login - - - {{message}} - - - - - - - - - - - - Continue - - - - `, - - data () { - return { - hidepass: true, - name:'', - password: '', - redirect: this.$route.query.redirect, - message:"", - showMessage:false - } - }, - methods:{ - go () { - this.hidepass=true - this.showMessage=false - var data={ - username: this.name, //gave the values directly for testing - password: this.password, - redirect: this.redirect - } - HTTP.post("login-check",Qs.stringify( data)) - .then(r=>{ - console.log("login",r.data) - if(r.data.status){ - this.$auth.role="admin" - this.$router.replace(this.redirect) - }else{ - this.message=r.data.message - this.showMessage=true; - } - - }).catch(error=> { - alert("err login") - }) - } - } -} - - ); - const Ping=Vue.extend({template:` - - - - Simple performance measure - - Reset - - -

Read or increment a database value.

-

Counter:{{counter}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionRepeatLastCountAvgminmaxMedian
- Get count - - - - - {{getValues.last}} - - {{getValues.count}} - - {{getValues.avg | round(2)}} - - {{getValues.min}} - - {{getValues.max}} - - {{getValues.median}} -
- Update count - - - - {{postValues.last}} - - {{postValues.count}} - - {{postValues.avg | round(2)}} - - {{postValues.min}} - - {{postValues.max}} - - {{postValues.median}} -
- - - - - `, - - data: function(){ - return { - getValues: new perfStat(), - postValues: new perfStat(), - repeat:{get:false,post:false}, - counter:null - } - }, - methods:{ - update () { - var _start = performance.now(); - HTTP.post("ping",axios_json) - .then(r=>{ - var elapsed=Math.floor(performance.now() - _start); - this.counter=r.data - Object.assign(this.postValues,this.postValues.log(elapsed)) - if(this.repeat.post){ - this.update(); //does this leak?? - } - }) - }, - - get(){ - var _start = performance.now(); - HTTP.get("ping",axios_json) - .then(r=>{ - var elapsed=Math.floor(performance.now() - _start); - this.counter=r.data - Object.assign(this.getValues,this.getValues.log(elapsed)) - this.$forceUpdate() - if(this.repeat.get){ - this.get(); //does this leak?? - } - }) - }, - reset(){ - Object.assign(this.getValues,this.getValues.clear()); - Object.assign(this.postValues,this.postValues.clear()); - this.$forceUpdate() - } - }, - computed: { - - } -} - - ); - const Puzzle=Vue.extend({template:` - - - - - - -
- {{cell}} -
-
- - - - -
- -
- - Loosely inspired by demo - - `, +

+ This is a experiment in using + vue.js + . +

+ + add REPLACED + + + + `, - data: function(){ - return {grid: [ - [1,5,8,12], - [2,6,9,13], - [3,7,10,14], - [4,null,11,15] - ], - empty:[3,1], - tiles:[{data:""}] - } - }, - methods: { - click(row,col) { - if(this.disabled(row,col))return; - var g=this.grid - var h=g[row][col] - g[row][col]=null - g[this.empty[0]][this.empty[1]]=h - var e=[row,col] - this.empty=e - this.grid= g - console.log("click",this.grid,e) - this.$forceUpdate() - }, - disabled(row,col){ - var ok=(row==this.empty[0]) && (col==this.empty[1]-1 ||col==this.empty[1]+1) - ok=ok || (col==this.empty[1]) && (row==this.empty[0]-1 ||row==this.empty[0]+1); - return !ok - }, - gettiles(){ - HTTP.get("thumbnail/images") - .then(r=>{ - this.tiles=r.data.items - this.$forceUpdate() - }) - - }, - src(row,col){ - var v=this.grid[row][col] - var d="" - if(typeof this.tiles[v] !== 'undefined') d=this.tiles[v].data - - return "data:image/jpeg;base64,"+d - } - - }, - created(){ - this.gettiles() } -} - ); const Repo=Vue.extend({template:` @@ -2088,153 +2838,22 @@ repository todo } ); - const Search=Vue.extend({template:` + const Users=Vue.extend({template:` - Not finished - - - - - - - - - - - - {{ index }} {{ item.title }} - {{ item.uri }} - - - - info - - - - - - +users todo `, data: function(){ return { - q: this.$route.query.q, - results: [], - busy: false, - selected: [] + message: 'bad route!' } }, - methods:{ - get() { - this.busy= true - console.log("q",this.q) - HTTP.get('search',{params:{q:this.q}}) - .then((res) => { - this.busy=false - this.results = res.data.items; - this.selected=[false,true] - }); - }, - send(e){ - if(e.keyCode==13){ - this.get() - } - }, - icon(index){ - return this.selected[index]?"check_circle":"search" - }, - search(item){ - alert(item.title) - }, - select(index){ - this.$set(this.selected,index,!this.selected[index]) - //alert(index) - } - }, created:function(){ - console.log("Serch",this.$route.query.q) - this.get() + console.log("notfound",this.$route.query.q) } } - ); - const Select=Vue.extend({template:` - - - - - Selection - - - info - - - - - - - -

some text

- - 
{{$data.value }}
- - - -

multi select

- - 
{{$data.value2 }}
- - - - - - - test - - highlight_off - - blah blah protocol: - - - - - - - `, - - components: { multiselect: VueMultiselect.Multiselect}, - data: function(){ - return { - value: null, - value2: null, - options: [], - isLoading: false, - showInfo:true - } - }, - created:function(){ - this.asyncFind("") - }, - methods: { - asyncFind: function(query){ - this.isLoading = true - that=this; - HTTP.get("test-select?q="+query,axios_json) - .then(function(r){ - that.isLoading = false - that.options=r.data.items; - }) - .catch(function (error) { - console.log(error); - this.isLoading = false - alert("Get query error") - }); - } - } -} - - ); const Session=Vue.extend({template:` @@ -2303,619 +2922,6 @@ repository todo } - ); - const Acesettings=Vue.extend({template:` - - - - - - Not fully implemented - - - - - Theme - - - - - - - - Key binding - - - - - - - - - Font size - - - - - - - - - - Ace editor settings - - - - - - - enableSnippets - Allow - snippets - - - - - - - - - enableBasicAutocompletion - Autocompletion via control-space - - - - - - - - - enableLiveAutocompletion - Autocompletion while typing - - - - - - - - - - - - `, - - data () { - return { - xace: { - enableSnippets: true, - enableBasicAutocompletion: true, - enableLiveAutocompletion: true, - theme: "github", - keybinding: "ace", - fontsize: "14" - }, - ace: {}, - keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ], - themes: [ "github", "chaos","tomorrow"] - } - }, - methods:{ - extend(obj, src) { - Object.keys(src).forEach(function(key) { if(!obj[key]) obj[key] = src[key]; }); - return obj; - } - }, - beforeRouteEnter (to, from, next) { - settings.getItem('settings/ace') - .then( v =>{ - next(vm => { vm.ace = v?v:vm.xace; }) - }) - }, - - mounted: function () { - // console.log(this.ace,this.xace) - // this.extend(this.storeace,this.storeace); - // console.log("$$$",this.ace) - }, - watch: {"ace":{ - handler:function(v){ - settings.setItem('settings/ace',this.ace) - }, - deep:true - } -} -} - - - ); - const Settings=Vue.extend({template:` - -

Settings are currently only stored locally in the browser, using localstorage

- - - Available settings - - - - - Editor - - - - - System information - keys -
    -
  • - {{ key }} -
    • -
- - - - Wipe - - - `, - - data(){return { - keys: ["?"], - showDev: false, - dark:false - } - }, - methods:{ - wipe(){ - if(confirm("wipe localstorage? "+this.keys.length)) settings.clear(); - }, - theme(){ - this.$emit("theme",this.dark) - } - }, - created(){ - console.log("settings") - settings.keys() - .then( v =>{ - this.keys=v - }) - - } -} - - ); - const Tabs=Vue.extend({template:` - - - - - menu - - Page Title - - - search - - - more_vert - - - - - - - - - favorite - - Item {{ i }} more - - - - - - - - - {{i}} - {{ text }} - - - - - `, - - 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.' - } - } - } - - ); - const Model=Vue.extend({template:` - - - - arrow_back - - Generate model.gen.xqm - - - - play_circle_outline - Run - - - - - - - - - - - - - - {{code}} - - - - - - - - {{ snackbar.msg }} - Close - - - - `, - - data: function(){ - return { - params:{ - efolder:"C:/Users/andy/git/vue-poc/src/vue-poc/models", - target:"C:/Users/andy/git/vue-poc/src/vue-poc/models.gen.xqm" - }, - waiting:false, - snackbar:{show:false,msg:"",context:"success"}, - } - }, - methods:{ - submit(){ - this.waiting=true - HTTP.post("tasks/model",Qs.stringify(this.params)) - .then(r=>{ - this.waiting=false - this.snackbar={show:true,msg:r.data.msg,context:"success"} - console.log(r.data) - }) - .catch(error=>{ - this.waiting=false - this.snackbar={show:true,msg:"Problem",context:"error"} - console.log(error); - }); - } - }, - computed:{ - code(){return 'import module namespace entity = "quodatum.models.generated" at "'+this.params.target+'";'} - } -} - - ); - const Task=Vue.extend({template:` - -

Tasks

-
    -
  • - model -
    • -
  • - xqdoc -
    • -
  • - vue compile -
    • -
- - `, - - data: function(){ - return { - message: 'Hello Vue.js!', - q:this.$route.query.q - } - } -} - - ); - const Vuecompile=Vue.extend({template:` - - - - arrow_back - - compile - - - - play_circle_outline - Run - - - - - - - - - - - {{code}} - - - - - - - - {{ snackbar.msg }} - Close - - - - `, - - data: function(){ - return { - params:{ - proj:"C:/Users/andy/git/vue-poc/src/vue-poc/" - }, - waiting:false, - snackbar:{show:false,msg:"",context:"success"}, - } - }, - methods:{ - submit(){ - this.waiting=true - HTTP.post("tasks/vue-compile",Qs.stringify(this.params)) - .then(r=>{ - this.waiting=false - this.snackbar={show:true,msg:r.data.msg,context:"success"} - console.log(r.data) - }) - .catch(error=>{ - this.waiting=false - this.snackbar={show:true,msg:"Problem",context:"error"} - console.log(error); - }); - } - }, - computed:{ - code(){return 'code here'} - } -} - - ); - const Xqdoc=Vue.extend({template:` - - - - arrow_back - - Task: Generate xqdoc - - - - play_circle_outline - Run - - - - - - - - - - - - - - - - - - - - - {{alert.timestamp}}:{{alert.msg}} - - - {{alert.timestamp}}:{{alert.msg}} - - - {{code}} - - `, - - data: function(){ - return { - params:{ - efolder:"C:/Users/andy/git/graphxq/src", - target:"C:/tmp/xqdoc/" - }, - waiting:false, - alert:{msg:"",success:false,error:false}, - } - }, - methods:{ - submit(){ - this.waiting=true - this.alert={msg:"Loading..",success:false,error:false} - HTTP.post("tasks/xqdoc",Qs.stringify(this.params)) - .then(r=>{ - this.waiting=false - this.alert={msg:r.data.msg,success:true,error:false} - console.log(r.data) - settings.setItem('tasks/xqdoc',this.params) - }) - .catch(error=>{ - this.waiting=false - this.alert={msg:error.response.data,success:false,error:true} - console.log(error); - alert("bad") - }); - } - }, - created: function () { - settings.getItem('tasks/xqdoc') - .then((v)=>{ - if(v)this.params=v - }) - }, - - computed:{ - code(){return 'generate xqdoc'} - } -} - - ); - const Thumbnail=Vue.extend({template:` - - - - Select image location - - Set thumbnail details - - Result - - - - - - - Next - - - - - - - - Back - Validate - Next - - - - - output todo - - - Back - go - - - - `, - - 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; - }, - validate(){ - alert("validate") - HTTP.post("thumbnail/validate",Qs.stringify({task: this.taskxml})) - .then(r=>{alert("gg")}) - }, - 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 Timeline=Vue.extend({template:` - - - - Line 1 - - fit - - - - - - - - - {{msg}} - - - - `, - - data(){ - return { - vueState: { - data1: [ - { id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' }, - { id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' }, - { id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' }, - { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', className: 'green' }, - { id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' }, - { id: 6, content: 'item 6', start: '2013-04-27' }] - }, - Events: new Vue({}), - msg:"Item detail" - } -}, -methods:{ - fit(){ - this.Events.$emit('fit'); - }, - select(items){ - this.msg='Selected items: ' + items - } -}, -created(){ - console.log("timeline") -} -} - ); - const Users=Vue.extend({template:` - -users todo - - `, - - data: function(){ - return { - message: 'bad route!' - } - }, - created:function(){ - console.log("notfound",this.$route.query.q) - } -} - ); const router = new VueRouter({ base:"/vue-poc/ui/", diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html index 149374c..622841f 100644 --- a/src/vue-poc/static/app.html +++ b/src/vue-poc/static/app.html @@ -9,7 +9,7 @@ Vue Router Test - + @@ -35,7 +35,7 @@ - +