src/components/services/Ping.vue

   1 <template>
   2   <div>
   3     <div class="card" :class="item.class">
   4       <a :href="item.url" :target="item.target" rel="noreferrer">
   5         <div class="card-content">
   6           <div class="media">
   7             <div v-if="item.logo" class="media-left">
   8               <figure class="image is-48x48">
   9                 <img :src="item.logo" :alt="`${item.name} logo`" />
  10               </figure>
  11             </div>
  12             <div v-if="item.icon" class="media-left">
  13               <figure class="image is-48x48">
  14                 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
  15               </figure>
  16             </div>
  17             <div class="media-content">
  18               <p class="title is-4">{{ item.name }}</p>
  19               <p class="subtitle is-6">
  20                 <template v-if="item.subtitle">
  21                   {{ item.subtitle }}
  22                 </template>
  23               </p>
  24             </div>
  25             <div v-if="status" class="status" :class="status">
  26               {{ status }}
  27             </div>
  28           </div>
  29           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  30             <strong class="tag-text">#{{ item.tag }}</strong>
  31           </div>
  32         </div>
  33       </a>
  34     </div>
  35   </div>
  36 </template>
  37
  38 <script>
  39 export default {
  40   name: "Ping",
  41   props: {
  42     item: Object,
  43   },
  44   data: () => ({
  45     status: null,
  46   }),
  47   created() {
  48     this.fetchStatus();
  49   },
  50   methods: {
  51     fetchStatus: async function () {
  52       const url = `${this.item.url}`;
  53       fetch(url, { method: "HEAD", cache: "no-cache" })
  54         .then((response) => {
  55           if (!response.ok) {
  56             throw Error(response.statusText);
  57           }
  58           this.status = "online";
  59         })
  60         .catch(() => {
  61           this.status = "offline";
  62         });
  63     },
  64   },
  65 };
  66 </script>
  67
  68 <style scoped lang="scss">
  69 .media-left img {
  70   max-height: 100%;
  71 }
  72 .status {
  73   font-size: 0.8rem;
  74   color: var(--text-title);
  75
  76   &.online:before {
  77     background-color: #94e185;
  78     border-color: #78d965;
  79     box-shadow: 0 0 5px 1px #94e185;
  80   }
  81
  82   &.offline:before {
  83     background-color: #c9404d;
  84     border-color: #c42c3b;
  85     box-shadow: 0 0 5px 1px #c9404d;
  86   }
  87
  88   &:before {
  89     content: " ";
  90     display: inline-block;
  91     width: 7px;
  92     height: 7px;
  93     margin-right: 10px;
  94     border: 1px solid #000;
  95     border-radius: 7px;
  96   }
  97 }
  98 </style>