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

vuetify 1.1.13

Browse source
This commit is contained in:
Andy Bunce 2018-08-21 12:36:45 +01:00
parent b00fa46bf5
commit e5e963074f
27 changed files with 551 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/vue-poc/app.vue
View file

@ -55,7 +55,9 @@
</v-btn>
<v-list>
<v-list-tile to="/session" avatar ripple>
<v-list-tile-title >Session</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="logout()">
<v-list-tile-title >logout</v-list-tile-title>
</v-list-tile>
@ -84,7 +86,7 @@
</v-list-tile>
<v-divider ></v-divider>
<v-list-tile >
<v-list-tile-title>Refresh:</v-list-tile-title>
<v-list-tile-title>Server hot load:</v-list-tile-title>
<v-list-tile-action ><v-btn @click="init">.init</v-btn></v-list-tile-action>
</v-list-tile>
</v-list>
@ -161,6 +163,7 @@
{href: '/server/users',text: 'Users',icon: 'supervisor_account'},
{href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
{href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
{href: '/server/upload',text: 'Upload to server',icon: 'file_upload'},
{href: '/server/ping',text: 'Ping',icon: 'update'}
]},
{
@ -191,8 +194,6 @@
text: 'More' ,
model: false,
children: [
{href: '/session',text: 'Session',icon: 'person'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
@ -273,7 +274,7 @@
HTTP.get("status")
.then(r=>{
console.log("status",r)
//console.log("status",r)
this.$auth=Object.assign(this.$auth,r.data);
console.log("AFTER: ",this.$auth);
//this.$forceUpdate()

4
src/vue-poc/components/qd-fileupload.vue
View file

@ -4,13 +4,13 @@
-->
<template id="qd-fileupload">
<vue-clip :options="options">
<template slot="clip-uploader-action">
<template slot-scope="clip-uploader-action">
<div>
<div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
</div>
</template>
<template slot="clip-uploader-body" scope="props">
<template slot-scope="clip-uploader-body" scope="props">
<div v-for="file in props.files">
<img v-bind:src="file.dataUrl" />
{{ file.name }} {{ file.status }}

1
src/vue-poc/components/qd-table.vue
View file

@ -10,6 +10,7 @@
single-line
hide-details
v-model="search"
clearable
></v-text-field>
<v-spacer></v-spacer>
<v-btn

4
src/vue-poc/components/vp-paramform.vue
View file

@ -9,7 +9,7 @@
<div :title="url">{{ updating }}</div>
<v-layout row>
<v-layout column xs10>
<v-layout column xs11>
<v-flex v-for="field in fields" :key="field.model" >
<v-text-field v-if="field.type === 'xs:anyURI'" :full-width="true"
@ -33,7 +33,7 @@
</v-flex>
</v-layout>
<v-layout align-center justify-center column fill-height xs2 amber lighten-5>
<v-layout align-center justify-center column fill-height xs1 amber lighten-5>
<v-btn @click="clear()"
>Clear</v-btn>
<v-btn @click="reset()"

2
src/vue-poc/config.xqm
View file

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

11
src/vue-poc/core.js
View file

@ -174,13 +174,14 @@ function install (Vue) {
};
Vue.use({ install: install });
var sockhost=('https:'==window.location.protocol?'wss:':'ws:')+'//'+ window.location.host +'/ws';
Vue.use(VueNativeSock.default, sockhost);
console.log("SOCK UP",VueNativeSock,sockhost);
//Vue.use(VueNativeSock.default, sockhost);
//console.log("SOCK UP",VueNativeSock,sockhost);
//leaflet
//Vue.component('v-map', Vue2Leaflet.Map);
//Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
//Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tilelayer', Vue2Leaflet.LTileLayer);
Vue.component('l-marker', Vue2Leaflet.LMarker);
//function install (Vue) {
// Vue.component('form-schema', window["vue-json-schema"].default);
//};

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

@ -5,17 +5,13 @@
<v-card>
<v-toolbar dense >
<v-btn icon :to="{query: { url: '/' }}">
<v-icon >{{icon}}</v-icon>
</v-btn>
<v-toolbar-title>
<v-breadcrumbs >
<span slot="divider" style="padding:0;"></span>
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path"
:to="{ query: { url: item.path }}" :exact="true">
<v-icon v-if="item.icon">{{ icon }}</v-icon>
{{ item.name }}
</v-breadcrumbs-item>
</v-breadcrumbs>
@ -253,11 +249,13 @@
},
// array of {name:"that", path:"/this/that/"} for url
crumbs(){
var url=this.url
return url.split("/").slice(0,-1).map(
function(v,i,a){return {name:v +"/",
path:a.slice(0,i+1).join("/")+"/"}}
)
var url=this.url.split("/").slice(0,-1).map(
function(v,i,a){return {name: v +"/",
path: a.slice(0,i+1).join("/")+"/"}}
);
url[0].icon=this.icon;
console.log("CRUM",url)
return url;
},
selection(){
return this.items.filter(item=>{return item.selected} )

2
src/vue-poc/features/edit/tabs.vue
View file

@ -263,7 +263,7 @@
},
loadItem(url){
HTTP.get("get2",{params: {url:url}})
HTTP.get("get",{params: {url:url}})
.then(r=>{
console.log(r)
var tab={

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

@ -118,6 +118,7 @@
v-model="query.from"
prepend-icon="event"
readonly
clearable
></v-text-field>
<v-date-picker v-model="query.from" scrollable actions>
@ -148,6 +149,7 @@
v-model="query.until"
prepend-icon="event"
readonly
clearable
></v-text-field>
<v-date-picker v-model="query.until" scrollable actions>
@ -160,7 +162,7 @@
</v-date-picker>
</v-menu>
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
</v-card-text>
@ -232,6 +234,7 @@
},
getImages(){
this.busy=true
console.log("Images",this.query);
var t0 = performance.now();
HTTP.get("images/list",{params:this.query})
.then(r=>{

179
src/vue-poc/features/images/imagesfilter.vue Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<!--
image filter ui
-->
<template id="imagesfilter">
<v-card>
<v-toolbar class="green white--text">
<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>
<v-card-text>
<v-autocomplete
v-bind:items="keywords"
v-model="query.keyword"
label="Keyword" item-value="text" item-text="text"
clearable
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title v-html="data.item.text"></v-list-tile-title>
<v-list-tile-sub-title v-html="data.item.count"></v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-autocomplete>
<v-menu
lazy
:close-on-content-click="false"
v-model="menu2"
transition="scale-transition"
offset-y
full-width
:nudge-left="40"
max-width="290px"
>
<v-text-field
slot="activator"
label="Earliest date"
v-model="query.from"
prepend-icon="event"
readonly
clearable
></v-text-field>
<v-date-picker v-model="query.from" scrollable actions>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-btn flat color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-menu>
<v-menu
lazy
:close-on-content-click="false"
v-model="showUntil"
transition="scale-transition"
offset-y
full-width
:nudge-left="40"
max-width="290px"
>
</v-date-picker>
<v-text-field
slot="activator"
label="Latest date"
v-model="query.until"
prepend-icon="event"
readonly
clearable
></v-text-field>
<v-date-picker v-model="query.until" scrollable actions>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-btn flat color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</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>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" color="primary" >Apply</v-btn>
</v-card-actions>
</v-card>
</template>
<script>{
data(){
return {
query: {page:0, // current page
from:null,
until:null,
keyword:null
},
showFilter: false,
busy: false,
menu2: false,
showUntil: false,
keywords: [],
showInfo: false,
selitem: "TODO",
location: {use:false,value:true},
}
},
methods:{
cyclelocation(){
this.location.use=!this.location.use
},
clear(){
this.query.from=null;
this.query.until=null;
this.query.keyword=null;
this.query.page=0;
},
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
},
},
watch:{
"query":{
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
},
showFilter(){
if(this.keywords.length==0){
HTTP.get("images/keywords2")
.then(r=>{
this.keywords=r.data.items
})
}
}
},
created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages()
},
mounted:function(){
console.log("image filter mount")
}
}
</script>

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

@ -1,17 +1,19 @@
(:~
: create xml file list by scanning $SRC and write to vue-poc
: create xml file list by scanning $cfg:IMAGEDIR and write to db $cfg:DB-IMAGE
:)
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 $DEST:="c:\tmp\pics2.xml"; :)
declare variable $DEST:=format-date(current-date(),"/[Y0001][M01][D01]-pics.xml");
declare %updating function local:put($data,$path){
declare %updating function local:put($data,$path)
{
if(db:exists($cfg:DB-IMAGE)) then
db:replace($cfg:DB-IMAGE,$path,$data)
else
db:create($cfg:DB-IMAGE,$data,$path)
};
let $opt:=map{"include-info":true()}
let $files:=fw:directory-list($cfg:IMAGEDIR,$opt)
return $files=>local:put($DEST)
return $files=>local:put('/pics.xml')

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

@ -7,20 +7,19 @@ import module namespace cfg = "quodatum:media.image.configure" at "../../../conf
import module namespace imgmeta = "expkg-zone58:image.metadata" ;
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $KEY:="20180603";
declare variable $dir-uri:=``[`{ $cfg:DB-IMAGE }`/`{ $KEY }`-pics.xml]``;
declare variable $dir-uri:=``[`{ $cfg:DB-IMAGE }`/pics.xml]``;
declare variable $doc:=doc( $dir-uri);
declare variable $CHUNK:=1000;
declare variable $meta:="/meta2/";
declare variable $CHUNK:=15000;
declare variable $meta:="/meta/";
let $done:=uri-collection($cfg:DB-IMAGE ||$meta)
let $files:= $doc//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $todo:= $relpath[not("/vue-poc/meta/" || .|| "/meta.xml"=$done)]
let $todo:= $relpath[not($done=``[/`{ $cfg:DB-IMAGE }`/meta/`{ . }`/meta.xml]``)]
return (for $f in subsequence($todo,1, $CHUNK)
let $spath:=$cfg:IMAGEDIR || "../" || $f
let $dbpath:=$meta || $f || "/meta.xml"
let $meta:=imgmeta:read($spath)
let $meta:=imgmeta:read(trace($spath))
return db:replace($cfg:DB-IMAGE,$dbpath,$meta),
update:output($todo=>count()))

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

@ -7,7 +7,7 @@ import module namespace cfg = "quodatum:media.image.configure" at "../../../conf
for $meta in collection($cfg:DB-IMAGE || "/meta")/metadata
let $loc:=db:path($meta)=>tokenize("/")
let $name:=$loc[count($loc)-1]
let $path:= subsequence($loc,1,count($loc)-1)=>string-join("/")
let $path:= subsequence($loc,2,count($loc)-2)=>string-join("/")
let $image:=<image>
<file name="{$name}" path="{$path}"/>{
metadata:core($meta),
@ -15,4 +15,4 @@ for $meta in collection($cfg:DB-IMAGE || "/meta")/metadata
metadata:keywords($meta)
} </image>
let $target:="image/"|| $path || "/image.xml"
return db:replace($cfg:DB-IMAGE,$target,$image)
return db:replace($cfg:DB-IMAGE,$target=>trace(),$image)

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

@ -8,12 +8,15 @@ declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $CHUNK:=1000;
declare variable $DEST:="/pics.xml";
declare variable $SIZE:=xs:integer(100);
declare %updating function local:store-thumb($f as xs:string)
{
let $src:=$cfg:IMAGEDIR || "../" || trace($f)
let $trg:= $cfg:THUMBDIR || $f
return try{
fetch:binary($src)=>t:size(80)=>local:write-binary($trg)
fetch:binary($src)=>t:size($SIZE)=>local:write-binary($trg)
} catch * {
update:output("bad: " || $f)
}
@ -30,7 +33,7 @@ declare %updating function local:write-binary($data,$url as xs:string)
)
};
let $files:= doc($cfg:DB-IMAGE || "/pics.xml")//c:file[ends-with(lower-case(@name),".jpg")]
let $files:= doc($cfg:DB-IMAGE || $DEST)//c:file[ends-with(lower-case(@name),".jpg")]
let $relpath:= $files!( ancestor-or-self::*/@name=>string-join("/"))
let $relpath:=filter($relpath,function($f){

29
src/vue-poc/features/map.vue Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<template id="leaflet">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 style="height:400px">
<l-map :zoom="zoom" :center="center" >
<l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
<l-marker :lat-lng="marker"></l-marker>
</l-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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(54.320498718, -2.739663708)
}
},
created:function(){
console.log("map")
}
}
</script>

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

@ -29,7 +29,7 @@
<tr>
<td>
<v-btn @click="get()" >
Read <v-icon>compare_arrows</v-icon>
Read <v-icon right>compare_arrows</v-icon>
</v-btn>
</td>
@ -62,7 +62,7 @@
<tr>
<td>
<v-btn @click="update()" >
Write <v-icon>compare_arrows</v-icon>
Write <v-icon right>compare_arrows</v-icon>
</v-btn>
</td>

16
src/vue-poc/features/server/upload.vue Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<template id="upload">
<v-card>
<v-card-title>Upload</v-card-title>
<v-card-actions>
<qd-fileupload>up..</qd-fileupload>
</v-card-actions>
</v-card>
</template>
<script>{
data: function(){
return {
fab: false
}
}
}</script>

1
src/vue-poc/features/session.vue
View file

@ -55,7 +55,6 @@
.then(r=>{
console.log("status",r)
this.$auth=Object.assign(this.$auth,r.data);
console.log("AFTER: ",this.$auth);
//this.$forceUpdate()
})
},

9
src/vue-poc/features/tasks/rxq-tasks.xqm
View file

@ -3,7 +3,7 @@
:)
module namespace vue-rest = 'quodatum:vue.tasks';
import module namespace query-a = 'vue-poc/query-a' at "../../lib/query-a.xqm";
import module namespace hlog = 'quodatum.data.history' at '../../lib/history.xqm';
(:~
: list tasks
:)
@ -52,9 +52,10 @@ function vue-rest:runtask($task)
{
let $task:=doc("taskdef.xml")/tasks/task[@name=$task]
let $url:=resolve-uri($task/@url)
let $params:=query-a:params($url)
return (
query-a:run($url,query-a:params($url)),
query-a:run($url,$params),
hlog:save(<task url="{ $url }"/>)
)
};

10
src/vue-poc/features/tasks/task/task.vue
View file

@ -59,9 +59,13 @@
this.loading=true;
this.$refs.params.submit()
.then(r=>{
this.loading= false
this.snackbar= {show:true,msg:r.data.msg,context:"success"}
console.log(r.data)
this.loading= false
this.snackbar= {show:true,
msg: r.data && r.data.msg,
context:"success"
};
console.log(r)
})
.catch(error=>{
this.loading= false

5
src/vue-poc/features/tasks/task/tx-dbimport.xq
View file

@ -12,7 +12,7 @@ import module namespace dbtools = 'quodatum.dbtools' at "../../../lib/dbtools.xq
declare variable $srcpath as xs:anyURI external :="C:/Users/andy/git/vue-poc/src/vue-poc/models/entities";
(:~ Target BaseX db root path for imported files
: @default /vuepoc-test/
: @default vuepoc-test
:)
declare variable $targetpath as xs:anyURI external :="/vuepoc-test";
@ -21,5 +21,4 @@ declare variable $targetpath as xs:anyURI external :="/vuepoc-test";
:)
declare variable $boolean as xs:boolean external :=false();
let $result:=<json type="object"><hello>TODO</hello></json>
return $result
dbtools:sync-from-path($targetpath, $srcpath)

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

@ -18,7 +18,7 @@ declare
%updating
function vue-api:model()
{
resolve-uri($vue-api:query)=>query-a:update(query-a:params())
resolve-uri($vue-api:query)=>query-a:update(query-a:params($vue-api:query))
};
(:~

3
src/vue-poc/features/validate/rq-validate.xqm
View file

@ -19,7 +19,8 @@ declare
%updating
function tx:run( )
{
resolve-uri("tx-validate.xq")=>query-a:run(query-a:params())
let $url:= resolve-uri("tx-validate.xq")
return query-a:run-json($url,query-a:params($url))
};
(:~ validation settings

27
src/vue-poc/lib/query-a.xqm
View file

@ -4,7 +4,7 @@
: @author Andy Bunce, 2018
:)
module namespace query-a = 'vue-poc/query-a';
import module namespace hlog = 'quodatum.data.history' at 'history.xqm';
import module namespace request = "http://exquery.org/ns/request";
declare namespace map2='http://www.woerteler.de/xquery/modules/map-extras';
(:~
@ -66,19 +66,28 @@ declare
%updating
function query-a:run($query as xs:anyURI,$params as map(*))
{
(
<json type="object">
<res>{ xquery:invoke($query,$params)}</res>
<params>todo</params>
</json>=>update:output(),
hlog:save(<task url="{ $query }"/>)
)
let $updating:=xquery:parse-uri($query)/@updating/boolean(.)
return if($updating) then
xquery:invoke-update($query,$params)
else
<json type="object">
<res>{ xquery:invoke($query,$params)}</res>
<params>todo</params>
</json>=>update:output()
};
declare
%updating
function query-a:run-json($query as xs:anyURI,$params as map(*))
{
xquery:invoke($query,$params)=>update:output()
};
declare
%updating
function query-a:update($query as xs:anyURI,$params as map(*))
{
xquery:invoke-update($query,$params)
xquery:invoke-update($query,$params)
};

3
src/vue-poc/router.js
View file

@ -83,6 +83,7 @@ const router = new VueRouter({
{ path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
{ path: 'jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
{ path: 'ping', component: Ping,meta:{title:"Ping"} },
{ path: 'upload', component: Upload,meta:{title:"Upload"} },
{ path: 'websocket', component: Websocket,meta:{title:"Web socket"} }
]
},
@ -108,7 +109,7 @@ const router = new VueRouter({
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/tree', component: Tree, meta:{title:"tree"} },
{ path: '/tree2', component: Tree2, meta:{title:"tree2"} },
{ path: '/map', component: Map,meta:{title:"map"} },
{ path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/form', component: Brutusin, meta:{title:"Form demo"} },
{ path: '/form2', component: Formsjson, meta:{title:"Form schema"} },

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

@ -1,4 +1,4 @@
// generated 2018-08-15T17:56:05.102+01:00
// generated 2018-08-20T23:31:08.866+01:00
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-autoheight.vue
Vue.component('qd-autoheight',{template:`
@ -53,13 +53,13 @@ Vue.component('qd-confirm',{template:`
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-fileupload.vue
Vue.component('qd-fileupload',{template:`
<vue-clip :options="options">
<template slot="clip-uploader-action">
<template slot-scope="clip-uploader-action">
<div>
<div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
</div>
</template>
<template slot="clip-uploader-body" scope="props">
<template slot-scope="clip-uploader-body" scope="props">
<div v-for="file in props.files">
<img v-bind:src="file.dataUrl">
{{ file.name }} {{ file.status }}
@ -233,7 +233,7 @@ Vue.component('qd-table',{template:`
<v-container fluid="">
<v-card>
<v-toolbar>
<v-text-field append-icon="search" label="Filter user" single-line="" hide-details="" v-model="search"></v-text-field>
<v-text-field append-icon="search" label="Filter user" single-line="" hide-details="" v-model="search" clearable=""></v-text-field>
<v-spacer></v-spacer>
<v-btn icon="" :loading="loading" :disabled="loading" @click="getItems">
<v-icon>refresh</v-icon>
@ -550,7 +550,7 @@ Vue.component('vp-paramform',{template:`
<div :title="url">{{ updating }}</div>
<v-layout row="">
<v-layout column="" xs10="">
<v-layout column="" xs11="">
<v-flex v-for="field in fields" :key="field.model">
<v-text-field v-if="field.type === 'xs:anyURI'" :full-width="true" v-model="params[field.model]" :label="field.label" clearable="" :rules="fieldrules(field)" box="" append-outer-icon="send" @click:append-outer="source(field)"></v-text-field>
@ -567,7 +567,7 @@ Vue.component('vp-paramform',{template:`
</v-flex>
</v-layout>
<v-layout align-center="" justify-center="" column="" fill-height="" xs2="" amber="" lighten-5="">
<v-layout align-center="" justify-center="" column="" fill-height="" xs1="" amber="" lighten-5="">
<v-btn @click="clear()">Clear</v-btn>
<v-btn @click="reset()">Reset</v-btn>
</v-layout>
@ -1319,16 +1319,12 @@ const Files=Vue.extend({template:`
<v-card>
<v-toolbar dense="">
<v-btn icon="" :to="{query: { url: '/' }}">
<v-icon>{{icon}}</v-icon>
</v-btn>
<v-toolbar-title>
<v-breadcrumbs>
<span slot="divider" style="padding:0;"></span>
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url: item.path }}" :exact="true">
<v-icon v-if="item.icon">{{ icon }}</v-icon>
{{ item.name }}
</v-breadcrumbs-item>
</v-breadcrumbs>
@ -1562,11 +1558,13 @@ const Files=Vue.extend({template:`
},
// array of {name:"that", path:"/this/that/"} for url
crumbs(){
var url=this.url
return url.split("/").slice(0,-1).map(
function(v,i,a){return {name:v +"/",
path:a.slice(0,i+1).join("/")+"/"}}
)
var url=this.url.split("/").slice(0,-1).map(
function(v,i,a){return {name: v +"/",
path: a.slice(0,i+1).join("/")+"/"}}
);
url[0].icon=this.icon;
console.log("CRUM",url)
return url;
},
selection(){
return this.items.filter(item=>{return item.selected} )
@ -2540,7 +2538,7 @@ const Tabs=Vue.extend({template:`
},
loadItem(url){
HTTP.get("get2",{params: {url:url}})
HTTP.get("get",{params: {url:url}})
.then(r=>{
console.log(r)
var tab={
@ -3413,7 +3411,7 @@ const Images=Vue.extend({template:`
</v-autocomplete>
<v-menu lazy="" :close-on-content-click="false" v-model="menu2" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
<v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly=""></v-text-field>
<v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly="" clearable=""></v-text-field>
<v-date-picker v-model="query.from" scrollable="" actions="">
<template slot-scope="{ save, cancel }">
@ -3428,7 +3426,7 @@ const Images=Vue.extend({template:`
<v-menu lazy="" :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
<v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly=""></v-text-field>
<v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly="" clearable=""></v-text-field>
<v-date-picker v-model="query.until" scrollable="" actions="">
<template slot-scope="{ save, cancel }">
@ -3440,7 +3438,7 @@ const Images=Vue.extend({template:`
</v-date-picker>
</v-menu>
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location:"></v-checkbox>
<v-checkbox :value="location.value" :indeterminate="location.use" @click="cyclelocation" label="With location"></v-checkbox>
</v-card-text>
@ -3511,6 +3509,7 @@ const Images=Vue.extend({template:`
},
getImages(){
this.busy=true
console.log("Images",this.query);
var t0 = performance.now();
HTTP.get("images/list",{params:this.query})
.then(r=>{
@ -3616,6 +3615,145 @@ const Images=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/images/imagesfilter.vue
const Imagesfilter=Vue.extend({template:`
<v-card>
<v-toolbar class="green white--text">
<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>
<v-card-text>
<v-autocomplete v-bind:items="keywords" v-model="query.keyword" label="Keyword" item-value="text" item-text="text" clearable="">
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title v-html="data.item.text"></v-list-tile-title>
<v-list-tile-sub-title v-html="data.item.count"></v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-autocomplete>
<v-menu lazy="" :close-on-content-click="false" v-model="menu2" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
<v-text-field slot="activator" label="Earliest date" v-model="query.from" prepend-icon="event" readonly="" clearable=""></v-text-field>
<v-date-picker v-model="query.from" scrollable="" actions="">
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat="" color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker></v-menu>
<v-menu lazy="" :close-on-content-click="false" v-model="showUntil" transition="scale-transition" offset-y="" full-width="" :nudge-left="40" max-width="290px">
<v-text-field slot="activator" label="Latest date" v-model="query.until" prepend-icon="event" readonly="" clearable=""></v-text-field>
<v-date-picker v-model="query.until" scrollable="" actions="">
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-btn flat="" color="primary" @click="cancel()">Cancel</v-btn>
<v-btn flat="" color="primary" @click="save()">Save</v-btn>
</v-card-actions>
</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>
<v-spacer></v-spacer>
<v-btn @click="showFilter = false" color="primary">Apply</v-btn>
</v-card-actions>
</v-card>
`,
data(){
return {
query: {page:0, // current page
from:null,
until:null,
keyword:null
},
showFilter: false,
busy: false,
menu2: false,
showUntil: false,
keywords: [],
showInfo: false,
selitem: "TODO",
location: {use:false,value:true},
}
},
methods:{
cyclelocation(){
this.location.use=!this.location.use
},
clear(){
this.query.from=null;
this.query.until=null;
this.query.keyword=null;
this.query.page=0;
},
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
},
},
watch:{
"query":{
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
},
showFilter(){
if(this.keywords.length==0){
HTTP.get("images/keywords2")
.then(r=>{
this.keywords=r.data.items
})
}
}
},
created:function(){
console.log("create images")
this.query.page=Number(this.$route.query.page) || this.query.page
this.query.keyword=this.$route.query.keyword || this.query.keyword
this.query.from=this.$route.query.from || this.query.from
this.query.until=this.$route.query.until || this.query.until
this.getImages()
},
mounted:function(){
console.log("image filter mount")
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/images/ireport.vue
const Report=Vue.extend({template:`
<v-container fluid="">
@ -4012,6 +4150,36 @@ const Login=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/map.vue
const Leaflet=Vue.extend({template:`
<v-container fluid="">
<v-layout row="" wrap="">
<v-flex xs12="" style="height:400px">
<l-map :zoom="zoom" :center="center">
<l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
<l-marker :lat-lng="marker"></l-marker>
</l-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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(54.320498718, -2.739663708)
}
},
created:function(){
console.log("map")
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/documentation.vue
const Documentation=Vue.extend({template:`
<v-container fluid="">
@ -4716,7 +4884,7 @@ const Ping=Vue.extend({template:`
<tr>
<td>
<v-btn @click="get()">
Read <v-icon>compare_arrows</v-icon>
Read <v-icon right="">compare_arrows</v-icon>
</v-btn>
</td>
@ -4749,7 +4917,7 @@ const Ping=Vue.extend({template:`
<tr>
<td>
<v-btn @click="update()">
Write <v-icon>compare_arrows</v-icon>
Write <v-icon right="">compare_arrows</v-icon>
</v-btn>
</td>
@ -4848,6 +5016,24 @@ const Ping=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/server/upload.vue
const Upload=Vue.extend({template:`
<v-card>
<v-card-title>Upload</v-card-title>
<v-card-actions>
<qd-fileupload>up..</qd-fileupload>
</v-card-actions>
</v-card>
`,
data: function(){
return {
fab: false
}
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/session.vue
const Session=Vue.extend({template:`
<v-container fluid="">
@ -4903,7 +5089,6 @@ const Session=Vue.extend({template:`
.then(r=>{
console.log("status",r)
this.$auth=Object.assign(this.$auth,r.data);
console.log("AFTER: ",this.$auth);
//this.$forceUpdate()
})
},
@ -5272,9 +5457,13 @@ const Runtask=Vue.extend({template:`
this.loading=true;
this.$refs.params.submit()
.then(r=>{
this.loading= false
this.snackbar= {show:true,msg:r.data.msg,context:"success"}
console.log(r.data)
this.loading= false
this.snackbar= {show:true,
msg: r.data && r.data.msg,
context:"success"
};
console.log(r)
})
.catch(error=>{
this.loading= false
@ -6069,6 +6258,7 @@ const router = new VueRouter({
{ path: 'jobs', name:"jobs", component: Jobs, meta:{title:"Jobs running"} },
{ path: 'jobs/:job', name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
{ path: 'ping', component: Ping,meta:{title:"Ping"} },
{ path: 'upload', component: Upload,meta:{title:"Upload"} },
{ path: 'websocket', component: Websocket,meta:{title:"Web socket"} }
]
},
@ -6094,7 +6284,7 @@ const router = new VueRouter({
{ path: '/timeline', component: Timeline,meta:{title:"timeline"} },
{ path: '/tree', component: Tree, meta:{title:"tree"} },
{ path: '/tree2', component: Tree2, meta:{title:"tree2"} },
{ path: '/map', component: Map,meta:{title:"map"} },
{ path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/form', component: Brutusin, meta:{title:"Form demo"} },
{ path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
@ -6177,7 +6367,9 @@ const Vuepoc=Vue.extend({template:`
</v-btn>
<v-list>
<v-list-tile to="/session" avatar="" ripple="">
<v-list-tile-title>Session</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="logout()">
<v-list-tile-title>logout</v-list-tile-title>
</v-list-tile>
@ -6206,7 +6398,7 @@ const Vuepoc=Vue.extend({template:`
</v-list-tile>
<v-divider></v-divider>
<v-list-tile>
<v-list-tile-title>Refresh:</v-list-tile-title>
<v-list-tile-title>Server hot load:</v-list-tile-title>
<v-list-tile-action><v-btn @click="init">.init</v-btn></v-list-tile-action>
</v-list-tile>
</v-list>
@ -6282,6 +6474,7 @@ const Vuepoc=Vue.extend({template:`
{href: '/server/users',text: 'Users',icon: 'supervisor_account'},
{href: '/server/repo',text: 'Server code repository',icon: 'local_library'},
{href: '/server/websocket',text: 'Web socket',icon: 'swap_calls'},
{href: '/server/upload',text: 'Upload to server',icon: 'file_upload'},
{href: '/server/ping',text: 'Ping',icon: 'update'}
]},
{
@ -6312,8 +6505,6 @@ const Vuepoc=Vue.extend({template:`
text: 'More' ,
model: false,
children: [
{href: '/session',text: 'Session',icon: 'person'},
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
@ -6394,7 +6585,7 @@ const Vuepoc=Vue.extend({template:`
HTTP.get("status")
.then(r=>{
console.log("status",r)
//console.log("status",r)
this.$auth=Object.assign(this.$auth,r.data);
console.log("AFTER: ",this.$auth);
//this.$forceUpdate()
@ -6586,13 +6777,14 @@ function install (Vue) {
};
Vue.use({ install: install });
var sockhost=('https:'==window.location.protocol?'wss:':'ws:')+'//'+ window.location.host +'/ws';
Vue.use(VueNativeSock.default, sockhost);
console.log("SOCK UP",VueNativeSock,sockhost);
//Vue.use(VueNativeSock.default, sockhost);
//console.log("SOCK UP",VueNativeSock,sockhost);
//leaflet
//Vue.component('v-map', Vue2Leaflet.Map);
//Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
//Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tilelayer', Vue2Leaflet.LTileLayer);
Vue.component('l-marker', Vue2Leaflet.LMarker);
//function install (Vue) {
// Vue.component('form-schema', window["vue-json-schema"].default);
//};

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

@ -3,7 +3,6 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Vue poc" />
<meta name="author" content="andy bunce." />
@ -11,9 +10,10 @@
<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="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="//unpkg.com/vuetify@1.1.12/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link href="//unpkg.com/vuetify@1.1.13/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.css">
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.css"/>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
<link href="/vue-poc/ui/svg/d3-svg.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
@ -38,7 +38,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
<script src="//unpkg.com/vuetify@1.1.12/dist/vuetify.min.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vuetify@1.1.13/dist/vuetify.min.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-language_tools.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-linking.js" type="text/javascript" charset="utf-8"></script>
@ -49,10 +49,13 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.7.1/localforage.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue-clip@1.0.0/dist/vue-clip.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue-clip@1.0.0/dist/vue-clip.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue-jstree@2.1.6/dist/vue-jstree.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue2-leaflet@1.0.2/dist/vue2-leaflet.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue-json-schema@1.1.1/dist/vue-json-schema.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue-form-json-schema@1.15.3/dist/vue-form-json-schema.umd.js" crossorigin="anonymous"></script>