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 Generic from "./Generic.vue";
  13
  14 export default {
  15   name: "Ping",
  16   props: {
  17     item: Object,
  18   },
  19   components: {
  20     Generic,
  21   },
  22   data: () => ({
  23     status: null,
  24   }),
  25   created() {
  26     this.fetchStatus();
  27   },
  28   methods: {
  29     fetchStatus: async function () {
  30       const url = `${this.item.url}`;
  31       fetch(url, {
  32         method: "HEAD",
  33         cache: "no-cache",
  34         credentials: "include",
  35       })
  36         .then((response) => {
  37           if (!response.ok) {
  38             throw Error(response.statusText);
  39           }
  40           this.status = "online";
  41         })
  42         .catch(() => {
  43           this.status = "offline";
  44         });
  45     },
  46   },
  47 };
  48 </script>
  49
  50 <style scoped lang="scss">
  51 .status {
  52   font-size: 0.8rem;
  53   color: var(--text-title);
  54
  55   &.online:before {
  56     background-color: #94e185;
  57     border-color: #78d965;
  58     box-shadow: 0 0 5px 1px #94e185;
  59   }
  60
  61   &.offline:before {
  62     background-color: #c9404d;
  63     border-color: #c42c3b;
  64     box-shadow: 0 0 5px 1px #c9404d;
  65   }
  66
  67   &:before {
  68     content: " ";
  69     display: inline-block;
  70     width: 7px;
  71     height: 7px;
  72     margin-right: 10px;
  73     border: 1px solid #000;
  74     border-radius: 7px;
  75   }
  76 }
  77 </style>