Add section for badges
<template>
- <router-link to="/" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg font-medium leading-6 text-center text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
+ <router-link to="/" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none">
&#8592;
</router-link>
<div class="container mx-auto">
<hr class="mb-4" />
<Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
</slot>
- <!-- print table of each results in table? that'd be sick as fuck -->
-
<div v-if="serviceStatus.uptime" class="mt-5">
<h1 class="text-3xl text-monospace text-gray-400">UPTIME</h1>
<hr />
<h2 class="text-sm text-gray-400">Last hour</h2>
</div>
</div>
+ <h3 class="text-xl text-monospace text-gray-400">BADGES</h3>
+ <hr />
+ <div class="flex space-x-4 text-center text-2xl mt-5">
+ <div class="flex-1">
+ <img :src="generateBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
+ </div>
+ <div class="flex-1">
+ <img :src="generateBadgeImageURL('24h')" alt="7d uptime badge" class="mx-auto" />
+ </div>
+ <div class="flex-1">
+ <img :src="generateBadgeImageURL('1h')" alt="7d uptime badge" class="mx-auto" />
+ </div>
+ </div>
</div>
-
</div>
<Settings @refreshData="fetchData"/>
</template>
@@ -58,6 +68,9 @@ export default {
}
});
},
+ generateBadgeImageURL(duration) {
+ return `${SERVER_URL}/api/v1/badges/uptime/${duration}/${this.serviceStatus.key}`;
+ },
prettifyUptime(uptime) {
if (!uptime) {
return "0%";
