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

vuetify 0.15.7

Browse source
This commit is contained in:
Andy Bunce 2017-09-23 23:06:28 +01:00
parent 29d2a5556d
commit 630b9e511f
7 changed files with 191 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,5 @@
// base ----------------------- // base -----------------------
localforage.config({
name: 'vuepoc'
});
const AXIOS_CONFIG={ const AXIOS_CONFIG={
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -19,6 +17,7 @@ const HTTP = axios.create(AXIOS_CONFIG);
const HTTPNE = axios.create(AXIOS_CONFIG); const HTTPNE = axios.create(AXIOS_CONFIG);
const axios_json={ headers: {accept: 'application/json'}}; const axios_json={ headers: {accept: 'application/json'}};
// Authorization Object
const Auth={ const Auth={
user:"guest", user:"guest",
permission:null, permission:null,
@ -29,7 +28,23 @@ const Auth={
}; };
Vue.use(Auth); Vue.use(Auth);
// read and write settings // Mimetype info
const MimeTypes={
"text/xml":"xml",
"application/xml":"xml",
"application/xquery":"xquery",
"text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html",
"text/turtle":"turtle",
"text/css":"css",
"image/svg+xml":"svg"
};
// Settings read and write list clear
localforage.config({
name: 'vuepoc'
});
// https://vuejs.org/v2/guide/state-management.html // https://vuejs.org/v2/guide/state-management.html
var settings = { var settings = {
debug: false, debug: false,
@ -125,5 +140,6 @@ const Fullscreen={
}) } }) }
}; };
Vue.use(Fullscreen); Vue.use(Fullscreen);
Vue.use(Vuetify); Vue.use(Vuetify);
new Vuepoc().$mount('#app') new Vuepoc().$mount('#app')

26
src/vue-poc/components/qd-confirm.vue Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<!--
ok cancel dialog
-->
<template id="qd-confirm">
<v-dialog v-model="showDialog" >
<v-card >
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-on:click="$emit('cancel')">Cancel</v-btn>
<v-btn v-on:click="$emit('ok')">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>{
data(){
return {showDialog:false}
},
}
</script>

20
src/vue-poc/data/vue-poc/namespaces.xml
View file

@ -42,4 +42,24 @@
<description>Scalable Vector Graphics namespace <description>Scalable Vector Graphics namespace
</description> </description>
</namespace> </namespace>
<namespace uri="http://docbook.org/ns/docbook" prefix="d">
<description>Docbook
</description>
</namespace>
<namespace uri="http://www.w3.org/1998/Math/MathML" prefix="mml">
<description>Math ML
</description>
</namespace>
<namespace uri="http://www.vraweb.org/vracore4.htm" prefix="vra">
<description>Visual Resources Association
</description>
</namespace>
<namespace uri="http://purl.oclc.org/dsdl/schematron" prefix="sch">
<description>Schematron
</description>
</namespace>
</namespaces> </namespaces>

3
src/vue-poc/features/collection/files.vue
View file

@ -10,7 +10,8 @@
</v-btn> </v-btn>
<v-toolbar-title> <v-toolbar-title>
<v-breadcrumbs> <v-breadcrumbs>
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url: item.path }}"> <v-breadcrumbs-item v-for="item in crumbs" :key="item.path"
:to="{ query: { url: item.path }}" :exact="true">
{{ item.name }} {{ item.name }}
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>

73
src/vue-poc/features/edit/edit.vue
View file

@ -5,9 +5,9 @@
{{ message }} {{ message }}
<v-btn flat @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
</v-snackbar> </v-snackbar>
<v-card> <v-card>
<v-toolbar dense>
<v-toolbar class="grey lighten-2 black--text">
<v-menu > <v-menu >
<v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >{{icon}}</v-icon></v-btn> <v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >{{icon}}</v-icon></v-btn>
<v-list> <v-list>
@ -22,12 +22,20 @@
<v-toolbar-title > <v-toolbar-title >
<span >{{ name }}</span> <span >{{ name }}</span>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items>
<span v-tooltip:top="{ html: 'Changed?' }"> <span v-tooltip:top="{ html: 'Changed?' }">
<v-chip v-if="dirty" label small class="red white--text">*</v-chip> <v-chip v-if="dirty" label small class="red white--text">*</v-chip>
<v-chip v-if="!dirty" label small class="green white--text">.</v-chip> <v-chip v-if="!dirty" label small class="green white--text">.</v-chip>
</span> </span>
<v-chip small v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip> <v-menu left transition="v-fade-transition">
<v-chip label small slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-list dense>
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
<v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-chip @click="acecmd('goToNextError')" <v-chip @click="acecmd('goToNextError')"
v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
> >
@ -87,24 +95,15 @@
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
<v-list> <v-list dense>
<v-list-tile> <v-list-tile v-for="t in mimeTypes" :key="t">
<v-list-tile-title >unused</v-list-tile-title> <v-list-tile-title v-text="t" @click="setMode(t)"></v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-menu> </v-menu>
</v-toolbar-items>
<v-dialog v-model="clearDialog" >
<v-card>
<v-card-title>Clear?</v-card-title>
<v-card-text>clear text.</v-card-text>
<v-card-actions>
<v-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
@ -118,7 +117,19 @@ v-on:annotation="annotation"></vue-ace>
</v-flex> </v-flex>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-dialog v-model="clearDialog" >
<v-card >
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="reset(false)">Cancel</v-btn>
<v-btn @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-container> </v-container>
</template> </template>
@ -143,18 +154,8 @@ v-on:annotation="annotation"></vue-ace>
message: "Cant do that", message: "Cant do that",
events: new Vue({}), events: new Vue({}),
folded: false, // toggle fold/unfold action folded: false, // toggle fold/unfold action
mimemap:{ aceSettings: { },
"text/xml":"xml", mimeTypes:MimeTypes
"application/xml":"xml",
"application/xquery":"xquery",
"text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html",
"text/turtle":"turtle",
"text/css":"css",
"image/svg+xml":"svg"
},
aceSettings: { }
} }
}, },
methods: { methods: {
@ -181,8 +182,7 @@ v-on:annotation="annotation"></vue-ace>
HTTP.get("edit",{params: {url:url,protocol:this.protocol}}) HTTP.get("edit",{params: {url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype this.setMode(r.data.mimetype)
this.mode=this.acetype(r.data.mimetype)
this.contentA=r.data.data this.contentA=r.data.data
this.busy=false this.busy=false
@ -250,9 +250,10 @@ v-on:annotation="annotation"></vue-ace>
this.annotations=counts this.annotations=counts
//console.log("annotations: ",counts) //console.log("annotations: ",counts)
}, },
acetype(mime){ setMode(mimetype){
var r=this.mimemap[mime] this.mimetype=mimetype
return r?r:"text" var r=MimeTypes[mimetype]
this.mode=r?r:"text"
}, },
onResize(){ onResize(){
var h=window.innerHeight var h=window.innerHeight

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

@ -1,5 +1,27 @@
// generated 2017-09-17T22:10:03.752+01:00 // generated 2017-09-23T23:02:27.92+01:00
Vue.component('qd-fullscreen',{template:` Vue.component('qd-confirm',{template:`
<v-dialog v-model="showDialog">
<v-card>
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-on:click="$emit('cancel')">Cancel</v-btn>
<v-btn v-on:click="$emit('ok')">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
`,
data(){
return {showDialog:false}
},
}
);
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>
</a> </a>
@ -437,7 +459,7 @@ Vue.filter('round', function(value, decimals) {
</v-btn> </v-btn>
<v-toolbar-title> <v-toolbar-title>
<v-breadcrumbs> <v-breadcrumbs>
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url: item.path }}"> <v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url: item.path }}" :exact="true">
{{ item.name }} {{ item.name }}
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>
@ -721,9 +743,9 @@ Vue.filter('round', function(value, decimals) {
{{ message }} {{ message }}
<v-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn> <v-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
</v-snackbar> </v-snackbar>
<v-card> <v-card>
<v-toolbar dense="">
<v-toolbar class="grey lighten-2 black--text">
<v-menu> <v-menu>
<v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>{{icon}}</v-icon></v-btn> <v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>{{icon}}</v-icon></v-btn>
<v-list> <v-list>
@ -738,12 +760,20 @@ Vue.filter('round', function(value, decimals) {
<v-toolbar-title> <v-toolbar-title>
<span>{{ name }}</span> <span>{{ name }}</span>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items>
<span v-tooltip:top="{ html: 'Changed?' }"> <span v-tooltip:top="{ html: 'Changed?' }">
<v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip> <v-chip v-if="dirty" label="" small="" class="red white--text">*</v-chip>
<v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip> <v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
</span> </span>
<v-chip small="" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip> <v-menu left="" transition="v-fade-transition">
<v-chip label="" small="" slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-list dense="">
<v-list-tile v-for="(mode, mimetype) in mimeTypes" :key="mimetype">
<v-list-tile-title v-text="mimetype" @click="setMode(mimetype)"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-chip @click="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"> <v-chip @click="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
<v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar> <v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
<v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar> <v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>
@ -801,24 +831,15 @@ Vue.filter('round', function(value, decimals) {
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
<v-list> <v-list dense="">
<v-list-tile> <v-list-tile v-for="t in mimeTypes" :key="t">
<v-list-tile-title>unused</v-list-tile-title> <v-list-tile-title v-text="t" @click="setMode(t)"></v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-menu> </v-menu>
</v-toolbar-items>
<v-dialog v-model="clearDialog">
<v-card>
<v-card-title>Clear?</v-card-title>
<v-card-text>clear text.</v-card-text>
<v-card-actions>
<v-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear> <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
@ -829,7 +850,19 @@ Vue.filter('round', function(value, decimals) {
</v-flex> </v-flex>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-dialog v-model="clearDialog">
<v-card>
<v-toolbar class="lime darken-1">
<v-card-title>Confirm action</v-card-title>
</v-toolbar>
<v-card-text>Delete all edit text?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="reset(false)">Cancel</v-btn>
<v-btn @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-container> </v-container>
`, `,
@ -853,18 +886,8 @@ Vue.filter('round', function(value, decimals) {
message: "Cant do that", message: "Cant do that",
events: new Vue({}), events: new Vue({}),
folded: false, // toggle fold/unfold action folded: false, // toggle fold/unfold action
mimemap:{ aceSettings: { },
"text/xml":"xml", mimeTypes:MimeTypes
"application/xml":"xml",
"application/xquery":"xquery",
"text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html",
"text/turtle":"turtle",
"text/css":"css",
"image/svg+xml":"svg"
},
aceSettings: { }
} }
}, },
methods: { methods: {
@ -891,8 +914,7 @@ Vue.filter('round', function(value, decimals) {
HTTP.get("edit",{params: {url:url,protocol:this.protocol}}) HTTP.get("edit",{params: {url:url,protocol:this.protocol}})
.then(r=>{ .then(r=>{
//console.log(r) //console.log(r)
this.mimetype=r.data.mimetype this.setMode(r.data.mimetype)
this.mode=this.acetype(r.data.mimetype)
this.contentA=r.data.data this.contentA=r.data.data
this.busy=false this.busy=false
@ -960,9 +982,10 @@ Vue.filter('round', function(value, decimals) {
this.annotations=counts this.annotations=counts
//console.log("annotations: ",counts) //console.log("annotations: ",counts)
}, },
acetype(mime){ setMode(mimetype){
var r=this.mimemap[mime] this.mimetype=mimetype
return r?r:"text" var r=MimeTypes[mimetype]
this.mode=r?r:"text"
}, },
onResize(){ onResize(){
var h=window.innerHeight var h=window.innerHeight
@ -3145,7 +3168,6 @@ router.beforeEach((to, from, next) => {
children: [ children: [
{href: '/database', text: 'Databases',icon: 'developer_mode' }, {href: '/database', text: 'Databases',icon: 'developer_mode' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/history',text: 'history',icon: 'history'} {href: '/history',text: 'history',icon: 'history'}
]}, ]},
{ {
@ -3153,7 +3175,8 @@ router.beforeEach((to, from, next) => {
text: 'Actions' , text: 'Actions' ,
model: false, model: false,
children: [ children: [
{href: '/eval',text: 'Query',icon: 'play_circle_outline'}, {href: '/eval',text: 'Query',icon: 'play_circle_outline'},
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/tasks',text: 'Tasks',icon: 'history'} {href: '/tasks',text: 'Tasks',icon: 'history'}
]}, ]},
{ {
@ -3257,9 +3280,7 @@ router.beforeEach((to, from, next) => {
); );
// base ----------------------- // base -----------------------
localforage.config({
name: 'vuepoc'
});
const AXIOS_CONFIG={ const AXIOS_CONFIG={
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -3277,6 +3298,7 @@ const HTTP = axios.create(AXIOS_CONFIG);
const HTTPNE = axios.create(AXIOS_CONFIG); const HTTPNE = axios.create(AXIOS_CONFIG);
const axios_json={ headers: {accept: 'application/json'}}; const axios_json={ headers: {accept: 'application/json'}};
// Authorization Object
const Auth={ const Auth={
user:"guest", user:"guest",
permission:null, permission:null,
@ -3287,7 +3309,23 @@ const Auth={
}; };
Vue.use(Auth); Vue.use(Auth);
// read and write settings // Mimetype info
const MimeTypes={
"text/xml":"xml",
"application/xml":"xml",
"application/xquery":"xquery",
"text/ecmascript":"javascript",
"application/sparql-query":"sparql",
"text/html":"html",
"text/turtle":"turtle",
"text/css":"css",
"image/svg+xml":"svg"
};
// Settings read and write list clear
localforage.config({
name: 'vuepoc'
});
// https://vuejs.org/v2/guide/state-management.html // https://vuejs.org/v2/guide/state-management.html
var settings = { var settings = {
debug: false, debug: false,
@ -3383,5 +3421,6 @@ const Fullscreen={
}) } }) }
}; };
Vue.use(Fullscreen); Vue.use(Fullscreen);
Vue.use(Vuetify); Vue.use(Vuetify);
new Vuepoc().$mount('#app') new Vuepoc().$mount('#app')

4
src/vue-poc/vue-poc.vue
View file

@ -78,7 +78,6 @@
children: [ children: [
{href: '/database', text: 'Databases',icon: 'developer_mode' }, {href: '/database', text: 'Databases',icon: 'developer_mode' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/history',text: 'history',icon: 'history'} {href: '/history',text: 'history',icon: 'history'}
]}, ]},
{ {
@ -86,7 +85,8 @@
text: 'Actions' , text: 'Actions' ,
model: false, model: false,
children: [ children: [
{href: '/eval',text: 'Query',icon: 'play_circle_outline'}, {href: '/eval',text: 'Query',icon: 'play_circle_outline'},
{href: '/edit',text: 'Edit',icon: 'mode_edit'},
{href: '/tasks',text: 'Tasks',icon: 'history'} {href: '/tasks',text: 'Tasks',icon: 'history'}
]}, ]},
{ {