add directive to style

Web/src/app/app.module.ts

@@ -69,6 +69,10 @@ import { SaveLocationBetaComponent } from "./mobile/pages/save-location-beta/sav
 import { FlexLayoutModule } from "@angular/flex-layout";
 import { PushNotificationsModule } from "angular2-notifications";
 
+import { RowOver } from './directives/RowOver.directive';
+import { Pointer } from './directives/Pointer.directive';
+
+
 export const environment = {
   production: false,
   firebase: {
@@ -129,7 +133,9 @@ export const environment = {
     ShowReportComponent,
     ShowShiftComponent,
     LocationName,
-    SaveLocationBetaComponent
+    SaveLocationBetaComponent,
+    RowOver,
+    Pointer
   ],
   imports: [
     BrowserModule,

Web/src/app/directives/Pointer.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[pointer]'
+})
+export class Pointer {
+  constructor(private el: ElementRef) { }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.cursor('pointer');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.cursor(null);
+  }
+
+  private cursor(style: string) {
+    this.el.nativeElement.style.cursor = style;
+  }
+}

Web/src/app/directives/RowOver.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[row-over]'
+})
+export class RowOver {
+  constructor(private el: ElementRef) { }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight('whitesmoke');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}

Web/src/app/pages/home/home.component.html

@@ -24,7 +24,7 @@ <h1>מפת אירועים</h1>
     <h1>אירועים אחרונים</h1>
     <div class='div_last_report'>
       <div class='last_report' *ngFor='let report of reports'>
-        <app-last-report  [report]='report'>
+        <app-last-report  [report]='report' row-over>
         </app-last-report>
       </div>
     </div>

Web/src/app/pages/home/home.component.ts

@@ -48,15 +48,22 @@ export class HomeComponent implements OnInit {
       console.log(this.shifts);
     });
 
-
+    this.reports = [];
     this.firebseService.reportObsarvable.subscribe(val => {
-      const r = [];
+
+      // const r = [];
       for (const item of val)
         if (this.firebseService.checkIfReportBelong(item["$key"]))
-          r.push(item);
-      this.reports = r.slice(0, 10);
+          this.reports.push(item);
+      this.reports = this.reports.slice(0, 10);
 
     });
+    this.firebseService.hotObsarvable.subscribe(val=>{
+      for (const item of val)
+        if(this.firebseService.checkIfHotBelong(item['$key']))
+          this.reports.push(item);
+        this.reports = this.reports.slice(0, 10);
+    });
     console.log(this.firebseService.getColdSpot('-Kldk9s0MYEfKwiYBr8E'));
    };
 

Web/src/app/pages/home/last-report/last-report.component.html

@@ -2,7 +2,7 @@
   *ngIf='report' 
   (click)='showPopup = true; setPopup()' 
   (mouseleave)='showPopup = flase'
-  class='report-row'>
+  class='report-row' pointer row-over>
   <span *ngIf='report.date'>{{report.date | date:'shortDate'}}</span>
   <span *ngIf='report.date'>{{report.date | date:'HH:mm'}}</span>
   <span *ngIf='report.location'>{{report.location | locationName}}</span>

Web/src/app/pages/shift/shift.component.html

@@ -124,7 +124,7 @@
       </th>
     </tr>
 
-    <tr class='table_body' *ngFor='let shift of data' >
+    <tr class='table_body' *ngFor='let shift of data' row-over>
       <td>
         <button id='btn_delete' (click)='firebseService.removeData("shifts", shift.$key)'><md-icon>delete</md-icon></button>
         <button id='btn_show' [routerLink]='["../show-shift", shift.$key]'><md-icon>zoom_in</md-icon></button>

Web/src/app/pages/show-shift/show-shift.component.html

@@ -57,15 +57,15 @@
 
           <td>
             <table>
-              <tr *ngFor='let item of coldSpotArr' (click)='choosen = item;'>
+              <tr *ngFor='let item of coldSpotArr' (click)='choosen = item;' row-over pointer>
                 <td>{{item | locationName}}</td>
               </tr>
             </table>
             <!--{{show-shift.coldSpotArr[i].location| locationName}}-->
           </td>
           <td>
             <table>
-              <tr *ngFor='let item of hotSpotArr' (click)='choosen = item; reportChoose = item;'>
+              <tr *ngFor='let item of hotSpotArr' (click)='choosen = item; reportChoose = item;' row-over pointer>
                 <td>
                   {{item.date | date:'HH:mm'}}
                 </td>
@@ -77,7 +77,7 @@
           </td>
           <td>
             <table>
-              <tr *ngFor='let item of reportArr' (click)='choosen = item; reportChoose = item;'>
+              <tr *ngFor='let item of reportArr' (click)='choosen = item; reportChoose = item;' row-over pointer>
                 <td>
                   {{item.date | date:'HH:mm'}}
                 </td>