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

improve compile

Browse source
This commit is contained in:
Andy Bunce 2017-06-06 13:32:41 +01:00
parent ee22286a95
commit 18b2d52841
19 changed files with 561 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/vue-poc/expath-pkg.xml
View file

@ -2,7 +2,7 @@
abbrev="vue-poc" version="0.0.2" spec="1.0"> abbrev="vue-poc" version="0.0.2" spec="1.0">
<title>vue-poc test of vue.js.</title> <title>vue-poc test of vue.js.</title>
<dependency name="ace" version="1.2.6" /> <dependency name="ace" version="1.2.6" />
<dependency name="vuetify" version="0.12.2" /> <dependency name="vuetify" version="0.12.5" />
<dependency name="vue" version="2.3.3" /> <dependency name="vue" version="2.3.3" />
<dependency name="vue-router" version="2.5.3" /> <dependency name="vue-router" version="2.5.3" />
<dependency name="google-material" version="0.0.0" /> <dependency name="google-material" version="0.0.0" />
@ -12,4 +12,7 @@
<dependency name="vue-multiselect" version="2.0.0-beta.14" /> <dependency name="vue-multiselect" version="2.0.0-beta.14" />
<dependency name="lodash" version="4.13.1" /> <dependency name="lodash" version="4.13.1" />
<dependency name="localforage" version="1.5.0" /> <dependency name="localforage" version="1.5.0" />
<dependency name="moment.js" version="2.18.1" />
<dependency name="file-walker" version="0.5.2" />
<dependency name="ex-thumbnailator" version="5.0.11" />
</package> </package>

86
src/vue-poc/login.xqm Normal file
View file

@ -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 })
};

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

@ -1,65 +1,93 @@
// generated 2017-06-01T12:41:01.376+01:00 // generated 2017-06-04T17:31:45.572+01:00
const Edit=Vue.extend({ const Edit=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-layout row="" wrap=""> <v-layout row="" wrap="">
<v-flex xs12=""> <v-flex xs12="">
<v-toolbar class="green"> <v-toolbar class="green">
<v-toolbar-title> <v-toolbar-title>
<v-btn @click.native="showfiles()" small="" icon=""><v-icon>folder</v-icon></v-btn> <v-btn @click.native="showfiles()" small="" icon="" v-tooltip:top="{ html: path.join('/') }">
<span>{{ name }}</span> <v-chip small="" class="primary white--text">{{ mode }}</v-chip> <v-icon>folder</v-icon></v-btn>
{{dirty}} <span>{{ name }}</span>
<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 small="" class="primary white--text">{{ mode }}</v-chip>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items> <v-toolbar-items>
<v-chip @click.native="acecmd('goToNextError')" v-tooltip:right="{ html: 'Annotations: Errors,Warning and Info' }">
<v-avatar>
<v-icon right="">navigate_next</v-icon>
</v-avatar>
<v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>
<v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>
<v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
</v-chip>
<v-btn dark="" icon="" @click.native="acecmd('outline')"> <v-btn dark="" icon="" @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="acecmd('goToPreviousError')">
<v-icon>navigate_before</v-icon>
</v-btn>
<v-btn dark="" icon="" @click.native="acecmd('goToNextError')">
<v-icon>navigate_next</v-icon>
</v-btn>
<v-btn dark="" icon="" @click.native="acecmd('foldall')"> <v-btn dark="" icon="" @click.native="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="acecmd('showSettingsMenu')">
<v-icon>settings</v-icon> <v-btn dark="" icon="" @click.native="wrap=!wrap">
</v-btn>
<v-btn dark="" icon="" @click.native="wrap=!wrap">
<v-icon>wrap_text</v-icon> <v-icon>wrap_text</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="acecmd('showKeyboardShortcuts')">
<v-icon>keyboard</v-icon>
</v-btn>
<v-btn dark="" icon="" @click.native="save()"> <v-btn dark="" icon="" @click.native="save()">
<v-icon>file_upload</v-icon> <v-icon>file_upload</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="beautify()"> <v-btn dark="" icon="" @click.native="beautify()">
<v-icon>format_align_center</v-icon> <v-icon>format_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark="" icon="" @click.native="clearDialog = true"> <v-btn dark="" icon="" @click.native="clearDialog = true">
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<v-menu bottom="" origin="top right" transition="v-scale-transition"> <v-menu left="" transition="v-fade-transition">
<v-btn dark="" icon="" slot="activator">
<v-icon>help</v-icon>
</v-btn>
<v-list>
<v-list-item @click="acecmd('showSettingsMenu')">
<v-list-tile avatar="">
<v-list-tile-avatar>
<v-icon>settings</v-icon>
</v-list-tile-avatar>
<v-list-tile-title>Show settings</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="acecmd('showKeyboardShortcuts')">
<v-list-tile avatar="">
<v-list-tile-avatar>
<v-icon>keyboard</v-icon>
</v-list-tile-avatar>
<v-list-tile-title>Show keyboard commands</v-list-tile-title>
</v-list-tile>
</v-list-item>
</v-list>
</v-menu>
<v-menu left="" transition="v-fade-transition">
<v-btn dark="" icon="" slot="activator"> <v-btn dark="" icon="" slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
<v-list> <v-list>
<v-list-item> <v-list-item @click="fetch('/vue-poc/vue-poc.xqm')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/vue-poc.xqm')">load xquery</v-list-tile-title> <v-list-tile-title>load xquery</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">load xml</v-list-tile-title> <v-list-tile-title>load xml</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.js')">load js</v-list-tile-title> <v-list-tile-title>load js</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
@ -95,10 +123,13 @@
</v-layout> </v-layout>
</v-container> </v-container>
`, `,
data () { data () {
return { return {
contentA: 'declare function local:query($q as xs:string)\n { \n <json type="object" > }', contentA: `declare function local:query($q as xs:string)
{ <json type="object"/>
};`,
mode:'xquery', mode:'xquery',
url:'', url:'',
name:'', name:'',
@ -113,7 +144,8 @@
"application/xml":"xml", "application/xml":"xml",
"application/xquery":"xquery", "application/xquery":"xquery",
"text/ecmascript":"javascript", "text/ecmascript":"javascript",
"text/html":"html" "text/html":"html",
"text/css":"css"
} }
} }
}, },
@ -188,6 +220,7 @@
}, },
annotation(counts){ annotation(counts){
this.annotations=counts this.annotations=counts
console.log("annotations: ",counts)
}, },
acetype(mime){ acetype(mime){
var r=this.mimemap[mime] var r=this.mimemap[mime]
@ -217,8 +250,7 @@
} }
); );
const Files=Vue.extend({ const Files=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-card> <v-card>
@ -248,7 +280,7 @@ const Files=Vue.extend({
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content @click="folder(item.name)"> <v-list-tile-content @click="folder(item.name)">
<v-list-tile-title>{{ item.name }}</v-list-tile-title> <v-list-tile-title>{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified }} size: {{ item.size }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | any}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon="" ripple="" @click.native="info(item.name)"> <v-btn icon="" ripple="" @click.native="info(item.name)">
@ -266,7 +298,7 @@ const Files=Vue.extend({
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title> <v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified }} size: {{ item.size }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon="" ripple=""> <v-btn icon="" ripple="">
@ -278,7 +310,8 @@ const Files=Vue.extend({
</v-list> </v-list>
</v-card> </v-card>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return { return {
crumbs:[], crumbs:[],
@ -325,7 +358,14 @@ const Files=Vue.extend({
}, },
info(){ info(){
alert("info") alert("info")
},
readablizeBytes(v){
return Vue.filter('readablizeBytes')(v)
},
formatDate(v){
return Vue.filter('formatDate')(v)
} }
}, },
computed: { computed: {
url: { url: {
@ -347,8 +387,7 @@ const Files=Vue.extend({
} }
); );
const Home=Vue.extend({ const Home=Vue.extend({template:`
template: `
<v-layout class="ma-5"> <v-layout class="ma-5">
<v-flex xs4=""> <v-flex xs4="">
<v-card hover="" raised=""> <v-card hover="" raised="">
@ -373,11 +412,12 @@ const Home=Vue.extend({
</v-btn> </v-btn>
<my-component>REPLACED</my-component> <my-component>REPLACED</my-component>
</v-layout> </v-layout>
`} `,
}
); );
const Login=Vue.extend({ const Login=Vue.extend({template:`
template: `
<v-card class="grey lighten-4 elevation-0"> <v-card class="grey lighten-4 elevation-0">
<v-card-row class="green darken-1"> <v-card-row class="green darken-1">
<v-card-title> <v-card-title>
@ -399,7 +439,8 @@ const Login=Vue.extend({
<v-spacer></v-spacer> <v-spacer></v-spacer>
</v-card-row> </v-card-row>
</v-card> </v-card>
`, `,
data () { data () {
return { return {
e1: true, e1: true,
@ -409,14 +450,18 @@ const Login=Vue.extend({
}, },
methods:{ methods:{
go () { go () {
alert("not yet") HTTP.post("login-check",axios_json)
} .then(r=>{
alert("loh")
}).catch(error=> {
alert("err")
})
} }
} }
}
); );
const Options=Vue.extend({ const Options=Vue.extend({template:`
template: `
<v-layout> <v-layout>
<v-flex xs2=""> <v-flex xs2="">
<v-card class="blue darken-4 white--text"> <v-card class="blue darken-4 white--text">
@ -453,7 +498,8 @@ const Options=Vue.extend({
</v-btn> </v-btn>
</v-snackbar> </v-snackbar>
</v-layout> </v-layout>
`, `,
data: function(){ data: function(){
return { return {
snackbar:false snackbar:false
@ -462,8 +508,7 @@ const Options=Vue.extend({
} }
); );
const People=Vue.extend({ const People=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-layout>Look at all the people who work here! <v-layout>Look at all the people who work here!
<v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn> <v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
@ -479,7 +524,8 @@ const People=Vue.extend({
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return {message: 'Hello Vue.js!'} return {message: 'Hello Vue.js!'}
}, },
@ -492,12 +538,12 @@ const People=Vue.extend({
); );
const Search=Vue.extend({ const Search=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-text-field label="Search..." v-model="q"></v-text-field> <v-text-field label="Search..." v-model="q"></v-text-field>
</v-container> </v-container>
`, `,
data: function(){ data: function(){
return { return {
message: 'Hello Vue.js!', message: 'Hello Vue.js!',
@ -510,8 +556,7 @@ const Search=Vue.extend({
} }
); );
const Select=Vue.extend({ const Select=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-card> <v-card>
<v-card-row class="green darken-1"> <v-card-row class="green darken-1">
@ -538,7 +583,8 @@ const Select=Vue.extend({
</v-card-text> </v-card-text>
<v-card> <v-card>
</v-card></v-card></v-container> </v-card></v-card></v-container>
`, `,
components: { multiselect: VueMultiselect.Multiselect}, components: { multiselect: VueMultiselect.Multiselect},
data: function(){ data: function(){
return { return {
@ -571,50 +617,70 @@ const Select=Vue.extend({
); );
const Stepper=Vue.extend({ const Stepper=Vue.extend({template:`
template: `
<v-container fluid=""> <v-container fluid="">
<v-stepper v-model="e6" vertical=""> <v-stepper v-model="step" non-linear="">
<v-stepper-step step="1" v-bind:complete="e6 > 1"> <v-stepper-header>
Select an image location <v-stepper-step step="1" :complete="step > 1">Select image location</v-stepper-step>
<small>http or server file</small> <v-divider></v-divider>
</v-stepper-step> <v-stepper-step step="2" :complete="step > 2">Set thumbnail details</v-stepper-step>
<v-stepper-content step="1"> <v-divider></v-divider>
<v-stepper-step step="3">Result</v-stepper-step>
</v-stepper-header>
<v-stepper-content step="1" non-linear="">
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px"> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
url <v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required=""></v-text-field>
</v-card> </v-card>
<v-btn primary="" @click.native="e6 = 2">Continue</v-btn> <v-btn primary="" @click.native="step = 2">Next</v-btn>
<v-btn flat="">Cancel</v-btn>
</v-stepper-content> </v-stepper-content>
<v-stepper-step step="2" v-bind:complete="e6 > 2">Configure analytics for this app</v-stepper-step>
<v-stepper-content step="2"> <v-stepper-content step="2" non-linear="">
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px"> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
<v-btn primary="" @click.native="e6 = 3">Continue</v-btn> <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true" v-on:change-content="onChange"></vue-ace>
<v-btn flat="" @click.native="e6 -= 1">Back</v-btn> </v-card>
</v-card></v-stepper-content>
<v-stepper-step step="3">Select an ad format and name ad unit</v-stepper-step> <v-btn flat="" @click.native="step -= 1">Back</v-btn>
<v-stepper-content step="3"> <v-btn primary="" @click.native="step = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3" non-linear="">
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px"> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
<v-btn primary="" @click.native="e6 = 4">Continue</v-btn> output todo
<v-btn flat="" @click.native="e6 -= 1">Back</v-btn> </v-card>
</v-card></v-stepper-content>
<v-stepper-step step="4">View setup instructions</v-stepper-step> <v-btn flat="" @click.native="step -= 1">Back</v-btn>
<v-stepper-content step="4"> <v-btn primary="" @click.native="go()">go</v-btn>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px"> </v-stepper-content>
<v-btn primary="" @click.native="e6 = 1">Continue</v-btn>
<v-btn flat="" @click.native="e6 -= 1">Back</v-btn>
</v-card></v-stepper-content>
</v-stepper> </v-stepper>
</v-container> </v-container>
`, `,
data: function(){
return {e6: 0} data(){
return {
image:"http://images.metmuseum.org/CRDImages/ep/original/DT46.jpg",
step: 0,
taskxml:"<task></task>"
} }
},
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({ const Tabs=Vue.extend({template:`
template: `
<v-tabs id="mobile-tabs-6" scroll-bars="" light=""> <v-tabs id="mobile-tabs-6" scroll-bars="" light="">
<v-card class="primary white--text"> <v-card class="primary white--text">
<v-card-text> <v-card-text>
@ -647,7 +713,8 @@ const Tabs=Vue.extend({
</v-card> </v-card>
</v-tabs-content> </v-tabs-content>
</v-tabs> </v-tabs>
`, `,
data () { data () {
return { 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.' 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 ----------------------- // base -----------------------
localforage.config({
name: 'vuepoc'
});
const HTTP = axios.create({ const HTTP = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -666,12 +736,29 @@ const HTTP = axios.create({
}); });
const axios_json={ headers: {accept: 'application/json'}}; 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) { Vue.config.errorHandler = function (err, vm, info) {
// handle error // handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook // `info` is a Vue-specific error info, e.g. which lifecycle hook
console.error(err, vm, info); console.error(err, vm, info);
alert("vue error"); alert("vue error");
}; };
Vue.component('my-component', { Vue.component('my-component', {
template: '<div>A custom <v-chip>component!</v-chip></div>', template: '<div>A custom <v-chip>component!</v-chip></div>',
created:function(){ created:function(){
@ -691,7 +778,7 @@ const router = new VueRouter({
{ path: '/options', component: Options,meta:{title:"Options"} }, { path: '/options', component: Options,meta:{title:"Options"} },
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/select', component: Select,meta:{title:"Select"} },
{ path: '/search', component: Search,meta:{title:"Search"} }, { 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: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} }, { 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"; 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); Vue.use(Vuetify);
const app = new Vue({ const app = new Vue({
router, router,
data:function(){return { data:function(){return {
q:"", q:"",
user:{}, status:{},
drawer:true, drawer:true,
title:"my title", title:"my title2",
mini: false, mini: false,
items: [{ items: [{
href: '/', href: '/',
@ -769,5 +873,17 @@ const app = new Vue({
search(){ search(){
this.$router.push({path: 'search',query: { q: this.q }}) 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'); }).$mount('#app');

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

@ -9,7 +9,7 @@
<title>Vue Router Test</title> <title>Vue Router Test</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/vuetify@0.12.2/dist/vuetify.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vuetify@0.12.6/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"> <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@ -19,7 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="https://unpkg.com/vuetify@0.12.2/dist/vuetify.min.js"></script> <script src="https://unpkg.com/vuetify@0.12.6/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script> <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
@ -28,6 +28,7 @@
<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.5.0/localforage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script> <script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<script src="/vue-poc/ui/vue-ace.js"></script> <script src="/vue-poc/ui/vue-ace.js"></script>
</head> </head>
@ -76,6 +77,7 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Search..." v-model="q" <v-text-field prepend-icon="search" label="Search..." v-model="q"
hide-details single-line dark @keyup.native.enter="search"></v-text-field> hide-details single-line dark @keyup.native.enter="search"></v-text-field>
{{status.user}}
</v-toolbar> </v-toolbar>
<main> <main>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">

55
src/vue-poc/static/core.js
View file

@ -1,4 +1,7 @@
// base ----------------------- // base -----------------------
localforage.config({
name: 'vuepoc'
});
const HTTP = axios.create({ const HTTP = axios.create({
baseURL: "/vue-poc/api/", baseURL: "/vue-poc/api/",
headers: { headers: {
@ -8,12 +11,29 @@ const HTTP = axios.create({
}); });
const axios_json={ headers: {accept: 'application/json'}}; 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) { Vue.config.errorHandler = function (err, vm, info) {
// handle error // handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook // `info` is a Vue-specific error info, e.g. which lifecycle hook
console.error(err, vm, info); console.error(err, vm, info);
alert("vue error"); alert("vue error");
}; };
Vue.component('my-component', { Vue.component('my-component', {
template: '<div>A custom <v-chip>component!</v-chip></div>', template: '<div>A custom <v-chip>component!</v-chip></div>',
created:function(){ created:function(){
@ -33,7 +53,7 @@ const router = new VueRouter({
{ path: '/options', component: Options,meta:{title:"Options"} }, { path: '/options', component: Options,meta:{title:"Options"} },
{ path: '/select', component: Select,meta:{title:"Select"} }, { path: '/select', component: Select,meta:{title:"Select"} },
{ path: '/search', component: Search,meta:{title:"Search"} }, { 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: '/login', component: Login,meta:{title:"login"} },
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} },
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} }, { 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"; 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); Vue.use(Vuetify);
const app = new Vue({ const app = new Vue({
router, router,
data:function(){return { data:function(){return {
q:"", q:"",
user:{}, status:{},
drawer:true, drawer:true,
title:"my title", title:"my title2",
mini: false, mini: false,
items: [{ items: [{
href: '/', href: '/',
@ -111,5 +148,17 @@ const app = new Vue({
search(){ search(){
this.$router.push({path: 'search',query: { q: this.q }}) 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'); }).$mount('#app');

20
src/vue-poc/static/vue-ace.js
View file

@ -2,7 +2,13 @@
//https://jsfiddle.net/bc_rikko/gbpw2q9x/3/ //https://jsfiddle.net/bc_rikko/gbpw2q9x/3/
Vue.component('vue-ace', { Vue.component('vue-ace', {
template: '<div :id="editorId" style="width: 100%; height: 100%;"></div>', template: '<div :id="editorId" style="width: 100%; height: 100%;"></div>',
props: ['editorId', 'content', 'mode', 'theme','wrap','readOnly'], props: ['editorId',
'content',
'mode',
'theme',
'wrap',
'readOnly'
],
data () { data () {
return { return {
editor: Object, editor: Object,
@ -45,6 +51,12 @@ Vue.component('vue-ace', {
const mode = this.mode || 'text' const mode = this.mode || 'text'
const theme = this.theme || 'github' const theme = this.theme || 'github'
const wrap = this.wrap || false const wrap = this.wrap || false
const aceSettings={
snippets:true,
basicAutocompletion:true,
liveAutocompletion:true}
const readOnly = this.readOnly || false const readOnly = this.readOnly || false
ace.config.set("workerPath", "/vue-poc/ui/ace-workers") ace.config.set("workerPath", "/vue-poc/ui/ace-workers")
this.editor = window.ace.edit(this.editorId) this.editor = window.ace.edit(this.editorId)
@ -58,9 +70,9 @@ Vue.component('vue-ace', {
session.setUseWrapMode(wrap) session.setUseWrapMode(wrap)
this.editor.setTheme(`ace/theme/${theme}`) this.editor.setTheme(`ace/theme/${theme}`)
this.editor.setOptions({ readOnly:this.readOnly, this.editor.setOptions({ readOnly:this.readOnly,
enableSnippets : true, enableSnippets : aceSettings.snippets,
enableBasicAutocompletion : true, enableBasicAutocompletion : aceSettings.basicAutocompletion,
enableLiveAutocompletion : true enableLiveAutocompletion : aceSettings.liveAutocompletion
}); });
this.editor.commands.addCommand({ this.editor.commands.addCommand({
name: "showKeyboardShortcuts", name: "showKeyboardShortcuts",

86
src/vue-poc/templates/edit.vue
View file

@ -5,60 +5,91 @@
<v-flex xs12> <v-flex xs12>
<v-toolbar class="green"> <v-toolbar class="green">
<v-toolbar-title> <v-toolbar-title>
<v-btn @click.native="showfiles()" small icon><v-icon>folder</v-icon></v-btn> <v-btn @click.native="showfiles()" small icon v-tooltip:top="{ html: path.join('/') }">
<span >{{ name }}</span> <v-chip small class="primary white--text">{{ mode }}</v-chip> <v-icon>folder</v-icon></v-btn>
{{dirty}} <span >{{ name }}</span>
<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 small class="primary white--text">{{ mode }}</v-chip>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items> <v-toolbar-items>
<v-chip @click.native="acecmd('goToNextError')"
v-tooltip:right="{ html: 'Annotations: Errors,Warning and Info' }"
>
<v-avatar>
<v-icon right >navigate_next</v-icon>
</v-avatar>
<v-avatar class="red " small>{{annotations && annotations.error}}</v-avatar>
<v-avatar class="yellow ">{{annotations && annotations.warning}}</v-avatar>
<v-avatar class="green ">{{annotations && annotations.info}}</v-avatar>
</v-chip>
<v-btn dark icon @click.native="acecmd('outline')"> <v-btn dark icon @click.native="acecmd('outline')">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="acecmd('goToPreviousError')" >
<v-icon>navigate_before</v-icon>
</v-btn>
<v-btn dark icon @click.native="acecmd('goToNextError')">
<v-icon>navigate_next</v-icon>
</v-btn>
<v-btn dark icon @click.native="acecmd('foldall')"> <v-btn dark icon @click.native="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="acecmd('showSettingsMenu')">
<v-icon>settings</v-icon> <v-btn dark icon @click.native="wrap=!wrap">
</v-btn>
<v-btn dark icon @click.native="wrap=!wrap">
<v-icon>wrap_text</v-icon> <v-icon>wrap_text</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="acecmd('showKeyboardShortcuts')">
<v-icon>keyboard</v-icon>
</v-btn>
<v-btn dark icon @click.native="save()"> <v-btn dark icon @click.native="save()">
<v-icon>file_upload</v-icon> <v-icon>file_upload</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="beautify()"> <v-btn dark icon @click.native="beautify()">
<v-icon>format_align_center</v-icon> <v-icon>format_align_center</v-icon>
</v-btn> </v-btn>
<v-btn dark icon @click.native="clearDialog = true"> <v-btn dark icon @click.native="clearDialog = true">
<v-icon>delete</v-icon> <v-icon>delete</v-icon>
</v-btn> </v-btn>
<v-menu bottom origin="top right" transition="v-scale-transition"> <v-menu left transition="v-fade-transition">
<v-btn dark icon slot="activator">
<v-icon>help</v-icon>
</v-btn>
<v-list>
<v-list-item @click="acecmd('showSettingsMenu')">
<v-list-tile avatar >
<v-list-tile-avatar>
<v-icon >settings</v-icon>
</v-list-tile-avatar>
<v-list-tile-title >Show settings</v-list-tile-title>
</v-list-tile>
</v-list-item>
<v-list-item @click="acecmd('showKeyboardShortcuts')">
<v-list-tile avatar>
<v-list-tile-avatar>
<v-icon >keyboard</v-icon>
</v-list-tile-avatar>
<v-list-tile-title >Show keyboard commands</v-list-tile-title>
</v-list-tile>
</v-list-item>
</v-list>
</v-menu>
<v-menu left transition="v-fade-transition">
<v-btn dark icon slot="activator"> <v-btn dark icon slot="activator">
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
</v-btn> </v-btn>
<v-list> <v-list>
<v-list-item> <v-list-item @click="fetch('/vue-poc/vue-poc.xqm')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/vue-poc.xqm')">load xquery</v-list-tile-title> <v-list-tile-title >load xquery</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">load xml</v-list-tile-title> <v-list-tile-title >load xml</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
<v-list-tile> <v-list-tile>
<v-list-tile-title @click="fetch('/vue-poc/static/app.js')">load js</v-list-tile-title> <v-list-tile-title >load js</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
@ -99,10 +130,11 @@ v-on:annotation="annotation"></vue-ace>
</template> </template>
<script>{ <script>{
template: '#edit',
data () { data () {
return { return {
contentA: 'declare function local:query($q as xs:string)\n { \n <json type="object" > }', contentA: `declare function local:query($q as xs:string)
{ <json type="object"/>
};`,
mode:'xquery', mode:'xquery',
url:'', url:'',
name:'', name:'',
@ -117,7 +149,8 @@ v-on:annotation="annotation"></vue-ace>
"application/xml":"xml", "application/xml":"xml",
"application/xquery":"xquery", "application/xquery":"xquery",
"text/ecmascript":"javascript", "text/ecmascript":"javascript",
"text/html":"html" "text/html":"html",
"text/css":"css"
} }
} }
}, },
@ -192,6 +225,7 @@ v-on:annotation="annotation"></vue-ace>
}, },
annotation(counts){ annotation(counts){
this.annotations=counts this.annotations=counts
console.log("annotations: ",counts)
}, },
acetype(mime){ acetype(mime){
var r=this.mimemap[mime] var r=this.mimemap[mime]

12
src/vue-poc/templates/files.vue
View file

@ -30,7 +30,7 @@
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content @click="folder(item.name)"> <v-list-tile-content @click="folder(item.name)">
<v-list-tile-title>{{ item.name }}</v-list-tile-title> <v-list-tile-title>{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified }} size: {{ item.size }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | any}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon ripple @click.native="info(item.name)"> <v-btn icon ripple @click.native="info(item.name)">
@ -48,7 +48,7 @@
</v-list-tile-avatar> </v-list-tile-avatar>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title> <v-list-tile-title @click="file(item.name)">{{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title>modified: {{ item.modified }} size: {{ item.size }}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ formatDate(item.modified) }} size: {{ readablizeBytes(item.size) }}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon ripple> <v-btn icon ripple>
@ -63,7 +63,6 @@
</template> </template>
<script>{ <script>{
template: '#files',
data: function(){ data: function(){
return { return {
crumbs:[], crumbs:[],
@ -110,7 +109,14 @@
}, },
info(){ info(){
alert("info") alert("info")
},
readablizeBytes(v){
return Vue.filter('readablizeBytes')(v)
},
formatDate(v){
return Vue.filter('formatDate')(v)
} }
}, },
computed: { computed: {
url: { url: {

2
src/vue-poc/templates/home.vue
View file

@ -26,5 +26,5 @@
</v-layout> </v-layout>
</template> </template>
<script>{ <script>{
template: '#home'} }
</script> </script>

10
src/vue-poc/templates/login.vue
View file

@ -39,7 +39,6 @@
</template> </template>
<script>{ <script>{
template: '#login',
data () { data () {
return { return {
e1: true, e1: true,
@ -49,8 +48,13 @@
}, },
methods:{ methods:{
go () { go () {
alert("not yet") HTTP.post("login-check",axios_json)
} .then(r=>{
alert("loh")
}).catch(error=> {
alert("err")
})
} }
} }
}
</script> </script>

1
src/vue-poc/templates/options.vue
View file

@ -42,7 +42,6 @@
</template> </template>
<script>{ <script>{
template: '#options',
data: function(){ data: function(){
return { return {
snackbar:false snackbar:false

1
src/vue-poc/templates/people.vue
View file

@ -18,7 +18,6 @@
</template> </template>
<script>{ <script>{
template: '#people',
data: function(){ data: function(){
return {message: 'Hello Vue.js!'} return {message: 'Hello Vue.js!'}
}, },

1
src/vue-poc/templates/search.vue
View file

@ -6,7 +6,6 @@
</template> </template>
<script>{ <script>{
template: '#search',
data: function(){ data: function(){
return { return {
message: 'Hello Vue.js!', message: 'Hello Vue.js!',

1
src/vue-poc/templates/select.vue
View file

@ -31,7 +31,6 @@
</template> </template>
<script>{ <script>{
template: '#select',
components: { multiselect: VueMultiselect.Multiselect}, components: { multiselect: VueMultiselect.Multiselect},
data: function(){ data: function(){
return { return {

84
src/vue-poc/templates/stepper.vue
View file

@ -1,44 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="stepper"> <template id="stepper">
<v-container fluid> <v-container fluid>
<v-stepper v-model="e6" vertical> <v-stepper v-model="step" non-linear>
<v-stepper-step step="1" v-bind:complete="e6 > 1"> <v-stepper-header>
Select an image location <v-stepper-step step="1" :complete="step > 1">Select image location</v-stepper-step>
<small>http or server file</small> <v-divider></v-divider>
</v-stepper-step> <v-stepper-step step="2" :complete="step > 2">Set thumbnail details</v-stepper-step>
<v-stepper-content step="1"> <v-divider></v-divider>
<v-stepper-step step="3">Result</v-stepper-step>
</v-stepper-header>
<v-stepper-content step="1" non-linear>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" > <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
url <v-text-field
name="url"
label="Image Url"
hint="http:...??"
v-model="image"
required
></v-text-field>
</v-card> </v-card>
<v-btn primary @click.native="e6 = 2">Continue</v-btn> <v-btn primary @click.native="step = 2">Next</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content> </v-stepper-content>
<v-stepper-step step="2" v-bind:complete="e6 > 2">Configure analytics for this app</v-stepper-step>
<v-stepper-content step="2"> <v-stepper-content step="2" non-linear>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" /> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
<v-btn primary @click.native="e6 = 3">Continue</v-btn> <vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true"
<v-btn flat @click.native="e6 -= 1">Back</v-btn> v-on:change-content="onChange"
></vue-ace>
</v-card>
<v-btn flat @click.native="step -= 1">Back</v-btn>
<v-btn primary @click.native="step = 3">Next</v-btn>
</v-stepper-content> </v-stepper-content>
<v-stepper-step step="3">Select an ad format and name ad unit</v-stepper-step>
<v-stepper-content step="3"> <v-stepper-content step="3" non-linear>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" /> <v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
<v-btn primary @click.native="e6 = 4">Continue</v-btn> output todo
<v-btn flat @click.native="e6 -= 1">Back</v-btn> </v-card>
</v-stepper-content>
<v-stepper-step step="4">View setup instructions</v-stepper-step> <v-btn flat @click.native="step -= 1">Back</v-btn>
<v-stepper-content step="4"> <v-btn primary @click.native="go()">go</v-btn>
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" />
<v-btn primary @click.native="e6 = 1">Continue</v-btn>
<v-btn flat @click.native="e6 -= 1">Back</v-btn>
</v-stepper-content> </v-stepper-content>
</v-stepper> </v-stepper>
</v-container> </v-container>
</template> </template>
<script>{ <script>{
template: '#stepper', data(){
data: function(){ return {
return {e6: 0} image:"http://images.metmuseum.org/CRDImages/ep/original/DT46.jpg",
step: 0,
taskxml:"<task></task>"
} }
},
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);
})
}
}
} }
</script> </script>

1
src/vue-poc/templates/tabs.vue
View file

@ -43,7 +43,6 @@
</template> </template>
<script>{ <script>{
template: '#tabs',
data () { data () {
return { 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.' 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.'

37
src/vue-poc/vue-api2.xqm
View file

@ -30,6 +30,43 @@ function vue-api:test-select($q )
</items> </items>
</json> </json>
}; };
(:~
: get status
:)
declare
%rest:GET %rest:path("/vue-poc/api/status")
%rest:produces("application/json")
%output:method("json")
function vue-api:status( )
{
let $user:=user:current()
let $detail:=user:list-details($user)
return <json type="object" >
<user>{$user}</user>
<permission>{$detail/@permission/string()}</permission>
</json>
};
(:~
: do a thumbnail
:)
declare
%rest:POST %rest:path("/vue-poc/api/thumbnail")
%rest:form-param("url", "{$url}")
%rest:form-param("task", "{$task}")
%rest:produces("application/json")
%output:method("json")
function vue-api:thumbnail($url,$task )
{
let $x:=fn:parse-xml($task)=>fn:trace("task: ")
return <json type="object" >
<items type="array">
{(1 to 100)!(<_>A{.}</_>)}
</items>
</json>
};
(:~ (:~
: Returns wadl. : Returns wadl.
:) :)

7
tools/compile.xq
View file

@ -24,10 +24,9 @@ let $id := Element:getAttribute($tempNode,"id")
let $name:=functx:capitalize-first($id)=>trace("ID") let $name:=functx:capitalize-first($id)=>trace("ID")
let $script:= html5:getElementFirstByTagName($doc,"script") let $script:= html5:getElementFirstByTagName($doc,"script")
let $tempfix:=replace($template,"\$","\\\$") let $script:= Node:getInnerHTML($script)=>substring-after("{")
let $s:= Node:getInnerHTML($script)=>replace('[''"]#' || $id || '[''"]','`' ||$tempfix ||'`') let $js:= ``[const `{$name}`=Vue.extend({template:` `{$template}` `,
`{$script}`
let $js:= ``[const `{$name}`=Vue.extend(`{$s}`
); );
]`` ]``
return if(empty($id)) then () else $js return if(empty($id)) then () else $js

8
tools/html5parse.xqm
View file

@ -46,3 +46,11 @@ declare function html5:selector()
=>Selector:attrValEq("type", "text/x-template") =>Selector:attrValEq("type", "text/x-template")
=>Selector:toMatcher() =>Selector:toMatcher()
}; };
(:~
:write file
:)
declare function html5:write-text($text as xs:string,$file as xs:string)
{
file:write-text($file,$text)
};