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       const method = typeof this.item.method === 'string' ? this.item.method.toUpperCase() : 'unknown';
  33
  34       if (!['GET', 'HEAD', 'OPTION'].includes(method)) {
  35         console.error(`Ping: ${method} is not a supported HTTP method`);
  36         return;
  37       }
  38
  39       this.fetch("/", { method, cache: "no-cache" }, false)
  40         .then(() => {
  41           this.status = "online";
  42         })
  43         .catch(() => {
  44           this.status = "offline";
  45         });
  46     },
  47   },
  48 };
  49 </script>
  50
  51 <style scoped lang="scss">
  52 .status {
  53   font-size: 0.8rem;
  54   color: var(--text-title);
  55   white-space: nowrap;
  56   margin-left: 0.25rem;
  57
  58   &.online:before {
  59     background-color: #94e185;
  60     border-color: #78d965;
  61     box-shadow: 0 0 5px 1px #94e185;
  62   }
  63
  64   &.offline:before {
  65     background-color: #c9404d;
  66     border-color: #c42c3b;
  67     box-shadow: 0 0 5px 1px #c9404d;
  68   }
  69
  70   &:before {
  71     content: " ";
  72     display: inline-block;
  73     width: 7px;
  74     height: 7px;
  75     margin-right: 10px;
  76     border: 1px solid #000;
  77     border-radius: 7px;
  78   }
  79 }
  80 </style>