fix: make fonts local and add internal view

angular.json

@@ -31,7 +31,8 @@
             },
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/fonts"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",

src/_fonts.scss

@@ -0,0 +1,63 @@
+// Define @font-face rules for Roboto Light
+@font-face {
+    font-family: 'Roboto';
+    src: local('Roboto Light'), local('Roboto-Light'),
+         url('/assets/font/roboto/Roboto-Light.woff2') format('woff2'),
+         url('/assets/font/roboto/Roboto-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+// Define @font-face rules for Roboto Medium
+@font-face {
+    font-family: 'Roboto';
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('/assets/font/roboto/Roboto-Medium.woff2') format('woff2'),
+         url('/assets/font/roboto/Roboto-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+// Define @font-face rules for Roboto Regular
+@font-face {
+    font-family: 'Roboto';
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('/assets/font/roboto/Roboto-Regular.woff2') format('woff2'),
+         url('/assets/font/roboto/Roboto-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+// Usage example:
+$my-custom-typography-config: mat.define-typography-config(
+    $headline:  mat.define-typography-level(34px, 48px, 300, 'Roboto'), // Light
+    $title: mat.define-typography-level(20px, 32px, 500, 'Roboto'), // Medium
+    $body-1: mat.define-typography-level(16px, 32px, 400, 'Roboto'), // Regular
+);
+
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/assets/font/material-design-icons/MaterialIcons-Regular.woff2') format('woff2');
+    // src: url(https://fonts.gstatic.com/s/materialicons/v141/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+  }
+
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+@include mat.core($my-custom-typography-config);

src/app/about/about.component.scss

@@ -2,8 +2,7 @@
   background: linear-gradient(to right bottom, rgba(255, 240, 245, 0.82), rgba(179, 101, 101, 0.82));
 }
 
-.content {
-}
+
 
 .header {
   margin-bottom: 32px;

src/app/app-routing.module.ts

@@ -3,11 +3,18 @@ import { RouterModule, Routes } from '@angular/router';
 import { CocComponent } from './coc/coc.component';
 import { FaqComponent } from './faq/faq.component';
 import { EventComponent } from './event/event.component';
+import { EventResolver } from 'src/app/event.resolver';
 
 const routes: Routes = [
   { path: 'faq', component: FaqComponent },
   { path: 'coc', component: CocComponent },
-  { path: 'event/:eventId', component: EventComponent, data: { animation: 'event' } },
+  {
+    path: 'event/:eventId',
+    resolve: { events: EventResolver }, // Resolve events before activating the route
+    children: [
+      { path: '', component: EventComponent, data: { animation: 'event' } },
+    ]
+  },
   { path: '**', redirectTo: '' }
 ];
 
@@ -19,7 +26,8 @@ const routes: Routes = [
       scrollOffset: [0, 200]
     })
   ],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [EventResolver] // Provide the resolver
 })
 export class AppRoutingModule {
 }

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { FooterComponent } from './footer/footer.component';
 import { SeeYouComponent } from './see-you/see-you.component';
 import { CocComponent } from './coc/coc.component';
 import { FaqComponent } from './faq/faq.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { FaqComponent } from './faq/faq.component';
     ScrollingModule,
     CdkScrollableModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule, 
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/event.resolver.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EventService } from './event.service'; // Update this import with the correct event service
+
+@Injectable({ providedIn: 'root' })
+export class EventResolver implements Resolve<Event[]> {
+  constructor(private eventService: EventService) {}
+
+  resolve(): Observable<Event[]> {
+    return this.eventService.getEvents(); // Assuming getEvents() returns an Observable of events
+  }
+}

src/app/event.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { Events } from 'src/types';
+import { Events, Event } from 'src/types';
+import { HttpClient } from '@angular/common/http';
+import { map, switchMap } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
 
 const events: Events = [
 
@@ -28,6 +30,66 @@ const events: Events = [
     city: 'Salt Lake City',
     state: 'USA',
     date: 'March 19, 2024',
+    timetable: {
+      instructors: [],
+      groups: [
+        { 
+          mentor: [{ 'firstname': 'Sangeeta', 'lastname': 'Joshi', 'image': 'assets/events/ngconf-2024/mentors/sangeeta.jpg'}],
+          attendees: [
+            { 'firstname': 'Sylvia'},
+            { 'firstname': 'Tracey'},
+            { 'firstname': 'Lindsay'},
+            { 'firstname': 'Ashley'},
+          ]
+        },
+        { 
+          mentor: [{ 'firstname': 'Jan-Niklas', 'lastname': 'Wortmann', 'image': 'assets/events/ngconf-2024/mentors/jan-niklas.jfif'}],
+          attendees: [
+            { 'firstname': 'Jamee'},
+            { 'firstname': 'Jen'},
+            { 'firstname': 'Loida'},
+            { 'firstname': 'Ariane'},
+          ]
+        },
+        { 
+          mentor: [{ 'firstname': 'Craig', 'lastname': 'Spence', 'image': 'assets/events/ngconf-2024/mentors/craig.jfif'}],
+          attendees: [
+            { 'firstname': 'Astrid'},
+            { 'firstname': 'Celeste'},
+            { 'firstname': 'Andrea'},
+            { 'firstname': 'Araceli'},
+          ]
+        },
+        { 
+          mentor: [{ 'firstname': 'Nalini', 'lastname': 'Kodali', 'image': 'assets/events/ngconf-2024/mentors/female.svg'}],
+          attendees: [
+            { 'firstname': 'Tanvi'},
+            { 'firstname': 'Chethana'},
+            { 'firstname': 'Patricia'},
+          ]
+        },
+      ],
+      infos: [
+        { key: '📅', text: 'Tuesday March 19, 2024'},
+        { key: '⏰', text: '9:00 - 17:00 MST (Salt Lake City, USA, GMT -7)'},
+        { key: '🏠', text: 'The Grand American Hotel, Salt Lake City'},
+        { key: '🥤', text: 'Lunch and refreshments provided'},
+        { key: '🚪', text: 'Room "Tuscany", 3rd floor'},
+      ],
+      basics: {
+        floorplan: 'assets/events/ngconf-2024/floorplan.png',
+        timezone: 'Mountain Standard Time (GMT-7)'
+      },
+      dates: [
+        { time: '09:00 - 09:15', text: '👋  Check in'},
+        { time: '09:15 - 10:00', text: '💡  Introduction to ngGirls and Angular'}, 
+        { time: '10:00 - 12:55', text: '🪑 start working in groups'},
+        { time: '12:55	        ', text: ' 📷 group photo'},
+        { time: '13:00 - 14:00', text: '🍕  Lunch break & networking'},
+        { time: '14:00 - 16:30', text: '⌨️  Coding & working'},
+        { time: '16:30 - 17:00', text: '🏆  Closing lecture and goodbyes' }
+      ]
+    },
     year: '2024',
     applicationForm: 'https://docs.google.com/forms/d/e/1FAIpQLSdCfn6mN3VCmRNGSTRHMQl99T6MA7nqEXo-_RIwojSk5t9PkA/viewform',
     mentorsForm: 'https://docs.google.com/forms/d/e/1FAIpQLSd0sli7Jv9yjRTGq5vspHE_E9HuBO1u2qPlZTJ-0zTTEIbjKw/viewform',
@@ -64,6 +126,49 @@ export class EventService {
     map(params => params.get('eventId'))
   );
 
-  constructor(private router: ActivatedRoute) {
+  constructor(private router: ActivatedRoute, private http: HttpClient, private route: ActivatedRoute) {
+  }
+   // Simulate fetching events asynchronously
+   getEvents(): Observable<any> {
+    return of(this.events); // Return static events wrapped in an observable
+  }
+
+  // Extract event ID from route parameters
+  getEventId(): Observable<string | null> {
+    return this.route.paramMap.pipe(
+      map(params => params.get('eventId'))
+    );
+  }
+
+  // Get events with the specified ID
+  getEventById(id: string): Observable<any> {
+    return this.getEvents().pipe(
+      map(events => events.find((event: Event) => event.id === id))
+    );
+  }
+  // Example of a method to retrieve the password associated with an event ID
+  getEventPassword(eventId: string): Observable<string> {
+    // Here, you would typically fetch the password from a data source like a backend server.
+    // For the sake of this example, I'll provide a hardcoded password.
+    // You should replace this with your actual implementation.
+
+    // Assuming you have a map of event IDs to passwords
+    const eventPasswords: { [eventId: string]: string } = {
+      'ngconf-2024': 'test',
+      // Add more event IDs and passwords as needed
+    };
+
+    // Retrieve the password for the provided event ID
+    const password = eventPasswords[eventId];
+
+    // If the password is found, return it as an observable
+    if (password) {
+      return of(password);
+    } else {
+      // If the password is not found, you might want to handle this differently.
+      // For example, you could return a default password, throw an error, or handle it in some other way.
+      // Here, I'll return an observable with an empty string.
+      return of('');
+    }
   }
 }