src/components/services/Ping.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div v-if="status" class="status" :class="status">
   5         {{ status }}
   6       </div>
   7     </template>
   8   </Generic>
   9 </template>
  10
  11 <script>
  12 import service from "@/mixins/service.js";
  13 import Generic from "./Generic.vue";
  14
  15 export default {
  16   name: "Ping",
  17   mixins: [service],
  18   props: {
  19     item: Object,
  20   },
  21   components: {
  22     Generic,
  23   },
  24   data: () => ({
  25     status: null,
  26   }),
  27   created() {
  28     this.fetchStatus();
  29   },
  30   methods: {
  31     fetchStatus: async function () {
  32       this.fetch("/", { method: "HEAD", cache: "no-cache" }, false)
  33         .then(() => {
  34           this.status = "online";
  35         })
  36         .catch(() => {
  37           this.status = "offline";
  38         });
  39     },
  40   },
  41 };
  42 </script>
  43
  44 <style scoped lang="scss">
  45 .status {
  46   font-size: 0.8rem;
  47   color: var(--text-title);
  48
  49   &.online:before {
  50     background-color: #94e185;
  51     border-color: #78d965;
  52     box-shadow: 0 0 5px 1px #94e185;
  53   }
  54
  55   &.offline:before {
  56     background-color: #c9404d;
  57     border-color: #c42c3b;
  58     box-shadow: 0 0 5px 1px #c9404d;
  59   }
  60
  61   &:before {
  62     content: " ";
  63     display: inline-block;
  64     width: 7px;
  65     height: 7px;
  66     margin-right: 10px;
  67     border: 1px solid #000;
  68     border-radius: 7px;
  69   }
  70 }
  71 </style>