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.toLowerCase() === "get" ? "GET" : "HEAD"
  33       this.fetch("/", { method, cache: "no-cache" }, false)
  34         .then(() => {
  35           this.status = "online";
  36         })
  37         .catch(() => {
  38           this.status = "offline";
  39         });
  40     },
  41   },
  42 };
  43 </script>
  44
  45 <style scoped lang="scss">
  46 .status {
  47   font-size: 0.8rem;
  48   color: var(--text-title);
  49   white-space: nowrap;
  50   margin-left: 0.25rem;
  51
  52   &.online:before {
  53     background-color: #94e185;
  54     border-color: #78d965;
  55     box-shadow: 0 0 5px 1px #94e185;
  56   }
  57
  58   &.offline:before {
  59     background-color: #c9404d;
  60     border-color: #c42c3b;
  61     box-shadow: 0 0 5px 1px #c9404d;
  62   }
  63
  64   &:before {
  65     content: " ";
  66     display: inline-block;
  67     width: 7px;
  68     height: 7px;
  69     margin-right: 10px;
  70     border: 1px solid #000;
  71     border-radius: 7px;
  72   }
  73 }
  74 </style>