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