- deal with multiple devices

src/components/task/content/TaskContent.vue

@@ -45,7 +45,6 @@
             <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
           </div>
         </div>
-
       </div>
 
       <div :class="chartAreaClass">
@@ -94,18 +93,18 @@
                 />
               </div>
             </div>
-
             <div style="height: 150px;">
             </div>
-
           </div>
-
         </div>
-
       </div>
-
+      <StatusBar v-for="(toast, index) in toasts"
+        :key="index"
+        :message="toast.message"
+        :index="index"
+        @destroyed="removeToast(index)">
+      </StatusBar>
     </div>
-
   </div>
 </template>
 
@@ -121,6 +120,7 @@ import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
 import { v4 as uuid } from 'uuid'
+import StatusBar from './status/statusBar.vue'
 // import music from '@/assets/Beep_high_normal.aac'
 
 // TODO change chart data tag format
@@ -132,6 +132,7 @@ export default {
     // TaskDevices,
     TaskDevicesNew,
     TaskFormula,
+    StatusBar,
   },
   computed: {
     ...mapFields('taskContent', [
@@ -159,13 +160,18 @@ export default {
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
       getParmDone: false,
       batteryInterval: {},
+      toasts: [
+      ],
     }
   },
   mqtt: {
     async '+/play_sound/+' (data, topic) {
-      if (this.showWanrningModal === false) {
-        this.showWanrningModal = true
-        await this.playSound()
+      const device = JSON.parse(String.fromCharCode.apply(null, data)).data
+      if (device) {
+        if (!this.toasts.find((toast) => toast.device === device)) {
+          this.toasts.push({ device: device, message: `Device ${device} Alert` })
+          await this.playSound()
+        }
       }
     },
     async '+/device_battery/+' (data, topic) {
@@ -176,7 +182,6 @@ export default {
     async '+/get_device_info_all/+' (data, topic) {
       // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
       this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data
-
       // console.log(this.deviceListNew)
 
       for (let i = 0; i < this.deviceListNew.length; i++) {
@@ -650,12 +655,18 @@ export default {
     },
     playSound: async function () {
       const a = document.getElementById('alert')
-      setTimeout(async () => {
-        await this.closeAlert()
-      }, 30000)
+      // setTimeout(async () => {
+      //   await this.closeAlert()
+      // }, 30000)
       a.loop = true
       await a.play()
     },
+    removeToast: function (index) {
+      this.toasts.splice(index, 1)
+      if (this.toasts.length === 0) {
+        this.closeAlert()
+      }
+    },
     closeAlert: async function () {
       this.showWanrningModal = false
       const a = document.getElementById('alert')

src/components/task/content/status/statusBar.vue

@@ -0,0 +1,67 @@
+<template>
+  <transition name="fade">
+    <div class="toast" :style="{ bottom: (25 +( 50 * (index))) + 'px' }" v-if="show">
+      {{ message }}
+      <span class="close-button" @click="remove">&#x2715;</span>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    message: String,
+    duration: {
+      type: Number,
+      default: 3000,
+    },
+    index: Number,
+  },
+  data () {
+    return {
+      show: true,
+    }
+  },
+  methods: {
+    remove: function () {
+      this.$emit('destroyed')
+    },
+  },
+  mounted () {
+    this.show = true
+    // setTimeout(() => {
+    //   this.show = false
+    //   this.$emit('destroyed')
+    // }, this.duration)
+  },
+}
+</script>
+
+<style lang="scss">
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 0.5s;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+      opacity: 0;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background-color: #333333;
+      color: white;
+      padding: 10px;
+      border-radius: 5px;
+    }
+
+    .close-button {
+      margin-left: 10px;
+      color: white;
+      cursor: pointer;
+    }
+
+</style>