implementing heartbeat bar

server/server.js

@@ -167,7 +167,7 @@ let monitorList = {};
 
                 callback({
                     ok: true,
-                    msg: "Paused Successfully."
+                    msg: "Resumed Successfully."
                 });
 
             } catch (e) {

src/assets/app.scss

@@ -31,27 +31,4 @@
     }
 }
 
-.hp-bar-big {
+
-    white-space: nowrap;
-    margin-top: 4px;
-    text-align: center;
-    direction: rtl;
-    margin-bottom: 10px;
-    transition: all ease-in-out 0.15s;
-    position: relative;
-
-    div {
-        display: inline-block;
-        background-color: $primary;
-        width: 1%;
-        height: 30px;
-        margin: 0.3%;
-        border-radius: 50rem;
-        transition: all ease-in-out 0.15s;
-
-        &:hover {
-            opacity: 0.8;
-            transform: scale(1.5);
-        }
-    }
-}

src/components/HeartbeatBar.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="wrap" :style="wrapStyle">
+        <div class="hp-bar-big" :style="barStyle">
+            <div class="beat" :style="beatStyle" v-for="beat in beatList"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    data() {
+        return {
+            beatList: [
+                1,2,3,4,5
+            ],
+            beatWidth: 10,
+            beatHeight: 30,
+            hoverScale: 1.5,
+            beatMargin: 4,
+            move: false,
+            maxBeat: 5,
+        }
+    },
+    mounted() {
+        setInterval(() => {
+
+            this.addBeat()
+            console.log("add beat")
+        }, 3000)
+
+    },
+    methods: {
+        async addBeat() {
+            this.move = true;
+
+            setTimeout(() => {
+                this.beatList.push(6)
+
+                if (this.beatList.length > this.maxBeat) {
+                    this.beatList.shift();
+                    this.move = false;
+                }
+            }, 300)
+
+        }
+    },
+    computed: {
+        wrapStyle() {
+            let topBottom = (((this.beatHeight * this.hoverScale) - this.beatHeight) / 2);
+            let leftRight = (((this.beatWidth * this.hoverScale) - this.beatWidth) / 2);
+
+            return {
+                padding: `${topBottom}px ${leftRight}px`,
+                width: (this.beatWidth + this.beatMargin * 2) * this.maxBeat + (leftRight * 2) + "px"
+            }
+        },
+        barStyle() {
+            if (this.move) {
+                let width = -(this.beatWidth + this.beatMargin * 2);
+
+                return  {
+                    transition: "all ease-in-out 0.25s",
+                    transform: `translateX(${width}px)`,
+                }
+            } else {
+                return {
+
+                }
+            }
+        },
+        beatStyle() {
+            return {
+                width: this.beatWidth + "px",
+                height: this.beatHeight + "px",
+                margin: this.beatMargin + "px",
+                "--hover-scale": this.hoverScale,
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/vars.scss";
+
+.wrap {
+    overflow: hidden;
+    width: 100px;
+
+    white-space: nowrap;
+}
+
+.hp-bar-big {
+    .beat {
+        display: inline-block;
+        background-color: $primary;
+        border-radius: 50rem;
+        transition: all ease-in-out 0.15s;
+
+
+        &:hover {
+            opacity: 0.8;
+            transform: scale(var(--hover-scale));
+        }
+    }
+}
+
+</style>

src/pages/Details.vue

@@ -11,56 +11,7 @@
 
     <div class="shadow-box">
 
-        <div class="hp-bar-big">
+        <HeartbeatBar />
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
 
         <div class="row">
             <div class="col-md-8">
@@ -85,9 +36,11 @@
 import { useToast } from 'vue-toastification'
 const toast = useToast()
 import Confirm from "../components/Confirm.vue";
+import HeartbeatBar from "../components/HeartbeatBar.vue";
 
 export default {
     components: {
+        HeartbeatBar,
         Confirm
     },
     mounted() {