pages summary home header coming soon

src/app/module/components/coming-soon/coming-soon.component.html

+<div class="coming-soon">
+  <div class="coming-soon-text">
+    <h1>COMING  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;SOON :)</h1>
+  </div>
+
+</div>

src/app/module/components/coming-soon/coming-soon.component.scss

+.coming-soon{
+  height: 120vh;
+  width: 100%;
+
+  background-image: url("../../../../assets/comingSoon.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+h1{
+  color: white;
+}
+
+.coming-soon-text{
+
+}
+
+

src/app/module/components/coming-soon/coming-soon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComingSoonComponent } from './coming-soon.component';
+
+describe('ComingSoonComponent', () => {
+  let component: ComingSoonComponent;
+  let fixture: ComponentFixture<ComingSoonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ComingSoonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComingSoonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/coming-soon/coming-soon.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-coming-soon',
+  templateUrl: './coming-soon.component.html',
+  styleUrls: ['./coming-soon.component.scss']
+})
+export class ComingSoonComponent {
+
+}

src/app/module/components/compare/compare.component.css

+
+.chart{
+  position: relative;
+  width: 100%;
+  background-color: var(--chart-background);
+  overflow: hidden;
+  padding: 10px;
+
+}
+
+.chart-below{
+  position: relative;
+  border: 1px solid blue;
+  height: 200px;
+  width: 900px;
+
+}
+
+.chart-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-char{
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-form{
+  margin-left: 30px;
+  height: 150px;
+
+  display: flex;
+  align-items: center;
+}

src/app/module/components/compare/compare.component.html

+<div class="main-char">
+
+  <div class="chart-form">
+    <div class="chart-form" >
+      <mat-form-field appearance="fill" >
+        <mat-label>Select a Sensor</mat-label>
+        <mat-select >
+          <mat-option value="Temperature">Temperature</mat-option>
+          <mat-option value="Humidity">Humidity</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>From</mat-label>
+        <input matInput [matDatepicker]="picker">
+        <mat-hint>MM/DD/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>To</mat-label>
+        <input matInput [matDatepicker]="picker">
+        <mat-hint>MM/DD/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+
+
+    </div>
+  </div>
+
+  <div class="chart">
+    <canvas id="linechartCompare" width="100%"></canvas>
+  </div>
+
+  <div class="chart">
+    <canvas id="barchartBCompare" ></canvas>
+  </div>
+
+</div>
+
+
+

src/app/module/components/compare/compare.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompareComponent } from './compare.component';
+
+describe('CompareComponent', () => {
+  let component: CompareComponent;
+  let fixture: ComponentFixture<CompareComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CompareComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CompareComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/compare/compare.component.ts

+import { Component } from '@angular/core';
+import {Chart} from "chart.js/auto";
+
+@Component({
+  selector: 'app-compare',
+  templateUrl: './compare.component.html',
+  styleUrls: ['./compare.component.css']
+})
+export class CompareComponent {
+  labels:any=["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul","Aug","Sep","Okt","Nov","Dez"]
+  //*************************lineChart-Trio*****************************
+  data:any ={
+    labels:this.labels,
+    datasets: [ {
+      label: "Rain-2021",
+      data: [1400, 3000, 2500, 4500, 2500, 2000, 900,200,600,1200,1600,1900],
+      fill:true,
+      //   fillColor: '#d20f0f',
+      borderColor:"rgba(255, 10, 13, 0.8)",
+      backgroundColor: "rgba(255, 10, 13, 0.3)",
+      tension:0.2
+    },
+      {
+        label: "Rain-2022",
+        data: [1500, 2500, 2500, 4000, 2600, 3500, 2900,400,200,1400,1200,2400],
+        fill:true,
+        //   fillColor: '#d20f0f',
+        //     borderColor:"#200",
+        borderColor:"rgba(136,26,28,0.8)",
+        backgroundColor: "rgba(14,44,117,0.8)",
+        tension:0.2
+      }
+    ]
+  }
+
+  linConfig:any={
+    type:'bar',
+    data:this.data,
+    options:{
+      responsive:true,
+      radius:5,
+      hoverRadius:12,
+      hitRadius:30
+    }
+  }
+  //*************************BarChart-Rain*****************************
+  databar:any ={
+    labels:this.labels,
+    datasets: [ {
+      label: "Rain-2021",
+      data: [1400, 3000, 2500, 4500, 2500, 2000, 900,200,600,1200,1600,1900],
+      fill:true,
+      //   fillColor: '#d20f0f',
+      borderColor:"rgba(255, 10, 13, 0.8)",
+      backgroundColor: "rgba(255, 10, 13, 0.3)",
+      tension:0.2
+    },
+      {
+        label: "Rain-2022",
+        data: [1500, 2500, 2500, 4000, 2600, 3500, 2900,400,200,1400,1200,2400],
+        fill:true,
+        //   fillColor: '#d20f0f',
+        //     borderColor:"#200",
+        borderColor:"rgba(136,26,28,0.8)",
+        backgroundColor: "rgba(14,44,117,0.8)",
+        tension:0.2
+      }]
+  }
+  barConfig:any={
+    type:'line',
+    data:this.databar,
+    options:{
+      hoverRadius:12,
+      hitRadius:30,
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        yAxes: [{
+          ticks: {
+            beginAtZero:true
+          },
+
+        }]
+      }
+    },
+  }
+
+  linechart: any;
+  barchartB:any
+
+  ngOnInit(): void {
+    this.linechart = new Chart('linechartCompare', this.linConfig)
+    this.barchartB = new Chart('barchartBCompare', this.barConfig)
+  }
+}

src/app/module/components/cooming-soon-header/cooming-soon-header.component.html

+<p>cooming-soon-header works!</p>

src/app/module/components/cooming-soon-header/cooming-soon-header.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoomingSoonHeaderComponent } from './cooming-soon-header.component';
+
+describe('CoomingSoonHeaderComponent', () => {
+  let component: CoomingSoonHeaderComponent;
+  let fixture: ComponentFixture<CoomingSoonHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CoomingSoonHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CoomingSoonHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/cooming-soon-header/cooming-soon-header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cooming-soon-header',
+  templateUrl: './cooming-soon-header.component.html',
+  styleUrls: ['./cooming-soon-header.component.css']
+})
+export class CoomingSoonHeaderComponent {
+
+}

src/app/module/components/header/config-header/config-header.component.css

+.item{
+  margin: 10px;
+  height: 30px;
+  width: 150px;
+
+  display: flex;
+  align-items: flex-end;
+
+
+  text-decoration:none;
+  text-align: center;
+  color: var(--c-gray-400);
+  font-size: 1.125rem;
+
+  align-items: center;
+}
+
+
+.item:hover{
+
+  transform: translateX(4px);
+  color:white;
+}
+
+nav{
+  display: flex;
+}
+
+.white-icon{
+
+  margin-bottom: 2px;
+  margin-right: 2px;
+}

src/app/module/components/header/config-header/config-header.component.html

+<nav>
+  <a  class="item" routerLink="/homeConfigStation" > <mat-icon class="white-icon">add_home</mat-icon>Station </a>
+  <a class="item"  routerLink="/homeConfigHost"> <mat-icon class="white-icon">roofing</mat-icon> Host </a>
+  <a  class="item" routerLink="/homeConfigClient" > <mat-icon class="white-icon">settings_input_antenna</mat-icon> Client  </a>
+  <a  class="item" routerLink="/homeConfigSensor" > <mat-icon class="white-icon">thermostat</mat-icon> Sensor </a>
+</nav>

src/app/module/components/header/config-header/config-header.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigHeaderComponent } from './config-header.component';
+
+describe('ConfigHeaderComponent', () => {
+  let component: ConfigHeaderComponent;
+  let fixture: ComponentFixture<ConfigHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfigHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfigHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/header/config-header/config-header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-config-header',
+  templateUrl: './config-header.component.html',
+  styleUrls: ['./config-header.component.css']
+})
+export class ConfigHeaderComponent {
+
+}

src/app/module/components/header/data-header/data-header.component.css

+.item{
+  margin: 10px;
+  height: 30px;
+  width: 150px;
+
+  display: flex;
+  align-items: flex-end;
+
+
+  text-decoration:none;
+  text-align: center;
+  color: var(--c-gray-400);
+  font-size: 1.125rem;
+
+}
+
+
+.item:hover{
+
+  transform: translateX(4px);
+  color:white;
+}
+
+nav{
+  display: flex;
+}

src/app/module/components/header/data-header/data-header.component.html

+
+<nav>
+  <a  class="item" routerLink="/homeDataSummary" > <mat-icon class="white-icon">table_chart</mat-icon> Summary  </a>
+  <a class="item"  routerLink="/homeDataZoom"> <mat-icon class="white-icon">zoom_in</mat-icon> Level 2 </a>
+  <a  class="item" routerLink="/homeDataCompare"> <mat-icon class="white-icon">compare</mat-icon> Level 3 </a>
+</nav>
+

src/app/module/components/header/data-header/data-header.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataHeaderComponent } from './data-header.component';
+
+describe('DataHeaderComponent', () => {
+  let component: DataHeaderComponent;
+  let fixture: ComponentFixture<DataHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DataHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/header/data-header/data-header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-data-header',
+  templateUrl: './data-header.component.html',
+  styleUrls: ['./data-header.component.css']
+})
+export class DataHeaderComponent {
+
+}