mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-24 06:49:41 -05:00
implementing heartbeat bar
This commit is contained in:
parent
0a4fb45a8c
commit
497d63ef7d
@ -167,7 +167,7 @@ let monitorList = {};
|
|||||||
|
|
||||||
callback({
|
callback({
|
||||||
ok: true,
|
ok: true,
|
||||||
msg: "Paused Successfully."
|
msg: "Resumed Successfully."
|
||||||
});
|
});
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
110
src/components/HeartbeatBar.vue
Normal file
110
src/components/HeartbeatBar.vue
Normal file
@ -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>
|
@ -11,56 +11,7 @@
|
|||||||
|
|
||||||
<div class="shadow-box">
|
<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="row">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
@ -85,9 +36,11 @@
|
|||||||
import { useToast } from 'vue-toastification'
|
import { useToast } from 'vue-toastification'
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
import Confirm from "../components/Confirm.vue";
|
import Confirm from "../components/Confirm.vue";
|
||||||
|
import HeartbeatBar from "../components/HeartbeatBar.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
HeartbeatBar,
|
||||||
Confirm
|
Confirm
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
Loading…
Reference in New Issue
Block a user