fixup! feat(docs-infra): created new widget for events page

angular · Apr 12, 2020 · 171f7c0 · 171f7c0
1 parent 5332c91
commit 171f7c0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 153 deletions.
diff --git a/aio/content/marketing/events.json b/aio/content/marketing/events.json
@@ -1,163 +1,37 @@
 [
   {
-    "endDate": "2020-05-27",
     "location": "Oslo, Norway",
     "tooltip": "ngVikings",
     "linkUrl": "https://ngvikings.org/",
     "name": "ngVikings",
-    "info": "May 25-26 conference, 27 workshops, 2020"
+    "date": {
+      "start": "2020-05-25",
+      "end": "2020-05-27"
+    },  
+    "workshopsDate": {
+      "start": "2020-05-27",
+      "end": "2020-05-27"
+    }
   },
-
   {
-    "endDate": "2020-02-29",
     "location": "Delhi, India",
     "tooltip": "ngIndia",
     "linkUrl": "https://www.ng-ind.com/",
     "name": "ngIndia",
-    "info": "Feb 29, 2020"
+    "date": {
+      "start": "2020-02-29",
+      "end": "2020-02-29"
+    }
   },
   {
     "endDate": "2019-11-01",
     "location": "Prague, Czech Republic",
     "tooltip": "ReactiveConf",
     "linkUrl": "https://reactiveconf.com/",
     "name": "ReactiveConf",
-    "info": "October 30 - November 1, 2019"
-  },
-  {
-    "endDate": "2019-10-07",
-    "location": "Rome, Italy",
-    "tooltip": "NG Rome MMXIX - The Italian Angular Conference",
-    "linkUrl": "https://ngrome.io",
-    "name": "NG Rome MMXIX",
-    "info": "Oct 6th workshops, 7th conference, 2019"
-  },
-  {
-    "endDate": "2019-09-20",
-    "location": "London, UK",
-    "tooltip": "AngularConnect",
-    "linkUrl": "https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral",
-    "name": "AngularConnect",
-    "info": "September 19-20, 2019"
-  },
-  {
-    "endDate": "2019-08-31",
-    "location": "Berlin, Germany",
-    "tooltip": "NG-DE",
-    "linkUrl": "https://ng-de.org/",
-    "name": "NG-DE",
-    "info": "August 29th workshops, 30-31 conference, 2019"
-  },
-  {
-    "endDate": "2019-07-13",
-    "location": "Tokyo, Japan",
-    "tooltip": "ng-japan",
-    "linkUrl": "https://ngjapan.org/",
-    "name": "ng-japan",
-    "info": "July 13, 2019"
-  },
-  {
-    "endDate": "2019-05-28",
-    "location": "Copenhagen, Denmark",
-    "tooltip": "ngVikings",
-    "linkUrl": "https://ngvikings.org/",
-    "name": "ngVikings",
-    "info": "May 26 (workshops), 27-28 (conference), 2019"
-  },
-  {
-    "endDate": "2019-05-03",
-    "location": "Salt Lake City, Utah",
-    "tooltip": "ng-conf",
-    "linkUrl": "https://ng-conf.org/",
-    "name": "ng-conf",
-    "info": "May 1-3, 2019"
-  },
-  {
-    "endDate": "2019-02-23",
-    "location": "Gurgaon, India",
-    "tooltip": "ng-India",
-    "linkUrl": "https://www.ng-ind.com/",
-    "name": "ng-India",
-    "info": "February 23, 2019"
-  },
-  {
-    "endDate": "2019-01-12",
-    "location": "Atlanta, Georgia",
-    "tooltip": "ngAtlanta",
-    "linkUrl": "https://ng-atl.org/",
-    "name": "ngAtlanta",
-    "info": "January 9-12, 2019"
-  },
-  {
-    "endDate": "2018-11-09",
-    "location": "London, United Kingdom",
-    "tooltip": "AngularConnect",
-    "linkUrl": "https://past.angularconnect.com/2018",
-    "name": "AngularConnect",
-    "info": "November 5-7, 2018"
-  },
-  {
-    "endDate": "2018-10-31",
-    "location": "Prague, Czech Republic",
-    "tooltip": "ReactiveConf",
-    "linkUrl": "https://reactiveconf.com/",
-    "name": "ReactiveConf",
-    "info": "October 29-31, 2018"
-  },
-  {
-    "endDate": "2018-10-12",
-    "location": "Orlando, Florida",
-    "tooltip": "AngularMix",
-    "linkUrl": "https://angularmix.com/",
-    "name": "AngularMix",
-    "info": "October 10-12, 2018"
-  },
-  {
-    "endDate": "2018-06-22",
-    "location": "Melbourne, Australia",
-    "tooltip": "Angular Conf Australia",
-    "linkUrl": "https://www.angularconf.com.au/",
-    "name": "Angular Conf Australia",
-    "info": "Jun 22, 2018"
-  },
-  {
-    "endDate": "2018-06-16",
-    "location": "Tokyo, Japan",
-    "tooltip": "ng-japan",
-    "linkUrl": "https://ngjapan.org/en.html",
-    "name": "ng-japan",
-    "info": "Jun 16, 2018"
-  },
-  {
-    "endDate": "2018-05-18",
-    "location": "Vienna, Austria",
-    "tooltip": "WeAreDevs",
-    "linkUrl": "https://www.wearedevelopers.com/",
-    "name": "WeAreDevelopers",
-    "info": "May 16-18, 2018"
-  },
-  {
-    "endDate": "2018-04-20",
-    "location": "Salt Lake City, Utah",
-    "tooltip": "ng-conf",
-    "linkUrl": "https://ng-conf.org/",
-    "name": "ng-conf",
-    "info": "April 18-20, 2018"
-  },
-  {
-    "endDate": "2018-03-02",
-    "location": "Helsinki, Finland",
-    "tooltip": "ngVikings",
-    "linkUrl": "https://ngvikings.org/",
-    "name": "ngVikings",
-    "info": "March 1-2, 2018"
-  },
-  {
-    "endDate": "2018-01-30",
-    "location": "Atlanta, Georgia",
-    "tooltip": "ngAtlanta",
-    "linkUrl": "https://ng-atl.org/",
-    "name": "ngAtlanta",
-    "info": "January 30, 2018"
+    "date": {
+      "start": "2019-10-30",
+      "end": "2019-11-01"
+    }
   }
 ]
diff --git a/aio/src/app/custom-elements/events/events.component.html b/aio/src/app/custom-elements/events/events.component.html
@@ -11,7 +11,14 @@
     <tr *ngFor="let event of upcomingEvents">
       <td><a href="{{event.linkUrl}}" title={{event.tooltip}}>{{event.name}}</a></td>
       <td>{{event.location}}</td>
-      <td>{{event.info}}</td>
+      <td>
+        <div>
+          {{event.date.start | date:'LLLL d, y'}} - {{event.date.end | date:'LLLL d, y'}}
+        </div>
+        <div *ngIf="event.workshopsDate">
+          Workshops: {{event.workshopsDate.start | date:'LLLL d, y'}} - {{event.workshopsDate.end | date:'LLLL d, y'}}
+        </div>  
+      </td>
     </tr>
   </tbody>
 </table>
@@ -29,7 +36,14 @@
     <tr *ngFor="let event of pastEvents">
       <td><a href="{{event.linkUrl}}" title={{event.tooltip}}>{{event.name}}</a></td>
       <td>{{event.location}}</td>
-      <td>{{event.info}}</td>
+      <td>
+        <div>
+          {{event.date.start | date:'LLLL d, y'}} - {{event.date.end | date:'LLLL d, y'}}
+        </div>
+        <div *ngIf="event.workshopsDate">
+          Workshops: {{event.workshopsDate.start | date:'LLLL d, y'}} - {{event.workshopsDate.end | date:'LLLL d, y'}}
+        </div>  
+      </td>
     </tr>
   </tbody>
 </table>
diff --git a/aio/src/app/custom-elements/events/events.component.ts b/aio/src/app/custom-elements/events/events.component.ts
@@ -2,13 +2,23 @@ import { Component, OnInit } from '@angular/core';
 
 import { EventsService } from './events.service';
 
+type date = string; // of the format `YYYY-MM-DD`.
+
 export interface Event {
-  endDate: string;      // "2020-05-27",
-  location: string;      // "Oslo, Norway",
-  tooltip: string;        // "ngVikings",
-  linkUrl: string;      // "https://ngvikings.org/",
-  name: string;          // "ngVikings",
-  info: string;          // "May 25-26 conference, 27 workshops, 2020"
+  name: string;
+  location: string;
+  linkUrl: string;
+  tooltip?: string;  // Optional - defaults to `name`.
+
+  date: {
+    start: date;
+    end: date;
+  };
+
+  workshopsDate?: {
+    start: date;
+    end: date;
+  };
 }
 
 @Component({
@@ -25,11 +35,11 @@ export class EventsComponent implements OnInit {
   ngOnInit() {
     this.eventsService.events.subscribe(events => {
       this.pastEvents = events.filter(event => {
-        return new Date(event.endDate).getTime() < (Date.now() - (24 * 60 * 60 * 1000));
+        return new Date(event.date.end).getTime() < (Date.now() - (24 * 60 * 60 * 1000));
       });
 
       this.upcomingEvents = events.filter(event => {
-        return new Date(event.endDate).getTime() >= (Date.now() - (24 * 60 * 60 * 1000));
+        return new Date(event.date.end).getTime() >= (Date.now() - (24 * 60 * 60 * 1000));
       });
     });
   }

diff --git a/aio/src/app/custom-elements/events/events.service.ts b/aio/src/app/custom-elements/events/events.service.ts
@@ -24,7 +24,7 @@ export class EventsService {
         this.logger.error(new Error(`${eventsPath} request failed: ${error.message}`));
         return [];
       }),
-      map(data => data.sort((l: Event, r: Event) => l.endDate < r.endDate ? 1 : -1)),
+      map(data => data.sort((l: Event, r: Event) => l.date.end < r.date.end ? 1 : -1)),
       catchError(error => {
         this.logger.error(new Error(`${eventsPath} contains invalid data: ${error.message}`));
         return [];