vuetify 0.16.1
This commit is contained in:
parent
630b9e511f
commit
cae80cde19
27 changed files with 607 additions and 153 deletions
|
|
@ -141,5 +141,10 @@ const Fullscreen={
|
|||
};
|
||||
Vue.use(Fullscreen);
|
||||
|
||||
//leaflet
|
||||
Vue.component('v-map', Vue2Leaflet.Map);
|
||||
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
|
||||
Vue.component('v-marker', Vue2Leaflet.Marker);
|
||||
|
||||
Vue.use(Vuetify);
|
||||
new Vuepoc().$mount('#app')
|
||||
|
|
@ -62,4 +62,9 @@
|
|||
<description>Schematron
|
||||
</description>
|
||||
</namespace>
|
||||
|
||||
<namespace uri="http://www.opengis.net/kml/2.2" prefix="kml">
|
||||
<description>Geo
|
||||
</description>
|
||||
</namespace>
|
||||
</namespaces>
|
||||
|
|
@ -39,6 +39,7 @@ declare
|
|||
function vue-api:file($url as xs:string,$protocol as xs:string)
|
||||
as element(json)
|
||||
{
|
||||
let $_:=trace($protocol,"proto:")
|
||||
let $reader:=map{
|
||||
"webfile":ufile:webfile#1,
|
||||
"xmldb":ufile:xmldb#1
|
||||
|
|
|
|||
|
|
@ -19,8 +19,12 @@
|
|||
<v-btn v-if="clipboard" @click="clipboard=null" icon><v-icon>content_paste</v-icon></v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="selection.length" @click="selectNone">S: {{selection.length}}</v-btn>
|
||||
|
||||
<v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search"
|
||||
hide-details single-line @keyup.enter="setfilter"></v-text-field>
|
||||
hide-details single-line @keyup.enter="setfilter"
|
||||
:append-icon="this.q?'clear':''" :append-icon-cb="e=>this.q=''"></v-text-field>
|
||||
|
||||
|
||||
<v-toolbar-items v-if="!selection.length">
|
||||
|
||||
<v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)">
|
||||
|
|
@ -65,7 +69,7 @@
|
|||
<v-list-tile v-for="item in xfolders" v-bind:key="item.name"
|
||||
v-model="item.selected" @click="folder(item)" avatar >
|
||||
<v-list-tile-avatar @click.prevent.stop="item.selected =! item.selected ">
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
|
||||
<v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content >
|
||||
<v-list-tile-title>{{ item.name }}</v-list-tile-title>
|
||||
|
|
@ -84,7 +88,7 @@
|
|||
</v-subheader>
|
||||
<v-list-tile v-for="item in xfiles" v-bind:key="item.name" >
|
||||
<v-list-tile-avatar avatar @click.prevent.stop="item.selected =! item.selected ">
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
|
||||
<v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content @click="file(item.name)">
|
||||
<v-list-tile-title >{{ item.name }}</v-list-tile-title>
|
||||
|
|
@ -127,10 +131,11 @@
|
|||
return {
|
||||
url: "",
|
||||
items: [],
|
||||
q: "",
|
||||
q: null,
|
||||
busy: false,
|
||||
showInfo: false,
|
||||
clipboard: null,
|
||||
|
||||
buttons: [
|
||||
{method: this.todo, icon: "view_quilt"},
|
||||
{method: this.add, icon: "add"},
|
||||
|
|
@ -162,6 +167,7 @@
|
|||
HTTP.get("collection",{params:{url:url,protocol:this.protocol}})
|
||||
.then(r=>{
|
||||
this.items=r.data.items
|
||||
this.q=null
|
||||
this.busy=false
|
||||
})
|
||||
.catch(error=> {
|
||||
|
|
@ -170,6 +176,9 @@
|
|||
alert("Get query error"+url)
|
||||
});
|
||||
|
||||
},
|
||||
clearq(){
|
||||
this.q=null
|
||||
},
|
||||
action(b){
|
||||
b.method(b.icon)
|
||||
|
|
@ -198,6 +207,9 @@
|
|||
todo(icon){
|
||||
alert("todo: " + icon)
|
||||
},
|
||||
itemClass(item){
|
||||
return (item.selected)?"blue--text text--darken-2":""
|
||||
},
|
||||
itemIcon(item){
|
||||
if(item.selected) return "check_circle"
|
||||
else return (item.type=="folder")?"folder":"insert_drive_file"
|
||||
|
|
@ -214,10 +226,10 @@
|
|||
return (this.protocol=="xmldb")?"developer_mode":"folder"
|
||||
},
|
||||
xfiles(){
|
||||
return this.items.filter(item=>{return item.type!="folder"})
|
||||
return this.items.filter(item=>{return item.type!="folder" &&((!this.q) || item.name.includes(this.q))})
|
||||
},
|
||||
xfolders(){
|
||||
return this.items.filter(item=>{return item.type=="folder"})
|
||||
return this.items.filter(item=>{return item.type=="folder" &&((!this.q) || item.name.includes(this.q))})
|
||||
},
|
||||
// array of {name:"that", path:"/this/that/"} for url
|
||||
crumbs(){
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="edit">
|
||||
<v-container fluid>
|
||||
<v-snackbar top error v-model="snackbar">
|
||||
<v-snackbar top color="error" v-model="snackbar">
|
||||
{{ message }}
|
||||
<v-btn flat @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar dense>
|
||||
<v-menu >
|
||||
<v-btn primary icon dark slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon >{{icon}}</v-icon></v-btn>
|
||||
<v-tooltip top >
|
||||
<v-menu slot="activator">
|
||||
|
||||
<v-btn primary icon dark slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
|
||||
<v-list>
|
||||
<v-list-tile v-for="item in path" :key="item">
|
||||
<v-list-tile-content @click="showfiles()">
|
||||
|
|
@ -18,27 +20,33 @@
|
|||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<span>{{ path.join('/') }}</span>
|
||||
</v-tooltip>
|
||||
<v-toolbar-title >
|
||||
<span >{{ name }}</span>
|
||||
</v-toolbar-title>
|
||||
|
||||
<span v-tooltip:top="{ html: 'Changed?' }">
|
||||
<v-tooltip top>
|
||||
<span slot="activator">
|
||||
<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>
|
||||
</span>
|
||||
<v-menu left transition="v-fade-transition">
|
||||
<v-chip label small slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
|
||||
<span>Changed?</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip top>
|
||||
<v-menu left transition="v-fade-transition" slot="activator">
|
||||
<v-chip label small slot="activator" >{{ 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>
|
||||
<span v-text="mimetype"></span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-chip @click="acecmd('goToNextError')"
|
||||
v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
|
||||
>
|
||||
<v-tooltip top>
|
||||
<v-chip @click="acecmd('goToNextError')" slot="activator" >
|
||||
<v-avatar class="green ">{{annotations && annotations.info}}</v-avatar>
|
||||
<v-avatar class="yellow ">{{annotations && annotations.warning}}</v-avatar>
|
||||
<v-avatar class="red " small>{{annotations && annotations.error}}</v-avatar>
|
||||
|
|
@ -46,6 +54,8 @@
|
|||
<v-icon black >navigate_next</v-icon>
|
||||
</v-avatar>
|
||||
</v-chip>
|
||||
<span>Annotations: Errors,Warning and Info</span>
|
||||
</v-tooltip>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon @click="acecmd('outline')" title="outline -todo">
|
||||
<v-icon>star</v-icon>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
</v-card-actions>
|
||||
<v-card-text v-if="showError">
|
||||
<v-alert error v-model="showError">Error </v-alert>
|
||||
<v-alert color="error" v-model="showError">Error </v-alert>
|
||||
</v-card-text>
|
||||
<v-card-text v-if="showResult">
|
||||
<v-flex xs12 style="height:200px" fill-height>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@
|
|||
<v-toolbar class="green white--text">
|
||||
<v-btn @click.stop="showFilter = true" icon><v-icon>search</v-icon></v-btn>
|
||||
<v-toolbar-title>{{ qtext }}</v-toolbar-title>
|
||||
|
||||
<v-btn @click="clear" icon v-tooltip:top="{ html: 'Clear search' }"
|
||||
v-if="query.keyword || query.from || query.until">
|
||||
<v-tooltip top v-if="query.keyword || query.from || query.until">
|
||||
<v-btn @click="clear" icon slot="activator"
|
||||
>
|
||||
<v-icon>clear</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<span>Clear search</span>
|
||||
</v-tooltip>
|
||||
<v-spacer></v-spacer>
|
||||
<span v-if="!busy">
|
||||
<v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
|
||||
|
|
@ -39,7 +40,8 @@
|
|||
<v-card class="grey lighten-2 pt-1">
|
||||
<v-card-media :src="src(image)" @dblclick="go(image)"
|
||||
height="80px" contain></v-card-media>
|
||||
<v-card-actions v-tooltip:top="{ html: ' '+image.path }">
|
||||
<v-tooltip top>
|
||||
<v-card-actions slot="activator">
|
||||
|
||||
<v-btn icon small>
|
||||
<v-icon>favorite</v-icon>
|
||||
|
|
@ -52,6 +54,8 @@
|
|||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<span v-text="image.path"></span>
|
||||
</v-tooltip>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
|
@ -70,7 +74,7 @@
|
|||
v-bind:items="keywords"
|
||||
v-model="query.keyword"
|
||||
label="Keyword" item-value="text" item-text="text"
|
||||
autocomplete
|
||||
autocomplete clearable
|
||||
>
|
||||
<template slot="item" scope="data">
|
||||
<v-list-tile-content>
|
||||
|
|
@ -140,6 +144,9 @@
|
|||
</template>
|
||||
</v-date-picker>
|
||||
</v-menu>
|
||||
|
||||
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
|
|
@ -180,12 +187,16 @@
|
|||
showUntil: false,
|
||||
keywords: [],
|
||||
showInfo: false,
|
||||
selitem: "TODO"
|
||||
selitem: "TODO",
|
||||
location: {use:false,value:true}
|
||||
}),
|
||||
methods:{
|
||||
src(item){
|
||||
return "data:image/jpeg;base64,"+item.data
|
||||
},
|
||||
cyclelocation(){
|
||||
this.location.use=!this.location.use
|
||||
},
|
||||
getImages(){
|
||||
this.busy=true
|
||||
var t0 = performance.now();
|
||||
|
|
|
|||
28
src/vue-poc/features/images/people.vue
Normal file
28
src/vue-poc/features/images/people.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
image report
|
||||
|
||||
-->
|
||||
<template id="people">
|
||||
<v-container fluid>
|
||||
<v-card >
|
||||
<v-toolbar class="orange darken-1">
|
||||
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
|
||||
<v-card-title >
|
||||
<v-chip >todo</v-chip>
|
||||
</v-card-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
people
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<v-card-title class="green darken-1">
|
||||
<span class="white--text">Login</span>
|
||||
</v-card-title>
|
||||
<v-alert error v-bind:value="showMessage">
|
||||
<v-alert color="error" v-bind:value="showMessage">
|
||||
{{message}}
|
||||
</v-alert>
|
||||
<v-card-actions>
|
||||
|
|
|
|||
29
src/vue-poc/features/map.vue
Normal file
29
src/vue-poc/features/map.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="map">
|
||||
<v-container fluid>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 style="height:400px">
|
||||
<v-map :zoom="zoom" :center="center" >
|
||||
<v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
|
||||
<v-marker :lat-lng="marker"></v-marker>
|
||||
</v-map>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function(){
|
||||
return {
|
||||
zoom: 13,
|
||||
center: [54.320498718, -2.739663708],
|
||||
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
marker: L.latLng(54.320498718, -2.739663708)
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("map")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -8,12 +8,13 @@
|
|||
<v-btn @click="reset()">Reset</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<p>Read or increment a database value.</p>
|
||||
<p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
|
||||
<p>Counter:{{counter}}</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Action</th>
|
||||
<th>Once</th>
|
||||
<th >Repeat</th>
|
||||
<th >Last</th>
|
||||
<th >Count</th>
|
||||
|
|
@ -27,11 +28,15 @@
|
|||
|
||||
|
||||
<tr>
|
||||
<td>Get</td>
|
||||
<td>
|
||||
<v-btn @click="get()" >Get count</v-btn>
|
||||
<v-btn @click="get()" icon >
|
||||
<v-icon>cached</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<v-switch v-model="repeat.get"></v-switch>
|
||||
<v-switch v-on:change="gchange" v-model="repeat.get"></v-switch>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
|
@ -57,12 +62,15 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Update</td>
|
||||
<td>
|
||||
<v-btn @click="update()" >Update count</v-btn>
|
||||
<v-btn @click="update()" icon >
|
||||
<v-icon>cached</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<v-switch v-model="repeat.post"></v-switch>
|
||||
<v-switch v-on:change="pchange" v-model="repeat.post"></v-switch>
|
||||
</td>
|
||||
<td class="col-md-1">
|
||||
<span >{{postValues.last}}</span>
|
||||
|
|
@ -131,6 +139,12 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
gchange(v){
|
||||
if(v)this.get()
|
||||
},
|
||||
pchange(v){
|
||||
if(v)this.update()
|
||||
},
|
||||
reset(){
|
||||
Object.assign(this.getValues,this.getValues.clear());
|
||||
Object.assign(this.postValues,this.postValues.clear());
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="search">
|
||||
<v-container fluid>
|
||||
<v-alert warning value="true">Not finished</v-alert>
|
||||
<v-alert color="warning" value="true">Not finished</v-alert>
|
||||
<v-text-field label="Search..." v-model="q" v-on:keyup="send"></v-text-field>
|
||||
<v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
|
||||
<v-layout>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<v-layout row>
|
||||
<v-flex xs12 sm8 offset-sm2>
|
||||
<v-card>
|
||||
<v-alert warning value="true">Not fully implemented</v-alert>
|
||||
<v-alert color="warning" value="true">Not fully implemented</v-alert>
|
||||
|
||||
<v-container fluid>
|
||||
<v-layout row>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,19 @@ declare
|
|||
function vue-rest:tasks()
|
||||
{
|
||||
let $a:=42
|
||||
return <json type="object"><msg> hello tasks</msg></json>
|
||||
return <json type="array">
|
||||
<_ type="object">
|
||||
<to>tasks/model</to>
|
||||
<text>model</text>
|
||||
</_>
|
||||
<_ type="object">
|
||||
<to>tasks/xqdoc</to>
|
||||
<text>XQdoc</text>
|
||||
</_>
|
||||
<_ type="object">
|
||||
<to>tasks/vuecompile</to>
|
||||
<text>vue compile</text>
|
||||
</_>
|
||||
</json>
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@
|
|||
<script>{
|
||||
data(){
|
||||
return {
|
||||
tasks: [
|
||||
{to: "tasks/model", text: "model"},
|
||||
{to: "tasks/xqdoc", text: "xqdoc"},
|
||||
{to: "tasks/vuecompile", text: "vue compile"}
|
||||
],
|
||||
tasks: [],
|
||||
snackbar: false
|
||||
}
|
||||
},
|
||||
|
|
@ -33,6 +29,7 @@
|
|||
HTTP.get("tasks/list")
|
||||
.then(r=>{
|
||||
this.snackbar=true
|
||||
this.tasks=r.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@
|
|||
</v-card-text>
|
||||
|
||||
|
||||
<v-alert success v-model="alert.success">
|
||||
<v-alert color="success" v-model="alert.success">
|
||||
{{alert.timestamp}}:{{alert.msg}}
|
||||
</v-alert>
|
||||
<v-alert error v-model="alert.error">
|
||||
<v-alert color="error" v-model="alert.error">
|
||||
{{alert.timestamp}}:<code>{{alert.msg}}</code>
|
||||
</v-alert>
|
||||
</v-card>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<v-divider></v-divider>
|
||||
<v-stepper-step step="3">Result</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1" non-linear>
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px" >
|
||||
<v-text-field
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
<v-btn flat @click="step -= 1">Back</v-btn>
|
||||
<v-btn primary @click="go()">go</v-btn>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<vis-time-line :items="vueState.data1" :events="Events"
|
||||
:options="{editable: true, clickToUse: true}" @select="select"></vis-time-line>
|
||||
:options="{editable: true, clickToUse: false" @select="select"></vis-time-line>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
|
|
|
|||
64
src/vue-poc/layout.xq
Normal file
64
src/vue-poc/layout.xq
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
declare variable $body external :="{body}";
|
||||
declare variable $version external :="{verson}";
|
||||
declare variable $base external :="/doc/";
|
||||
declare variable $static external :="/static/doc/";
|
||||
declare variable $incl-css as element()* external :=();
|
||||
declare variable $incl-js as element()* external :=();
|
||||
declare variable $debug-js as element()* external :=();
|
||||
|
||||
<html ng-app="doc" ng-controller="AppController">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<base href="{$base}" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="description" content="doc"/>
|
||||
<meta name="author" content="andy bunce"/>
|
||||
|
||||
<title>doc (v{$version})</title>
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="{$static}icon.png"/>
|
||||
<!-- component css -->
|
||||
{$incl-css}
|
||||
<link href="{$static}app.css" rel="stylesheet"/>
|
||||
<!--
|
||||
<script type="text/javascript" src="/static/lib/firebug-lite/4/firebug-lite.js">
|
||||
{{
|
||||
overrideConsole: false,
|
||||
startInNewWindow: true,
|
||||
startOpened: true,
|
||||
enableTrace: true
|
||||
}}
|
||||
</script>
|
||||
-->
|
||||
<script type="text/javascript">
|
||||
(function(i,s,o,g,r,a,m){{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){{
|
||||
(i[r].q=i[r].q||[]).push(arguments)}},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
}})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-39638119-1', 'auto');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{$body}
|
||||
|
||||
<!-- start component js -->
|
||||
{$incl-js}
|
||||
<!-- application -->
|
||||
<script src="{$static}app.js" ></script>
|
||||
<script src="{$static}services.js" ></script>
|
||||
<script src="{$static}feats/apps/apps.js" ></script>
|
||||
<script src="{$static}feats/components/components.js" ></script>
|
||||
<script src="{$static}feats/history/history.js" ></script>
|
||||
<script src="{$static}feats/files/files.js" ></script>
|
||||
<script src="{$static}feats/jobs/jobs.js" ></script>
|
||||
<script src="{$static}feats/schema/schema.js" ></script>
|
||||
<script src="{$static}feats/entity/entity.js" ></script>
|
||||
<script src="{$static}feats/xqmodules/xqm.js" ></script>
|
||||
<script src="{$static}feats/tools/tools.js" ></script>
|
||||
<script src="{$static}feats/tasks/tasks.js" ></script>
|
||||
<script src="{$static}feats/database/database.js" ></script>
|
||||
<script src="{$static}feats/directives/directives.js" ></script>
|
||||
</body>
|
||||
</html>
|
||||
49
src/vue-poc/lib/txq.xqm
Normal file
49
src/vue-poc/lib/txq.xqm
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
xquery version "3.1";
|
||||
(:~
|
||||
: A(nother) templating Engine for XQuery (BaseX specific)
|
||||
: specials:
|
||||
: partial(file,name,sequence)
|
||||
:
|
||||
: @author andy bunce
|
||||
: @since sept 2012
|
||||
: @licence apache 2
|
||||
:)
|
||||
|
||||
module namespace txq = 'quodatum.txq';
|
||||
declare default function namespace 'quodatum.txq';
|
||||
import module namespace xquery = "http://basex.org/modules/xquery";
|
||||
|
||||
(:~
|
||||
: template function
|
||||
: @param template url to fill
|
||||
: @param map name and value to apply
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function render($template as xs:string,$map as map(*))
|
||||
{
|
||||
let $map:=map:merge(($map,map{"partial": partial(?,?,?,$map,$template)}))
|
||||
return xquery:invoke($template,$map)
|
||||
};
|
||||
|
||||
(:~
|
||||
: template function with wrapping layout
|
||||
: @param $layout outer template with $body placeholder to insert $template
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function render($template as xs:string,$map as map(*),$layout as xs:string)
|
||||
{
|
||||
let $content:=render($template,$map)
|
||||
let $map:=map:merge(($map,map{"body": $content}))
|
||||
return render($layout,$map)
|
||||
};
|
||||
|
||||
(:~
|
||||
: partial template function: evaluate part for each value in sequence
|
||||
: @return updated doc from map
|
||||
:)
|
||||
declare function partial($part as xs:string,$name,$seq,$map,$base)
|
||||
{
|
||||
for $s in $seq
|
||||
let $map:=map:merge(($map,map{$name: $s}))
|
||||
return render(fn:resolve-uri($part,$base),$map)
|
||||
};
|
||||
|
|
@ -88,11 +88,14 @@ declare function vue:compile($proj as xs:string)
|
|||
{
|
||||
let $FEATURES:="features/"=>file:resolve-path($proj=>trace("proj:"))
|
||||
let $COMPONENTS:="components/"=>file:resolve-path($proj)
|
||||
let $CORE:="components/core.js"=>file:resolve-path($proj)
|
||||
let $FILTERS:="components/filters.js"=>file:resolve-path($proj)
|
||||
let $ROUTER:="components/router.js"=>file:resolve-path($proj)
|
||||
let $DEST:="static/app-gen.js"=>file:resolve-path($proj)
|
||||
|
||||
let $CORE:="core.js"=>file:resolve-path($proj)
|
||||
let $ROUTER:="router.js"=>file:resolve-path($proj)
|
||||
let $APP:="vue-poc.vue"=>file:resolve-path($proj)
|
||||
|
||||
let $DEST:="static/app-gen.js"=>file:resolve-path($proj)
|
||||
|
||||
let $files:=vue:feature-files($proj)
|
||||
let $feats:=$files!vue:feature-build(.,false())
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@
|
|||
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
|
||||
xmlns:qd="http://www.quodatum.com/ns/xsl" exclude-result-prefixes="xs doc fn"
|
||||
version="2.0">
|
||||
<!-- Standalone xqdoc:xqdoc transform
|
||||
mode"restxq"
|
||||
-->
|
||||
<!-- Standalone xqdoc:xqdoc transform mode"restxq" -->
|
||||
<xsl:param name="project" as="xs:string" />
|
||||
<xsl:param name="source" as="xs:string" />
|
||||
<xsl:param name="filename" as="xs:string" />
|
||||
|
|
@ -20,7 +18,7 @@
|
|||
select="//doc:function[$show-private or not(doc:annotations/doc:annotation/@name='private')]" />
|
||||
<xsl:variable name="docuri"
|
||||
select="//doc:xqdoc/doc:module/doc:uri/string()" />
|
||||
<!-- uses RESTXQ namespace -->
|
||||
<!-- prefixes used for RESTXQ namespace -->
|
||||
<xsl:variable name="restxq"
|
||||
select="//doc:namespace[@uri='http://exquery.org/ns/restxq']/@prefix/string()" />
|
||||
<!-- generate module html // -->
|
||||
|
|
@ -101,7 +99,7 @@
|
|||
<xsl:apply-templates select="doc:comment/doc:description" />
|
||||
<dt>Tags</dt>
|
||||
<dd>
|
||||
<xsl:if test="$restxq">
|
||||
<xsl:if test="count($restxq)">
|
||||
<span class="tag tag-success">RESTXQ</span>
|
||||
</xsl:if>
|
||||
<xsl:apply-templates
|
||||
|
|
@ -272,7 +270,9 @@
|
|||
<ul>
|
||||
<xsl:for-each select="current-group()/../..">
|
||||
<li>
|
||||
<a href="#{ doc:name }"><xsl:value-of select="doc:name"/></a>
|
||||
<a href="#{ doc:name }">
|
||||
<xsl:value-of select="doc:name" />
|
||||
</a>
|
||||
</li>
|
||||
</xsl:for-each>
|
||||
</ul>
|
||||
|
|
@ -295,9 +295,11 @@
|
|||
<xsl:template match="doc:parameter">
|
||||
<li>
|
||||
<xsl:value-of select="doc:name" />
|
||||
as
|
||||
<code class="as"> as </code>
|
||||
<code class="return-type">
|
||||
<xsl:value-of select="doc:type" />
|
||||
<xsl:value-of select="doc:type/@occurrence" />
|
||||
</code>
|
||||
<xsl:variable name="name" select="string(doc:name)" />
|
||||
<xsl:for-each
|
||||
select="../../doc:comment/doc:param[starts-with(normalize-space(.), $name) or starts-with(normalize-space(.), concat('$',$name))]">
|
||||
|
|
@ -311,8 +313,10 @@
|
|||
<dd>
|
||||
<ul>
|
||||
<li>
|
||||
<code class="return-type">
|
||||
<xsl:value-of select="doc:type" />
|
||||
<xsl:value-of select="doc:type/@occurrence" />
|
||||
</code>
|
||||
<xsl:for-each select="../doc:comment/doc:return">
|
||||
<xsl:text>: </xsl:text>
|
||||
<xsl:copy-of select="node()|text()" />
|
||||
|
|
@ -490,7 +494,8 @@
|
|||
</div>
|
||||
</xsl:if>
|
||||
<xsl:if test="qd:is-updating(current-group())">
|
||||
<div class="tag tag-danger" title="Updating" style="float:right">U</div>
|
||||
<div class="tag tag-danger" title="Updating" style="float:right">U
|
||||
</div>
|
||||
</xsl:if>
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -543,7 +548,7 @@
|
|||
<xsl:function name="qd:restxq" as="element(doc:annotation)*">
|
||||
<xsl:param name="fun" as="element(doc:function)*" />
|
||||
<xsl:variable name="found"
|
||||
select="$fun/doc:annotations/doc:annotation[@name=concat($restxq,':path')]" />
|
||||
select="$fun/doc:annotations/doc:annotation[@name=(for $p in $restxq return concat($p,':path'))]" />
|
||||
<xsl:message>
|
||||
<xsl:copy-of select="$found" />
|
||||
</xsl:message>
|
||||
|
|
@ -556,4 +561,59 @@
|
|||
select="$fun/doc:annotations/doc:annotation[@name='updating']" />
|
||||
<xsl:sequence select="not(empty($found))" />
|
||||
</xsl:function>
|
||||
|
||||
<!-- generate span with method name eg GET -->
|
||||
<xsl:template match="method" mode="name">
|
||||
<xsl:variable name="name" select="string(@name)" />
|
||||
<span>
|
||||
<xsl:attribute name="class">
|
||||
<xsl:text>wadl-method label </xsl:text>
|
||||
<xsl:choose>
|
||||
<xsl:when test="$name='GET'">
|
||||
<xsl:text>label-primary</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$name='POST'">
|
||||
<xsl:text>label-success</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$name='DELETE'">
|
||||
<xsl:text>label-danger</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<xsl:text>label-warning</xsl:text>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="if($name = '')then '(ALL)' else $name" />
|
||||
</span>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="representation" mode="mediaType">
|
||||
<xsl:variable name="mediaType" select="@mediaType" />
|
||||
<span class="label label-default label-pill pull-xs-right" title="{$mediaType}">
|
||||
<xsl:choose>
|
||||
<xsl:when test="$mediaType='text/html'">
|
||||
<xsl:text>H</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$mediaType='application/octet-stream'">
|
||||
<xsl:text>B</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$mediaType='application/xml'">
|
||||
<xsl:text>X</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$mediaType='text/plain'">
|
||||
<xsl:text>T</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$mediaType='application/json'">
|
||||
<xsl:text>J</xsl:text>
|
||||
</xsl:when>
|
||||
<xsl:when test="$mediaType='image/svg+xml'">
|
||||
<xsl:text>S</xsl:text>
|
||||
</xsl:when>
|
||||
|
||||
<xsl:otherwise>
|
||||
?
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</span>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(: entity access maps
|
||||
: auto generated from xml files in entities folder at: 2017-09-17T13:41:02.538+01:00
|
||||
: auto generated from xml files in entities folder at: 2017-10-06T15:21:02.917+01:00
|
||||
:)
|
||||
|
||||
module namespace entity = 'quodatum.models.generated';
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ const router = new VueRouter({
|
|||
routes: [
|
||||
{ path: '/', component: Home, meta:{title:"Home"} },
|
||||
{ path: '/session', component: Session ,meta: {title:"Session"}},
|
||||
|
||||
{path: '/images', redirect: '/images/item' },
|
||||
{ path: '/images/item', name:'images', component: Images, meta:{title: "Images"} },
|
||||
{ path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}},
|
||||
|
|
@ -11,6 +12,8 @@ const router = new VueRouter({
|
|||
{ path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
|
||||
{ path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} },
|
||||
{ path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
|
||||
{ path: '/images/people', component: People, meta:{title:"Image people"} },
|
||||
|
||||
{ path: '/select', component: Select, meta:{title:"Select"} },
|
||||
{ path: '/search', component: Search, meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
|
|
@ -34,6 +37,7 @@ const router = new VueRouter({
|
|||
{ path: '/jobs', component: Jobs, meta:{title:"Jobs running"} },
|
||||
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
|
||||
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
|
||||
{ path: '/map', component: Map,meta:{title:"map"} },
|
||||
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
|
||||
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
|
||||
],
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// generated 2017-09-23T23:02:27.92+01:00
|
||||
// generated 2017-10-06T15:15:26.236+01:00
|
||||
Vue.component('qd-confirm',{template:`
|
||||
<v-dialog v-model="showDialog">
|
||||
<v-card>
|
||||
|
|
@ -467,7 +467,10 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-btn v-if="clipboard" @click="clipboard=null" icon=""><v-icon>content_paste</v-icon></v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="selection.length" @click="selectNone">S: {{selection.length}}</v-btn>
|
||||
<v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
|
||||
|
||||
<v-text-field v-if="!selection.length" prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter" :append-icon="this.q?'clear':''" :append-icon-cb="e=>this.q=''"></v-text-field>
|
||||
|
||||
|
||||
<v-toolbar-items v-if="!selection.length">
|
||||
|
||||
<v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)">
|
||||
|
|
@ -511,7 +514,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-subheader>
|
||||
<v-list-tile v-for="item in xfolders" v-bind:key="item.name" v-model="item.selected" @click="folder(item)" avatar="">
|
||||
<v-list-tile-avatar @click.prevent.stop="item.selected =! item.selected ">
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
|
||||
<v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ item.name }}</v-list-tile-title>
|
||||
|
|
@ -530,7 +533,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-subheader>
|
||||
<v-list-tile v-for="item in xfiles" v-bind:key="item.name">
|
||||
<v-list-tile-avatar avatar="" @click.prevent.stop="item.selected =! item.selected ">
|
||||
<v-icon v-bind:class="[item.iconClass]">{{ itemIcon(item) }}</v-icon>
|
||||
<v-icon v-bind:class="[itemClass(item)]">{{ itemIcon(item) }}</v-icon>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content @click="file(item.name)">
|
||||
<v-list-tile-title>{{ item.name }}</v-list-tile-title>
|
||||
|
|
@ -572,10 +575,11 @@ Vue.filter('round', function(value, decimals) {
|
|||
return {
|
||||
url: "",
|
||||
items: [],
|
||||
q: "",
|
||||
q: null,
|
||||
busy: false,
|
||||
showInfo: false,
|
||||
clipboard: null,
|
||||
|
||||
buttons: [
|
||||
{method: this.todo, icon: "view_quilt"},
|
||||
{method: this.add, icon: "add"},
|
||||
|
|
@ -607,6 +611,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
HTTP.get("collection",{params:{url:url,protocol:this.protocol}})
|
||||
.then(r=>{
|
||||
this.items=r.data.items
|
||||
this.q=null
|
||||
this.busy=false
|
||||
})
|
||||
.catch(error=> {
|
||||
|
|
@ -615,6 +620,9 @@ Vue.filter('round', function(value, decimals) {
|
|||
alert("Get query error"+url)
|
||||
});
|
||||
|
||||
},
|
||||
clearq(){
|
||||
this.q=null
|
||||
},
|
||||
action(b){
|
||||
b.method(b.icon)
|
||||
|
|
@ -643,6 +651,9 @@ Vue.filter('round', function(value, decimals) {
|
|||
todo(icon){
|
||||
alert("todo: " + icon)
|
||||
},
|
||||
itemClass(item){
|
||||
return (item.selected)?"blue--text text--darken-2":""
|
||||
},
|
||||
itemIcon(item){
|
||||
if(item.selected) return "check_circle"
|
||||
else return (item.type=="folder")?"folder":"insert_drive_file"
|
||||
|
|
@ -659,10 +670,10 @@ Vue.filter('round', function(value, decimals) {
|
|||
return (this.protocol=="xmldb")?"developer_mode":"folder"
|
||||
},
|
||||
xfiles(){
|
||||
return this.items.filter(item=>{return item.type!="folder"})
|
||||
return this.items.filter(item=>{return item.type!="folder" &&((!this.q) || item.name.includes(this.q))})
|
||||
},
|
||||
xfolders(){
|
||||
return this.items.filter(item=>{return item.type=="folder"})
|
||||
return this.items.filter(item=>{return item.type=="folder" &&((!this.q) || item.name.includes(this.q))})
|
||||
},
|
||||
// array of {name:"that", path:"/this/that/"} for url
|
||||
crumbs(){
|
||||
|
|
@ -739,15 +750,17 @@ Vue.filter('round', function(value, decimals) {
|
|||
);
|
||||
const Edit=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-snackbar top="" error="" v-model="snackbar">
|
||||
<v-snackbar top="" color="error" v-model="snackbar">
|
||||
{{ message }}
|
||||
<v-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<v-card>
|
||||
<v-toolbar dense="">
|
||||
<v-menu>
|
||||
<v-btn primary="" icon="" dark="" slot="activator" v-tooltip:top="{ html: path.join('/') }"><v-icon>{{icon}}</v-icon></v-btn>
|
||||
<v-tooltip top="">
|
||||
<v-menu slot="activator">
|
||||
|
||||
<v-btn primary="" icon="" dark="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
|
||||
<v-list>
|
||||
<v-list-tile v-for="item in path" :key="item">
|
||||
<v-list-tile-content @click="showfiles()">
|
||||
|
|
@ -756,25 +769,33 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<span>{{ path.join('/') }}</span>
|
||||
</v-tooltip>
|
||||
<v-toolbar-title>
|
||||
<span>{{ name }}</span>
|
||||
</v-toolbar-title>
|
||||
|
||||
<span v-tooltip:top="{ html: 'Changed?' }">
|
||||
<v-tooltip top="">
|
||||
<span slot="activator">
|
||||
<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>
|
||||
</span>
|
||||
<v-menu left="" transition="v-fade-transition">
|
||||
<v-chip label="" small="" slot="activator" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
|
||||
<span>Changed?</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip top="">
|
||||
<v-menu left="" transition="v-fade-transition" slot="activator">
|
||||
<v-chip label="" small="" slot="activator">{{ 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>
|
||||
<span v-text="mimetype"></span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-chip @click="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
|
||||
<v-tooltip top="">
|
||||
<v-chip @click="acecmd('goToNextError')" slot="activator">
|
||||
<v-avatar class="green ">{{annotations && annotations.info}}</v-avatar>
|
||||
<v-avatar class="yellow ">{{annotations && annotations.warning}}</v-avatar>
|
||||
<v-avatar class="red " small="">{{annotations && annotations.error}}</v-avatar>
|
||||
|
|
@ -782,6 +803,8 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-icon black="">navigate_next</v-icon>
|
||||
</v-avatar>
|
||||
</v-chip>
|
||||
<span>Annotations: Errors,Warning and Info</span>
|
||||
</v-tooltip>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon="" @click="acecmd('outline')" title="outline -todo">
|
||||
<v-icon>star</v-icon>
|
||||
|
|
@ -1096,7 +1119,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
|
||||
</v-card-actions>
|
||||
<v-card-text v-if="showError">
|
||||
<v-alert error="" v-model="showError">Error </v-alert>
|
||||
<v-alert color="error" v-model="showError">Error </v-alert>
|
||||
</v-card-text>
|
||||
<v-card-text v-if="showResult">
|
||||
<v-flex xs12="" style="height:200px" fill-height="">
|
||||
|
|
@ -1416,11 +1439,12 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-toolbar class="green white--text">
|
||||
<v-btn @click.stop="showFilter = true" icon=""><v-icon>search</v-icon></v-btn>
|
||||
<v-toolbar-title>{{ qtext }}</v-toolbar-title>
|
||||
|
||||
<v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
|
||||
<v-tooltip top="" v-if="query.keyword || query.from || query.until">
|
||||
<v-btn @click="clear" icon="" slot="activator">
|
||||
<v-icon>clear</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<span>Clear search</span>
|
||||
</v-tooltip>
|
||||
<v-spacer></v-spacer>
|
||||
<span v-if="!busy">
|
||||
<v-chip class="primary white--text">{{ total }} in {{ elapsed | round(2) }} secs </v-chip>
|
||||
|
|
@ -1440,7 +1464,8 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
|
||||
<v-card class="grey lighten-2 pt-1">
|
||||
<v-card-media :src="src(image)" @dblclick="go(image)" height="80px" contain=""></v-card-media>
|
||||
<v-card-actions v-tooltip:top="{ html: ' '+image.path }">
|
||||
<v-tooltip top="">
|
||||
<v-card-actions slot="activator">
|
||||
|
||||
<v-btn icon="" small="">
|
||||
<v-icon>favorite</v-icon>
|
||||
|
|
@ -1453,6 +1478,8 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-icon>share</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<span v-text="image.path"></span>
|
||||
</v-tooltip>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
|
@ -1467,7 +1494,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-toolbar>
|
||||
|
||||
<v-card-text>
|
||||
<v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" autocomplete="">
|
||||
<v-select v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" autocomplete="" clearable="">
|
||||
<template slot="item" scope="data">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="data.item.text"></v-list-tile-title>
|
||||
|
|
@ -1506,6 +1533,9 @@ Vue.filter('round', function(value, decimals) {
|
|||
</template>
|
||||
</v-date-picker>
|
||||
</v-menu>
|
||||
|
||||
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
|
|
@ -1545,12 +1575,16 @@ Vue.filter('round', function(value, decimals) {
|
|||
showUntil: false,
|
||||
keywords: [],
|
||||
showInfo: false,
|
||||
selitem: "TODO"
|
||||
selitem: "TODO",
|
||||
location: {use:false,value:true}
|
||||
}),
|
||||
methods:{
|
||||
src(item){
|
||||
return "data:image/jpeg;base64,"+item.data
|
||||
},
|
||||
cyclelocation(){
|
||||
this.location.use=!this.location.use
|
||||
},
|
||||
getImages(){
|
||||
this.busy=true
|
||||
var t0 = performance.now();
|
||||
|
|
@ -1721,6 +1755,29 @@ body
|
|||
this.getKeywords()
|
||||
}
|
||||
}
|
||||
);
|
||||
const People=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-toolbar class="orange darken-1">
|
||||
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
|
||||
<v-card-title>
|
||||
<v-chip>todo</v-chip>
|
||||
</v-card-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
people
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
const Job=Vue.extend({template:`
|
||||
<v-card>
|
||||
|
|
@ -1890,7 +1947,7 @@ body
|
|||
<v-card-title class="green darken-1">
|
||||
<span class="white--text">Login</span>
|
||||
</v-card-title>
|
||||
<v-alert error="" v-bind:value="showMessage">
|
||||
<v-alert color="error" v-bind:value="showMessage">
|
||||
{{message}}
|
||||
</v-alert>
|
||||
<v-card-actions>
|
||||
|
|
@ -1946,6 +2003,34 @@ body
|
|||
}
|
||||
}
|
||||
|
||||
);
|
||||
const Map=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-layout row="" wrap="">
|
||||
<v-flex xs12="" style="height:400px">
|
||||
<v-map :zoom="zoom" :center="center">
|
||||
<v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
|
||||
<v-marker :lat-lng="marker"></v-marker>
|
||||
</v-map>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
zoom: 13,
|
||||
center: [54.320498718, -2.739663708],
|
||||
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
marker: L.latLng(54.320498718, -2.739663708)
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log("map")
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
const Ping=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
|
|
@ -1956,12 +2041,13 @@ body
|
|||
<v-btn @click="reset()">Reset</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<p>Read or increment a database value.</p>
|
||||
<p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
|
||||
<p>Counter:{{counter}}</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Action</th>
|
||||
<th>Once</th>
|
||||
<th>Repeat</th>
|
||||
<th>Last</th>
|
||||
<th>Count</th>
|
||||
|
|
@ -1975,11 +2061,15 @@ body
|
|||
|
||||
|
||||
<tr>
|
||||
<td>Get</td>
|
||||
<td>
|
||||
<v-btn @click="get()">Get count</v-btn>
|
||||
<v-btn @click="get()" icon="">
|
||||
<v-icon>cached</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<v-switch v-model="repeat.get"></v-switch>
|
||||
<v-switch v-on:change="gchange" v-model="repeat.get"></v-switch>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
|
@ -2005,12 +2095,15 @@ body
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Update</td>
|
||||
<td>
|
||||
<v-btn @click="update()">Update count</v-btn>
|
||||
<v-btn @click="update()" icon="">
|
||||
<v-icon>cached</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<v-switch v-model="repeat.post"></v-switch>
|
||||
<v-switch v-on:change="pchange" v-model="repeat.post"></v-switch>
|
||||
</td>
|
||||
<td class="col-md-1">
|
||||
<span>{{postValues.last}}</span>
|
||||
|
|
@ -2078,6 +2171,12 @@ body
|
|||
}
|
||||
})
|
||||
},
|
||||
gchange(v){
|
||||
if(v)this.get()
|
||||
},
|
||||
pchange(v){
|
||||
if(v)this.update()
|
||||
},
|
||||
reset(){
|
||||
Object.assign(this.getValues,this.getValues.clear());
|
||||
Object.assign(this.postValues,this.postValues.clear());
|
||||
|
|
@ -2186,7 +2285,7 @@ repository todo
|
|||
);
|
||||
const Search=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-alert warning="" value="true">Not finished</v-alert>
|
||||
<v-alert color="warning" value="true">Not finished</v-alert>
|
||||
<v-text-field label="Search..." v-model="q" v-on:keyup="send"></v-text-field>
|
||||
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
|
||||
<v-layout>
|
||||
|
|
@ -2406,7 +2505,7 @@ repository todo
|
|||
<v-layout row="">
|
||||
<v-flex xs12="" sm8="" offset-sm2="">
|
||||
<v-card>
|
||||
<v-alert warning="" value="true">Not fully implemented</v-alert>
|
||||
<v-alert color="warning" value="true">Not fully implemented</v-alert>
|
||||
|
||||
<v-container fluid="">
|
||||
<v-layout row="">
|
||||
|
|
@ -2717,11 +2816,7 @@ repository todo
|
|||
|
||||
data(){
|
||||
return {
|
||||
tasks: [
|
||||
{to: "tasks/model", text: "model"},
|
||||
{to: "tasks/xqdoc", text: "xqdoc"},
|
||||
{to: "tasks/vuecompile", text: "vue compile"}
|
||||
],
|
||||
tasks: [],
|
||||
snackbar: false
|
||||
}
|
||||
},
|
||||
|
|
@ -2730,6 +2825,7 @@ repository todo
|
|||
HTTP.get("tasks/list")
|
||||
.then(r=>{
|
||||
this.snackbar=true
|
||||
this.tasks=r.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -2845,10 +2941,10 @@ repository todo
|
|||
</v-card-text>
|
||||
|
||||
|
||||
<v-alert success="" v-model="alert.success">
|
||||
<v-alert color="success" v-model="alert.success">
|
||||
{{alert.timestamp}}:{{alert.msg}}
|
||||
</v-alert>
|
||||
<v-alert error="" v-model="alert.error">
|
||||
<v-alert color="error" v-model="alert.error">
|
||||
{{alert.timestamp}}:<code>{{alert.msg}}</code>
|
||||
</v-alert>
|
||||
</v-card>
|
||||
|
|
@ -2908,7 +3004,7 @@ repository todo
|
|||
<v-divider></v-divider>
|
||||
<v-stepper-step step="3">Result</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1" non-linear="">
|
||||
<v-card class="grey lighten-1 z-depth-1 mb-5" height="200px">
|
||||
<v-text-field name="url" label="Image Url" hint="http:...??" v-model="image" required=""></v-text-field>
|
||||
|
|
@ -2934,6 +3030,7 @@ repository todo
|
|||
<v-btn flat="" @click="step -= 1">Back</v-btn>
|
||||
<v-btn primary="" @click="go()">go</v-btn>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
</v-container>
|
||||
`,
|
||||
|
|
@ -3039,6 +3136,7 @@ users todo
|
|||
routes: [
|
||||
{ path: '/', component: Home, meta:{title:"Home"} },
|
||||
{ path: '/session', component: Session ,meta: {title:"Session"}},
|
||||
|
||||
{path: '/images', redirect: '/images/item' },
|
||||
{ path: '/images/item', name:'images', component: Images, meta:{title: "Images"} },
|
||||
{ path: '/images/report', name:"image-reports", component: Report, props: true, meta:{title: "Image report"}},
|
||||
|
|
@ -3046,6 +3144,8 @@ users todo
|
|||
{ path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
|
||||
{ path: '/images/keywords', component: Keywords, meta:{title:"Image keywords"} },
|
||||
{ path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
|
||||
{ path: '/images/people', component: People, meta:{title:"Image people"} },
|
||||
|
||||
{ path: '/select', component: Select, meta:{title:"Select"} },
|
||||
{ path: '/search', component: Search, meta:{title:"Search"} },
|
||||
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
|
||||
|
|
@ -3069,6 +3169,7 @@ users todo
|
|||
{ path: '/jobs', component: Jobs, meta:{title:"Jobs running"} },
|
||||
{ path: '/jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
|
||||
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
|
||||
{ path: '/map', component: Map,meta:{title:"map"} },
|
||||
{ path: '/about', component: About,meta:{title:"About Vue-poc"} },
|
||||
{ path: '*', component: Notfound,meta:{title:"Page not found"} }
|
||||
],
|
||||
|
|
@ -3094,7 +3195,7 @@ router.beforeEach((to, from, next) => {
|
|||
}
|
||||
});const Vuepoc=Vue.extend({template:`
|
||||
<v-app id="app" :dark="dark" @theme="onDark">
|
||||
<v-navigation-drawer persistent="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" class="grey lighten-4 pb-0">
|
||||
<v-navigation-drawer persistent="" app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" class="grey lighten-4 pb-0">
|
||||
<v-list class="pa-0">
|
||||
|
||||
<v-list-tile avatar="" tag="div">
|
||||
|
|
@ -3117,9 +3218,14 @@ router.beforeEach((to, from, next) => {
|
|||
<qd-navlist :items="items"></qd-navlist>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-toolbar class="indigo" dark="">
|
||||
<v-toolbar class="indigo" app="" dark="">
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="favorite" icon="" flat="" title="Save location">
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q" hide-details="" single-line="" dark="" @keyup.enter="search"></v-text-field>
|
||||
<v-menu left="" transition="v-fade-transition">
|
||||
|
|
@ -3139,14 +3245,19 @@ router.beforeEach((to, from, next) => {
|
|||
</v-list>
|
||||
</v-menu>
|
||||
<qd-fullscreen></qd-fullscreen>
|
||||
<v-btn @click="notifications" icon="" flat="" title="Notifications">
|
||||
<v-icon>notifications</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<main>
|
||||
<v-alert error="" value="true" dismissible="" v-model="alert.show">
|
||||
<v-content>
|
||||
<v-alert color="error" value="true" dismissible="" v-model="alert.show">
|
||||
<pre style="overflow:auto;">{{ alert.msg }}</pre>
|
||||
</v-alert>
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view class="view ma-3"></router-view>
|
||||
</transition>
|
||||
</v-content>
|
||||
</main>
|
||||
</v-app>
|
||||
`,
|
||||
|
|
@ -3199,6 +3310,8 @@ router.beforeEach((to, from, next) => {
|
|||
{href: '/images/keywords',text: 'Keywords',icon: 'label'},
|
||||
{href: '/images/dates',text: 'Date taken',icon: 'date_range'},
|
||||
{href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
|
||||
{href: '/images/people',text: 'People',icon: 'people'},
|
||||
{href: '/map',text: 'Map',icon: 'place'},
|
||||
{href: '/images/report',text: 'Reports',icon: 'report'}
|
||||
]},
|
||||
{
|
||||
|
|
@ -3237,6 +3350,12 @@ router.beforeEach((to, from, next) => {
|
|||
onDark(dark){
|
||||
this.dark=dark
|
||||
alert("theme")
|
||||
},
|
||||
favorite(){
|
||||
alert("@TODO")
|
||||
},
|
||||
notifications(){
|
||||
alert("@TODO")
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -3422,5 +3541,10 @@ const Fullscreen={
|
|||
};
|
||||
Vue.use(Fullscreen);
|
||||
|
||||
//leaflet
|
||||
Vue.component('v-map', Vue2Leaflet.Map);
|
||||
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
|
||||
Vue.component('v-marker', Vue2Leaflet.Marker);
|
||||
|
||||
Vue.use(Vuetify);
|
||||
new Vuepoc().$mount('#app')
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
<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.15.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://unpkg.com/vuetify@0.16.1/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 rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
|
||||
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
||||
crossorigin=""/>
|
||||
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h3><code>vue-poc</code> <small>(v0.1)</small> </h3>
|
||||
<h3><code>vue-poc</code> <small>(v0.2.??)</small> </h3>
|
||||
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/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.15.7/dist/vuetify.min.js"></script>
|
||||
<script src="https://unpkg.com/vuetify@0.16.1/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.7/ace.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
|
||||
|
|
@ -49,6 +51,10 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.4.3/localforage.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
|
||||
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
||||
crossorigin=""></script>
|
||||
<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script>
|
||||
<script src="/vue-poc/ui/perf-stat.js"></script>
|
||||
<script src="/vue-poc/ui/app-gen.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="vuepoc">
|
||||
<v-app id="app" :dark="dark" @theme="onDark">
|
||||
<v-navigation-drawer persistent :mini-variant.sync="mini" v-model="drawer"
|
||||
<v-navigation-drawer persistent app :mini-variant.sync="mini" v-model="drawer"
|
||||
:disable-route-watcher="true" class="grey lighten-4 pb-0">
|
||||
<v-list class="pa-0">
|
||||
|
||||
|
|
@ -25,9 +25,14 @@
|
|||
<qd-navlist :items="items"></qd-navlist>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-toolbar class="indigo" dark >
|
||||
<v-toolbar class="indigo" app dark >
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="favorite" icon flat title="Save location">
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q"
|
||||
hide-details single-line dark @keyup.enter="search"></v-text-field>
|
||||
|
|
@ -48,14 +53,19 @@
|
|||
</v-list>
|
||||
</v-menu>
|
||||
<qd-fullscreen></qd-fullscreen>
|
||||
<v-btn @click="notifications" icon flat title="Notifications">
|
||||
<v-icon>notifications</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<main>
|
||||
<v-alert error value="true" dismissible v-model="alert.show">
|
||||
<v-content>
|
||||
<v-alert color="error" value="true" dismissible v-model="alert.show">
|
||||
<pre style="overflow:auto;">{{ alert.msg }}</pre>
|
||||
</v-alert>
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view class="view ma-3"></router-view>
|
||||
</transition>
|
||||
</v-content>
|
||||
</main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
|
@ -109,6 +119,8 @@
|
|||
{href: '/images/keywords',text: 'Keywords',icon: 'label'},
|
||||
{href: '/images/dates',text: 'Date taken',icon: 'date_range'},
|
||||
{href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
|
||||
{href: '/images/people',text: 'People',icon: 'people'},
|
||||
{href: '/map',text: 'Map',icon: 'place'},
|
||||
{href: '/images/report',text: 'Reports',icon: 'report'}
|
||||
]},
|
||||
{
|
||||
|
|
@ -147,6 +159,12 @@
|
|||
onDark(dark){
|
||||
this.dark=dark
|
||||
alert("theme")
|
||||
},
|
||||
favorite(){
|
||||
alert("@TODO")
|
||||
},
|
||||
notifications(){
|
||||
alert("@TODO")
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue