firebase Read enabled for both views

components/Podium.vue

@@ -1,35 +1,67 @@
 <template>
-    <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-      Currently Leading
-    </h2>
-
-    <div class="flex items-end justify-center space-x-4 pt-4">
-        <!-- Second Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-60 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">2nd Place</div>
-            <div class="bg-white w-full text-center py-4">Website B</div>
-        </div>
-
-        <!-- First Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-72 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">1st Place</div>
-            <div class="bg-white w-full text-center py-4">Website A</div>
-        </div>
-
-        <!-- Third Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-48 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">3rd Place</div>
-            <div class="bg-white w-full text-center py-4">Website C</div>
-        </div>
+  <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+    Currently Leading
+  </h2>
+
+  <div class="flex items-end justify-center space-x-4 pt-4">
+    <div
+      v-for="(item, index) in sortedLeaderboard"
+      :key="index"
+      :class="`bg-gray-300 text-gray-800 w-40 flex flex-col items-center justify-end rounded-t-lg shadow-lg ${
+        index === 0 ? 'h-72' : index === 1 ? 'h-60' : 'h-48'
+      }`">
+      <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">
+        {{ index + 1 }}{{ index === 0 ? 'st' : index === 1 ? 'nd' : 'rd' }} Place
+      </div>
+      <div class="bg-white w-full text-center py-4">{{ item.url }}</div>
     </div>
+  </div>
 </template>
-
-  <script setup>
-  
-  // Example data, replace with your actual data source
-  const leaderboard = ref([
-    { url: 'Dummy URL 1', status: 'Active', score: 85, downtime: '0' },
-    { url: 'Dummy URL 2', status: 'Active', score: 92, downtime: '0' },
-    { url: 'Dummy URL 3', status: 'Active', score: 78, downtime: '0' },
-  ]);
-  </script>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { db, collection, getDocs, query, where, orderBy, limit, QuerySnapshot } from '../firebaseConfig';
+import { Timestamp } from 'firebase/firestore';
+
+interface PerformanceItem {
+  url: string;
+  performanceScore: number;
+  responseTime: number;
+  timestamp: Timestamp;
+}
+
+interface DocumentData {
+  [field: string]: any;
+}
+
+const leaderboard = ref<PerformanceItem[]>([]);
+
+const fetchPerformanceData = async () => {
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  const q = query(
+    collection(db, 'performanceData'),
+    where('timestamp', '>=', startOfMonth),
+    where('timestamp', '<=', endOfMonth),
+    orderBy('performanceScore', 'desc'),
+    orderBy('responseTime', 'asc'),
+    limit(3)
+  );
+
+  const querySnapshot: QuerySnapshot<DocumentData> = await getDocs(q);
+  leaderboard.value = querySnapshot.docs.map(doc => ({
+    url: doc.data().url,
+    performanceScore: doc.data().performanceScore,
+    responseTime: doc.data().responseTime,
+    timestamp: doc.data().timestamp,
+  }));
+};
+
+onMounted(() => {
+  fetchPerformanceData();
+});
+
+const sortedLeaderboard = computed(() => leaderboard.value);
+</script>

firebaseConfig.ts

@@ -0,0 +1,46 @@
+// firebaseConfig.ts
+import { initializeApp } from "firebase/app";
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  query,
+  where,
+  orderBy,
+  limit,
+  QuerySnapshot,
+} from "firebase/firestore";
+
+// Replace with your Firebase configuration
+// const firebaseConfig = {
+//   apiKey: "YOUR_API_KEY",
+//   authDomain: "YOUR_AUTH_DOMAIN",
+//   projectId: "YOUR_PROJECT_ID",
+//   storageBucket: "YOUR_STORAGE_BUCKET",
+//   messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+//   appId: "YOUR_APP_ID",
+// };
+
+console.log("key", process.env.FIREBASE_API_KEY);
+console.log(process.env.FIREBASE_AUTH_DOMAIN);
+console.log(process.env.FIREBASE_PROJECT_ID);
+console.log(process.env.FIREBASE_STORAGE_BUCKET);
+console.log(process.env.FIREBASE_APP_ID);
+
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  projectId: "watchtower-dev-587f7",
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.FIREBASE_APP_ID,
+  measurementId: "G-C45XLSC3LP",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firestore
+const db = getFirestore(app);
+
+export { db, collection, getDocs, query, where, orderBy, limit, QuerySnapshot };