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

remove .native

Browse source
This commit is contained in:
Andy Bunce 2017-08-17 16:09:25 +01:00
parent f5af110ab2
commit 4bc20b5439
24 changed files with 234 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -194,7 +194,7 @@ const app = new Vue({
})
},
showAlert(msg){
this.alert.msg=msg
this.alert.msg=moment().format("MMMM D, YYYY ")+msg
this.alert.show=true
}
},

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

@ -5,19 +5,19 @@
<v-card>
<v-toolbar light>
<v-menu bottom right>
<v-btn icon slot="activator"><v-icon >{{icon}}</v-icon></v-btn>
<v-list>
<v-list-tile v-for="item in crumbs" :key="item">
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title>
<v-btn icon :to="{query: { url: '/' }}">
<v-icon >{{icon}}</v-icon>
</v-btn>
<v-toolbar-title>
<v-breadcrumbs>
<v-breadcrumbs-item v-for="item in crumbs" :key="item" :to="{ query: { url: '/' + item + '/' }}">
{{ item }}
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
hide-details single-line @keyup.native.enter="filter"></v-text-field>
hide-details single-line @keyup.enter="filter"></v-text-field>
<v-btn icon @click="alert('todo')">
<v-icon>view_module</v-icon>
@ -40,7 +40,7 @@
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple @click.native.stop="info(item)">
<v-btn icon ripple @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
@ -57,7 +57,7 @@
<v-list-tile-sub-title>modified: {{item.modified | formatDate}} size: {{item.size|readablizeBytes }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple @click.native.stop="info(item)">
<v-btn icon ripple @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
@ -69,7 +69,7 @@
<v-toolbar >
<v-card-title >{{selected.name}}</v-card-title>
<v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> Things to do with </v-card-text>
<v-card-actions>

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

@ -3,7 +3,7 @@
<v-container fluid>
<v-snackbar top error v-model="snackbar">
{{ message }}
<v-btn flat @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
</v-snackbar>
<v-card>
@ -28,7 +28,7 @@
<v-chip v-if="!dirty" label small class="green white--text">.</v-chip>
</span>
<v-chip small v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-chip @click.native="acecmd('goToNextError')"
<v-chip @click="acecmd('goToNextError')"
v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }"
>
<v-avatar class="green ">{{annotations && annotations.info}}</v-avatar>
@ -38,27 +38,27 @@
<v-icon black >navigate_next</v-icon>
</v-avatar>
</v-chip>
<v-btn icon @click.native="acecmd('outline')">
<v-btn icon @click="acecmd('outline')">
<v-icon>star</v-icon>
</v-btn>
<v-btn icon @click.native="acecmd('foldall')">
<v-btn icon @click="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon>
</v-btn>
<v-btn icon @click.native="wrap=!wrap">
<v-btn icon @click="wrap=!wrap">
<v-icon>wrap_text</v-icon>
</v-btn>
<v-btn icon @click.native="save()">
<v-btn icon @click="save()">
<v-icon>file_upload</v-icon>
</v-btn>
<v-btn icon @click.native="beautify()">
<v-btn icon @click="beautify()">
<v-icon>format_align_center</v-icon>
</v-btn>
<v-btn icon @click.native="clearDialog = true">
<v-btn icon @click="clearDialog = true">
<v-icon>delete</v-icon>
</v-btn>
<v-menu left transition="v-fade-transition">
@ -99,8 +99,8 @@
<v-card-title>Clear?</v-card-title>
<v-card-text>clear text.</v-card-text>
<v-card-actions>
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

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

@ -4,12 +4,12 @@
<v-card >
<v-toolbar>
<v-btn @click.native="run()">Run</v-btn>
<v-btn @click.native="submit()">
<v-btn @click="run()">Run</v-btn>
<v-btn @click="submit()">
<v-icon>play_circle_outline</v-icon>
Submit</v-btn>
<v-spacer></v-spacer>
<v-btn @click.native="imports()">
<v-btn @click="imports()">
<v-icon>play_circle_outline</v-icon>
Imports</v-btn>
<v-menu :nudge-width="100">

1
src/vue-poc/features/images/config.xqm
View file

@ -2,6 +2,7 @@ xquery version "3.1";
(:~ data locations for image feature :)
module namespace cfg = "quodatum:media.image.configure";
declare variable $cfg:DB:="vue-poc";
declare variable $cfg:IMAGEDIR:="P:/pictures/";
declare variable $cfg:THUMBDIR:="C:/tmp/";

33
src/vue-poc/features/images/image.vue
View file

@ -5,22 +5,47 @@
-->
<template id="image">
<v-container fluid>
Image: {{ id }}
doc <pre>{{ image && image.doc }}</pre>
<v-card >
<v-toolbar class="orange darken-1">
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title >
<span class="white--text">Image: {{ id }}</span>
</v-card-title>
<v-spacer></v-spacer>
<a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
</v-toolbar>
<v-card-text>
<v-layout>
<v-flex xs5>
<pre style="overflow:auto;">{{ image.doc }}</pre>
</v-flex>
<v-flex xs7 >
<iframe :src="path" style="border:0;width:100%;height:100%;min-height:400px;">image</iframe>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
props:["id"],
data: ()=>( {
image:null
image:{},
loaded:false
}),
computed: {
path(){
return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null
}
},
created:function(){
var id=this._props.id
HTTP.get("images/list/"+id)
.then(r=>{
console.log(r.data)
this.image=r.data
this.loaded=true
})
}
}

25
src/vue-poc/features/images/images.vue
View file

@ -14,7 +14,9 @@
v-if="query.keyword || query.from || query.until">
<v-icon>clear</v-icon>
</v-btn>
<v-chip class="primary white--text">{{ total }}</v-chip>
<v-spacer></v-spacer>
<v-progress-circular v-if="busy" indeterminate class="primary--text"></v-progress-circular>
Page:{{ query.page+1 }}
<v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon primary>
@ -56,7 +58,7 @@
<v-navigation-drawer left persistent v-model="showFilter" :disable-route-watcher="true">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title >Set filter...</v-toolbar-title>
<v-toolbar-title >Show images with...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon><v-icon>close</v-icon></v-btn>
</v-toolbar>
@ -159,7 +161,8 @@
from:null,
until:null,
keyword:null
},
},
total:null,
showFilter:false,
busy:false,
menu2:false,
@ -174,10 +177,14 @@
},
getImages(){
this.busy=true
var t0 = performance.now();
HTTP.get("images/list",{params:this.query})
.then(r=>{
this.busy=false
this.total=r.data.total
this.images=r.data.items
var t0 = performance.now()-t0;
console.log("Time: ",t0)
})
},
clear(){
@ -190,6 +197,12 @@
this.selitem=image;
this.showInfo=true;
},
isChanged(vnew,vold){
if(vnew.keyword != vold.keyword) return true
if(vnew.from != vold.from) return true
if(vnew.until != vold.until) return true
return false
},
go(image){
this.$router.push({ name: 'image', params: { id: image.id }})
}
@ -198,12 +211,16 @@
computed:{
qtext(){
var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
return t?t:"(All)"
}
},
watch:{
"query":{
handler:function(v){
handler:function(vnew,vold){
var b=this.isChanged(vnew,vold)
console.log("watch",b,vnew,vold)
if(b) this.query.page=0
this.$router.push({ query: this.query })
},
deep:true

19
src/vue-poc/features/images/images.xqm
View file

@ -14,7 +14,7 @@ declare variable $vue-api:entity:=$entity:list("thumbnail");
: do a thumbnail
:)
declare
%rest:GET %rest:path("/vue-poc/api/images/list/{ $id }")
%rest:GET %rest:path("/vue-poc/api/images/list/{$id}")
%rest:produces("application/json")
%output:method("json")
function vue-api:id( $id as xs:integer)
@ -43,12 +43,15 @@ $keyword
{
let $rowsPerPage:=24
let $images:=$vue-api:entity("data")()
let $images:=$images[not(@original)]
let $images:=if($from)then $images[datetaken ge $from] else $images
let $images:=if($until)then $images[datetaken le $until] else $images
let $images:=if($keyword)then $images[keywords/keyword = $keyword] else $images
let $total:=count($images)
let $images:=subsequence($images,1+$rowsPerPage*$page,$rowsPerPage)
return <json type="object" >
<total type="number">{ $total }</total>
<items type="array">{
for $f in $images
return <_ type="object">
@ -88,10 +91,22 @@ let $name:=$vue-api:entity?access?name($image)
let $thumb:= $cfg:THUMBDIR || $path
let $thumb:=if(file:exists($thumb)) then $thumb else $cfg:THUMBDIR || "missing.jpg"
return ( <id>{$id}</id>
,<name>{$name}</name>
,<name>{$name}</name>
,<path>{$path}</path>
,<data>{fetch:binary($thumb)}</data>
,<mime>{fetch:content-type($thumb)}</mime>)
};
declare
%rest:GET %rest:path("/vue-poc/api/images/list/{ $id }/image")
function vue-api:rawimage($id as xs:integer)
{
let $image as element(image):=db:open-id("vue-poc",$id)
let $path:=$cfg:IMAGEDIR || $vue-api:entity?access?path($image)
return (
web:response-header(map { 'media-type': web:content-type($path) }),
file:read-binary($path)
)
};

6
src/vue-poc/tasks/pics-01-store-directory.xq → src/vue-poc/features/images/pics-01-store-directory.xq
View file

@ -1,14 +1,16 @@
(:~
: create xml file list by scanning $SRC and write to vue-poc
:)
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
import module namespace fw="quodatum:file.walker";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $SRC:="P:/pictures/Pictures/";
(: declare variable $DEST:="c:\tmp\pics2.xml"; :)
declare variable $DEST:="/pics.xml";
declare %updating function local:put($data,$path){
db:replace("vue-poc",$path,$data)
};
let $opt:=map{"include-info":true()}
let $files:=fw:directory-list($SRC,$opt)
let $files:=fw:directory-list($cfg:IMAGEDIR,$opt)
return $files=>local:put($DEST)

4
src/vue-poc/tasks/pics-02-store-meta.xq → src/vue-poc/features/images/pics-02-store-meta.xq
View file

@ -3,10 +3,10 @@
: done in batches of 1000
: @return initial number of missing docs
:)
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $IMAGEDIR:="P:/pictures/";
let $done:=uri-collection("vue-poc/Pictures")
let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
@ -15,7 +15,7 @@ let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $todo:= $relpath[not("/vue-poc/" || .|| "/meta.xml"=$done)]
return (for $f in subsequence($todo,1, 1000)
let $spath:=$IMAGEDIR || $f
let $spath:=$cfg:IMAGEDIR || $f
let $dbpath:=$f || "/meta.xml"
let $meta:=imgmeta:read($spath)
return db:replace($DB,$dbpath,$meta),

2
src/vue-poc/tasks/pics-03-store-image.xq → src/vue-poc/features/images/pics-03-store-image.xq
View file

@ -3,7 +3,7 @@
: <metadata/> -> <image/>
:)
import module namespace metadata = 'expkg-zone58:image.metadata';
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
for $meta in collection("/vue-poc/Pictures")/metadata
let $loc:=db:path($meta)=>tokenize("/")
let $name:=$loc[count($loc)-1]

14
src/vue-poc/tasks/pics-04-store-thumbs.xq → src/vue-poc/features/images/pics-04-store-thumbs.xq
View file

@ -3,21 +3,15 @@
: @return initial number of missing docs
:)
import module namespace t="expkg-zone58:image.thumbnailator";
import module namespace cfg = "quodatum:media.image.configure" at "config.xqm";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $DB:="vue-poc";
declare variable $IMAGEDIR:="P:/pictures/";
declare variable $THUMBDIR:="C:/tmp/";
(:
declare variable $IMAGEDIR:="/mnt/sda1/pictures/";
declare variable $THUMBDIR:="/mnt/sda1/pictures/thumbs/";
:)
declare %updating function local:store-thumb($f as xs:string)
{
let $src:=$IMAGEDIR || trace($f)
let $trg:= $THUMBDIR || $f
let $src:=$cfg:IMAGEDIR || trace($f)
let $trg:= $cfg:THUMBDIR || $f
return fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
};
(:~ create folder if missing) :)
@ -36,7 +30,7 @@ let $files:= doc("/vue-poc/pics.xml")//c:file[ends-with(lower-case(@name),".jpg"
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $relpath:=filter($relpath,function($f){
not(file:exists($THUMBDIR || $f)) and file:exists($IMAGEDIR || $f)
not(file:exists($cfg:IMAGEDIR || $f)) and file:exists($cfg:IMAGEDIR || $f)
})
let $todo:= $relpath=>subsequence(1, 400)

4
src/vue-poc/features/images/pics-05-set-original.xq Normal file
View file

@ -0,0 +1,4 @@
(: set original:)
for $i in collection("/vue-poc/Pictures")/image
where $i[file/@path=>contains('original')]
return insert node attribute { 'original' } { true() } into $i

4
src/vue-poc/features/job/jobs.vue
View file

@ -5,14 +5,14 @@
<v-btn
light icon
:loading="loading"
@click.native="getJobs()"
@click="getJobs()"
:disabled="loading"
>
<v-icon>refresh</v-icon>
</v-btn>
<v-btn
@click.native="stop()"
@click="stop()"
:disabled="noSelection"
>Stop</v-btn>

2
src/vue-poc/features/login/login.vue
View file

@ -33,7 +33,7 @@
<v-divider></v-divider>
<v-card-actions class="blue-grey darken-1 mt-0">
<v-btn primary @click.native="go()">Continue</v-btn>
<v-btn primary @click="go()">Continue</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>

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

@ -28,7 +28,7 @@
<tr>
<td>
<v-btn @click.native="get()" >Get count</v-btn>
<v-btn @click="get()" >Get count</v-btn>
</td>
<td>
<v-checkbox v-model="repeat.get" ></v-checkbox>
@ -57,7 +57,7 @@
<tr>
<td>
<v-btn @click.native="update()" >Update count</v-btn>
<v-btn @click="update()" >Update count</v-btn>
</td>
<td>

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

@ -6,7 +6,7 @@
<table>
<tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:3em;" >
<v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
<v-btn @click="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
</td>
</tr>
</table>
@ -14,7 +14,7 @@
<table>
<tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:50px;height:50px;" >
<v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">
<v-btn @click="click(row,col)" :disabled="disabled(row,col)">
<img :src="src(row,col)" style="width:50px;height:50px;"/>
</v-btn>
</td>

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

@ -7,7 +7,7 @@
<span class="white--text">Selection</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
<v-btn flat icon @click="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
</v-toolbar>
<qd-panel :show="showInfo">
@ -34,7 +34,7 @@
<v-card-actions >
<v-toolbar-title >test</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat icon @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-card-actions>
<v-card-text> blah blah protocol: </v-card-text>
</v-card>

4
src/vue-poc/features/tasks/model.build/model.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">Generate <code>model.gen.xqm</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click.native="submit()" :loading="waiting"
<v-btn primary @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
@ -42,7 +42,7 @@
:error="snackbar.context === 'error'"
>
{{ snackbar.msg }}
<v-btn dark flat @click.native="snackbar.show = false">Close</v-btn>
<v-btn dark flat @click="snackbar.show = false">Close</v-btn>
</v-snackbar>
</v-card>
</v-container>

4
src/vue-poc/features/tasks/vue-compile/vuecompile.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">compile</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click.native="submit()" :loading="waiting"
<v-btn primary @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
@ -37,7 +37,7 @@
:error="snackbar.context === 'error'"
>
{{ snackbar.msg }}
<v-btn dark flat @click.native="snackbar.show = false">Close</v-btn>
<v-btn dark flat @click="snackbar.show = false">Close</v-btn>
</v-snackbar>
</v-card>
</v-container>

2
src/vue-poc/features/tasks/xqdoc/xqdoc.vue
View file

@ -8,7 +8,7 @@
<span class="white--text">Task: Generate <code>xqdoc</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary @click.native="submit()" :loading="waiting"
<v-btn primary @click="submit()" :loading="waiting"
:disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>

12
src/vue-poc/features/thumbnail/thumbnail.vue
View file

@ -20,7 +20,7 @@
required
></v-text-field>
</v-card>
<v-btn primary @click.native="step = 2">Next</v-btn>
<v-btn primary @click="step = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2" non-linear>
@ -30,9 +30,9 @@
></vue-ace>
</v-card>
<v-btn flat @click.native="step -= 1">Back</v-btn>
<v-btn primary @click.native="validate()">Validate</v-btn>
<v-btn primary @click.native="step = 3">Next</v-btn>
<v-btn flat @click="step -= 1">Back</v-btn>
<v-btn primary @click="validate()">Validate</v-btn>
<v-btn primary @click="step = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3" non-linear>
@ -40,8 +40,8 @@
output todo
</v-card>
<v-btn flat @click.native="step -= 1">Back</v-btn>
<v-btn primary @click.native="go()">go</v-btn>
<v-btn flat @click="step -= 1">Back</v-btn>
<v-btn primary @click="go()">go</v-btn>
</v-stepper-content>
</v-stepper>
</v-container>

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

@ -1,4 +1,4 @@
// generated 2017-08-15T22:45:31.814+01:00
// generated 2017-08-17T16:08:17.382+01:00
Vue.component('qd-link',{template:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`,
@ -258,18 +258,18 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card>
<v-toolbar light="">
<v-menu bottom="" right="">
<v-btn icon="" slot="activator"><v-icon>{{icon}}</v-icon></v-btn>
<v-list>
<v-list-tile v-for="item in crumbs" :key="item">
<v-list-tile-title @click="root()">{{ item }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-toolbar-title>{{ url }}</v-toolbar-title>
<v-btn icon="" :to="{query: { url: '/' }}">
<v-icon>{{icon}}</v-icon>
</v-btn>
<v-toolbar-title>
<v-breadcrumbs>
<v-breadcrumbs-item v-for="item in crumbs" :key="item" :to="{ query: { url: '/' + item + '/' }}">
{{ item }}
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.native.enter="filter"></v-text-field>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="filter"></v-text-field>
<v-btn icon="" @click="alert('todo')">
<v-icon>view_module</v-icon>
@ -292,7 +292,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon="" ripple="" @click.native.stop="info(item)">
<v-btn icon="" ripple="" @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
@ -309,7 +309,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-list-tile-sub-title>modified: {{item.modified | formatDate}} size: {{item.size|readablizeBytes }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon="" ripple="" @click.native.stop="info(item)">
<v-btn icon="" ripple="" @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
@ -321,7 +321,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-toolbar>
<v-card-title>{{selected.name}}</v-card-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-toolbar>
<v-card-text> Things to do with </v-card-text>
<v-card-actions>
@ -459,7 +459,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-container fluid="">
<v-snackbar top="" error="" v-model="snackbar">
{{ message }}
<v-btn flat="" @click.native="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat="" @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
</v-snackbar>
<v-card>
@ -484,7 +484,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-chip v-if="!dirty" label="" small="" class="green white--text">.</v-chip>
</span>
<v-chip small="" v-tooltip:top="{ html: mimetype }">{{ mode }}</v-chip>
<v-chip @click.native="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
<v-chip @click="acecmd('goToNextError')" v-tooltip:top="{ html: 'Annotations: Errors,Warning and Info' }">
<v-avatar class="green ">{{annotations &amp;&amp; annotations.info}}</v-avatar>
<v-avatar class="yellow ">{{annotations &amp;&amp; annotations.warning}}</v-avatar>
<v-avatar class="red " small="">{{annotations &amp;&amp; annotations.error}}</v-avatar>
@ -492,27 +492,27 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-icon black="">navigate_next</v-icon>
</v-avatar>
</v-chip>
<v-btn icon="" @click.native="acecmd('outline')">
<v-btn icon="" @click="acecmd('outline')">
<v-icon>star</v-icon>
</v-btn>
<v-btn icon="" @click.native="acecmd('foldall')">
<v-btn icon="" @click="acecmd('foldall')">
<v-icon>vertical_align_center</v-icon>
</v-btn>
<v-btn icon="" @click.native="wrap=!wrap">
<v-btn icon="" @click="wrap=!wrap">
<v-icon>wrap_text</v-icon>
</v-btn>
<v-btn icon="" @click.native="save()">
<v-btn icon="" @click="save()">
<v-icon>file_upload</v-icon>
</v-btn>
<v-btn icon="" @click.native="beautify()">
<v-btn icon="" @click="beautify()">
<v-icon>format_align_center</v-icon>
</v-btn>
<v-btn icon="" @click.native="clearDialog = true">
<v-btn icon="" @click="clearDialog = true">
<v-icon>delete</v-icon>
</v-btn>
<v-menu left="" transition="v-fade-transition">
@ -553,8 +553,8 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card-title>Clear?</v-card-title>
<v-card-text>clear text.</v-card-text>
<v-card-actions>
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click.native="reset(true)">Ok</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(false)">Cancel</v-btn>
<v-btn class="green--text darken-1" flat="flat" @click="reset(true)">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@ -730,12 +730,12 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card>
<v-toolbar>
<v-btn @click.native="run()">Run</v-btn>
<v-btn @click.native="submit()">
<v-btn @click="run()">Run</v-btn>
<v-btn @click="submit()">
<v-icon>play_circle_outline</v-icon>
Submit</v-btn>
<v-spacer></v-spacer>
<v-btn @click.native="imports()">
<v-btn @click="imports()">
<v-icon>play_circle_outline</v-icon>
Imports</v-btn>
<v-menu :nudge-width="100">
@ -899,21 +899,46 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
);
const Image=Vue.extend({template:`
<v-container fluid="">
Image: {{ id }}
doc <pre>{{ image &amp;&amp; image.doc }}</pre>
<v-card>
<v-toolbar class="orange darken-1">
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title>
<span class="white--text">Image: {{ id }}</span>
</v-card-title>
<v-spacer></v-spacer>
<a :href="path" :download="id +'.jpg'"><v-icon>file_download</v-icon></a>
</v-toolbar>
<v-card-text>
<v-layout>
<v-flex xs5="">
<pre style="overflow:auto;">{{ image.doc }}</pre>
</v-flex>
<v-flex xs7="">
<iframe :src="path" style="border:0;width:100%;height:100%;min-height:400px;">image</iframe>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-container>
`,
props:["id"],
data: ()=>( {
image:null
image:{},
loaded:false
}),
computed: {
path(){
return this.loaded?'/vue-poc/api/images/list/'+ this.id+ '/image':null
}
},
created:function(){
var id=this._props.id
HTTP.get("images/list/"+id)
.then(r=>{
console.log(r.data)
this.image=r.data
this.loaded=true
})
}
}
@ -929,7 +954,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-btn @click="clear" icon="" v-tooltip:top="{ html: 'Clear search' }" v-if="query.keyword || query.from || query.until">
<v-icon>clear</v-icon>
</v-btn>
<v-chip class="primary white--text">{{ total }}</v-chip>
<v-spacer></v-spacer>
<v-progress-circular v-if="busy" indeterminate="" class="primary--text"></v-progress-circular>
Page:{{ query.page+1 }}
<v-btn @click.stop="query.page=Math.min(0,query.page-1)" :disabled="query.page==0" icon="" primary="">
@ -966,7 +993,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-navigation-drawer left="" persistent="" v-model="showFilter" :disable-route-watcher="true">
<v-card>
<v-toolbar class="green white--text">
<v-toolbar-title>Set filter...</v-toolbar-title>
<v-toolbar-title>Show images with...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" icon=""><v-icon>close</v-icon></v-btn>
</v-toolbar>
@ -1033,7 +1060,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
from:null,
until:null,
keyword:null
},
},
total:null,
showFilter:false,
busy:false,
menu2:false,
@ -1048,10 +1076,14 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
},
getImages(){
this.busy=true
var t0 = performance.now();
HTTP.get("images/list",{params:this.query})
.then(r=>{
this.busy=false
this.total=r.data.total
this.images=r.data.items
var t0 = performance.now()-t0;
console.log("Time: ",t0)
})
},
clear(){
@ -1064,6 +1096,12 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
this.selitem=image;
this.showInfo=true;
},
isChanged(vnew,vold){
if(vnew.keyword != vold.keyword) return true
if(vnew.from != vold.from) return true
if(vnew.until != vold.until) return true
return false
},
go(image){
this.$router.push({ name: 'image', params: { id: image.id }})
}
@ -1072,12 +1110,16 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
computed:{
qtext(){
var k=this.query.keyword,f=this.query.from, u=this.query.until
return (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
var t= (k?" keyword:'"+k+"'":"")+ (f?" from:" + f:"")+ (u?" until:" + u:"")
return t?t:"(All)"
}
},
watch:{
"query":{
handler:function(v){
handler:function(vnew,vold){
var b=this.isChanged(vnew,vold)
console.log("watch",b,vnew,vold)
if(b) this.query.page=0
this.$router.push({ query: this.query })
},
deep:true
@ -1108,11 +1150,11 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
const Job=Vue.extend({template:`
<v-card>
<v-toolbar light="">
<v-btn light="" icon="" :loading="loading" @click.native="getJobs()" :disabled="loading">
<v-btn light="" icon="" :loading="loading" @click="getJobs()" :disabled="loading">
<v-icon>refresh</v-icon>
</v-btn>
<v-btn @click.native="stop()" :disabled="noSelection">Stop</v-btn>
<v-btn @click="stop()" :disabled="noSelection">Stop</v-btn>
<v-spacer></v-spacer>
<v-text-field append-icon="search" label="Filter jobs" single-line="" hide-details="" v-model="search"></v-text-field>
@ -1204,7 +1246,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-divider></v-divider>
<v-card-actions class="blue-grey darken-1 mt-0">
<v-btn primary="" @click.native="go()">Continue</v-btn>
<v-btn primary="" @click="go()">Continue</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
@ -1278,7 +1320,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<tr>
<td>
<v-btn @click.native="get()">Get count</v-btn>
<v-btn @click="get()">Get count</v-btn>
</td>
<td>
<v-checkbox v-model="repeat.get"></v-checkbox>
@ -1307,7 +1349,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<tr>
<td>
<v-btn @click.native="update()">Update count</v-btn>
<v-btn @click="update()">Update count</v-btn>
</td>
<td>
@ -1397,7 +1439,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<table>
<tbody><tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:3em;">
<v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
<v-btn @click="click(row,col)" :disabled="disabled(row,col)">{{cell}}</v-btn>
</td>
</tr>
</tbody></table>
@ -1405,7 +1447,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<table>
<tbody><tr v-for="(item, row) in grid">
<td v-for="(cell,col) in item" style="width:50px;height:50px;">
<v-btn @click.native="click(row,col)" :disabled="disabled(row,col)">
<v-btn @click="click(row,col)" :disabled="disabled(row,col)">
<img :src="src(row,col)" style="width:50px;height:50px;">
</v-btn>
</td>
@ -1494,7 +1536,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<span class="white--text">Selection</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
<v-btn flat="" icon="" @click="showInfo = !showInfo"><v-icon>info</v-icon></v-btn>
</v-toolbar>
<qd-panel :show="showInfo">
@ -1519,7 +1561,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card-actions>
<v-toolbar-title>test</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click.native="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-card-actions>
<v-card-text> blah blah protocol: </v-card-text>
</v-card>
@ -1753,7 +1795,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<span class="white--text">Generate <code>model.gen.xqm</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -1778,7 +1820,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
{{ snackbar.msg }}
<v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
<v-btn dark="" flat="" @click="snackbar.show = false">Close</v-btn>
</v-snackbar>
</v-card>
</v-container>
@ -1851,7 +1893,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<span class="white--text">compile</span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -1873,7 +1915,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-snackbar v-model="snackbar.show" :timeout="6000" :success="snackbar.context === 'success'" :error="snackbar.context === 'error'">
{{ snackbar.msg }}
<v-btn dark="" flat="" @click.native="snackbar.show = false">Close</v-btn>
<v-btn dark="" flat="" @click="snackbar.show = false">Close</v-btn>
</v-snackbar>
</v-card>
</v-container>
@ -1919,7 +1961,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<span class="white--text">Task: Generate <code>xqdoc</code></span>
</v-card-title>
<v-spacer></v-spacer>
<v-btn primary="" @click.native="submit()" :loading="waiting" :disabled="waiting">
<v-btn primary="" @click="submit()" :loading="waiting" :disabled="waiting">
<v-icon>play_circle_outline</v-icon>
Run</v-btn>
</v-toolbar>
@ -2008,7 +2050,7 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<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>
</v-card>
<v-btn primary="" @click.native="step = 2">Next</v-btn>
<v-btn primary="" @click="step = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2" non-linear="">
@ -2016,9 +2058,9 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<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="validate()">Validate</v-btn>
<v-btn primary="" @click.native="step = 3">Next</v-btn>
<v-btn flat="" @click="step -= 1">Back</v-btn>
<v-btn primary="" @click="validate()">Validate</v-btn>
<v-btn primary="" @click="step = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3" non-linear="">
@ -2026,8 +2068,8 @@ v0.0.2 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
output todo
</v-card>
<v-btn flat="" @click.native="step -= 1">Back</v-btn>
<v-btn primary="" @click.native="go()">go</v-btn>
<v-btn flat="" @click="step -= 1">Back</v-btn>
<v-btn primary="" @click="go()">go</v-btn>
</v-stepper-content>
</v-stepper>
</v-container>
@ -2300,7 +2342,7 @@ const app = new Vue({
})
},
showAlert(msg){
this.alert.msg=msg
this.alert.msg=moment().format("MMMM D, YYYY ")+msg
this.alert.show=true
}
},

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

@ -50,7 +50,7 @@
<v-list-tile-title>Vue PoC</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon @click.native.stop="mini = !mini">
<v-btn icon @click.stop="mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
@ -61,11 +61,11 @@
</v-navigation-drawer>
<v-toolbar class="indigo" dark >
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" ></v-toolbar-side-icon>
<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-text-field prepend-icon="search" label="Search..." v-model="q"
hide-details single-line dark @keyup.native.enter="search"></v-text-field>
hide-details single-line dark @keyup.enter="search"></v-text-field>
<v-menu left transition="v-fade-transition">
<v-btn dark icon slot="activator">
{{$auth.user}}
@ -85,7 +85,7 @@
</v-toolbar>
<main>
<v-alert error value="true" dismissible v-model="alert.show">
<pre>{{ alert.msg }}</pre>
<pre style="overflow:auto;">{{ alert.msg }}</pre>
</v-alert>
<transition name="fade" mode="out-in">
<router-view class="view ma-3"></router-view>