Added the right rendering to keynotes on website.

Author: GuiBaracho

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

@@ -94,16 +94,17 @@ <h6 class="highlight">Keynotes</h6>
                         </strong>
                       </mat-card-title>
                       <mat-card-subtitle *ngIf="session.speakers.length > 0 && session.speakers[0]">
-                        <p>{{session.speakers[0].name}}</p>
+                        <!-- FIXME
+                        -- Every check for session.speakers.length > 1 is checking if a keynote is a panel
+                        -- For keynotes with more than 1 speaker and arent a panel this needs to be revisited
+                        -->
+                        <p>{{session.speakers.length > 1 ? '' : session.speakers[0].name}}</p>
                       </mat-card-subtitle>
                     </mat-card-header>
 
                     <mat-card-content>
                       <h6 class=" title">
-                        <strong *ngFor="let speaker of session.speakers" class="highlight speaker-name">
-                          {{session.name.split(' - ')[0]}}
-                        </strong>
-                        -- {{session.name.split(' - ')[1]}}
+                        {{session.name}}
                       </h6>
                       <div class="panel-collapse collapse in schedule-item-body">
                         <article>

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

@@ -85,6 +85,13 @@ export class ScheduleComponent implements OnInit, OnChanges {
       }
 
       if (val.kind === 'Keynote') {
+        // FIXME
+        // Sets the session image to a static image in digital ocean for the panel (only case where seapers.len > 1 !!! FOR NOW !!!)
+        // Change this link if panel image changes
+        // If a normal talk has more than 1 speaker this need to be revisited
+        if (val.speakers.length > 1){
+          val.img = "https://static.sinfo.org/static/31-sinfo/websiteImages/panel-31.png"
+        }
         tempSchedule[registeredDays].sessions[val.kind].push(val)
       } else {
         let place = (val.place === 'Room 2') ? 'sala2' : 'sala1'

src/app/session/session.component.css

@@ -23,6 +23,14 @@ p {
   max-height: 300px;
 }
 
+.panelSpeaker-img {
+  border-radius: 15px;
+  max-height: 300px;
+  width: 20dvh;
+  height: 20dvh;
+  object-fit: cover;
+}
+
 .session-details h5 {
   margin: 15px auto;
 }

src/app/session/session.component.html

@@ -64,14 +64,16 @@ <h3 class="title">{{session.kind}}</h3>
           </div>
         </div>
 
-        <div class="row session-details" *ngIf="session.kind === 'Keynote' && speaker">
-          <div class="col-sm-3 col-xs-12">
-            <img class="speaker-img" src='{{speaker.img}}'>
-          </div>
-
-          <div class="col-sm-9 col-xs-12 align-left justify">
-            <h5 class="name">{{speaker.name}}</h5>
-            <h5>{{speaker.title}}</h5>
+        <div class="row session-details" *ngIf="session.kind === 'Keynote' && speakers.length > 0">
+          <div *ngFor="let speaker of speakers; let iSession=index">
+            <div class="col-sm-3 col-xs-12">
+              <img [ngClass]="speakers.length > 1 ? 'panelSpeaker-img' : 'speaker-img'" src='{{speaker.img}}'>
+            </div>
+  
+            <div class="col-sm-9 col-xs-12 align-left justify">
+              <h5 class="name">{{speaker.name}}</h5>
+              <h5>{{speaker.title}}</h5>
+            </div>
           </div>
         </div>
 

src/app/session/session.component.ts

@@ -35,7 +35,7 @@ import { User } from '../user/user.model';
 
 export class SessionComponent implements OnInit {
   session: Session
-  speaker: Speaker
+  speakers: Speaker[] = []
   description: SafeHtml
   user: User
   showMore = false
@@ -80,8 +80,12 @@ export class SessionComponent implements OnInit {
   }
 
   getSpeaker(session: Session): void {
-    this.speakerService.getSpeaker(session.speakers[0]['id'])
-      .subscribe(speaker => this.speaker = speaker)
+    for(let sessionSpeaker of session.speakers){
+      this.speakerService.getSpeaker(sessionSpeaker['id'])
+      .subscribe(speaker => {
+        this.speakers.push(speaker);
+      })
+    }
   }
 
   onSelect(id: string): void {