add delete function

src/App.vue

@@ -39,9 +39,10 @@
       :vertical-compact="true"
       :margin="[10, 10]"
       :use-css-transforms="true"
+      :responsive="true"
     >
       <grid-item
-        v-for="(widget) in widgetList"
+        v-for="(widget,index) in widgetList"
         :x="widget.x"
         :y="widget.y"
         :w="widget.w"
@@ -53,7 +54,7 @@
       >
         <div style="border-color: rgb(206, 212, 218);">
           <div class="vue-draggable-handle" style="height:20px;background-color:rgb(0, 123, 255)"></div>
-          <component class="no-drag" :is="widget.widgetComponentName" :ref="widget.ref"></component>
+          <component class="no-drag" :is="widget.widgetComponentName" :ref="widget.ref"  :index="index" :widgetList="widgetList" @del="deleteWidget"></component>
         </div>
       </grid-item>
     </grid-layout>
@@ -127,6 +128,12 @@ export default class App extends Vue {
     "CardReader"
   ];
 
+  deleteWidget(index:number):void{
+     console.log("deleteWidget"+index);
+      this.widgetList.splice(index, 1);
+     console.log(this.widgetList);
+  }
+  
 
   toggleShowAddWidget(): void {
     this.isShowAddWidget = !this.isShowAddWidget;

src/components/AutoBroadcast/AutoBroadcast.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -96,6 +105,7 @@
 import Vue from "vue";
 import PubSub from 'pubsub-js';
 import { VueSvgGauge } from "vue-svg-gauge";
+import { WidgetRef } from "@/models/WidgetRef";
 import Component from "vue-class-component";
 import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
@@ -117,6 +127,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class AutoBroadcast extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "AutoBroadcast";
@@ -155,6 +167,13 @@ export default class AutoBroadcast extends Widget {
     clearInterval(this.timer);
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+      this.destroyed();
+  }
+
   updateUI() {
     this.isShowPath = false;
     this.isShowParams = true;

src/components/CardReader/CardReader.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -61,6 +68,7 @@
 import Vue from "vue";
 import { VueSvgGauge } from "vue-svg-gauge";
 import Component from "vue-class-component";
+import { WidgetRef } from "@/models/WidgetRef";
 import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
@@ -81,6 +89,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class CardReader extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "CardReader";
@@ -116,6 +126,12 @@ export default class CardReader extends Widget {
     clearInterval(this.timer);
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   updateUI() {
     this.isShowPath = false;
     this.isShowParams = true;

src/components/Config/Config.vue

 <template>
   <b-container class="bv-example-row">
+
   <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.get.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
        <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -87,6 +94,7 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
+import { WidgetRef } from "@/models/WidgetRef";
 import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
@@ -108,6 +116,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class Config extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "Config";
@@ -145,6 +155,12 @@ export default class Config extends Widget {
     );
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   updateUI() {
     this.updateGetUI();
     this.updateSetUI();

src/components/Method/Method.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -15,8 +22,6 @@
 
     <br />
 
-    <br />
-
     <b-row>
       <b-col>
         <b-input-group size="lg" prepend="path" v-show="isShowPath">
@@ -53,6 +58,7 @@
 import Vue from "vue";
 import { VueSvgGauge } from "vue-svg-gauge";
 import Component from "vue-class-component";
+import { WidgetRef } from "@/models/WidgetRef";
 import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
@@ -73,6 +79,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class Method extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "Method";
@@ -109,6 +117,12 @@ export default class Method extends Widget {
     );
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   showPathConfig() {
     this.isShowPath = !this.isShowPath;
   }

src/components/SlideShow/SlideShow.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" size="lg" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" size="lg" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -76,12 +83,14 @@
 
 <script lang="ts">
 import Vue from "vue";
+import PubSub from 'pubsub-js';
 import { VueSvgGauge } from "vue-svg-gauge";
 import Component from "vue-class-component";
 import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
 import { Widget } from "@/models/widget";
+import { WidgetRef } from "@/models/WidgetRef";
 import { ResourceInfo } from "@/models/Customview";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
 import axios from "axios";
@@ -98,6 +107,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class SlideShow extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "SlideShow";
@@ -138,6 +149,12 @@ export default class SlideShow extends Widget {
     console.log(this.timer);
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   turnLastImg()
   {
     if(this.isPause == true && this.currentImgIndex >= 0)

src/components/State/State.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -69,6 +76,7 @@ import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
 import { Widget } from "@/models/widget";
 import { ResourceInfo } from "@/models/Customview";
+import { WidgetRef } from "@/models/WidgetRef";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
 import axios from "axios";
 import PathProcessor from "@/models/PathProcessor";
@@ -84,6 +92,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class State extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "State";
@@ -120,6 +130,12 @@ export default class State extends Widget {
     clearInterval(this.timer);
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+  
   updateUI() {
     this.isShowPath = false;
     this.isShowParams = true;

src/components/Status/Status.vue

@@ -6,6 +6,12 @@
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -69,6 +75,7 @@ import { UpdatePayload } from "@/models/UpdatePayload";
 import { Widget } from "@/models/widget";
 import { ResourceInfo } from "@/models/Customview";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
+import { WidgetRef } from "@/models/WidgetRef";
 import axios from "axios";
 import PathProcessor from "@/models/PathProcessor";
 import StrMapObjChange from "@/models/StrMapObjChange";
@@ -83,6 +90,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class Status extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "Status";
@@ -118,6 +127,12 @@ export default class Status extends Widget {
     clearInterval(this.timer);
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   updateUI() {
     this.isShowPath = false;
     this.isShowParams = true;

src/components/Thing/Thing.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
@@ -7,23 +8,17 @@
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
       <b-col>
-        <b-button @click="showPathConfig" variant="primary" style="float:right">
-          <span class="glyphicon glyphicon-cog"></span>
-        </b-button>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
       </b-col>
     </b-row>
 
-    <br />
-
-    <!-- <b-row>
+    <b-row style="margin-top:10px">
       <b-col>
-        <div
-          style="width:100%;overflow:auto;border-style: solid; border-width: 1px;"
-        >
-          <p style="float:left;margin:0px" class="largeFont">{{ StatusValue }}</p>
-        </div>
+        <b-button @click="showPathConfig" variant="primary" style="float:right">
+          <span class="glyphicon glyphicon-cog"></span>
+        </b-button>
       </b-col>
-    </b-row> -->
+    </b-row>
 
     <br />
 
@@ -68,6 +63,7 @@ import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
 import { Widget } from "@/models/widget";
 import { ResourceInfo } from "@/models/Customview";
+import { WidgetRef } from "@/models/WidgetRef";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
 import axios from "axios";
 import PathProcessor from "@/models/PathProcessor";
@@ -83,6 +79,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class Thing extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "Thing";
@@ -110,13 +108,11 @@ export default class Thing extends Widget {
     );
   }
 
-  // mounted() {
-  //   this.timer = setInterval(this.refresh, 1000);
-  // }
-
-  // destroyed() {
-  //   clearInterval(this.timer);
-  // }
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
 
   updateUI() {
     this.isShowPath = false;

src/components/VarBroadcast/VarBroadcast.vue

 <template>
   <b-container class="bv-example-row">
+
     <b-row style="margin-top:10px">
       <b-col>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
         <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
         <b-form-input v-show="isShowPath" v-model="config.data.displayname"></b-form-input>
       </b-col>
+      <b-col>
+        <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+      </b-col>
+    </b-row>
+
+    <b-row style="margin-top:10px">
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right">
           <span class="glyphicon glyphicon-cog"></span>
@@ -50,6 +57,7 @@ import { Prop, Watch } from "vue-property-decorator";
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
 import { Widget } from "@/models/widget";
+import { WidgetRef } from "@/models/WidgetRef";
 import { ResourceInfo } from "@/models/Customview";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
 import axios from "axios";
@@ -66,6 +74,8 @@ import Navigation from "@/components/Common/Navigation.vue";
   }
 })
 export default class VarBroadcast extends Widget {
+  @Prop() index!:number;
+  @Prop() widgetList:WidgetRef[] = [];
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "VarBroadcast";
@@ -92,6 +102,12 @@ export default class VarBroadcast extends Widget {
     );
   }
 
+  del()
+  {
+      this.$emit('del', this.index);
+      console.log("del"+this.index);
+  }
+
   updateUI() {
     this.isShowPath = false;
     this.isShowParams = true;

src/components/WaveView/WaveView.vue

 <template>
 <div class="waveView">
+    <div style="margin-top:10px">
+    <b-button style="float:right" @click="del" text="Button" variant="outline-primary"><span class="glyphicon glyphicon-remove"></span></b-button>
+    </div>
+    <br/>
     <showViewInfo ref="showViewInfo" :pathId="pathId" @showPathIdConfig="showPathIdConfig"></showViewInfo>
     <div ref="wave">
     
@@ -19,6 +23,7 @@ import { Prop, Watch } from 'vue-property-decorator';
 import { WidgetConfig } from '@/models/WidgetConfig';
 import { UpdatePayload } from '@/models/UpdatePayload';
 import { Widget } from '@/models/widget';
+import { WidgetRef } from "@/models/WidgetRef";
 import StrMapObjChange from "@/models/StrMapObjChange";
 import { ResourceInfo } from "@/models/Customview";
 import axios from "axios";
@@ -32,6 +37,8 @@ import axios from "axios";
     }
 })
 export default class waveView extends Widget {
+    @Prop() index!:number;
+    @Prop() widgetList:WidgetRef[] = [];
     WidgetComponentName: string = 'waveView';
     wave: any = '';
     pathId: string = '';
@@ -55,6 +62,12 @@ export default class waveView extends Widget {
         }
     };
 
+    del()
+    {
+        this.$emit('del', this.index);
+        console.log("del"+this.index);
+    }
+
     getConfig(): WidgetConfig {
         (this.$refs.setBasicParams as setBasicParams).updateUserInputData();
         return this.config;