add badge and electrisity status

VovaStelmashchuk · VovaStelmashchuk · commit 68d4bb73c7f1 · 2025-11-15T11:22:14.000+02:00
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -68,6 +68,7 @@ jobs:
                   echo "DISCORD_GUILD_MEMBER_ROLE_ID=${{ vars.DISCORD_GUILD_MEMBER_ROLE_ID }}" >> ./envfile
                   echo "DISCORD_GUILD_ID=${{ vars.DISCORD_GUILD_ID }}" >> ./envfile
                   echo "JWT_SECRET=${{ secrets.JWT_SECRET }}" >> ./envfile
+                  echo "SPACE_ELECTRICITY_TRACKER_SLUG=${{ vars.SPACE_ELECTRICITY_TRACKER_SLUG }}" >> ./envfile
 
             - name: Docker Stack Deploy
               uses: cssnr/stack-deploy-action@v1
diff --git a/app/components/Header.vue b/app/components/Header.vue
@@ -1,23 +1,17 @@
 <template>
     <div class="container mx-auto px-4 py-4">
         <div class="flex justify-between items-center">
-            <NuxtLink
-                to="/home"
-                class="text-3xl font-bold text-accent-primary hover:opacity-80 transition-opacity"
-            >
-                NU31
-            </NuxtLink>
             <div class="flex items-center space-x-4">
-                <NuxtLink
-                    v-if="isLoggedIn && avatarUrl"
-                    to="/profile"
-                    class="flex items-center space-x-3 hover:opacity-80 transition-opacity"
-                >
-                    <img
-                        :src="avatarUrl"
-                        :alt="user?.name || 'User avatar'"
-                        class="w-10 h-10 rounded-full border-1 border-separator-primary"
-                    />
+                <NuxtLink to="/home" class="text-3xl font-bold text-accent-primary hover:opacity-80 transition-opacity">
+                    NU31
+                </NuxtLink>
+                <MainBadge v-if="!isLoading && status" :variant="badgeVariant" :label="badgeLabel" />
+            </div>
+            <div class="flex items-center space-x-4">
+                <NuxtLink v-if="isLoggedIn && avatarUrl" to="/profile"
+                    class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+                    <img :src="avatarUrl" :alt="user?.name || 'User avatar'"
+                        class="w-10 h-10 rounded-full border-1 border-separator-primary" />
                     <span class="text-sm font-medium text-label-primary">
                         {{ user?.name }}
                     </span>
@@ -31,10 +25,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useUser } from '~/composables/useUser'
+import { useElectricityStatus } from '~/composables/useElectricityStatus'
 
 const { user, isLoggedIn, avatarUrl } = useUser()
+const { status, isLoading, badgeVariant, badgeLabel, fetchStatus } = useElectricityStatus()
 
 onMounted(() => {
     useUser().fetchUser()
+    fetchStatus()
 })
 </script>
diff --git a/app/composables/useElectricityStatus.ts b/app/composables/useElectricityStatus.ts
@@ -0,0 +1,58 @@
+import { ref, computed } from 'vue'
+import { useRuntimeConfig } from '#imports'
+
+type Status = 'online' | 'offline'
+
+type ApiResponse = {
+    current: { status: Status; lastAliveAt?: string; since?: string }
+}
+
+const status = ref<Status | null>(null)
+const isLoading = ref(false)
+
+export const useElectricityStatus = () => {
+    const config = useRuntimeConfig()
+    const slug = config.public.spaceElectricityTrackerSlug as string
+
+    const fetchStatus = async () => {
+        isLoading.value = true
+        try {
+            const response = await $fetch<ApiResponse>(
+                `/api/electricty_tracker/${slug}/history`
+            )
+            if (response?.current?.status) {
+                status.value = response.current.status
+            } else {
+                status.value = 'offline'
+            }
+        } catch (error) {
+            console.error('Failed to fetch electricity status:', error)
+            status.value = 'offline'
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    const badgeVariant = computed(() => {
+        if (status.value === 'online') {
+            return 'success'
+        }
+        return 'error'
+    })
+
+    const badgeLabel = computed(() => {
+        if (status.value === 'online') {
+            return 'світло є'
+        }
+        return 'світла немає'
+    })
+
+    return {
+        status,
+        isLoading,
+        badgeVariant,
+        badgeLabel,
+        fetchStatus,
+    }
+}
+
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -1,24 +1,23 @@
 <template>
     <div class="min-h-screen bg-background-primary text-label-primary">
         <div class="container mx-auto px-4 py-4">
-            <div class="flex justify-end space-x-4 items-center">
-                <MainButton
-                    buttonStyle="primary"
-                    size="M"
-                    icon="ic:baseline-discord"
-                    label="Вхід для резедентів"
-                    :link="data?.redirectUri"
-                />
-                <ThemeSwitch />
+            <div class="flex items-center justify-between">
+                <div>
+                    <MainBadge v-if="!electricityLoading && electricityStatus" :variant="electricityBadgeVariant"
+                        :label="electricityBadgeLabel" />
+                </div>
+                <div class="flex items-center space-x-4">
+                    <MainButton buttonStyle="primary" size="M" icon="ic:baseline-discord" label="Вхід для резедентів"
+                        :link="data?.redirectUri" />
+                    <ThemeSwitch />
+                </div>
             </div>
         </div>
 
         <div class="relative w-full">
             <div class="w-full h-full"></div>
             <div class="w-full aspect-[1920/1080] relative">
-                <div
-                    class="w-full h-full absolute inset-0 z-20 flex items-center text-center justify-center"
-                >
+                <div class="w-full h-full absolute inset-0 z-20 flex items-center text-center justify-center">
                     <span class="text-8xl font-wallpoet text-accent-primary">
                         NU31 Hacker Space
                     </span>
@@ -42,27 +41,14 @@
                 </p>
             </div>
 
-            <div
-                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20"
-            >
-                <div
-                    class="bg-fill-secondary p-8 rounded-xl border border-separator-primary"
-                >
-                    <div
-                        class="w-16 h-16 bg-accent-primary rounded-full flex items-center justify-center mb-6 mx-auto"
-                    >
-                        <svg
-                            class="w-8 h-8 text-background-primary"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-                            ></path>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
+                <div class="bg-fill-secondary p-8 rounded-xl border border-separator-primary">
+                    <div class="w-16 h-16 bg-accent-primary rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <svg class="w-8 h-8 text-background-primary" fill="none" stroke="currentColor"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
+                            </path>
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-4 text-center">
@@ -74,24 +60,14 @@
                     </p>
                 </div>
 
-                <div
-                    class="bg-fill-tertiary p-8 rounded-xl border border-separator-secondary"
-                >
+                <div class="bg-fill-tertiary p-8 rounded-xl border border-separator-secondary">
                     <div
-                        class="w-16 h-16 bg-accent-secondary rounded-full flex items-center justify-center mb-6 mx-auto"
-                    >
-                        <svg
-                            class="w-8 h-8 text-background-primary"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                            ></path>
+                        class="w-16 h-16 bg-accent-secondary rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <svg class="w-8 h-8 text-background-primary" fill="none" stroke="currentColor"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                            </path>
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-4 text-center">
@@ -103,24 +79,13 @@
                     </p>
                 </div>
 
-                <div
-                    class="bg-fill-secondary p-8 rounded-xl border border-separator-primary"
-                >
-                    <div
-                        class="w-16 h-16 bg-accent-primary rounded-full flex items-center justify-center mb-6 mx-auto"
-                    >
-                        <svg
-                            class="w-8 h-8 text-background-primary"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                            ></path>
+                <div class="bg-fill-secondary p-8 rounded-xl border border-separator-primary">
+                    <div class="w-16 h-16 bg-accent-primary rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <svg class="w-8 h-8 text-background-primary" fill="none" stroke="currentColor"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
+                            </path>
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-4 text-center">
@@ -140,13 +105,8 @@
                 <p class="text-xl text-label-secondary mb-8">
                     Знаходимося в серці Києва, Україна
                 </p>
-                <MainButton
-                    class="justify-center"
-                    buttonStyle="primary"
-                    size="M"
-                    link="https://discord.gg/kgTHaaHWyD"
-                    icon="ic:baseline-discord"
-                >
+                <MainButton class="justify-center" buttonStyle="primary" size="M" link="https://discord.gg/kgTHaaHWyD"
+                    icon="ic:baseline-discord">
                     Ми тусимо в Discord, приєднуйся!
                 </MainButton>
             </div>
@@ -169,24 +129,12 @@
                             Соціальні мережі
                         </h3>
                         <div class="flex">
-                            <MainButton
-                                buttonStyle="ghost"
-                                size="L"
-                                link="https://github.com/nu31hackerspace"
-                                icon="mdi:github"
-                            ></MainButton>
-                            <MainButton
-                                buttonStyle="ghost"
-                                size="L"
-                                link="https://www.instagram.com/nu31hackerspace/"
-                                icon="mdi:instagram"
-                            ></MainButton>
-                            <MainButton
-                                buttonStyle="ghost"
-                                size="L"
-                                link="https://discord.gg/kgTHaaHWyD"
-                                icon="ic:baseline-discord"
-                            ></MainButton>
+                            <MainButton buttonStyle="ghost" size="L" link="https://github.com/nu31hackerspace"
+                                icon="mdi:github"></MainButton>
+                            <MainButton buttonStyle="ghost" size="L" link="https://www.instagram.com/nu31hackerspace/"
+                                icon="mdi:instagram"></MainButton>
+                            <MainButton buttonStyle="ghost" size="L" link="https://discord.gg/kgTHaaHWyD"
+                                icon="ic:baseline-discord"></MainButton>
                         </div>
                     </div>
                 </div>
@@ -199,11 +147,26 @@
 import { definePageMeta, navigateTo } from '#imports'
 import { onMounted } from 'vue'
 import { trackEvent } from '~~/app/utils/track'
+import { useFetch } from '#imports'
+import { useUser } from '~/composables/useUser'
+import { useElectricityStatus } from '~/composables/useElectricityStatus'
 
 definePageMeta({
     layout: 'void',
 })
 
+const { data } = await useFetch<{ redirectUri: string }>(
+    '/api/auth/discord/redirect'
+)
+
+const {
+    status: electricityStatus,
+    isLoading: electricityLoading,
+    badgeVariant: electricityBadgeVariant,
+    badgeLabel: electricityBadgeLabel,
+    fetchStatus: fetchElectricityStatus,
+} = useElectricityStatus()
+
 onMounted(async () => {
     trackEvent('page_view', { page: 'landing' })
 
@@ -213,12 +176,7 @@ onMounted(async () => {
         console.log('isLoggedIn', isLoggedIn)
         navigateTo('/home')
     }
-})
-
-import { useFetch } from '#imports'
-import { useUser } from '~/composables/useUser'
 
-const { data } = await useFetch<{ redirectUri: string }>(
-    '/api/auth/discord/redirect'
-)
+    fetchElectricityStatus()
+})
 </script>
diff --git a/docker-stack.yml b/docker-stack.yml
@@ -13,6 +13,7 @@ services:
             - NUXT_PUBLIC_DISCORD_CLIENT_ID=${DISCORD_CLIENT_ID}
             - NUXT_PUBLIC_DISCORD_GUILD_ID=${DISCORD_GUILD_ID}
             - NUXT_PUBLIC_DISCORD_GUILD_MEMBER_ROLE_ID=${DISCORD_GUILD_MEMBER_ROLE_ID}
+            - NUXT_PUBLIC_SPACE_ELECTRICITY_TRACKER_SLUG=${SPACE_ELECTRICITY_TRACKER_SLUG}
             - NUXT_DISCORD_CLIENT_SECRET=${DISCORD_CLIENT_SECRET}
             - NUXT_DISCORD_BOT_TOKEN=${DISCORD_BOT_TOKEN}
             - NUXT_JWT_SECRET=${JWT_SECRET}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -18,6 +18,7 @@ export default defineNuxtConfig({
             discordClientId: '1418277247005229096',
             discordGuildId: '1279831505492901910',
             discordGuildMemberRoleId: '1280504520018755594',
+            spaceElectricityTrackerSlug: 'nu31',
         },
     },
     vite: {
