Schedule touchups

src/app/app.component.html

@@ -54,7 +54,7 @@
               <ion-label>
                 {{p.title}}
               </ion-label>
-              <ion-badge *ngIf="(p.title === 'About' && liveUpdateService.updateAvailable?.available)">Live Update Available</ion-badge>
+              <ion-badge *ngIf="(p.title === 'About PyCon' && liveUpdateService.updateAvailable?.available)">Live Update Available</ion-badge>
             </ion-item>
 
           </ion-menu-toggle>

src/app/pages/schedule-list/schedule-list.page.html

@@ -28,24 +28,28 @@
 
   <ion-grid>
     <ion-row>
-      <ion-col size-xl="3" size-md="4" size-sm="6" size-xs="12" *ngFor="let session of displaySessions" [hidden]="session.hide">
-        <ion-card class="session-card">
-          <ion-card-content>
-            <ion-list lines="none">
-              <ion-item detail="false" lines="none" class="session-item" routerLink="/app/tabs/schedule/session/{{session.id}}">
-                <ion-label>
-                  <h3>
-                    <ion-icon *ngIf="session.favorite" slot="icon-only" name="star"></ion-icon>
-                    {{session.track}}: {{session.name}}
-                  </h3>
-                  <p>
-                    {{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}} <span *ngIf="session?.speakerNames">&mdash; {{session.speakerNames?.join(', ')}}</span>
-                  </p>
-                </ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-card-content>
-        </ion-card>
+      <ion-col size-xl="6" size-md="6" size-sm="6" size-xs="12" *ngFor="let session of displaySessions" [hidden]="session.hide">
+        <ion-item class="ion-no-padding" lines="none" detail="false" routerLink="/app/tabs/schedule/session/{{session.id}}">
+          <ion-card class="ion-no-padding ion-no-border ion-margin-bottom session-card">
+            <ion-card-header>
+              <ion-card-title class="session-card-title">
+                  <ion-icon *ngIf="session.favorite" slot="icon-only" name="star"></ion-icon>
+                  {{session.name}}
+              </ion-card-title>
+              <ion-card-subtitle>
+                  <b>{{session.track}}</b>: {{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}}
+              </ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-chip *ngFor="let speaker of session.speakers">
+              <ion-avatar>
+                <img [src]="speaker.profilePic" [alt]="speaker.name + ' profile picture'">
+              </ion-avatar>
+              <ion-label>{{ speaker.name }}</ion-label>
+              </ion-chip>
+            </ion-card-content>
+          </ion-card>
+        </ion-item>
       </ion-col>
     </ion-row>
   </ion-grid>

src/app/pages/schedule-list/schedule-list.page.scss

@@ -0,0 +1,7 @@
+.session-card {
+  width: 100%;
+}
+
+.session-card-title {
+  font-size: 1.25em;
+}

src/app/pages/schedule/schedule.html

@@ -80,13 +80,14 @@
         </ion-label>
       </ion-item-divider>
 
-      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.track | lowercase" [hidden]="session.hide">
-        <ion-item routerLink="/app/tabs/schedule/session/{{session.id}}">
+      <ion-item-sliding *ngFor="let session of group.sessions | sessionOrder" #slidingItem [attr.track]="session.track | lowercase" [hidden]="session.hide">
+        <ion-item [color]="session?.color? session.color : ''" [routerLink]="session.listRender? '/app/tabs/tracks/' + session.section: '/app/tabs/schedule/session/'+session.id">
           <ion-label>
             <h3>
               <ion-icon *ngIf="session.favorite" slot="icon-only" name="star"></ion-icon>
               {{session.track}}: {{session.name}}
             </h3>
+            <ion-text *ngIf="session.preRegistered" color="medium" ><p class="pre-registerd">Pre-registration required</p></ion-text>
             <p>
               {{session.timeStart}}<span *ngIf="session.timeStart !== session.timeEnd"> &mdash; {{session.timeEnd}}</span>: {{session.location}} <span *ngIf="session?.speakerNames">&mdash; {{session.speakerNames?.join(', ')}}</span>
             </p>

src/app/pages/schedule/schedule.module.ts

@@ -6,6 +6,7 @@ import { IonicModule } from '@ionic/angular';
 import { SchedulePage } from './schedule';
 import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
 import { SchedulePageRoutingModule } from './schedule-routing.module';
+import { SessionOrderPipe } from '../../pipes/session-order.pipe';
 
 @NgModule({
   imports: [
@@ -16,7 +17,8 @@ import { SchedulePageRoutingModule } from './schedule-routing.module';
   ],
   declarations: [
     SchedulePage,
-    ScheduleFilterPage
+    ScheduleFilterPage,
+    SessionOrderPipe
   ],
   entryComponents: [
     ScheduleFilterPage

src/app/pages/schedule/schedule.scss

@@ -33,3 +33,8 @@ $categories: (
     padding-left: 10px;
   }
 }
+
+p .pre-registerd {
+  font-size: smaller;
+  font-style: italic;
+}

src/app/pages/session-detail/session-detail.html

@@ -21,6 +21,7 @@ <h1>{{session.name}}</h1>
     <ion-text color="medium">
       {{session.day}} {{session.date}} - {{session.timeStart}} &ndash; {{session.timeEnd}}
       <br /> {{session.location}}
+      <p *ngIf="session.preRegistered">Pre-registration required to attend this event.</p>
     </ion-text>
     <div *ngIf="session.speakers.length > 0">
       <h3>Presented by</h3>

src/app/pipes/session-order.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sessionOrder'
+})
+export class SessionOrderPipe implements PipeTransform {
+
+  transform(value: any[]): any[] {
+    return value.sort((session1, session2) => {
+      return (session1.track < session2.track) ? -1 : (session1.track > session2.track) ? 1 : 0;
+    });
+  }
+
+}

src/app/providers/conference-data.ts

@@ -13,6 +13,14 @@ import { UserData } from './user-data';
 })
 export class ConferenceData {
   data: any;
+  slotColors: any = {
+    plenary: 'primary',
+    poster: 'tertiary',
+    event: 'light',
+    summit: 'light',
+    break: 'light',
+    informational: 'medium',
+  };
 
   constructor(
     public http: HttpClient,
@@ -69,6 +77,9 @@ export class ConferenceData {
       if (["blank"].includes(slot.kind)) {
         return;
       }
+      if (slot.name == "Slot") {
+        return;
+      }
       if (slot.kind == "sponsor-workshop") {
         slot.kind = "Sponsor Presentation"
       }
@@ -93,11 +104,19 @@ export class ConferenceData {
 
       // transform any markdown slot names to regular text
       slot.name = markdownToTxt(slot.name);
+      slot.preRegistered = (slot.name.includes('pre-registration') || slot.kind === "tutorial")? true : false;
+      if (slot.preRegistered) {
+        slot.name = slot.name.split(', pre-registration')[0];
+      }
 
       var start = new Date(slot.start);
       var end = new Date(slot.end);
       var session = {
           "name": slot.name,
+          "color": this.slotColors[slot.kind],
+          "preRegistered": slot.preRegistered,
+          "listRender": slot.list_render,
+          "section": slot.section,
           "location": slot.room,
           "description": slot.description,
           "speakers": [],
@@ -200,9 +219,7 @@ export class ConferenceData {
 
       const offset = -6; // Hardcode offset for MST7MDT
       var mstDate= new Date(start.getTime() + (offset*3600*1000))
-      console.log(offset, start, mstDate);
       var day = mstDate.toISOString().split('T')[0];
-      console.log(day);
       var group = start.toLocaleTimeString([], {timeZone: "MST7MDT", hour: 'numeric', minute:'2-digit'}).toLowerCase();
 
       const scheduleDay = this.data.schedule.find(