improve compile
This commit is contained in:
parent
ee22286a95
commit
18b2d52841
19 changed files with 561 additions and 182 deletions
|
|
@ -1,15 +1,18 @@
|
|||
<package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
|
||||
abbrev="vue-poc" version="0.0.2" spec="1.0">
|
||||
<title>vue-poc test of vue.js.</title>
|
||||
<dependency name="ace" version="1.2.6" />
|
||||
<dependency name="vuetify" version="0.12.2" />
|
||||
<dependency name="vue" version="2.3.3" />
|
||||
<dependency name="vue-router" version="2.5.3" />
|
||||
<dependency name="google-material" version="0.0.0" />
|
||||
<dependency name="js-beautify" version="1.6.12" />
|
||||
<dependency name="axios" version="0.16.1" />
|
||||
<dependency name="qs" version="6.4.0" />
|
||||
<dependency name="vue-multiselect" version="2.0.0-beta.14" />
|
||||
<dependency name="lodash" version="4.13.1" />
|
||||
<dependency name="localforage" version="1.5.0" />
|
||||
<dependency name="ace" version="1.2.6" />
|
||||
<dependency name="vuetify" version="0.12.5" />
|
||||
<dependency name="vue" version="2.3.3" />
|
||||
<dependency name="vue-router" version="2.5.3" />
|
||||
<dependency name="google-material" version="0.0.0" />
|
||||
<dependency name="js-beautify" version="1.6.12" />
|
||||
<dependency name="axios" version="0.16.1" />
|
||||
<dependency name="qs" version="6.4.0" />
|
||||
<dependency name="vue-multiselect" version="2.0.0-beta.14" />
|
||||
<dependency name="lodash" version="4.13.1" />
|
||||
<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>
|
||||
|
|
|
|||
86
src/vue-poc/login.xqm
Normal file
86
src/vue-poc/login.xqm
Normal 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 })
|
||||
};
|
||||
|
|
@ -1,65 +1,93 @@
|
|||
// generated 2017-06-01T12:41:01.376+01:00
|
||||
const Edit=Vue.extend({
|
||||
template: `
|
||||
// generated 2017-06-04T17:31:45.572+01:00
|
||||
const Edit=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-layout row="" wrap="">
|
||||
<v-flex xs12="">
|
||||
<v-toolbar class="green">
|
||||
<v-toolbar-title>
|
||||
<v-btn @click.native="showfiles()" small="" icon=""><v-icon>folder</v-icon></v-btn>
|
||||
<span>{{ name }}</span> <v-chip small="" class="primary white--text">{{ mode }}</v-chip>
|
||||
{{dirty}}
|
||||
<v-btn @click.native="showfiles()" small="" icon="" v-tooltip:top="{ html: path.join('/') }">
|
||||
<v-icon>folder</v-icon></v-btn>
|
||||
<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-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-icon>star</v-icon>
|
||||
</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-icon>vertical_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark="" icon="" @click.native="acecmd('showSettingsMenu')">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark="" icon="" @click.native="wrap=!wrap">
|
||||
|
||||
<v-btn dark="" icon="" @click.native="wrap=!wrap">
|
||||
<v-icon>wrap_text</v-icon>
|
||||
</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-icon>file_upload</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark="" icon="" @click.native="beautify()">
|
||||
<v-icon>format_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark="" icon="" @click.native="clearDialog = true">
|
||||
<v-icon>delete</v-icon>
|
||||
</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-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/vue-poc.xqm')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
|
|
@ -95,10 +123,13 @@
|
|||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
`,
|
||||
`,
|
||||
|
||||
data () {
|
||||
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',
|
||||
url:'',
|
||||
name:'',
|
||||
|
|
@ -113,7 +144,8 @@
|
|||
"application/xml":"xml",
|
||||
"application/xquery":"xquery",
|
||||
"text/ecmascript":"javascript",
|
||||
"text/html":"html"
|
||||
"text/html":"html",
|
||||
"text/css":"css"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -188,6 +220,7 @@
|
|||
},
|
||||
annotation(counts){
|
||||
this.annotations=counts
|
||||
console.log("annotations: ",counts)
|
||||
},
|
||||
acetype(mime){
|
||||
var r=this.mimemap[mime]
|
||||
|
|
@ -217,8 +250,7 @@
|
|||
}
|
||||
|
||||
);
|
||||
const Files=Vue.extend({
|
||||
template: `
|
||||
const Files=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
||||
<v-card>
|
||||
|
|
@ -248,7 +280,7 @@ const Files=Vue.extend({
|
|||
</v-list-tile-avatar>
|
||||
<v-list-tile-content @click="folder(item.name)">
|
||||
<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-action>
|
||||
<v-btn icon="" ripple="" @click.native="info(item.name)">
|
||||
|
|
@ -266,7 +298,7 @@ const Files=Vue.extend({
|
|||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<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-action>
|
||||
<v-btn icon="" ripple="">
|
||||
|
|
@ -278,7 +310,8 @@ const Files=Vue.extend({
|
|||
</v-list>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
crumbs:[],
|
||||
|
|
@ -325,7 +358,14 @@ const Files=Vue.extend({
|
|||
},
|
||||
info(){
|
||||
alert("info")
|
||||
}
|
||||
},
|
||||
readablizeBytes(v){
|
||||
return Vue.filter('readablizeBytes')(v)
|
||||
},
|
||||
formatDate(v){
|
||||
return Vue.filter('formatDate')(v)
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
|
|
@ -347,8 +387,7 @@ const Files=Vue.extend({
|
|||
}
|
||||
|
||||
);
|
||||
const Home=Vue.extend({
|
||||
template: `
|
||||
const Home=Vue.extend({template:`
|
||||
<v-layout class="ma-5">
|
||||
<v-flex xs4="">
|
||||
<v-card hover="" raised="">
|
||||
|
|
@ -373,11 +412,12 @@ const Home=Vue.extend({
|
|||
</v-btn>
|
||||
<my-component>REPLACED</my-component>
|
||||
</v-layout>
|
||||
`}
|
||||
`,
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
const Login=Vue.extend({
|
||||
template: `
|
||||
const Login=Vue.extend({template:`
|
||||
<v-card class="grey lighten-4 elevation-0">
|
||||
<v-card-row class="green darken-1">
|
||||
<v-card-title>
|
||||
|
|
@ -399,7 +439,8 @@ const Login=Vue.extend({
|
|||
<v-spacer></v-spacer>
|
||||
</v-card-row>
|
||||
</v-card>
|
||||
`,
|
||||
`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
e1: true,
|
||||
|
|
@ -409,14 +450,18 @@ const Login=Vue.extend({
|
|||
},
|
||||
methods:{
|
||||
go () {
|
||||
alert("not yet")
|
||||
}
|
||||
HTTP.post("login-check",axios_json)
|
||||
.then(r=>{
|
||||
alert("loh")
|
||||
}).catch(error=> {
|
||||
alert("err")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
const Options=Vue.extend({
|
||||
template: `
|
||||
const Options=Vue.extend({template:`
|
||||
<v-layout>
|
||||
<v-flex xs2="">
|
||||
<v-card class="blue darken-4 white--text">
|
||||
|
|
@ -453,7 +498,8 @@ const Options=Vue.extend({
|
|||
</v-btn>
|
||||
</v-snackbar>
|
||||
</v-layout>
|
||||
`,
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
snackbar:false
|
||||
|
|
@ -462,8 +508,7 @@ const Options=Vue.extend({
|
|||
}
|
||||
|
||||
);
|
||||
const People=Vue.extend({
|
||||
template: `
|
||||
const People=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-layout>Look at all the people who work here!
|
||||
<v-btn light="" default="" v-on:click.native="reverseMessage">Reverse Message</v-btn>
|
||||
|
|
@ -479,7 +524,8 @@ const People=Vue.extend({
|
|||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
`,
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {message: 'Hello Vue.js!'}
|
||||
},
|
||||
|
|
@ -492,12 +538,12 @@ const People=Vue.extend({
|
|||
|
||||
|
||||
);
|
||||
const Search=Vue.extend({
|
||||
template: `
|
||||
const Search=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-text-field label="Search..." v-model="q"></v-text-field>
|
||||
</v-container>
|
||||
`,
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
message: 'Hello Vue.js!',
|
||||
|
|
@ -510,8 +556,7 @@ const Search=Vue.extend({
|
|||
}
|
||||
|
||||
);
|
||||
const Select=Vue.extend({
|
||||
template: `
|
||||
const Select=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-card-row class="green darken-1">
|
||||
|
|
@ -538,7 +583,8 @@ const Select=Vue.extend({
|
|||
</v-card-text>
|
||||
<v-card>
|
||||
</v-card></v-card></v-container>
|
||||
`,
|
||||
`,
|
||||
|
||||
components: { multiselect: VueMultiselect.Multiselect},
|
||||
data: function(){
|
||||
return {
|
||||
|
|
@ -571,50 +617,70 @@ const Select=Vue.extend({
|
|||
|
||||
|
||||
);
|
||||
const Stepper=Vue.extend({
|
||||
template: `
|
||||
const Stepper=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-stepper v-model="e6" vertical="">
|
||||
<v-stepper-step step="1" v-bind:complete="e6 > 1">
|
||||
Select an image location
|
||||
<small>http or server file</small>
|
||||
</v-stepper-step>
|
||||
<v-stepper-content step="1">
|
||||
<v-stepper v-model="step" non-linear="">
|
||||
<v-stepper-header>
|
||||
<v-stepper-step step="1" :complete="step > 1">Select image location</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step step="2" :complete="step > 2">Set thumbnail details</v-stepper-step>
|
||||
<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">
|
||||
url
|
||||
<v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required=""></v-text-field>
|
||||
</v-card>
|
||||
<v-btn primary="" @click.native="e6 = 2">Continue</v-btn>
|
||||
<v-btn flat="">Cancel</v-btn>
|
||||
<v-btn primary="" @click.native="step = 2">Next</v-btn>
|
||||
</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-btn primary="" @click.native="e6 = 3">Continue</v-btn>
|
||||
<v-btn flat="" @click.native="e6 -= 1">Back</v-btn>
|
||||
</v-card></v-stepper-content>
|
||||
<v-stepper-step step="3">Select an ad format and name ad unit</v-stepper-step>
|
||||
<v-stepper-content step="3">
|
||||
<vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true" 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 step="3" non-linear="">
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
|
||||
<v-btn primary="" @click.native="e6 = 4">Continue</v-btn>
|
||||
<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-stepper-content step="4">
|
||||
<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-card></v-stepper-content>
|
||||
output todo
|
||||
</v-card>
|
||||
|
||||
<v-btn flat="" @click.native="step -= 1">Back</v-btn>
|
||||
<v-btn primary="" @click.native="go()">go</v-btn>
|
||||
</v-stepper-content>
|
||||
</v-stepper>
|
||||
</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({
|
||||
template: `
|
||||
const Tabs=Vue.extend({template:`
|
||||
<v-tabs id="mobile-tabs-6" scroll-bars="" light="">
|
||||
<v-card class="primary white--text">
|
||||
<v-card-text>
|
||||
|
|
@ -647,7 +713,8 @@ const Tabs=Vue.extend({
|
|||
</v-card>
|
||||
</v-tabs-content>
|
||||
</v-tabs>
|
||||
`,
|
||||
`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
|
||||
|
|
@ -657,6 +724,9 @@ const Tabs=Vue.extend({
|
|||
|
||||
);
|
||||
// base -----------------------
|
||||
localforage.config({
|
||||
name: 'vuepoc'
|
||||
});
|
||||
const HTTP = axios.create({
|
||||
baseURL: "/vue-poc/api/",
|
||||
headers: {
|
||||
|
|
@ -666,12 +736,29 @@ const HTTP = axios.create({
|
|||
});
|
||||
const axios_json={ headers: {accept: 'application/json'}};
|
||||
|
||||
//Define the date time format filter
|
||||
Vue.filter("formatDate", function(date) {
|
||||
return moment(date).format("MMMM D, YYYY")
|
||||
});
|
||||
Vue.filter('readablizeBytes', function (bytes,decimals) {
|
||||
if(bytes == 0) return '0 Bytes';
|
||||
var k = 1000,
|
||||
dm = decimals || 2,
|
||||
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
});
|
||||
Vue.filter("any", function(any) {
|
||||
return "ANY"
|
||||
});
|
||||
|
||||
Vue.config.errorHandler = function (err, vm, info) {
|
||||
// handle error
|
||||
// `info` is a Vue-specific error info, e.g. which lifecycle hook
|
||||
console.error(err, vm, info);
|
||||
alert("vue error");
|
||||
};
|
||||
|
||||
Vue.component('my-component', {
|
||||
template: '<div>A custom <v-chip>component!</v-chip></div>',
|
||||
created:function(){
|
||||
|
|
@ -691,7 +778,7 @@ const router = new VueRouter({
|
|||
{ path: '/options', component: Options,meta:{title:"Options"} },
|
||||
{ path: '/select', component: Select,meta:{title:"Select"} },
|
||||
{ path: '/search', component: Search,meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
{ path: '/login', component: Login,meta:{title:"login"} },
|
||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
||||
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} },
|
||||
|
|
@ -702,14 +789,31 @@ router.afterEach(function(route) {
|
|||
document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc";
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
// this route requires auth, check if logged in
|
||||
// if not, redirect to login page.
|
||||
if (true) {
|
||||
next({
|
||||
path: '/login',
|
||||
query: { redirect: to.fullPath }
|
||||
})
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
} else {
|
||||
next() // make sure to always call next()!
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(Vuetify);
|
||||
const app = new Vue({
|
||||
router,
|
||||
data:function(){return {
|
||||
q:"",
|
||||
user:{},
|
||||
status:{},
|
||||
drawer:true,
|
||||
title:"my title",
|
||||
title:"my title2",
|
||||
mini: false,
|
||||
items: [{
|
||||
href: '/',
|
||||
|
|
@ -769,5 +873,17 @@ const app = new Vue({
|
|||
search(){
|
||||
this.$router.push({path: 'search',query: { q: this.q }})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
HTTP.get("status")
|
||||
.then(r=>{
|
||||
console.log("status",r)
|
||||
this.status=r.data
|
||||
})
|
||||
},
|
||||
beforeDestroy(){
|
||||
console.log("destory-----------")
|
||||
|
||||
}
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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/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="/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/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://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://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>
|
||||
|
|
@ -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-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/moment.js/2.18.1/moment.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
|
||||
<script src="/vue-poc/ui/vue-ace.js"></script>
|
||||
</head>
|
||||
|
|
@ -76,6 +77,7 @@
|
|||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q"
|
||||
hide-details single-line dark @keyup.native.enter="search"></v-text-field>
|
||||
{{status.user}}
|
||||
</v-toolbar>
|
||||
<main>
|
||||
<transition name="fade" mode="out-in">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
// base -----------------------
|
||||
localforage.config({
|
||||
name: 'vuepoc'
|
||||
});
|
||||
const HTTP = axios.create({
|
||||
baseURL: "/vue-poc/api/",
|
||||
headers: {
|
||||
|
|
@ -8,12 +11,29 @@ const HTTP = axios.create({
|
|||
});
|
||||
const axios_json={ headers: {accept: 'application/json'}};
|
||||
|
||||
//Define the date time format filter
|
||||
Vue.filter("formatDate", function(date) {
|
||||
return moment(date).format("MMMM D, YYYY")
|
||||
});
|
||||
Vue.filter('readablizeBytes', function (bytes,decimals) {
|
||||
if(bytes == 0) return '0 Bytes';
|
||||
var k = 1000,
|
||||
dm = decimals || 2,
|
||||
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
});
|
||||
Vue.filter("any", function(any) {
|
||||
return "ANY"
|
||||
});
|
||||
|
||||
Vue.config.errorHandler = function (err, vm, info) {
|
||||
// handle error
|
||||
// `info` is a Vue-specific error info, e.g. which lifecycle hook
|
||||
console.error(err, vm, info);
|
||||
alert("vue error");
|
||||
};
|
||||
|
||||
Vue.component('my-component', {
|
||||
template: '<div>A custom <v-chip>component!</v-chip></div>',
|
||||
created:function(){
|
||||
|
|
@ -33,7 +53,7 @@ const router = new VueRouter({
|
|||
{ path: '/options', component: Options,meta:{title:"Options"} },
|
||||
{ path: '/select', component: Select,meta:{title:"Select"} },
|
||||
{ path: '/search', component: Search,meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
{ path: '/login', component: Login,meta:{title:"login"} },
|
||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
||||
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} },
|
||||
|
|
@ -44,14 +64,31 @@ router.afterEach(function(route) {
|
|||
document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc";
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
// this route requires auth, check if logged in
|
||||
// if not, redirect to login page.
|
||||
if (true) {
|
||||
next({
|
||||
path: '/login',
|
||||
query: { redirect: to.fullPath }
|
||||
})
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
} else {
|
||||
next() // make sure to always call next()!
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(Vuetify);
|
||||
const app = new Vue({
|
||||
router,
|
||||
data:function(){return {
|
||||
q:"",
|
||||
user:{},
|
||||
status:{},
|
||||
drawer:true,
|
||||
title:"my title",
|
||||
title:"my title2",
|
||||
mini: false,
|
||||
items: [{
|
||||
href: '/',
|
||||
|
|
@ -111,5 +148,17 @@ const app = new Vue({
|
|||
search(){
|
||||
this.$router.push({path: 'search',query: { q: this.q }})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
HTTP.get("status")
|
||||
.then(r=>{
|
||||
console.log("status",r)
|
||||
this.status=r.data
|
||||
})
|
||||
},
|
||||
beforeDestroy(){
|
||||
console.log("destory-----------")
|
||||
|
||||
}
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
//https://jsfiddle.net/bc_rikko/gbpw2q9x/3/
|
||||
Vue.component('vue-ace', {
|
||||
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 () {
|
||||
return {
|
||||
editor: Object,
|
||||
|
|
@ -45,6 +51,12 @@ Vue.component('vue-ace', {
|
|||
const mode = this.mode || 'text'
|
||||
const theme = this.theme || 'github'
|
||||
const wrap = this.wrap || false
|
||||
|
||||
const aceSettings={
|
||||
snippets:true,
|
||||
basicAutocompletion:true,
|
||||
liveAutocompletion:true}
|
||||
|
||||
const readOnly = this.readOnly || false
|
||||
ace.config.set("workerPath", "/vue-poc/ui/ace-workers")
|
||||
this.editor = window.ace.edit(this.editorId)
|
||||
|
|
@ -58,9 +70,9 @@ Vue.component('vue-ace', {
|
|||
session.setUseWrapMode(wrap)
|
||||
this.editor.setTheme(`ace/theme/${theme}`)
|
||||
this.editor.setOptions({ readOnly:this.readOnly,
|
||||
enableSnippets : true,
|
||||
enableBasicAutocompletion : true,
|
||||
enableLiveAutocompletion : true
|
||||
enableSnippets : aceSettings.snippets,
|
||||
enableBasicAutocompletion : aceSettings.basicAutocompletion,
|
||||
enableLiveAutocompletion : aceSettings.liveAutocompletion
|
||||
});
|
||||
this.editor.commands.addCommand({
|
||||
name: "showKeyboardShortcuts",
|
||||
|
|
|
|||
|
|
@ -5,60 +5,91 @@
|
|||
<v-flex xs12>
|
||||
<v-toolbar class="green">
|
||||
<v-toolbar-title>
|
||||
<v-btn @click.native="showfiles()" small icon><v-icon>folder</v-icon></v-btn>
|
||||
<span >{{ name }}</span> <v-chip small class="primary white--text">{{ mode }}</v-chip>
|
||||
{{dirty}}
|
||||
<v-btn @click.native="showfiles()" small icon v-tooltip:top="{ html: path.join('/') }">
|
||||
<v-icon>folder</v-icon></v-btn>
|
||||
<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-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-icon>star</v-icon>
|
||||
</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-icon>vertical_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark icon @click.native="acecmd('showSettingsMenu')">
|
||||
<v-icon>settings</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark icon @click.native="wrap=!wrap">
|
||||
|
||||
<v-btn dark icon @click.native="wrap=!wrap">
|
||||
<v-icon>wrap_text</v-icon>
|
||||
</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-icon>file_upload</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark icon @click.native="beautify()">
|
||||
<v-icon>format_align_center</v-icon>
|
||||
</v-btn>
|
||||
<v-btn dark icon @click.native="clearDialog = true">
|
||||
<v-icon>delete</v-icon>
|
||||
</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-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/vue-poc.xqm')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/data/vue-poc/ch4d1.xml')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
<v-list-item @click="fetch('/vue-poc/static/app-gen.js')">
|
||||
<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-item>
|
||||
<v-list-item>
|
||||
|
|
@ -99,10 +130,11 @@ v-on:annotation="annotation"></vue-ace>
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#edit',
|
||||
data () {
|
||||
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',
|
||||
url:'',
|
||||
name:'',
|
||||
|
|
@ -117,7 +149,8 @@ v-on:annotation="annotation"></vue-ace>
|
|||
"application/xml":"xml",
|
||||
"application/xquery":"xquery",
|
||||
"text/ecmascript":"javascript",
|
||||
"text/html":"html"
|
||||
"text/html":"html",
|
||||
"text/css":"css"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -192,6 +225,7 @@ v-on:annotation="annotation"></vue-ace>
|
|||
},
|
||||
annotation(counts){
|
||||
this.annotations=counts
|
||||
console.log("annotations: ",counts)
|
||||
},
|
||||
acetype(mime){
|
||||
var r=this.mimemap[mime]
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</v-list-tile-avatar>
|
||||
<v-list-tile-content @click="folder(item.name)">
|
||||
<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-action>
|
||||
<v-btn icon ripple @click.native="info(item.name)">
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<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-action>
|
||||
<v-btn icon ripple>
|
||||
|
|
@ -63,7 +63,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#files',
|
||||
data: function(){
|
||||
return {
|
||||
crumbs:[],
|
||||
|
|
@ -110,7 +109,14 @@
|
|||
},
|
||||
info(){
|
||||
alert("info")
|
||||
}
|
||||
},
|
||||
readablizeBytes(v){
|
||||
return Vue.filter('readablizeBytes')(v)
|
||||
},
|
||||
formatDate(v){
|
||||
return Vue.filter('formatDate')(v)
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
|
|
|
|||
|
|
@ -26,5 +26,5 @@
|
|||
</v-layout>
|
||||
</template>
|
||||
<script>{
|
||||
template: '#home'}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#login',
|
||||
data () {
|
||||
return {
|
||||
e1: true,
|
||||
|
|
@ -49,8 +48,13 @@
|
|||
},
|
||||
methods:{
|
||||
go () {
|
||||
alert("not yet")
|
||||
}
|
||||
HTTP.post("login-check",axios_json)
|
||||
.then(r=>{
|
||||
alert("loh")
|
||||
}).catch(error=> {
|
||||
alert("err")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#options',
|
||||
data: function(){
|
||||
return {
|
||||
snackbar:false
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#people',
|
||||
data: function(){
|
||||
return {message: 'Hello Vue.js!'}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#search',
|
||||
data: function(){
|
||||
return {
|
||||
message: 'Hello Vue.js!',
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#select',
|
||||
components: { multiselect: VueMultiselect.Multiselect},
|
||||
data: function(){
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,44 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="stepper">
|
||||
<v-container fluid>
|
||||
<v-stepper v-model="e6" vertical>
|
||||
<v-stepper-step step="1" v-bind:complete="e6 > 1">
|
||||
Select an image location
|
||||
<small>http or server file</small>
|
||||
</v-stepper-step>
|
||||
<v-stepper-content step="1">
|
||||
<v-stepper v-model="step" non-linear>
|
||||
<v-stepper-header>
|
||||
<v-stepper-step step="1" :complete="step > 1">Select image location</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step step="2" :complete="step > 2">Set thumbnail details</v-stepper-step>
|
||||
<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" >
|
||||
url
|
||||
<v-text-field
|
||||
name="url"
|
||||
label="Image Url"
|
||||
hint="http:...??"
|
||||
v-model="image"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-card>
|
||||
<v-btn primary @click.native="e6 = 2">Continue</v-btn>
|
||||
<v-btn flat>Cancel</v-btn>
|
||||
<v-btn primary @click.native="step = 2">Next</v-btn>
|
||||
</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-card class="grey lighten-1 z-depth-1 mb-5" height="200px" />
|
||||
<v-btn primary @click.native="e6 = 3">Continue</v-btn>
|
||||
<v-btn flat @click.native="e6 -= 1">Back</v-btn>
|
||||
|
||||
<v-stepper-content step="2" non-linear>
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
|
||||
<vue-ace editor-id="editorA" :content="taskxml" mode="xml" wrap="true"
|
||||
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-step step="3">Select an ad format and name ad unit</v-stepper-step>
|
||||
<v-stepper-content step="3">
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" />
|
||||
<v-btn primary @click.native="e6 = 4">Continue</v-btn>
|
||||
<v-btn flat @click.native="e6 -= 1">Back</v-btn>
|
||||
</v-stepper-content>
|
||||
<v-stepper-step step="4">View setup instructions</v-stepper-step>
|
||||
<v-stepper-content step="4">
|
||||
<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 step="3" non-linear>
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
|
||||
output todo
|
||||
</v-card>
|
||||
|
||||
<v-btn flat @click.native="step -= 1">Back</v-btn>
|
||||
<v-btn primary @click.native="go()">go</v-btn>
|
||||
</v-stepper-content>
|
||||
</v-stepper>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#stepper',
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
</template>
|
||||
|
||||
<script>{
|
||||
template: '#tabs',
|
||||
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.'
|
||||
|
|
|
|||
|
|
@ -30,6 +30,43 @@ function vue-api:test-select($q )
|
|||
</items>
|
||||
</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.
|
||||
:)
|
||||
|
|
|
|||
|
|
@ -24,10 +24,9 @@ let $id := Element:getAttribute($tempNode,"id")
|
|||
let $name:=functx:capitalize-first($id)=>trace("ID")
|
||||
|
||||
let $script:= html5:getElementFirstByTagName($doc,"script")
|
||||
let $tempfix:=replace($template,"\$","\\\$")
|
||||
let $s:= Node:getInnerHTML($script)=>replace('[''"]#' || $id || '[''"]','`' ||$tempfix ||'`')
|
||||
|
||||
let $js:= ``[const `{$name}`=Vue.extend(`{$s}`
|
||||
let $script:= Node:getInnerHTML($script)=>substring-after("{")
|
||||
let $js:= ``[const `{$name}`=Vue.extend({template:` `{$template}` `,
|
||||
`{$script}`
|
||||
);
|
||||
]``
|
||||
return if(empty($id)) then () else $js
|
||||
|
|
|
|||
|
|
@ -45,4 +45,12 @@ declare function html5:selector()
|
|||
=>Selector:element("script")
|
||||
=>Selector:attrValEq("type", "text/x-template")
|
||||
=>Selector:toMatcher()
|
||||
};
|
||||
|
||||
(:~
|
||||
:write file
|
||||
:)
|
||||
declare function html5:write-text($text as xs:string,$file as xs:string)
|
||||
{
|
||||
file:write-text($file,$text)
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue