Switched to Sass from CSS. Broke everything. Discussion active here: angular/angular-cli#1253

Author: jammerware

angular-cli.json

@@ -18,7 +18,7 @@
       "prefix": "lal",
       "mobile": false,
       "styles": [
-        "styles/styles.css",
+        "styles/styles.scss",
         "styles/material-themes/lal-theme.scss"
       ],
       "scripts": [],
@@ -42,7 +42,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "prefixInterfaces": false,
     "inline": {
       "style": false,
@@ -57,4 +57,4 @@
       "service": true
     }
   }
-}
+}

src/app/app.component.css renamed to src/app/app.component.scss

@@ -5,21 +5,21 @@
 }
 
 #app-content {
-  background-color: var(--color-primary);
+  background-color: $color-primary;
   flex: 1;
   padding: 1em;
 }
 
 #app-titlebar {
-  background-color: var(--color-accent);
+  background-color: $color-accent;
   display: flex;
   flex-shrink: 0;
   align-items: center;
   padding: 1em;
 }
 
 h1, h1 a {
-  color: var(--color-primary);
+  color: $color-primary;
   display: inline;
   flex: 1;
   font-family: EasonPro-Caps;
@@ -33,7 +33,7 @@ nav {
 }
 
 nav a {
-  color: var(--color-primary);
+  color: $color-primary;
   margin: 0 20px 0px 0px;
   font-size: 1.2em;
 	text-transform: lowercase;

src/app/app.component.ts

@@ -7,7 +7,7 @@ import { EventNotificationsService } from './core/services/event-notifications-s
 @Component({
   selector: 'lal-app',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.scss']
 })
 export class AppComponent implements OnInit, OnDestroy {
   private title: string = `Lion's Arch, Ltd.`;

src/app/core/mock-data/mock-event-types.ts

@@ -0,0 +1,16 @@
+import { EventType } from '../../shared/models/event-type';
+
+export let MOCK_EVENT_TYPES: EventType[] = [
+    {
+        id: "ec3525ff-58cd-4f25-b727-d3085e60c5de",
+        name: "Meta Events: Classic"
+    },
+    {
+        id: "021146d9-2314-4e85-b964-279d9d0d745d",
+        name: "Meta Events: Heart of Thorns"
+    },
+    {
+        id: "80940b84-7a00-4b3f-8e4d-bf9f3db17ff3",
+        name: "World Bosses"
+    }
+];

src/app/core/mock-data/mock-events.ts

@@ -7,6 +7,7 @@ export const MOCK_EVENTS: Event[] = [
         name: "Night and the Enemy",
         zone: "Verdant Brink",
         description: "Help Pact forces survive the darkest of nights against the servants of Mordremoth.",
+        eventTypeId: "021146d9-2314-4e85-b964-279d9d0d745d",
         primaryWaypointId: "58151f49-8998-4c51-b6d1-351ca5ee7bb9",
         waypoints: [
             {
@@ -96,6 +97,7 @@ When 20:30 remains on the timer, choppers will land at all controlled camps (and
         description: `Fly armors. Save the Exalted. Stop the Mordrem from taking Tarir.
 
   Don't screw up South.`,
+        eventTypeId: "021146d9-2314-4e85-b964-279d9d0d745d",
         primaryWaypointId: "299425a1-b208-4b7b-9bbe-b216bc5e85e1",
         waypoints: [
             {
@@ -178,6 +180,7 @@ The [Mushroom Master](https://wiki.guildwars2.com/wiki/Mushroom_Master) waits in
         name: "King of the Jungle",
         zone: "Tangled Depths",
         description: "Join forces with ogres, Nuhoch, Rata Novus, and SCAR to kill chak, steal loot, and [learn new words](http://www.dictionary.com/browse/gerent).",
+        eventTypeId: "021146d9-2314-4e85-b964-279d9d0d745d",
         primaryWaypointId: "7dae3d65-d3cb-4233-965c-6b93a228c467",
         waypoints: [
             {
@@ -247,6 +250,7 @@ SCAR Lane is among the conceptually easiest of the four lanes. Here, the SCAR un
         name: "Shadow of the Dragon",
         zone: "Dragon's Stand",
         description: "Three paths. Three towers. One mouth. Also, a weird body. Don't forget your machetes!",
+        eventTypeId: "021146d9-2314-4e85-b964-279d9d0d745d",
         primaryWaypointId: "95718376-f193-49bb-895e-ebe66c966c41",
         waypoints: [
             {
@@ -336,6 +340,7 @@ When you've sent the Mouth of Mordremoth packing, experienced a heart attack at
         name: "Sandstorm!",
         zone: "Dry Top",
         description: "The most profitable recurring environmental disaster since Disney World.",
+        eventTypeId: "ec3525ff-58cd-4f25-b727-d3085e60c5de",
         primaryWaypointId: "9941ef2d-98eb-4c82-afc1-58fb2e2961c9",
         waypoints: [
             {

src/app/core/services/events-service/events.service.spec.ts

@@ -14,14 +14,15 @@ function getTestEventWithOffsets(offsets: Timespan[]): Event {
         zone: 'Donkland',
         description: 'The testiest of events',
         key: 'te',
+        eventTypeId: '',
         primaryWaypointId: '',
         waypoints: [],
         occurrenceOffsets: offsets || [Timespan.fromMilliseconds(0)],
         goalContributions: []
     };
 }
 
-describe('Events service', () => {
+describe('The events service', () => {
     it('should indicate that the offset of the next event is 0 when the event has a 0 offset from UTC midnight and now is UTC midnight', function() {
         // arrange
         let event: Event = getTestEvent();

src/app/core/services/events-service/events.service.ts

@@ -6,48 +6,54 @@ import 'rxjs/add/operator/map';
 
 import { Event } from '../../../shared/models/event';
 import { MOCK_EVENTS } from '../../mock-data/mock-events';
+import { EventType } from '../../../shared/models/event-type';
+import { MOCK_EVENT_TYPES } from '../../mock-data/mock-event-types';
 import { NowService } from '../now.service';
 import { Timespan } from '../../../modules/timespan/timespan';
 
 @Injectable()
 export class EventsService {
-  constructor(private nowService: NowService) { }
+    constructor(private nowService: NowService) { }
 
-  getEvent(id: string): Observable<Event> {
-    return Observable.of(MOCK_EVENTS.find(e => e.id === id));
-  }
-
-  getEvents(): Observable<Event[]> {
-    return Observable.of(MOCK_EVENTS);
-  }
+    getEvent(id: string): Observable<Event> {
+        return Observable.of(MOCK_EVENTS.find(e => e.id === id));
+    }
 
-  getOffsetOfNextOccurrenceSync(event: Event, includePastEventsOffset = 0): number {
-    let msInADay = Timespan.fromHours(24).totalMilliseconds;
-    let nowish = (this.nowService.getTimespanSinceMidnightUtc().totalMilliseconds - includePastEventsOffset + msInADay) % msInADay;
-    let eventOffsetIndex = 0;
-    let eventOffset = event.occurrenceOffsets[eventOffsetIndex];
+    getEvents(): Observable<Event[]> {
+        return Observable.of(MOCK_EVENTS);
+    }
 
-    while (nowish - eventOffset.totalMilliseconds > 0 && event.occurrenceOffsets[++eventOffsetIndex]) {
-      eventOffset = event.occurrenceOffsets[eventOffsetIndex];
+    getEventTypes(): Observable<EventType[]> {
+        return Observable.of(MOCK_EVENT_TYPES);
     }
 
-    return eventOffset.totalMilliseconds;
-  }
+    getOffsetOfNextOccurrenceSync(event: Event, includePastEventsOffset = 0): number {
+        let msInADay = Timespan.fromHours(24).totalMilliseconds;
+        let nowish = (this.nowService.getTimespanSinceMidnightUtc().totalMilliseconds - includePastEventsOffset + msInADay) % msInADay;
+        let eventOffsetIndex = 0;
+        let eventOffset = event.occurrenceOffsets[eventOffsetIndex];
+
+        while (nowish - eventOffset.totalMilliseconds > 0 && event.occurrenceOffsets[++eventOffsetIndex]) {
+            eventOffset = event.occurrenceOffsets[eventOffsetIndex];
+        }
 
-  getMsTilNextOccurrenceOfSync(event: Event, includePastEventsOffset = 0): number {
-    let msSinceMidnightUtc = this.nowService.getTimespanSinceMidnightUtc().totalMilliseconds;
-    let offsetOfNextEvent = this.getOffsetOfNextOccurrenceSync(event);
+        return eventOffset.totalMilliseconds;
+    }
+
+    getMsTilNextOccurrenceOfSync(event: Event, includePastEventsOffset = 0): number {
+        let msSinceMidnightUtc = this.nowService.getTimespanSinceMidnightUtc().totalMilliseconds;
+        let offsetOfNextEvent = this.getOffsetOfNextOccurrenceSync(event);
 
-    return offsetOfNextEvent - msSinceMidnightUtc;
-  }
+        return offsetOfNextEvent - msSinceMidnightUtc;
+    }
 
-  getMsTilNextOccurrenceOf(event: Event, includePastEventsOffset = 0): Observable<number> {
-    // this is the only way I know of right now to emit the value right now and then again every 20 seconds
-    let timeTilOccurrenceFromNow = Observable.of(this.getMsTilNextOccurrenceOfSync(event));
-    let timeTilOccurrenceFromEveryInterval = Observable
-      .interval(20000)
-      .map(() => { return this.getMsTilNextOccurrenceOfSync(event); });
+    getMsTilNextOccurrenceOf(event: Event, includePastEventsOffset = 0): Observable<number> {
+        // this is the only way I know of right now to emit the value right now and then again every 20 seconds
+        let timeTilOccurrenceFromNow = Observable.of(this.getMsTilNextOccurrenceOfSync(event));
+        let timeTilOccurrenceFromEveryInterval = Observable
+            .interval(20000)
+            .map(() => { return this.getMsTilNextOccurrenceOfSync(event); });
 
-    return timeTilOccurrenceFromNow.concat(timeTilOccurrenceFromEveryInterval);
-  }
+        return timeTilOccurrenceFromNow.concat(timeTilOccurrenceFromEveryInterval);
+    }
 }

src/app/features/dailies/components/dailies-landing/dailies-landing.component.css renamed to src/app/features/dailies/components/dailies-landing/dailies-landing.component.scss

@@ -4,7 +4,7 @@
 }
 
 h3 {
-    color: var(--color-accent);
+    color: $color-accent;
     font-family: EasonPro;
     font-size: 1.8em;
 }

src/app/features/dailies/components/dailies-landing/dailies-landing.component.ts

@@ -12,7 +12,7 @@ import { DailyGroupType } from '../../../../modules/gw2api/gw2api-dailies-servic
 
 @Component({
     selector: 'lal-dailies-landing',
-    styleUrls: ['dailies-landing.component.css'],
+    styleUrls: ['dailies-landing.component.scss'],
     templateUrl: 'dailies-landing.component.html'
 })
 export class DailiesLandingComponent implements OnInit, OnDestroy {

src/app/features/dailies/components/daily-group-fractals/daily-group-fractals.component.css renamed to src/app/features/dailies/components/daily-group-fractals/daily-group-fractals.component.scss

@@ -1,5 +1,5 @@
 h3 {
-    color: var(--color-accent);
+    color: $color-accent;
     font-family: EasonPro-Caps;
     font-size: 1.2em;
     font-weight: bold;

src/app/features/dailies/components/daily-group-fractals/daily-group-fractals.component.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'lal-daily-group-fractals',
-    styleUrls: [ './daily-group-fractals.component.css' ],
+    styleUrls: ['./daily-group-fractals.component.scss'],
     templateUrl: 'daily-group-fractals.component.html'
 })
 export class DailyGroupFractalsComponent {

src/app/features/dailies/components/daily-recommended-fractal/daily-recommended-fractal.component.css renamed to src/app/features/dailies/components/daily-recommended-fractal/daily-recommended-fractal.component.scss

@@ -3,10 +3,10 @@
 }
 
 .recommended-ar-label {
-    color: var(--color-subtle);
-    font-weight:lighter;
+    // color: $color-subtle;
+    font-weight: lighter;
 }
 
 .recommended-ar {
-    color: var(--color-accent);
+    // color: $color-accent;
 }

src/app/features/dailies/components/daily-recommended-fractal/daily-recommended-fractal.component.ts

@@ -3,7 +3,7 @@ import { DailyRecommendedFractalViewModel } from '../../viewmodels/daily-recomme
 
 @Component({
     selector: 'lal-daily-recommended-fractal',
-    styleUrls: ['daily-recommended-fractal.component.css'],
+    styleUrls: ['daily-recommended-fractal.component.scss'],
     templateUrl: 'daily-recommended-fractal.component.html'
 })
 export class DailyRecommendedFractalComponent {

src/app/features/dailies/components/daily-tier-fractal/daily-tier-fractal.component.css renamed to src/app/features/dailies/components/daily-tier-fractal/daily-tier-fractal.component.scss

@@ -3,7 +3,7 @@ import { Fractal } from '../../../../shared/models/fractal';
 
 @Component({
     selector: 'lal-daily-tier-fractal',
-    styleUrls: ['daily-tier-fractal.component.css'],
+    styleUrls: ['daily-tier-fractal.component.scss'],
     templateUrl: 'daily-tier-fractal.component.html'
 })
 export class DailyTierFractalComponent {

src/app/features/dailies/components/daily-tier-fractal/daily-tier-fractal.component.ts

@@ -5,7 +5,7 @@
 }
 
 .daily-description {
-    color: var(--color-subtle);
+    color: $color-subtle;
     font-style: italic;
     font-size: 0.9em;
 }

src/app/features/dailies/components/daily/daily.component.css renamed to src/app/features/dailies/components/daily/daily.component.scss

@@ -3,7 +3,7 @@ import { DailyViewModel } from '../../viewmodels/daily.viewmodel';
 
 @Component({
     selector: 'lal-daily',
-    styleUrls: [ 'daily.component.css' ],
+    styleUrls: ['daily.component.scss'],
     templateUrl: 'daily.component.html'
 })
 export class DailyComponent {

src/app/features/dailies/components/daily/daily.component.ts

@@ -18,11 +18,11 @@ h4 {
 }
 
 .event-countdown-text {
-  color: var(--color-subtle);
+  color: $color-subtle;
 }
 
 .event-countdown {
-  color: var(--color-accent);
+  color: $color-accent;
 }
 
 .event-goal-contribution {

src/app/features/events/event-card/event-card.component.html renamed to src/app/features/events/components/event-card/event-card.component.html

@@ -1,9 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { EventViewModel } from '../../../shared/viewmodels/event.viewmodel';
+import { EventViewModel } from '../../../../shared/viewmodels/event.viewmodel';
 
 @Component({
   selector: 'event-card',
-  styleUrls: ['event-card.component.css'],
+  styleUrls: ['event-card.component.scss'],
   templateUrl: 'event-card.component.html'
 })
 export class EventCardComponent {

src/app/features/events/event-card/event-card.component.js renamed to src/app/features/events/components/event-card/event-card.component.js

@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { EventWaypointViewModel } from '../../../shared/viewmodels/event-waypoint.viewmodel';
+import { EventWaypointViewModel } from '../../../../shared/viewmodels/event-waypoint.viewmodel';
 
 @Component({
     selector: 'lal-event-waypoint',
-    styleUrls: [ 'event-waypoint.component.css' ],
+    styleUrls: ['event-waypoint.component.scss'],
     templateUrl: 'event-waypoint.component.html'
 })
 export class EventWaypointComponent implements OnChanges {

src/app/features/events/event-card/event-card.component.js.map renamed to src/app/features/events/components/event-card/event-card.component.js.map

@@ -15,7 +15,7 @@ h4 {
 }
 
 .subtle-label {
-    color: var(--color-subtle);
+    color: $color-subtle;
 }
 
 .event-start-info {

src/app/features/events/event-card/event-card.component.css renamed to src/app/features/events/components/event-card/event-card.component.scss

@@ -1,16 +1,15 @@
 import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 
-import { EventViewModel } from '../../../shared/viewmodels/event.viewmodel';
-import { EventViewModelsService } from '../../../core/services/viewmodels-services/event-viewmodels.service';
-import { EventsService } from '../../../core/services/events-service/events.service';
+import { EventViewModel } from '../../../../shared/viewmodels/event.viewmodel';
+import { EventViewModelsService } from '../../../../core/services/viewmodels-services/event-viewmodels.service';
+import { EventsService } from '../../../../core/services/events-service/events.service';
 
 @Component({
   selector: 'lal-event',
-  styleUrls: ['./event.component.css'],
-  templateUrl: './event.component.html'
+  styleUrls: ['event.component.scss'],
+  templateUrl: 'event.component.html'
 })
 export class EventComponent implements OnInit, OnDestroy {
   private routeParamsSubscription: Subscription;

src/app/features/events/event-card/event-card.component.ts renamed to src/app/features/events/components/event-card/event-card.component.ts

@@ -0,0 +1,8 @@
+<div class="events">
+  <div *ngFor="let eventTypeGroup of (viewModel | async)?.eventTypeGroups" class="event-type-group">
+    <h2>{{eventTypeGroup.eventType.name}}</h2>
+    <div class="event-cards">
+      <event-card [viewModel]="event" *ngFor="let event of eventTypeGroup.events"></event-card>
+    </div>
+  </div>
+</div>