Merge pull request #431 from sinfo/staging

Update 2.3.13

Author: PMax5

src/app/app.module.ts

@@ -121,6 +121,7 @@ import { SponsorComponent } from "./sponsor/sponsor.component";
 import { DeleteLinkDialogComponent } from "./user/link/my-links/delete-link-dialog/delete-link-dialog.component";
 
 import { marked } from 'marked';
+import { PromocodeService } from "./landing-page/promocodes/promocode.service";
 
 
 library.add(fas);
@@ -231,6 +232,7 @@ library.add(fas);
     SpeakerService,
     MessageService,
     SponsorService,
+    PromocodeService,
     TeamService,
     AuthService,
     AuthGuard,

src/app/events/event.service.ts

@@ -61,6 +61,13 @@ export class EventService {
     }
   }
 
+  getCalendarUrl(): Observable<string> {
+    return this.http.get<string>(`${environment.cannonUrl}/calendar`, { responseType: 'text' as 'json' })
+      .pipe(
+        catchError(this.handleError<string>('getCalendarUrl', ''))
+      )
+  }
+
   /**
    * Handle Http operation that failed.
    * Let the app continue.

src/app/landing-page/landing-page.component.css

@@ -9,7 +9,7 @@
 
 .example-card {
   margin: 5%;
-  /*display: flex;*/
+  display: flex;
   justify-content: center;
   /* align horizontal */
   align-items: center;
@@ -61,7 +61,22 @@
   background-color: rgba(0, 0, 0, 0.85);
   color: white;
   height: min-content;
-  width: max-content;
+  width: 180px;
+  padding: 0 20px;
+  font-family: 'Montserrat';
+}
+
+.sidenav a {
+  text-decoration: none;
+  color: white;
+}
+
+.sidenav-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 55px;
+  font-size: 1.2em;
 }
 
 .sidenav::-webkit-scrollbar {
@@ -327,9 +342,15 @@
 
 .offers {
   display: grid;
-  /*width: 100%;*/
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  width: 100%;
+  grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
   row-gap: 2rem;
   column-gap: 1rem;
-  justify-content: center;
-}
+}
+
+.offers img {
+  max-height: 20vh;
+  max-width: 100%;
+  height: auto;
+  width: auto;
+}

src/app/landing-page/landing-page.component.html

@@ -35,6 +35,11 @@
             About Us
           </a>
         </li>
+        <li class="socials-nav-item">
+          <a (click)="scroll(offers)" class="navigation-link" aria-label="Offers">
+            Offers
+          </a>
+        </li>
         <li class="socials-nav-item">
           <a (click)="scroll(faq)" class="navigation-link" aria-label="FAQ">
             FAQ
@@ -84,6 +89,11 @@
             About Us
           </a>
         </li>
+        <li class="socials-nav-item">
+          <a (click)="scroll(offers);toggleDropdown()" class="navigation-link" aria-label="Offers">
+            Offers
+          </a>
+        </li>
         <li class="socials-nav-item">
           <a (click)="scroll(faq);toggleDropdown()" class="navigation-link" aria-label="FAQ">
             FAQ
@@ -98,50 +108,44 @@
 
 <mat-sidenav-container class='sidenav-container'>
   <mat-sidenav #sidenav1 mode="over" class='sidenav' position="end">
-    <mat-nav-list class='navlist'>
-      <a mat-list-item href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter"
-        (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Twitter</span>
+    <a href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Twitter</span>
           <span class="fa fa-twitter"></span>
-        </div>
-      </a>
-      <a mat-list-item href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Facebook"
-        (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Facebook</span>
+      </div>
+    </a>
+    <a href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Facebook</span>
           <span class="fa fa-facebook"></span>
-        </div>
-      </a>
-      <a mat-list-item href="https://github.com/sinfo" target="_blank" aria-label="Github" (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Github</span>
+      </div>
+    </a>
+    <a href="https://github.com/sinfo" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Github</span>
           <span class="fa fa-github"></span>
-        </div>
-      </a>
-      <a mat-list-item href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Instagram"
-        (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Instagram</span>
+      </div>
+    </a>
+    <a href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Instagram</span>
           <span class="fa fa-instagram"></span>
-        </div>
-      </a>
-      <a mat-list-item href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Youtube"
-        (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Youtube</span>
+      </div>
+    </a>
+    <a href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Youtube</span>
           <span class="fa fa-youtube"></span>
-        </div>
-      </a>
-      <a mat-list-item href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Linkedin"
-        (click)="sidenav1.toggle()">
-        <div class="social-link">
-          <span class="list-item">Linkedin</span>
+      </div>
+    </a>
+    <a href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Twitter" (click)="sidenav1.toggle()">
+      <div class="sidenav-item">
+          <span>Linkedin</span>
           <span class="fa fa-linkedin"></span>
-        </div>
-      </a>
-    </mat-nav-list>
+      </div>
+    </a>
   </mat-sidenav>
+
   <mat-sidenav-content style=" overflow: overlay; font-family: 'Montserrat:  !important'">
     <div class="content">
       <section id="hero" class="hero-section light-text">
@@ -397,7 +401,7 @@ <h6>About Us</h6>
                     SINFO is a college student and non-profitable organization responsible for the planning of one of
                     the
                     biggest Tech events
-                    in Portugal. It’s an annual conference that takes place at the Alameda Campus of Técnico Lisboa, in
+                    in Portugal. It’s an annual conference that takes place at Técnico Innovation Center, in
                     the
                     capital
                     city of Portugal, Lisbon. We had a record breaking attendance of participants last year, achievement
@@ -469,7 +473,7 @@ <h6>Target</h6>
       </section>
       <mat-divider></mat-divider>
 
-      <section #faq class="price-area section-padding" style="margin-bottom: 5%;" id="the-event">
+      <section #offers class="price-area section-padding" style="margin-bottom: 5%;">
         <div class="container">
           <div class="row">
             <div class="text-center">
@@ -479,14 +483,22 @@ <h2 class="text-center">Offers</h2>
                   Take advantage of exclusive offers from our partners!
                 </p>
                 <div class="offers">
-                  <mat-card class="example-card cursor-pointer" style="padding: 2%;width: 250px;margin-left: 40%;">
-                    <a href="https://www.flytap.com"><img src="https://static.sinfo.org/static/31-sinfo/offers/tap.jpg"/></a>
+                  <mat-card *ngFor="let offer of promocodes" class="example-card" style="padding: 5%;">
+                    <img src="{{offer.company.img}}" alt="{{offer.company.name}} logo">
+
                     <div class="text-alt description">
-                      <small>Official Carrier of SINFO 31</small>
+                      <small>{{offer.description}}</small>
                     </div>
-                    <a href="https://static.sinfo.org/static/31-sinfo/offers/tap_tos.pdf" class="btn btn-rounded btn-outline-clr btn-sm" style="margin-top: 2%;">
+                    <a *ngIf="offer.link" href="{{offer.code}}" target="_blank" class="btn btn-rounded btn-outline-clr btn-sm" style="margin-top: 2%;">
                       Claim Offer
                     </a>
+                    <div *ngIf="!offer.link" style="display:flex; flex-direction: column; margin-top: 2%;">
+                      <span>
+                        <small>Code:</small>
+                        <p class="btn btn-rounded btn-outline-clr btn-sm">{{offer.code}}</p>
+                      </span>
+                      <small>Expires: {{offer.expire | date : "dd/MM/yyyy" : "+0100"}}</small>
+                    </div>
                   </mat-card>
                 </div>
               </div>

src/app/landing-page/landing-page.component.ts

@@ -4,6 +4,8 @@ import { Title } from '@angular/platform-browser'
 import { LivestreamService } from './livestream/livestream.service'
 import { SponsorService } from './sponsors/sponsor.service'
 import { Sponsor } from './sponsors/sponsor.model'
+import { PromocodeService } from './promocodes/promocode.service'
+import { Promocode } from './promocodes/promocode.model'
 import { Event } from '../events/event.model'
 import {
   trigger,
@@ -43,12 +45,14 @@ export class LandingPageComponent implements OnInit {
   isLive: boolean
   dropdownNav: boolean = false
   sponsors: Sponsor[]
+  promocodes: Promocode[]
 
   constructor(
     private titleService: Title,
     private eventService: EventService,
     private liveStreamService: LivestreamService,
-    private sponsorService: SponsorService
+    private sponsorService: SponsorService,
+    private promocodeService: PromocodeService
   ) { }
 
   ngOnInit() {
@@ -61,6 +65,7 @@ export class LandingPageComponent implements OnInit {
       this.end = event.end
 
       this.getSponsors(event)
+      this.getPromocodes()
     })
 
     this.showOrHideDropdown()
@@ -79,6 +84,13 @@ export class LandingPageComponent implements OnInit {
       )
   }
 
+  getPromocodes(): void {
+    this.promocodeService.getPromocodes(this.eventId)
+      .subscribe(promocodes => {
+        this.promocodes = promocodes
+      })
+  }
+
   /* Beggining of Dropdown tabs actions */
   showOrHideDropdown(): void {
     this.displayAboutDropdown = window.innerWidth > 768 ? true : false

src/app/landing-page/promocodes/promocode.model.ts

@@ -0,0 +1,11 @@
+import { Sponsor } from '../sponsors/sponsor.model'
+
+export class Promocode {
+  id: string
+  code: string
+  company: string | Sponsor
+  description: string
+  edition: string
+  expire: Date
+  link?: boolean
+}

src/app/landing-page/promocodes/promocode.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { Observable, of } from 'rxjs'
+import { tap, catchError } from 'rxjs/operators'
+import { environment } from '../../../environments/environment'
+import { Promocode } from './promocode.model'
+import { SponsorService } from '../sponsors/sponsor.service'
+
+@Injectable()
+export class PromocodeService {
+  private promocodeUrl = environment.cannonUrl + '/promo-code'
+  private promocodes: Promocode[]
+
+  constructor(
+    private http: HttpClient,
+    private snackBar: MatSnackBar,
+    private sponsorService: SponsorService
+  ) { }
+
+  getPromocodes(eventId: string): Observable<Promocode[]> {
+    if (this.promocodes) {
+      return of(this.promocodes)
+    }
+
+
+    return this.http.get<Promocode[]>(this.promocodeUrl).pipe(
+      tap(promocodes => this.sponsorService.getSponsors(eventId).subscribe(sponsors => {
+        this.promocodes = promocodes.map(promocode => {
+          const sponsor = sponsors.find(sponsor => sponsor.id === promocode.company)
+          promocode.company = sponsor
+          promocode.link = this.isLink(promocode.code)
+          return promocode
+        })
+      })),
+      catchError(this.handleError<Promocode[]>('getPromocodes', []))
+    )
+  }
+
+  isLink(code: string): boolean {
+    return code.startsWith('http://') || code.startsWith('https://')
+  }
+
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+      // this.snackBar.open(error.message, "Ok", {
+      //   panelClass: ['mat-toolbar', 'mat-warn'],
+      //   duration: 2000
+      // })
+
+      this.snackBar.open("An error occurred and was sent to SINFO team.", "Ok", {
+        panelClass: ['mat-toolbar', 'mat-warn'],
+        duration: 2000
+      })
+
+      // Let the app keep running by returning an empty result.
+      return of(result)
+    }
+  }
+
+}

src/app/landing-page/schedule/schedule.component.html

@@ -9,7 +9,8 @@ <h3>Schedule</h3>
     <br />
 
     <br />
-    <a class="btn btn-sm btn-outline-clr ics" href="https://deck.sinfo.org/calendar.ics" target="_blank" style="margin-bottom: 50px">
+    <a *ngIf="calendarUrl"
+      class="btn btn-sm btn-outline-clr ics" href={{calendarUrl}} target="_blank" style="margin-bottom: 50px">
       Download calendar
       <span class="fa fa-download icon"></span>
     </a>