Merge pull request #120 from wiredmonash/refactor-2

Configured MONSTAR for Vercel deployment

Author: wired-monash

.gitignore

@@ -139,4 +139,5 @@ frontend/public/sitemap*.xml
 .DS_Store
 
 # Swagger output
-backend/docs/swagger.json
+backend/docs/swagger.json
+.vercel

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

backend/server.js

@@ -148,18 +148,15 @@ cron.schedule('0 2 1 6 *', async function () {
 });
 
 // === Catch all route (Production Mode) ===
-if (!isDevelopment) {
-  app.get('*', (req, res) => {
-    return res.sendFile(
-      path.join(__dirname, '../frontend/dist/frontend/browser/index.html')
-    );
-  });
-}
+// === Export for Vercel ===
+module.exports = app;
 
-// === Start Server ===
-const PORT = process.env.PORT || 8080; // Default to 8080 if no port specified
-app.listen(PORT, (error) => {
-  if (error) console.log(error);
+// === Start Server (for local development) ===
+if (require.main === module) {
+  const PORT = process.env.PORT || 8080; // Default to 8080 if no port specified
+  app.listen(PORT, (error) => {
+    if (error) console.log(error);
 
-  console.log(`Server running on port ${PORT}`);
-});
+    console.log(`Server running on port ${PORT}`);
+  });
+}

frontend/package.json

@@ -18,7 +18,6 @@
     "@angular/platform-browser": "^18.2.13",
     "@angular/platform-browser-dynamic": "^18.2.13",
     "@angular/router": "^18.2.13",
-    "@swimlane/ngx-graph": "^10.0.0-alpha.0",
     "@tsparticles/preset-confetti": "^3.2.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",

frontend/src/app/app.routes.ts

@@ -7,7 +7,7 @@ import { UnitOverviewComponent } from './routes/unit-overview/unit-overview.comp
 import { VerifiedComponent } from './routes/verified/verified.component';
 import { NotFoundComponent } from './routes/not-found/not-found.component';
 import { ResetPasswordComponent } from './routes/reset-password/reset-password.component';
-import { UnitMapComponent } from './routes/unit-map/unit-map.component';
+// import { UnitMapComponent } from './routes/unit-map/unit-map.component';
 import { TermsAndCondsComponent } from './routes/terms-and-conds/terms-and-conds.component';
 import { AboutComponent } from './routes/about/about.component';
 import { SetuOverviewComponent } from './routes/setu-overview/setu-overview.component';
@@ -21,7 +21,7 @@ export const routes: Routes = [
   // Unit Overview
   { path: 'unit/:unitcode', component: UnitOverviewComponent },
   // Unit Map
-  { path: 'map/:unitcode', component: UnitMapComponent },
+  // { path: 'map/:unitcode', component: UnitMapComponent },
   // SETU Data
   { path: 'setu/:unitCode', component: SetuOverviewComponent },
   // Email Verification

frontend/src/app/routes/unit-map/unit-map.component.html

@@ -10,7 +10,7 @@
                 tooltipZIndex="9999"
                 icon="pi pi-replay"
                 rounded="true"
-                (click)="resetGraph()"
+                <!-- (click)="resetGraph()" -->
             />
         </div>
 
@@ -22,7 +22,7 @@
                 tooltipZIndex="9999"
                 icon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
                 rounded="true"
-                (click)="centerGraph()"
+                <!-- (click)="centerGraph()" -->
             />
 
             <p-button 
@@ -32,7 +32,7 @@
                 tooltipZIndex="9999"
                 icon="pi pi-expand"
                 rounded="true"
-                (click)="resetZoom()"
+                <!-- (click)="resetZoom()" -->
             />
         </div>
 
@@ -44,7 +44,7 @@
                 tooltipZIndex="9999"
                 icon="pi pi-wave-pulse"
                 rounded="true"
-                (click)="toggleLayout()"
+                <!-- (click)="toggleLayout()" -->
             />
         </div>
         </p-toolbar>
@@ -65,7 +65,7 @@ <h1>{{ unit?.unitCode | uppercase }}</h1>
                     icon="pi pi-arrow-left"
                     [rounded]="true"
                     [text]="true"
-                    (click)="navigateBack()"
+                    <!-- (click)="navigateBack()" -->
                     styleClass="p-button-secondary"
                     pTooltip="Go back"
                     tooltipPosition="right"
@@ -179,9 +179,9 @@ <h3>{{ unit?.name }}</h3>
         </defs>
     </svg>
 
-    <!-- ! Graph -->
-    <ngx-graph
-        [view]="[graphContainer.offsetWidth, graphContainer.offsetHeight]" 
+    <!-- ! Graph - Temporarily disabled due to dependency conflicts -->
+    <!-- <ngx-graph
+        [view]="[graphContainer.offsetWidth, graphContainer.offsetHeight]"
         [links]="edges"
         [nodes]="nodes"
         [layout]="layout"
@@ -218,7 +218,7 @@ <h3>{{ unit?.name }}</h3>
             />
             </svg:g>
         </ng-template>
-    </ngx-graph>
+    <!-- </ngx-graph> -->
 
     <!-- ! The loading overlay screen (this must be put here) -->
     @if (isLoading) {

frontend/src/app/routes/unit-map/unit-map.component.ts

@@ -3,7 +3,7 @@ import { Location } from '@angular/common';
 import { OrganizationChartModule } from 'primeng/organizationchart';
 import { ApiService } from '../../shared/services/api.service';
 import { Router } from '@angular/router';
-import { Edge, NgxGraphModule, NgxGraphZoomOptions } from '@swimlane/ngx-graph';
+// import { Edge, NgxGraphModule, NgxGraphZoomOptions } from '@swimlane/ngx-graph';
 import * as shape from 'd3-shape';
 import { Subject } from 'rxjs';
 import { ButtonModule } from 'primeng/button';
@@ -30,21 +30,21 @@ interface UnitNode {
 
 /**
  * * Unit Edge Interface
- * 
+ *
  * An interface for the edges in the unit graph
  */
-interface UnitEdge extends Edge {
-  data?: {
-    type: 'prerequisite' | 'parent';
-  }
-}
+// interface UnitEdge extends Edge {
+//   data?: {
+//     type: 'prerequisite' | 'parent';
+//   }
+// }
 
 @Component({
   selector: 'app-unit-map',
   standalone: true,
   imports: [
     OrganizationChartModule,
-    NgxGraphModule,
+    // NgxGraphModule,
     ButtonModule,
     ToolbarModule,
     TooltipModule,
@@ -58,13 +58,13 @@ interface UnitEdge extends Edge {
 export class UnitMapComponent implements OnInit, OnDestroy {
   @ViewChild('graphContainer') graphContainer!: ElementRef;
 
-  nodes: UnitNode[] = [];
-  edges: UnitEdge[] = [];
+  // nodes: UnitNode[] = [];
+  // edges: UnitEdge[] = [];
   layout = 'dagre';
   curve = shape.curveBasis;
 
   center$: Subject<boolean> = new Subject();
-  zoomToFit$: Subject<NgxGraphZoomOptions> = new Subject();
+  // zoomToFit$: Subject<NgxGraphZoomOptions> = new Subject();
 
   isLoading: boolean = false;
 
@@ -142,7 +142,7 @@ export class UnitMapComponent implements OnInit, OnDestroy {
 
         // Initalise arrays for prerequisites
         let prereqNodes: UnitNode[] = [];
-        let prereqEdges: UnitEdge[] = [];
+        // let prereqEdges: UnitEdge[] = [];
 
         // Only process prerequisites if they exist
         if (unit.requisites?.prerequisites && unit.requisites.prerequisites.length > 0) {
@@ -161,17 +161,17 @@ export class UnitMapComponent implements OnInit, OnDestroy {
           this.prerequisiteNumReq = unit.requisites.prerequisites[0].NumReq;
 
           // Add prerequisite edges
-          prereqEdges = prereqNodes.map(node => ({
-            id: `${node.id}-${currentNode.id}`,
-            source: node.id,
-            target: currentNode.id,
-            data: { type: 'prerequisite' }
-          }));
+          // prereqEdges = prereqNodes.map(node => ({
+          //   id: `${node.id}-${currentNode.id}`,
+          //   source: node.id,
+          //   target: currentNode.id,
+          //   data: { type: 'prerequisite' }
+          // }));
         }
 
         // Set initial nodes and edges
-        this.nodes = [currentNode, ...prereqNodes];
-        this.edges = prereqEdges;
+        // this.nodes = [currentNode, ...prereqNodes];
+        // this.edges = prereqEdges;
 
 
         // Fetch the units that are required by the current unit
@@ -197,7 +197,7 @@ export class UnitMapComponent implements OnInit, OnDestroy {
             // console.log('Parent nodes:', parentNodes);
 
             // Add edges from current node to parent nodes
-            const parentEdges: UnitEdge[] = parentNodes.map(node => ({
+            // const parentEdges: UnitEdge[] = parentNodes.map(node => ({
               id: `${currentNode.id}-${node.id}`,
               source: currentNode.id,
               target: node.id,
@@ -208,8 +208,8 @@ export class UnitMapComponent implements OnInit, OnDestroy {
             // console.log('Parent edges:', parentEdges);
 
             // Add parent nodes and edges to the graph
-            this.nodes = [...this.nodes, ...parentNodes];
-            this.edges = [...this.edges, ...parentEdges];
+            // this.nodes = [...this.nodes, ...parentNodes];
+            // this.edges = [...this.edges, ...parentEdges];
 
             // ? Debug log: Final graph state
             // console.log('Final graph state:', {
@@ -218,22 +218,22 @@ export class UnitMapComponent implements OnInit, OnDestroy {
             // });
 
             // Center the graph
-            this.centerGraph();
+            // this.centerGraph();
           }
         });
       }
     });
 
     // Zoom to fit
-    this.resetZoom();
+    // this.resetZoom();
   }
 
   /**
    * * Centers the Graph
    */
-  centerGraph() {
-    this.center$.next(true);
-  }
+  // centerGraph() {
+  //   this.center$.next(true);
+  // }
 
   /**
    * * Resets the Graph
@@ -246,16 +246,16 @@ export class UnitMapComponent implements OnInit, OnDestroy {
   /**
    * * Zoom to Fit
    */
-  resetZoom() {
-    this.zoomToFit$.next({ force: true, autoCenter: true });
-  }
+  // resetZoom() {
+  //   // this.zoomToFit$.next({ force: true, autoCenter: true });
+  // }
 
   /**
    * * Toggle Layout
    */
-  toggleLayout() {
-    this.layout = this.layout === 'dagre' ? 'colaForceDirected' : 'dagre';
-  }
+  // toggleLayout() {
+  //   this.layout = this.layout === 'dagre' ? 'colaForceDirected' : 'dagre';
+  // }
 
   /**
    * * Navigates back to the previous page

vercel.json

@@ -0,0 +1,30 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "backend/server.js",
+      "use": "@vercel/node"
+    },
+    {
+      "src": "frontend/package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "distDir": "dist/frontend/browser",
+        "buildCommand": "npm install --legacy-peer-deps && npm run build"
+      }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/api/(.*)",
+      "dest": "/backend/server.js"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "/frontend/$1"
+    }
+  ],
+  "env": {
+    "PRODUCTION_MACHINE": "false"
+  }
+}