Skip to content

Commit

Permalink
Merge pull request #41 from ng-girls/ng-conf-v2
Browse files Browse the repository at this point in the history
Ng conf v2: add internal view
  • Loading branch information
willi84 authored Mar 18, 2024
2 parents d9089ad + 110d3e7 commit a856a03
Show file tree
Hide file tree
Showing 34 changed files with 451 additions and 31 deletions.
3 changes: 2 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
63 changes: 63 additions & 0 deletions src/_fonts.scss
Original file line number Diff line number Diff line change
@@ -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);
3 changes: 1 addition & 2 deletions src/app/about/about.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 10 additions & 2 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '' }
];

Expand All @@ -19,7 +26,8 @@ const routes: Routes = [
scrollOffset: [0, 200]
})
],
exports: [RouterModule]
exports: [RouterModule],
providers: [EventResolver] // Provide the resolver
})
export class AppRoutingModule {
}
4 changes: 3 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -41,7 +42,8 @@ import { FaqComponent } from './faq/faq.component';
ScrollingModule,
CdkScrollableModule,
MatButtonModule,
MatIconModule
MatIconModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
Expand Down
13 changes: 13 additions & 0 deletions src/app/event.resolver.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
93 changes: 90 additions & 3 deletions src/app/event.service.ts
Original file line number Diff line number Diff line change
@@ -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 = [

Expand All @@ -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',
Expand Down Expand Up @@ -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('');
}
}
}
113 changes: 96 additions & 17 deletions src/app/event/event.component.html
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit a856a03

Please sign in to comment.