add application

Steven-Harris · Sep 5, 2024 · 69e79e4 · 69e79e4
1 parent c1050e5
commit 69e79e4
Show file tree

Hide file tree

Showing 13 changed files with 548 additions and 83 deletions.
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
diff --git a/public/assets/icons/icon-192x192.png b/public/assets/icons/icon-192x192.png
diff --git a/public/assets/icons/icon-512x512.png b/public/assets/icons/icon-512x512.png
diff --git a/public/assets/manifest.json b/public/assets/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "Github Monitor",
+  "short_name": "GH Monitor",
+  "description": "Monitor GitHub pull requests and actions",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#1a202c",
+  "theme_color": "#51cbee",
+  "icons": [
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/assets/style.css b/public/assets/style.css
@@ -0,0 +1,105 @@
+.glow {
+    box-shadow: 0 0 8px rgba(81, 203, 238, 1);
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: rgba(81, 203, 238, 1);
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    animation: spin 1s linear infinite;
+}
+
+#content {
+    height: calc(100vh - 10rem);
+}
+
+.link {
+    text-decoration: none;
+    color: inherit;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.tab-button {
+    background-color: transparent;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    margin: 0 5px;
+    border-bottom: 2px solid transparent;
+    transition: border-color 0.3s;
+}
+
+.tab-button.active {
+    border-bottom: 2px solid #2d3748;
+}
+
+@media (max-width: 768px) {
+    #tabs {
+        display: flex;
+    }
+
+    #content {
+        display: block;
+    }
+}
+
+#pr-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#pr-item .link {
+    flex-grow: 1;
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.reviews-container {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+
+.avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.review-state {
+    margin-right: 8px;
+}
+
+.review-state.approved {
+    color: #1E90FF;
+}
+
+.review-state.not-approved {
+    color: #FFA500;
+}
+
+.more-approvers {
+    color: white;
+    margin-left: 8px;
+    font-size: 0.875rem;
+}
diff --git a/public/index.html b/public/index.html
@@ -1,89 +1,51 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Welcome to Firebase Hosting</title>
+<html lang="en" class="h-full bg-gray-900">
 
-    <!-- update the version number as needed -->
-    <script defer src="/__/firebase/10.13.1/firebase-app-compat.js"></script>
-    <!-- include only the Firebase features as you need -->
-    <script defer src="/__/firebase/10.13.1/firebase-auth-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-database-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-firestore-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-functions-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-messaging-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-storage-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-analytics-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-remote-config-compat.js"></script>
-    <script defer src="/__/firebase/10.13.1/firebase-performance-compat.js"></script>
-    <!-- 
-      initialize the SDK after all desired features are loaded, set useEmulator to false
-      to avoid connecting the SDK to running emulators.
-    -->
-    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+<head>
+  <title>GitHelm</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+    integrity="sha384-HtMZLkYo+pR5/u7zCzXxMJP6QoNnQJt1qkHM0EaOPvGDIzaVZbmYr/TlvUZ/sKAg" crossorigin="anonymous">
+  <link rel="manifest" href="assets//manifest.json">
+  <script defer type="module" src="main.js"></script>
+</head>
 
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>Welcome</h2>
-      <h1>Firebase Hosting Setup Complete</h1>
-      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
-      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+<body class="h-full text-white flex flex-col">
+  <main class="flex-1 p-10">
+    <h1 class="text-4xl font-bold text-center mb-10">GitHelm</h1>
+    <div id="login-container" class="flex justify-center h-full">
+      <button id="github-login"
+        class="bg-gray-700 hover:bg-blue-700 hover:text-gray-300 rounded-lg transition-colors duration-300 text-sm w-48 h-12 glow">
+        Login with GitHub
+      </button>
     </div>
-    <p id="load">Firebase SDK Loading&hellip;</p>
+    <div id="authorized" class="hidden">
+      <div id="tabs" class="flex justify-center mb-4 md:hidden">
+        <button id="tab-pull-requests" class="tab-button active">Pull Requests</button>
+        <button id="tab-actions" class="tab-button">Actions</button>
+      </div>
+      <div id="content" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <section id="pull-requests-section" class="glow bg-gray-800 p-5 rounded-lg">
+          <h2 class="text-xl font-bold mb-4">Pull Requests</h2>
+          <div id="pull-requests"></div>
+          <div id="loading-pulls" class="h-full flex items-center justify-center">
+            <div class="spinner"></div>
+          </div>
+        </section>
 
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadEl = document.querySelector('#load');
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-        // // The Firebase SDK is initialized and available here!
-        //
-        // firebase.auth().onAuthStateChanged(user => { });
-        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
-        // firebase.firestore().doc('/foo/bar').get().then(() => { });
-        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
-        // firebase.messaging().requestPermission().then(() => { });
-        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
-        // firebase.analytics(); // call to activate
-        // firebase.analytics().logEvent('tutorial_completed');
-        // firebase.performance(); // call to activate
-        //
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        <section id="actions-section" class="glow bg-gray-800 p-5 rounded-lg hidden md:block">
+          <h2 class="text-xl font-bold mb-4">Actions</h2>
+          <div id="actions"></div>
+          <div id="loading-actions" class="h-full flex items-center justify-center">
+            <div class="spinner"></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </main>
+</body>
 
-        try {
-          let app = firebase.app();
-          let features = [
-            'auth', 
-            'database', 
-            'firestore',
-            'functions',
-            'messaging', 
-            'storage', 
-            'analytics', 
-            'remoteConfig',
-            'performance',
-          ].filter(feature => typeof app[feature] === 'function');
-          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
-        } catch (e) {
-          console.error(e);
-          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
-        }
-      });
-    </script>
-  </body>
-</html>
+</html>
diff --git a/public/main.js b/public/main.js
@@ -0,0 +1,48 @@
+import { handleTabs } from './modules/tabs.js';
+import { init } from './modules/ui.js';
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-app.js';
+import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.13.1/firebase-analytics.js";
+import { getAuth, signInWithPopup, GithubAuthProvider } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-auth.js';
+
+window.addEventListener('load', () => {
+    registerSW();
+});
+
+document.addEventListener("DOMContentLoaded", async function () {
+    const app = initializeApp(firebaseConfig);
+    const analytics = getAnalytics(app);
+    const auth = getAuth(app);
+    // GitHub Authentication
+    const provider = new GithubAuthProvider();
+    document.getElementById('github-login').addEventListener('click', () =>
+        signInWithPopup(auth, provider).then(async (result) => {
+            document.getElementById('authorized').classList.remove('hidden');
+            document.getElementById('login-container').classList.add('hidden');
+            const user = result.user;
+            const credential = GithubAuthProvider.credentialFromResult(result);
+            console.log('GitHub authentication successful:', user, credential);
+            sessionStorage.setItem('FIREBASE_TOKEN', user.accessToken);
+            sessionStorage.setItem('GITHUB_TOKEN', credential.accessToken);
+            handleTabs();
+            await init();
+        }).catch((error) => console.error('Error during GitHub authentication:', error))
+    );
+});
+
+const firebaseConfig = {
+    apiKey: "AIzaSyAc2Q3c0Rd7jxT_Z7pq1urONyxIRidWDaQ",
+    authDomain: "githelm.firebaseapp.com",
+    projectId: "githelm",
+    storageBucket: "githelm.appspot.com",
+    messagingSenderId: "329298744372",
+    appId: "1:329298744372:web:db5c6a79d68616c3d76661",
+    measurementId: "G-7HWYDWLL6P"
+};
+
+function registerSW() {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/service-worker.js')
+            .then(registration => console.log('ServiceWorker registration successful with scope: ', registration.scope))
+            .catch(error => console.log('ServiceWorker registration failed: ', error));
+    }
+}