Update index.html

Implementation with the server
KevanRastello · Oct 12, 2024 · a43b7b7 · a43b7b7
1 parent c104273
commit a43b7b7
Showing 1 changed file with 139 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -2,13 +2,147 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Progress Tracker with Firebase Notifications</title>
+
+    <style>
+        .progress-bar {
+            width: 100%;
+            background-color: #f3f3f3;
+        }
+        .progress {
+            width: 0%;
+            height: 30px;
+            background-color: #4caf50;
+        }
+    </style>
+
+    <!-- Add Firebase SDK Scripts -->
+    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js"></script>
+
+    <script>
+        // Your Firebase web app's configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyBTwWMQerWMr1C7c5ANKFFI18a9r0dWq4Y",
+            authDomain: "inform-github-page.firebaseapp.com",
+            projectId: "inform-github-page",
+            storageBucket: "inform-github-page.appspot.com",
+            messagingSenderId: "276731489504",
+            appId: "1:276731489504:web:4b75677f6655810b2df485"
+        };
+
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+
+        // Initialize Firebase Cloud Messaging
+        const messaging = firebase.messaging();
+
+        // Declare a variable to store the interval ID for periodic fetching
+        let fetchInterval;
+        let totalFiles = 100;  // Default number of iterations (will be updated)
+
+        // Function to start fetching file data every minute
+        function startFetching() {
+            fetchInterval = setInterval(fetchFileData, 60000);  // Fetch every minute (60000 ms)
+            console.log("Started fetching file data every minute.");
+        }
+
+        // Function to stop fetching file data
+        function stopFetching() {
+            clearInterval(fetchInterval);
+            console.log("Stopped fetching file data.");
+        }
+
+        // Request permission to receive notifications
+        messaging.requestPermission()
+            .then(() => {
+                console.log("Notification permission granted.");
+                return messaging.getToken({ vapidKey: "BJ1lk8Ci9-DJApJu4Ko-Hj60yMRvbAlnMn51RujLiqm5C8jpKcllHDkzgulZ1h93Gpu1EehJ8Hi4AaetW16giHc" });
+            })
+            .then((token) => {
+                console.log("FCM Token:", token);
+            })
+            .catch((err) => {
+                console.error("Unable to get permission to notify.", err);
+            });
+
+        // Listen for messages from Firebase
+        messaging.onMessage((payload) => {
+            console.log("Message received: ", payload);
+
+            // Check if the message contains the 'start' or 'stop' trigger
+            if (payload.data && payload.data.action === "start") {
+                startFetching();  // Start fetching data
+            } else if (payload.data && payload.data.action === "stop") {
+                stopFetching();  // Stop fetching data
+            }
+        });
+
+        // Fetch the total number of iterations (from n_iterations.txt)
+        async function fetchTotalIterations(fileId, apiKey) {
+            const url = `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=${apiKey}`;
+            try {
+                const response = await fetch(url);
+                const total = await response.text();
+                totalFiles = parseInt(total, 10);  // Update the total number of iterations
+                console.log("Total iterations (files expected):", totalFiles);
+            } catch (error) {
+                console.error("Error fetching total iterations:", error);
+            }
+        }
+
+        // Function to fetch the number of files from Google Drive folder
+        async function fetchFileData() {
+            const folderId = '1Snp8tfM8wvQalM8PqxO8UBuwh2uwI5jK';  // Your Google Drive Folder ID
+            const apiKey = 'AIzaSyAKJalgSbuGwupyxPjEsBEPUpgmc8iCsp0';
+
+            // URL to list files in the folder using the Drive API
+            const url = `https://www.googleapis.com/drive/v3/files?q='${folderId}'+in+parents&key=${apiKey}`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+
+                // Check if files were found
+                if (data && data.files) {
+                    // Look for the 'n_iterations.txt' file and update the totalFiles
+                    const iterationsFile = data.files.find(file => file.name === 'n_iterations.txt');
+                    if (iterationsFile) {
+                        await fetchTotalIterations(iterationsFile.id, apiKey);
+                    }
+
+                    // Count all other files except 'n_iterations.txt'
+                    const numFiles = data.files.filter(file => file.name !== 'n_iterations.txt').length;
+                    updateProgress(numFiles);
+                } else {
+                    console.log("No files found.");
+                }
+            } catch (error) {
+                console.error("Error fetching file data:", error);
+            }
+        }
+
+        // Function to update the progress bar based on the number of files
+        function updateProgress(numFiles) {
+            const progressPercent = (numFiles / totalFiles) * 100;
+
+            document.querySelector(".progress").style.width = `${progressPercent}%`;
+            document.getElementById("progress-percent").innerText = `Progress: ${progressPercent.toFixed(2)}%`;
+        }
+
+        // Start fetching data when the page loads
+        window.onload = function() {
+            startFetching();  // You can trigger this manually via FCM as well
+        }
+    </script>
 </head>
 <body>
-    Hello wolrd!
+    <h1>Progress Tracker</h1>
 
-    <h1> Test </h1>
+    <div class="progress-bar">
+        <div class="progress"></div>
+    </div>
+    <p id="progress-percent">Progress: 0%</p>
 </body>
-</html>
+</html>