fix(iot): add path to svg urls

https://stackoverflow.com/a/18265336/1400662

src/app/pages/dashboard/rooms/room-selector/room-selector.component.html

@@ -73,7 +73,9 @@
       </g>
 
       <g>
-        <path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
+        <path class="stroked-element"
+              [attr.fill]="getUrlPath('#New_Pattern_Swatch_1')"
+              [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
       </g>
 
       <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">

src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss

@@ -29,7 +29,6 @@
     stroke-width: 4px;
     stroke: #bdc4cd;
     stroke-miterlimit: 10;
-    fill: url('#New_Pattern_Swatch_1');
   }
 
   .room-border {

src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Output } from '@angular/core';
+import { Location, LocationStrategy } from '@angular/common';
 
 @Component({
   selector: 'ngx-room-selector',
@@ -58,7 +59,10 @@ export class RoomSelectorComponent {
     ],
   };
 
-  constructor() {
+  constructor(
+    private location: Location,
+    private locationStrategy: LocationStrategy,
+  ) {
     this.selectRoom('2');
   }
 
@@ -79,4 +83,14 @@ export class RoomSelectorComponent {
     this.selectedRoom = roomNumber;
     this.sortRooms();
   }
+
+  getUrlPath(id: string) {
+    let baseHref = this.locationStrategy.getBaseHref();
+    if (baseHref.endsWith('')) {
+      baseHref = baseHref.slice(0, -1);
+    }
+    const path = this.location.path();
+
+    return `url(${baseHref}${path}${id})`;
+  }
 }

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html

@@ -19,8 +19,8 @@
     </defs>
     <g [attr.transform]="styles.arcTranslateStr">
 
-      <g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
-        <g class="toFilter" [attr.filter]="'url(#blurFilter' + svgControlId +')'">
+      <g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
+        <g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
           <path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
         </g>
         <!-- ngFor is a quirk fix for webkit rendering issues -->

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts

@@ -1,6 +1,15 @@
 import {
-  Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, OnChanges,
+  Component,
+  HostListener,
+  ViewChild,
+  ElementRef,
+  Input,
+  Output,
+  EventEmitter,
+  AfterViewInit,
+  OnChanges,
 } from '@angular/core';
+import { Location, LocationStrategy } from '@angular/common';
 
 const VIEW_BOX_SIZE = 300;
 
@@ -77,7 +86,10 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   private isMouseDown = false;
   private init = false;
 
-  constructor() {
+  constructor(
+    private location: Location,
+    private locationStrategy: LocationStrategy,
+  ) {
     this.oldValue = this.value;
   }
 
@@ -116,6 +128,16 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
     this.invalidatePinPosition();
   }
 
+  getUrlPath(id: string) {
+    let baseHref = this.locationStrategy.getBaseHref();
+    if (baseHref.endsWith('')) {
+      baseHref = baseHref.slice(0, -1);
+    }
+    const path = this.location.path();
+
+    return `url(${baseHref}${path}${id}${this.svgControlId})`;
+  }
+
   private invalidate(): void {
     this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
     this.calculateVars();