mirror of https://github.com/lissy93/dashy
124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
v-tooltip="{
|
|
content: statusText || otherStatusText, classes: ['status-tooltip', `tip-${color()}`] }"
|
|
class="indicator"
|
|
@click="showToast()">
|
|
<div :class="`dot dot-${color()}`">
|
|
<span><span></span></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'StatusIndicator',
|
|
props: {
|
|
statusText: String,
|
|
statusSuccess: Boolean,
|
|
},
|
|
methods: {
|
|
/* Returns a color, based on success status */
|
|
color() {
|
|
switch (this.statusSuccess) {
|
|
case undefined: return ((new Date() - this.startTime) > 2000) ? 'grey' : 'yellow';
|
|
case true: return 'green'; // Success!
|
|
default: return 'red'; // Not success, therefore failure
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
startTime: new Date(), // Used for timeout
|
|
otherStatusText: 'Checking...', // Used before server has responded
|
|
};
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
if (!this.statusText) this.otherStatusText = 'Request timed out';
|
|
}, 2000);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.indicator {
|
|
padding: 5px;
|
|
transition: all .2s ease-in-out;
|
|
cursor: help;
|
|
&:hover {
|
|
transform: scale(1.25);
|
|
filter: saturate(2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: .75; transform: scale(1); }
|
|
25% { opacity: 0.75; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(1.8); }
|
|
}
|
|
@keyframes applyOpacity {
|
|
50% { opacity: 0.9; }
|
|
to { opacity: 0.8; }
|
|
}
|
|
|
|
.dot {
|
|
border-radius: 50%;
|
|
height: 12px;
|
|
width: 12px;
|
|
animation: applyOpacity 1s ease-in 8s forwards;
|
|
> span, > span span, > span span:after {
|
|
animation: pulse 1s linear 0.5s 2;
|
|
border-radius: 50%;
|
|
display: block;
|
|
height: 12px;
|
|
width: 12px;
|
|
content: '';
|
|
}
|
|
&.dot-green {
|
|
background-color: var(--success);
|
|
span, span:after {
|
|
background-color: var(--success);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
&.dot-red {
|
|
background-color: var(--danger);
|
|
span, span:after {
|
|
background-color: var(--danger);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
&.dot-yellow {
|
|
background-color: var(--warning);
|
|
span, span:after {
|
|
background-color: var(--warning);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
&.dot-grey {
|
|
background-color: var(--medium-grey);
|
|
span, span:after {
|
|
background-color: var(--medium-grey);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.status-tooltip {
|
|
background: var(--status-check-tooltip-background) !important;
|
|
color: var(--status-check-tooltip-color) !important;
|
|
font-size: 1rem;
|
|
z-index: 10;
|
|
&.tip-green { border: 1px solid var(--success); }
|
|
&.tip-yellow { border: 1px solid var(--warning); }
|
|
&.tip-red { border: 1px solid var(--danger); }
|
|
}
|
|
</style>
|