apb/vue-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

mimetypes

Browse source
This commit is contained in:
Andy Bunce 2017-09-06 17:01:55 +01:00
parent 91cc5b40cc
commit 0e56f4ff44
10 changed files with 112 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/vue-poc/components/core.js
View file

@ -3,6 +3,7 @@ localforage.config({
name: 'vuepoc' name: 'vuepoc'
}); });
// errors displayed by interceptor
const HTTP = axios.create({ const HTTP = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -13,6 +14,7 @@ const HTTP = axios.create({
return Qs.stringify(params) return Qs.stringify(params)
} }
}); });
// errors hidden
const HTTPNE = axios.create({ const HTTPNE = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -65,17 +67,12 @@ var settings = {
}); });
}) })
}, },
length(){ keys(){
return new Promise((resolve, reject) => { return localforage.keys() // returns array of keys
localforage.keys() // returns array of keys
.then((value) => { },
console.log('length ',value); clear(){
return new Promise((resolve, reject) => {resolve(value);}) localforage.clear()
}).catch((err) => {
console.log('length');
return new Promise((resolve, reject) => {reject(err);})
});
})
} }
}; };
@ -208,6 +205,7 @@ const app = new Vue({
status:{}, status:{},
drawer:true, drawer:true,
mini: false, mini: false,
dark: false,
alert:{show:false,msg:"Hello"}, alert:{show:false,msg:"Hello"},
items:[ items:[
{href: '/',text: 'Home', icon: 'home' }, {href: '/',text: 'Home', icon: 'home' },
@ -283,6 +281,10 @@ const app = new Vue({
showAlert(msg){ showAlert(msg){
this.alert.msg=moment().format()+" "+ msg this.alert.msg=moment().format()+" "+ msg
this.alert.show=true this.alert.show=true
},
onDark(dark){
this.dark=dark
alert("theme")
} }
}, },

0
src/vue-poc/mimetypes.xml → src/vue-poc/data/vue-poc/mimetypes.xml
View file

5
src/vue-poc/features/eval/eval.vue
View file

@ -16,8 +16,8 @@
<v-icon>label</v-icon> <v-icon>label</v-icon>
Namespaces</v-btn> Namespaces</v-btn>
<v-menu offset-y> <v-menu offset-y>
<v-btn icon primary dark slot="activator"> <v-icon>more_vert</v-icon></v-btn> <v-btn icon primary slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-list> <v-list dense>
<v-list-tile @click="plan">Show query plan</v-list-tile> <v-list-tile @click="plan">Show query plan</v-list-tile>
</v-list> </v-list>
<v-list> <v-list>
@ -189,6 +189,7 @@
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
next(vm => { next(vm => {
console.log('eval settings: ',v); console.log('eval settings: ',v);
vm.aceSettings = v; vm.aceSettings = v;

6
src/vue-poc/features/settings/acesettings.vue
View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="acesettings"> <template id="acesettings">
<v-container> <v-container fluid>
<v-layout row> <v-layout row>
<v-flex xs12 sm8 offset-sm2> <v-flex xs12 sm8 offset-sm2>
@ -45,7 +45,7 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-divider ></v-divider> <v-divider ></v-divider>
</v-container>
<v-list two-line subheader> <v-list two-line subheader>
<v-subheader>Ace editor settings</v-subheader> <v-subheader>Ace editor settings</v-subheader>
@ -116,7 +116,7 @@
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
next(vm => { vm.ace = v; }) next(vm => { vm.ace = v?v:vm.xace; })
}) })
}, },

40
src/vue-poc/features/settings/settings.vue
View file

@ -2,16 +2,26 @@
<template id="settings"> <template id="settings">
<v-container fluid> <v-container fluid>
<p>Settings are currently only stored locally in the browser, using <code>localstorage</code></p> <p>Settings are currently only stored locally in the browser, using <code>localstorage</code></p>
<v-switch label="Dark theme" v-model="dark" @change="theme"></v-switch>
<v-card> <v-card>
<v-card-title class="lime darken-1">Available settings</v-card-title> <v-card-title class="lime darken-1">Available settings</v-card-title>
<v-card-text> <v-card-text>
<router-link to="/acesettings">Editor</router-link> <router-link to="/acesettings">Editor</router-link>
</v-card-text> </v-card-text>
</v-card> </v-card>
<div>.</div> <v-switch label="Show advanced options" v-model="showDev"></v-switch>
<v-card > <v-card v-if="showDev">
<v-card-title class="lime darken-1">System information</v-card-title> <v-card-title class="amber darken-1">System information</v-card-title>
<v-card-text>keys?</v-card-text> <v-card-text>keys
<ul >
<li v-for="key in keys">
{{ key }}
</li>
</ul>
</v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click="wipe" error>Wipe</v-btn></v-card-actions> <v-btn @click="wipe" error>Wipe</v-btn></v-card-actions>
@ -20,23 +30,27 @@
</template> </template>
<script>{ <script>{
data:function(){return { data(){return {
keys: [], keys: ["?"],
showDev: false showDev: false,
dark:false
} }
}, },
methods:{ methods:{
wipe(){ wipe(){
alert("wipe") if(confirm("wipe localstorage? "+this.keys.length)) settings.clear();
},
theme(){
this.$emit("theme",this.dark)
} }
}, },
created:function(){ created(){
console.log("settings") console.log("settings")
settings.length() settings.keys()
.then(k=>{ .then( v =>{
console.log("length:",k) this.keys=v
this.keys=k;
}) })
} }
} }
</script> </script>

6
src/vue-poc/features/tabs.vue
View file

@ -3,15 +3,15 @@
<v-tabs scroll-bars > <v-tabs scroll-bars >
<v-card > <v-card >
<v-card-actions> <v-card-actions>
<v-btn icon light> <v-btn icon >
<v-icon>menu</v-icon> <v-icon>menu</v-icon>
</v-btn> </v-btn>
<v-card-title>Page Title</v-card-title> <v-card-title>Page Title</v-card-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon light> <v-btn icon >
<v-icon>search</v-icon> <v-icon>search</v-icon>
</v-btn> </v-btn>
<v-btn icon light> <v-btn icon >
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>

2
src/vue-poc/models.gen.xqm
View file

@ -1,5 +1,5 @@
(: entity access maps (: entity access maps
: auto generated from xml files in entities folder at: 2017-08-31T11:04:08.727+01:00 : auto generated from xml files in entities folder at: 2017-09-05T14:36:25.45+01:00
:) :)
module namespace entity = 'quodatum.models.generated'; module namespace entity = 'quodatum.models.generated';

85
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2017-09-04T12:26:20.994+01:00 // generated 2017-09-05T15:21:42.951+01:00
Vue.component('qd-fullscreen',{template:` Vue.component('qd-fullscreen',{template:`
<a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle"> <a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle">
<v-icon>{{ fullscreenIcon }}</v-icon> <v-icon>{{ fullscreenIcon }}</v-icon>
@ -948,8 +948,8 @@ Vue.filter('round', function(value, decimals) {
<v-icon>label</v-icon> <v-icon>label</v-icon>
Namespaces</v-btn> Namespaces</v-btn>
<v-menu offset-y=""> <v-menu offset-y="">
<v-btn icon="" primary="" dark="" slot="activator"> <v-icon>more_vert</v-icon></v-btn> <v-btn icon="" primary="" slot="activator"> <v-icon>more_vert</v-icon></v-btn>
<v-list> <v-list dense="">
<v-list-tile @click="plan">Show query plan</v-list-tile> <v-list-tile @click="plan">Show query plan</v-list-tile>
</v-list> </v-list>
<v-list> <v-list>
@ -1117,6 +1117,7 @@ Vue.filter('round', function(value, decimals) {
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
next(vm => { next(vm => {
console.log('eval settings: ',v); console.log('eval settings: ',v);
vm.aceSettings = v; vm.aceSettings = v;
@ -2236,7 +2237,7 @@ repository todo
); );
const Acesettings=Vue.extend({template:` const Acesettings=Vue.extend({template:`
<v-container> <v-container fluid="">
<v-layout row=""> <v-layout row="">
<v-flex xs12="" sm8="" offset-sm2=""> <v-flex xs12="" sm8="" offset-sm2="">
@ -2270,7 +2271,7 @@ repository todo
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-divider></v-divider> <v-divider></v-divider>
</v-container>
<v-list two-line="" subheader=""> <v-list two-line="" subheader="">
<v-subheader>Ace editor settings</v-subheader> <v-subheader>Ace editor settings</v-subheader>
@ -2310,7 +2311,7 @@ repository todo
<v-card-text> <v-card-text>
</v-card-text> </v-card-text>
</v-card> </v-container></v-card>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
@ -2340,7 +2341,7 @@ repository todo
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
next(vm => { vm.ace = v; }) next(vm => { vm.ace = v?v:vm.xace; })
}) })
}, },
@ -2363,16 +2364,26 @@ repository todo
const Settings=Vue.extend({template:` const Settings=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<p>Settings are currently only stored locally in the browser, using <code>localstorage</code></p> <p>Settings are currently only stored locally in the browser, using <code>localstorage</code></p>
<v-switch label="Dark theme" v-model="dark" @change="theme"></v-switch>
<v-card> <v-card>
<v-card-title class="lime darken-1">Available settings</v-card-title> <v-card-title class="lime darken-1">Available settings</v-card-title>
<v-card-text> <v-card-text>
<router-link to="/acesettings">Editor</router-link> <router-link to="/acesettings">Editor</router-link>
</v-card-text> </v-card-text>
</v-card> </v-card>
<div>.</div> <v-switch label="Show advanced options" v-model="showDev"></v-switch>
<v-card> <v-card v-if="showDev">
<v-card-title class="lime darken-1">System information</v-card-title> <v-card-title class="amber darken-1">System information</v-card-title>
<v-card-text>keys?</v-card-text> <v-card-text>keys
<ul>
<li v-for="key in keys">
{{ key }}
</li>
</ul>
</v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click="wipe" error="">Wipe</v-btn></v-card-actions> <v-btn @click="wipe" error="">Wipe</v-btn></v-card-actions>
@ -2380,23 +2391,27 @@ repository todo
</v-container> </v-container>
`, `,
data:function(){return { data(){return {
keys: [], keys: ["?"],
showDev: false showDev: false,
dark:false
} }
}, },
methods:{ methods:{
wipe(){ wipe(){
alert("wipe") if(confirm("wipe localstorage? "+this.keys.length)) settings.clear();
},
theme(){
this.$emit("theme",this.dark)
} }
}, },
created:function(){ created(){
console.log("settings") console.log("settings")
settings.length() settings.keys()
.then(k=>{ .then( v =>{
console.log("length:",k) this.keys=v
this.keys=k;
}) })
} }
} }
@ -2405,15 +2420,15 @@ repository todo
<v-tabs scroll-bars=""> <v-tabs scroll-bars="">
<v-card> <v-card>
<v-card-actions> <v-card-actions>
<v-btn icon="" light=""> <v-btn icon="">
<v-icon>menu</v-icon> <v-icon>menu</v-icon>
</v-btn> </v-btn>
<v-card-title>Page Title</v-card-title> <v-card-title>Page Title</v-card-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon="" light=""> <v-btn icon="">
<v-icon>search</v-icon> <v-icon>search</v-icon>
</v-btn> </v-btn>
<v-btn icon="" light=""> <v-btn icon="">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -3060,6 +3075,7 @@ localforage.config({
name: 'vuepoc' name: 'vuepoc'
}); });
// errors displayed by interceptor
const HTTP = axios.create({ const HTTP = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -3070,6 +3086,7 @@ const HTTP = axios.create({
return Qs.stringify(params) return Qs.stringify(params)
} }
}); });
// errors hidden
const HTTPNE = axios.create({ const HTTPNE = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -3122,17 +3139,12 @@ var settings = {
}); });
}) })
}, },
length(){ keys(){
return new Promise((resolve, reject) => { return localforage.keys() // returns array of keys
localforage.keys() // returns array of keys
.then((value) => { },
console.log('length ',value); clear(){
return new Promise((resolve, reject) => {resolve(value);}) localforage.clear()
}).catch((err) => {
console.log('length');
return new Promise((resolve, reject) => {reject(err);})
});
})
} }
}; };
@ -3265,6 +3277,7 @@ const app = new Vue({
status:{}, status:{},
drawer:true, drawer:true,
mini: false, mini: false,
dark: false,
alert:{show:false,msg:"Hello"}, alert:{show:false,msg:"Hello"},
items:[ items:[
{href: '/',text: 'Home', icon: 'home' }, {href: '/',text: 'Home', icon: 'home' },
@ -3340,6 +3353,10 @@ const app = new Vue({
showAlert(msg){ showAlert(msg){
this.alert.msg=moment().format()+" "+ msg this.alert.msg=moment().format()+" "+ msg
this.alert.show=true this.alert.show=true
},
onDark(dark){
this.dark=dark
alert("theme")
} }
}, },

4
src/vue-poc/static/app.css
View file

@ -1,5 +1,7 @@
/* app.css */ /* app.css */
body {
overflow-y:hidden!;
}
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition-property: opacity; transition-property: opacity;
transition-duration: .25s; transition-duration: .25s;

8
src/vue-poc/static/app.html
View file

@ -27,7 +27,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.5.0/localforage.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.4.3/localforage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
@ -35,9 +35,9 @@
<script src="/vue-poc/ui/perf-stat.js"></script> <script src="/vue-poc/ui/perf-stat.js"></script>
</head> </head>
<body> <body>
<v-app id="app" > <v-app id="app" :dark="dark" @theme="onDark">
<v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer" <v-navigation-drawer persistent :mini-variant.sync="mini" v-model="drawer"
:disable-route-watcher="true" height="100%" class="grey lighten-4 pb-0"> :disable-route-watcher="true" class="grey lighten-4 pb-0">
<v-list class="pa-0"> <v-list class="pa-0">
<v-list-tile avatar tag="div"> <v-list-tile avatar tag="div">