From 9b34c2462ee285636069440278ecb9cafc3766c9 Mon Sep 17 00:00:00 2001
From: andy <bunce.andy@gmail.com>
Date: Tue, 13 Feb 2018 22:28:15 +0000
Subject: [PATCH] notifications and fav as components

---
 src/vue-poc/app.vue                     |  81 +---------
 src/vue-poc/features/images/images.xqm  |   8 +-
 src/vue-poc/features/images/ireport.vue |  15 +-
 src/vue-poc/router.js                   |   2 +-
 src/vue-poc/static/app-gen.js           | 192 +++++++++++++++---------
 5 files changed, 148 insertions(+), 150 deletions(-)

diff --git a/src/vue-poc/app.vue b/src/vue-poc/app.vue
index bd470f5..4990178 100644
--- a/src/vue-poc/app.vue
+++ b/src/vue-poc/app.vue
@@ -9,35 +9,7 @@
       app
       width="500"
     >
-    <v-card>
-         <v-toolbar class="amber white--text">
-                <v-toolbar-title >Notifications </v-toolbar-title>
-                {{ $notification.nextId }}
-          <v-spacer></v-spacer>
-          <v-btn  @click="showNotifications = false" icon><v-icon>close</v-icon></v-btn>
-          </v-toolbar>
-          <v-card-text>
-        <v-list three-line>
-          <template v-for="msg in $notification.messages" >
-           <v-list-tile avatar  v-bind:key="msg.index" @click="">
-              <v-list-tile-avatar>
-                   <v-icon color="red">swap_horiz</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-              <v-tooltip>
-                <v-list-tile-title  slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
-                <span v-text="msg.created"></span>
-                </v-tooltip>
-                <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
-              </v-list-tile-action>
-            </v-list-tile>
-           </template>
-         </v-list>
-      </v-card-text>
-      </v-card>
+    <vp-notifications :show-notifications.sync="showNotifications"></vp-notifications>
 </v-navigation-drawer>
  <v-navigation-drawer  app :mini-variant.sync="mini" v-model="drawer"   
  :disable-route-watcher="true"  :enable-resize-watcher="true">
@@ -68,41 +40,8 @@
  <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-menu
-      offset-x
-      :close-on-content-click="false"
-      :nudge-width="200"
-      v-model="frmFav"
-    >
-      <v-btn slot="activator" @click="frmFav = !frmFav" icon flat title="Bookmark this page">
-       <v-icon>star_border</v-icon>
-       </v-btn>
-
-       <v-card style="width:400px;">
-            <v-toolbar class="amber"> 
-        <v-card-title>
-            Bookmark this page
-          </v-card-title>
-          </v-toolbar>
-          
-         <v-card-text>
-            <h6>{{$route.meta.title}}</h6>
-            <v-select
-              v-model="tags"
-              label="tags"
-              chips
-              tags
-              :items="taglist"
-            ></v-select>
-         </v-card-text>
-         
-         <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn>
-            <v-btn color="primary" flat @click.stop="favorite();frmFav=false">Save</v-btn>
-          </v-card-actions>
-        </v-card>
-   </v-menu>
+  <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
+ 
   <v-spacer></v-spacer>
    <v-select
               placeholder="Search..." prepend-icon="search"
@@ -171,15 +110,8 @@
     mini: false,
     dark: false,
     alert: {show:false,msg:"Hello"},
-    frmFav: false,
-    tags: [],
-    taglist: [
-      'todo',
-      'find',
-      'some',
-      'good',
-      'tags'
-    ],
+    frmfav: false,
+  
     items: [
       {href: '/',text: 'Home', icon: 'home'    },
       {
@@ -280,9 +212,6 @@
       },
       onDark(dark){
         this.dark=dark
-      },
-      favorite(){
-        alert("@TODO")
       }
   },
   watch: {
diff --git a/src/vue-poc/features/images/images.xqm b/src/vue-poc/features/images/images.xqm
index b3bf404..c9b5bb7 100644
--- a/src/vue-poc/features/images/images.xqm
+++ b/src/vue-poc/features/images/images.xqm
@@ -34,17 +34,17 @@ declare
 %output:method("html")  %output:version("5.0") 
 function vue-api:report()   
 {
-<div>
+<div id="A0">
 something
 <ol>
 <li>$cfg:IMAGEDIR: <code>{ $cfg:IMAGEDIR }</code> </li>
 <li>$cfg:THUMBDIR: <code>{ $cfg:THUMBDIR }</code> </li>
-<li><a href="#A30">A30</a></li>
+<li><a href="#A30" >A30</a></li>
 <li><a href="#A50">A50</a></li>
 </ol>
 {for $i in 1 to 50 return <p>{$i}: 
-<a name="A{$i}">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Morbi aliquam sodales justo, aliquet eleifend ex bibendum eget. Nullam vitae maximus ipsum. Sed maximus felis in interdum maximus. Vestibulum quis urna vel dolor placerat iaculis non at metus. Curabitur nec dictum mauris. Duis placerat magna non pellentesque pulvinar. Nam a eleifend sapien. Suspendisse potenti. Vestibulum nunc massa, eleifend a dolor quis, feugiat condimentum est. Integer diam eros, blandit in purus in, euismod ultrices felis. Donec ipsum magna, elementum non lacus vel, rutrum ornare ante. Integer egestas sapien quam, ut posuere nisi rhoncus nec. Etiam ornare enim eu tellus laoreet, in laoreet urna sodales. Donec interdum, augue non lobortis sodales, leo elit tincidunt mi, vitae varius augue libero vel lectus. Cras imperdiet quis dolor nec gravida. 
-<a href="#A1">top</a></p>
+<a id="A{$i}" name="A{$i}">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Morbi aliquam sodales justo, aliquet eleifend ex bibendum eget. Nullam vitae maximus ipsum. Sed maximus felis in interdum maximus. Vestibulum quis urna vel dolor placerat iaculis non at metus. Curabitur nec dictum mauris. Duis placerat magna non pellentesque pulvinar. Nam a eleifend sapien. Suspendisse potenti. Vestibulum nunc massa, eleifend a dolor quis, feugiat condimentum est. Integer diam eros, blandit in purus in, euismod ultrices felis. Donec ipsum magna, elementum non lacus vel, rutrum ornare ante. Integer egestas sapien quam, ut posuere nisi rhoncus nec. Etiam ornare enim eu tellus laoreet, in laoreet urna sodales. Donec interdum, augue non lobortis sodales, leo elit tincidunt mi, vitae varius augue libero vel lectus. Cras imperdiet quis dolor nec gravida. 
+<a href="#A0">top</a></p>
 }
 </div>
 };
diff --git a/src/vue-poc/features/images/ireport.vue b/src/vue-poc/features/images/ireport.vue
index def5e2b..5449a13 100644
--- a/src/vue-poc/features/images/ireport.vue
+++ b/src/vue-poc/features/images/ireport.vue
@@ -16,7 +16,7 @@
   
     </v-toolbar>
      <v-progress-linear v-if="busy" v-bind:indeterminate="true" ></v-progress-linear>
-    <v-card-text v-if="!busy" v-html="report"></v-card-text>
+    <v-card-text v-if="!busy" v-html="report" @click.capture="onClick($event)"></v-card-text>
  </v-card>
  </v-container>
 </template>
@@ -38,6 +38,19 @@
         var t1 = performance.now();
         this.elapsed= 0.001 *(t1 - t0) 
         }) 
+    },
+    onClick(event){
+      console.log("event",event);
+      var isA= "a"== event.originalTarget.localName
+     
+      if(isA) {
+       // alert("stop this"+ event.originalTarget.hash);
+        console.log("tar",event.originalTarget.hash,document.querySelector(event.originalTarget.hash));
+        event.preventDefault();
+          this.$router.push({"hash":event.originalTarget.hash});
+        //  this.$vuetify.goTo(event.originalTarget.hash, { duration: 600,   offset: -200, easing: 'easeInOutCubic'});
+
+      }
     }
   },
   created:function(){
diff --git a/src/vue-poc/router.js b/src/vue-poc/router.js
index ad559a6..966a9f5 100644
--- a/src/vue-poc/router.js
+++ b/src/vue-poc/router.js
@@ -7,7 +7,7 @@ const router = new VueRouter({
     if (savedPosition) {
       return savedPosition
     } else if (to.hash) {
-      return { selector: to.hash, behavior: 'smooth' }
+      return { selector: to.hash, behavior: 'smooth',offset: {x:0, y: 80} }
 
     } else {
       return { x: 0, y: 0 }
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index dbac0fb..25d49fd 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2018-02-12T11:07:53.063Z
+// generated 2018-02-13T22:26:57.352Z
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
 Vue.component('qd-confirm',{template:` 
@@ -210,6 +210,60 @@ Vue.component('vis-time-line',{template:`
 }
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-favorite.vue
+Vue.component('vp-favorite',{template:` 
+  <v-menu offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmfav">
+      <v-btn slot="activator" @click="set(!frmfav)" icon="" flat="" title="Bookmark this page">
+       <v-icon>star_border</v-icon>
+       </v-btn>
+
+       <v-card style="width:400px;">
+            <v-toolbar class="green"> 
+        <v-card-title>
+            Bookmark this page
+          </v-card-title>
+          </v-toolbar>
+          
+         <v-card-text>
+            <h6>{{$route.meta.title}}</h6>
+            <v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
+         </v-card-text>
+         
+         <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
+            <v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Save</v-btn>
+          </v-card-actions>
+        </v-card>
+   </v-menu> `,
+       
+  props: { 
+    frmfav: Boolean
+  },
+  data(){
+    return {
+      tags: [],
+      taglist: [
+        'todo',
+        'find',
+        'some',
+        'good',
+        'tags'
+      ],
+    }
+  },
+  methods:{
+    set(v){
+      this.$emit('update:frmfav', v)
+    },
+    
+    favorite(){
+      alert("save");
+    }
+  }
+}
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-job.vue
 Vue.component('vp-job',{template:` 
  <v-card>
@@ -277,6 +331,55 @@ Vue.component('vp-job',{template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-notifications.vue
+Vue.component('vp-notifications',{template:` 
+   <v-card>
+         <v-toolbar class="amber white--text">
+                <v-toolbar-title>Notifications </v-toolbar-title>
+                {{ $notification.nextId }}
+                 <v-btn @click="refresh" icon=""><v-icon>refresh</v-icon></v-btn>
+          <v-spacer></v-spacer>
+          <v-btn @click="set(false)" icon=""><v-icon>close</v-icon></v-btn>
+          </v-toolbar>
+          <v-card-text>
+        <v-list three-line="">
+          <template v-for="msg in $notification.messages">
+           <v-list-tile avatar="" v-bind:key="msg.index" @click="">
+              <v-list-tile-avatar>
+                   <v-icon color="red">swap_horiz</v-icon>
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <v-tooltip>
+                <v-list-tile-title slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
+                <span v-text="msg.created"></span>
+                </v-tooltip>
+                <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
+              </v-list-tile-action>
+            </v-list-tile>
+           </template>
+         </v-list>
+      </v-card-text>
+
+      </v-card>
+ `,
+      
+  props: { 
+    showNotifications: Boolean
+  },
+  methods:{
+    set(v){
+      this.$emit('update:showNotifications', v)
+    },
+    refresh(){
+      this.$forceUpdate();
+    }
+  }
+}
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vue-ace.vue
 Vue.component('vue-ace',{template:` 
 <div style="width: 100%; height: 100%;"></div>
@@ -2056,7 +2159,7 @@ const Report=Vue.extend({template:`
   
     </v-toolbar>
      <v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
-    <v-card-text v-if="!busy" v-html="report"></v-card-text>
+    <v-card-text v-if="!busy" v-html="report" @click.capture="onClick($event)"></v-card-text>
  </v-card>
  </v-container>
  `,
@@ -2077,6 +2180,19 @@ const Report=Vue.extend({template:`
         var t1 = performance.now();
         this.elapsed= 0.001 *(t1 - t0) 
         }) 
+    },
+    onClick(event){
+      console.log("event",event);
+      var isA= "a"== event.originalTarget.localName
+     
+      if(isA) {
+       // alert("stop this"+ event.originalTarget.hash);
+        console.log("tar",event.originalTarget.hash,document.querySelector(event.originalTarget.hash));
+        event.preventDefault();
+          this.$router.push({"hash":event.originalTarget.hash});
+        //  this.$vuetify.goTo(event.originalTarget.hash, { duration: 600,   offset: -200, easing: 'easeInOutCubic'});
+
+      }
     }
   },
   created:function(){
@@ -4039,7 +4155,7 @@ const router = new VueRouter({
     if (savedPosition) {
       return savedPosition
     } else if (to.hash) {
-      return { selector: to.hash, behavior: 'smooth' }
+      return { selector: to.hash, behavior: 'smooth',offset: {x:0, y: 80} }
 
     } else {
       return { x: 0, y: 0 }
@@ -4118,35 +4234,7 @@ router.beforeEach((to, from, next) => {
 const Vuepoc=Vue.extend({template:` 
  <v-app id="app" :dark="dark">
   <v-navigation-drawer stateless="" v-model="showNotifications" right="" :disable-route-watcher="true" app="" width="500">
-    <v-card>
-         <v-toolbar class="amber white--text">
-                <v-toolbar-title>Notifications </v-toolbar-title>
-                {{ $notification.nextId }}
-          <v-spacer></v-spacer>
-          <v-btn @click="showNotifications = false" icon=""><v-icon>close</v-icon></v-btn>
-          </v-toolbar>
-          <v-card-text>
-        <v-list three-line="">
-          <template v-for="msg in $notification.messages">
-           <v-list-tile avatar="" v-bind:key="msg.index" @click="">
-              <v-list-tile-avatar>
-                   <v-icon color="red">swap_horiz</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-              <v-tooltip>
-                <v-list-tile-title slot="activator">{{ msg.created | fromNow("from") }}</v-list-tile-title>
-                <span v-text="msg.created"></span>
-                </v-tooltip>
-                <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
-              </v-list-tile-action>
-            </v-list-tile>
-           </template>
-         </v-list>
-      </v-card-text>
-      </v-card>
+    <vp-notifications :show-notifications.sync="showNotifications"></vp-notifications>
 </v-navigation-drawer>
  <v-navigation-drawer app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" :enable-resize-watcher="true">
   <v-list class="pa-0">
@@ -4176,30 +4264,8 @@ const Vuepoc=Vue.extend({template:`
  <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-menu offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmFav">
-      <v-btn slot="activator" @click="frmFav = !frmFav" icon="" flat="" title="Bookmark this page">
-       <v-icon>star_border</v-icon>
-       </v-btn>
-
-       <v-card style="width:400px;">
-            <v-toolbar class="amber"> 
-        <v-card-title>
-            Bookmark this page
-          </v-card-title>
-          </v-toolbar>
-          
-         <v-card-text>
-            <h6>{{$route.meta.title}}</h6>
-            <v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
-         </v-card-text>
-         
-         <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn>
-            <v-btn color="primary" flat="" @click.stop="favorite();frmFav=false">Save</v-btn>
-          </v-card-actions>
-        </v-card>
-   </v-menu>
+  <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
+ 
   <v-spacer></v-spacer>
    <v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select>
             
@@ -4256,15 +4322,8 @@ const Vuepoc=Vue.extend({template:`
     mini: false,
     dark: false,
     alert: {show:false,msg:"Hello"},
-    frmFav: false,
-    tags: [],
-    taglist: [
-      'todo',
-      'find',
-      'some',
-      'good',
-      'tags'
-    ],
+    frmfav: false,
+  
     items: [
       {href: '/',text: 'Home', icon: 'home'    },
       {
@@ -4365,9 +4424,6 @@ const Vuepoc=Vue.extend({template:`
       },
       onDark(dark){
         this.dark=dark
-      },
-      favorite(){
-        alert("@TODO")
       }
   },
   watch: {