Ng conf v2: add internal view

angular.json

@@ -31,7 +31,8 @@
             },
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/font"
             ],
             "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,48 @@ 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'}],
+
+        },
+        { 
+          mentor: [{ 'firstname': 'Jan-Niklas', 'lastname': 'Wortmann', 'image': 'assets/events/ngconf-2024/mentors/jan-niklas.jfif'}],
+
+        },
+        { 
+          mentor: [{ 'firstname': 'Craig', 'lastname': 'Spence', 'image': 'assets/events/ngconf-2024/mentors/craig.jfif'}],
+
+        },
+        { 
+          mentor: [{ 'firstname': 'Nalini', 'lastname': 'Kodali', 'image': 'assets/events/ngconf-2024/mentors/female.svg'}],
+
+        },
+      ],
+      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'},
+        { key: '👨‍👦‍👦', text: 'Link to the groups', link: 'https://docs.google.com/presentation/d/1WbK7dg154tquToFlk8KBW2ppSfqdalMs0Xxn_6ZIXW8/edit#slide=id.gacb9094982_0_29'},
+      ],
+      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 +108,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('');
+    }
   }
 }

src/app/event/event.component.html

@@ -1,27 +1,106 @@
 <div class="event-container" *ngIf="(event$ | async) as event" id="event">
-  <div class="header-row">
-    <div class="event-title">
-      <h1>{{ event.title }}</h1>
-      <h2>{{ event.city }}, {{event.state }}</h2>
+  <div *ngIf="isAuthenticated">
+    <!-- Add authenticated user content here -->
+    <p>Welcome to: </p>
+    <h1>{{event.title}}</h1>
+    <div class="upcoming-events mt-30">
+      <h2>Basics</h2>
+    </div>
+    <div class="infos">
+      <table>
+        <tr *ngFor="let info of event.timetable?.infos">
+          <td>
+            {{info.key}}
+          </td>
+
+          <td *ngIf="!info.link"> {{info.text}}</td>
+          <td *ngIf="info.link"> <a href="{{info.link}}">{{info.text}}</a></td>
+        </tr>
+      </table>
+      <div *ngIf="event.timetable?.basics?.floorplan" class="floorplan">
+        <img width="400" src="{{event.timetable?.basics?.floorplan}}">
+      </div>
     </div>
-  </div>
 
-  <p [innerHTML]="event.announcement"></p>
+    <div class="upcoming-events mt-30">
+      <h2>Your Instructors</h2>
+    </div>
+    <div class="team-members">
+      <div *ngFor="let member of team" class="team-member">
+        <div style="background-image: url(assets/team/{{member.image}})" class="member-image"></div>
+        <h2 class="member-name">{{ member.name }}</h2>
+      </div>
+    </div>
+
+
+    <div class="event-timetable-wrapper">
+      <div class="event-timetable">
+        <p>Tentative schedule </p>
+        <p>{{event.timetable?.basics.timezone}}</p>
+          <table>
+            <tr  *ngFor="let dateItem of event.timetable?.dates">
+              <td>{{dateItem.time}}</td>
+              <td>{{dateItem.text}}</td>
+            </tr>
+          </table>
+      </div>
+    </div>
 
-  <div class="call-for-action">
-    <a *ngIf="event.applicationForm" [href]="event.applicationForm" target="_blank">
-      <button mat-raised-button color="primary">{{event.applicationButton || "Apply for the workshop"}} </button>
 
-    </a>
-    <a *ngIf="event.mentorsForm" [href]="event.mentorsForm" target="_blank">
-      <button mat-raised-button color="primary">{{event.mentorsButton || "Call for mentors" }}</button>
-    </a>
+    <div class="upcoming-events mt-30">
+      <h2>Groups</h2>
+    </div>
+    <div class="groups">
+      <div *ngFor="let group of event.timetable?.groups; let groupIndex = index" class="group-item">
+        <h2 class="member-name">Group {{groupIndex + 1}}</h2>
+        <div class="team-members">
+          <div *ngFor="let member of group.mentor" class="team-member team-member--small">
+            <div style="background-image: url({{member.image}})" class="member-image"></div>
+            <h2 class="member-name">{{ member.firstname }}</h2>
+          </div>
+        </div>
+        </div>
+
+      </div>
+
+      <div class="upcoming-events mt-30">
+        <h2>Sponsors</h2>
+      </div>
+    <div class="sponsors">
+      <a *ngFor="let sponsor of event.sponsors" [href]="sponsor.link" target="_blank" class="logo">
+        <img [src]="sponsor.logo">
+      </a>
+    </div>
   </div>
 
-  <div class="sponsors">
-    <a *ngFor="let sponsor of event.sponsors" [href]="sponsor.link" target="_blank" class="logo">
-      <img [src]="sponsor.logo">
-    </a>
+  <!-- If the user is not authenticated or doesn't have access, show a message or redirect -->
+  <div *ngIf="!isAuthenticated">
+    <p>You are not authorized to view this page.</p>
+    <div class="header-row">
+      <div class="event-title">
+        <h1>{{ event.title }}</h1>
+        <h2>{{ event.city }}, {{event.state }}</h2>
+      </div>
+    </div>
+
+    <p [innerHTML]="event.announcement"></p>
+
+    <div class="call-for-action">
+      <a [href]="event.applicationForm" target="_blank">
+        <button mat-raised-button color="primary">{{event.applicationButton || "Apply for the workshop"}} </button>
+
+      </a>
+      <a [href]="event.mentorsForm" target="_blank">
+        <button mat-raised-button color="primary">{{event.mentorsButton || "Call for mentors" }}</button>
+      </a>
+    </div>
+
+    <div class="sponsors">
+      <a *ngFor="let sponsor of event.sponsors" [href]="sponsor.link" target="_blank" class="logo">
+        <img [src]="sponsor.logo">
+      </a>
+    </div>
   </div>
+
 
 </div>