add: status ping is now dynamic after moving to betterstatus

components/global/footer.vue

@@ -183,8 +183,8 @@
            class="mt-4 transition transform hover:-translate-y-0.5 duration-200  cursor-pointer underline font-bold text-gray-200 flex justify-center items-center space-x-3">
           <p>Services Status</p>
           <div>
-            <p class="w-3 h-3 rounded-full bg-green-400 animate-ping"></p>
-            <p class="w-3 h-3 -mt-3 absolute z-10 rounded-full bg-green-400"></p>
+            <p :class="getStatusColor() +' w-3 h-3 rounded-full animate-ping'"></p>
+            <p :class="getStatusColor() +' w-3 h-3 -mt-3 absolute z-10 rounded-full'"></p>
           </div>
         </a>
 
@@ -195,9 +195,45 @@
 </template>
 
 <script>
+import {getBetterStatus} from "~/lib/checkout/productHelper";
+
 export default {
   name: 'Footer',
+  mounted() {
+    this.getCurrentBetterStatus()
+  },
+  data() {
+    return {
+      status: ''
+    }
+  },
+  watch: {
+    status: {
+      handler() {
+        console.log('Status changed to ' + this.status)
+      }
+    }
+  },
   methods: {
+    getStatusColor() {
+      switch (this.status) {
+        case 'Up':
+          return 'bg-green-400'
+        case 'Down':
+          return 'bg-red-400'
+        case 'Degraded':
+          return 'bg-yellow-400'
+        default:
+          return 'bg-gray-400'
+      }
+    },
+    async getCurrentBetterStatus() {
+      const status = await getBetterStatus(this.$axios)
+      console.log({status})
+
+      this.status = status
+      console.log({status_from_data: this.status})
+    },
     getCurrentYear() {
       return new Date().getFullYear()
     }

lib/checkout/productHelper.js

@@ -12,3 +12,14 @@ export const getProductNameWithId = (id) => {
       return 'Debian XFCE'
   }
 }
+
+export const getBetterStatus = async (axios) => {
+  try {
+    const result = await axios.get('/better-status')
+    console.log({status_data: result.data.response})
+    return result.data.response
+  } catch (e) {
+    console.log(e)
+    return false
+  }
+}

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     options: {
       safelist: [
         '-rotate-3', 'rotate-2', '-rotate-3', 'rotate-3', 'from-violet', 'to-primary-500', 'bg-gradient-to-r', 'from-blue-700', 'to-blue-400', 'from-purple-700', 'to-pink-900', 'from-yellow-600', 'to-red-600',
-        'bg-primary-400', 'bg-purple-600', 'text-teal-400', 'bg-blue-400', 'bg-purple-400', 'bg-green-400', 'bg-indigo-400', 'bg-pink-400', 'bg-red-400', 'w-10', 'w-6', 'stroke-current',
+        'bg-primary-400', 'bg-purple-600', 'text-teal-400', 'bg-blue-400', 'bg-purple-400', 'bg-green-400', 'bg-indigo-400', 'bg-pink-400', 'bg-yellow-400', 'bg-red-400', 'w-10', 'w-6', 'stroke-current',
         'text-primary-400', 'text-blue-400', 'text-purple-400', 'text-green-400', 'text-indigo-400', 'text-pink-400', 'text-red-400'
         , 'text-pink-400', 'text-indigo-400', 'text-blue-400', 'text-teal-400', 'text-primary-400', 'text-purple-400', 'text-green-400', 'text-cyan-400'
       ]