From 119b80edc02d74288e99eafa31e3ead403b63352 Mon Sep 17 00:00:00 2001
From: TwinProduction <twin@twinnation.org>
Date: Wed, 27 Jan 2021 18:46:51 -0500
Subject: [PATCH] Add section for badges

---
 web/app/src/views/Details.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/app/src/views/Details.vue b/web/app/src/views/Details.vue
index 541f0b90..420c8585 100644
--- a/web/app/src/views/Details.vue
+++ b/web/app/src/views/Details.vue
@@ -1,5 +1,5 @@
 <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">
@@ -8,8 +8,6 @@
       <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 />
@@ -27,8 +25,20 @@
           <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%";