diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2b2ac92b7dc8fd993e3efe5316ebc1b257df99ec..b3de0e4f0aa27a3f449f95c6f2d2f8e641d17eae 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,15 +1,5 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
-import {SignupComponent} from "./module/pages/signup/signup.component";
-import {UserManagementComponent} from "./module/pages/admin/userManagment/userManagement.component";
-import {StationComponent} from "./module/pages/admin/stationManagement/station/station.component";
-import {SensorComponent} from "./module/pages/admin/stationManagement/sensor/sensor.component";
-import {ClientComponent} from "./module/pages/admin/stationManagement/client/client.component";
-import {HostComponent} from "./module/pages/admin/stationManagement/host/host.component";
-import {ZoomComponent} from "./module/components/charts/comparing/chartBar/zoom.component";
-import {CompareComponent} from "./module/components/charts/comparing/barChart/compare.component";
-import {DataHeaderComponent} from "./module/pages/admin/stationManagement/header/data-header/data-header.component";
-import {ConfigHeaderComponent} from "./module/pages/admin/stationManagement/header/config-header/config-header.component";
import {ProViewComponent} from "./module/components/pro-view/pro-view.component";
import {HomeComponent} from "./module/pages/home/home.component";
import {LoginTailwindcssComponent} from "./module/pages/login/login.component";
@@ -30,28 +20,6 @@ const routes: Routes = [
{path: 'settings',component: StationConfigComponent,outlet: 'homeDash'},
]
},
- {path: 'signup', component: SignupComponent},
- {path: 'admin', component: UserManagementComponent},
- {path: 'station', component: StationComponent,outlet: 'stationManagement'},
- {path: 'station/sensor', component: SensorComponent,outlet: 'stationManagement'},
- {path: 'station/client', component: ClientComponent,outlet: 'stationManagement'},
- {path: 'station/host', component: HostComponent,outlet: 'stationManagement'},
- { path: 'chartBar', component: ZoomComponent, outlet: 'stationManagement' },
- { path: 'compare', component: CompareComponent, outlet: 'stationManagement' },
- { path: 'host', component: HostComponent, outlet: 'stationManagement' },
- { path: 'client', component:ClientComponent, outlet: 'stationManagement' },
- { path: 'sensor', component: SensorComponent, outlet: 'stationManagement' },
- // {path:'',component:Lev0Ver2Component,outlet:'stationManagement'},
- { path: 'summary', component: DataHeaderComponent, outlet: 'header' },
- { path: 'station', component: ConfigHeaderComponent, outlet: 'header' },
- { path: '', component: ConfigHeaderComponent, outlet: 'header' },
- { path: 'homeDataZoom', children: [ { path: '', component: DataHeaderComponent, outlet: 'child1' }, { path: '', component: ZoomComponent, outlet: 'child2' } ] },
- { path: 'homeDataCompare', children: [ { path: '', component: DataHeaderComponent, outlet: 'child1' }, { path: '', component: CompareComponent, outlet: 'child2' } ] },
- { path: 'homeConfigStation', children: [ { path: '', component: ConfigHeaderComponent, outlet: 'child1'}, { path: '', component: StationComponent, outlet: 'child2'}]},
- { path: 'homeConfigHost', children: [ { path: '', component: ConfigHeaderComponent, outlet: 'child1'}, { path: '', component: HostComponent, outlet: 'child2'}]},
- { path: 'homeConfigClient', children: [ { path: '', component: ConfigHeaderComponent, outlet: 'child1'}, { path: '', component: ClientComponent, outlet: 'child2'}]},
- { path: 'homeConfigSensor', children: [ { path: '', component: ConfigHeaderComponent, outlet: 'child1'}, { path: '', component: SensorComponent, outlet: 'child2'}]},
-
];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9758873b83fb7c4f3b31489cae7f2fe8420ea689..b60bb30e046a2f3658fb7f7c3ceb94db075e784e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,17 +19,15 @@ import {StationManagementComponent} from "./module/pages/admin/stationManagement
import {MatSelectModule} from "@angular/material/select";
import {MatInputModule} from "@angular/material/input";
import {MAT_DATE_FORMATS, MatDateFormats, NativeDateModule} from "@angular/material/core";
-import { ZoomComponent } from './module/components/charts/comparing/chartBar/zoom.component';
-import { CompareComponent } from './module/components/charts/comparing/barChart/compare.component';
import { DataHeaderComponent } from './module/pages/admin/stationManagement/header/data-header/data-header.component';
import { ConfigHeaderComponent } from './module/pages/admin/stationManagement/header/config-header/config-header.component';
-import {CjsTimline} from "./module/components/charts/Cjs-timeline/light-chart.component";
+import {CjsTimline} from "./module/components/charts/Cjs-timeline/cjsTimlineMultiple.component";
import { ProViewComponent } from './module/components/pro-view/pro-view.component';
import {MatAutocompleteModule} from "@angular/material/autocomplete";
import {MatCheckboxModule} from "@angular/material/checkbox";
import { InterceptorService } from './shared/auth/interceptor.service';
-import {CjsTimelineMultiple} from "./module/components/charts/Cjs-timeline-multiple/light-chart.component";
+import {CjsTimelineMultiple} from "./module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component";
import {MatButtonModule} from "@angular/material/button";
import { ThermometerComponent } from './module/components/customUX/thermometer/thermometer.component';
import { HomeComponent } from './module/pages/home/home.component';
@@ -69,8 +67,6 @@ const MY_DATE_FORMATS: MatDateFormats = {
SensorComponent,
StationManagementComponent,
SummaryComponent,
- ZoomComponent,
- CompareComponent,
DataHeaderComponent,
ConfigHeaderComponent,
CjsTimline,
diff --git a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.html b/src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.html
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.html
rename to src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.html
diff --git a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.scss b/src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.scss
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.scss
rename to src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.scss
diff --git a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.spec.ts b/src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.spec.ts
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.spec.ts
rename to src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.spec.ts
diff --git a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts b/src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.ts
similarity index 97%
rename from src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts
rename to src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.ts
index ef0203b4a67aeb930801e4ff78d5aeb89b7c5757..083318621c71620469c6ac0d853c9fb26041499a 100644
--- a/src/app/module/components/charts/Cjs-timeline-multiple/light-chart.component.ts
+++ b/src/app/module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component.ts
@@ -9,8 +9,8 @@ import {ReadingPayload} from "../../../../../../projects/generated-api/src";
@Component({
selector: 'app-Cjs-timeline-multiple',
- templateUrl: './light-chart.component.html',
- styleUrls: ['./light-chart.component.scss']
+ templateUrl: './cjsTimlineMultiple.component.html',
+ styleUrls: ['./cjsTimlineMultiple.component.scss']
})
export class CjsTimelineMultiple implements OnInit,OnChanges{
diff --git a/src/app/module/components/charts/Cjs-timeline/light-chart.component.html b/src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.html
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline/light-chart.component.html
rename to src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.html
diff --git a/src/app/module/components/charts/Cjs-timeline/light-chart.component.scss b/src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.scss
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline/light-chart.component.scss
rename to src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.scss
diff --git a/src/app/module/components/charts/Cjs-timeline/light-chart.component.spec.ts b/src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.spec.ts
similarity index 100%
rename from src/app/module/components/charts/Cjs-timeline/light-chart.component.spec.ts
rename to src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.spec.ts
diff --git a/src/app/module/components/charts/Cjs-timeline/light-chart.component.ts b/src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.ts
similarity index 96%
rename from src/app/module/components/charts/Cjs-timeline/light-chart.component.ts
rename to src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.ts
index 63dd9dc0e50f027ef8d0cfe28f6f5bc036fbafc0..6432acb808a46cd6265339d164925bebbfba62a3 100644
--- a/src/app/module/components/charts/Cjs-timeline/light-chart.component.ts
+++ b/src/app/module/components/charts/Cjs-timeline/cjsTimlineMultiple.component.ts
@@ -7,8 +7,8 @@ import {LogLevel, MyLoggerServiceService} from "../../../../shared/service/my-lo
@Component({
selector: 'app-Cjs-timline',
- templateUrl: './light-chart.component.html',
- styleUrls: ['./light-chart.component.scss']
+ templateUrl: './cjsTimlineMultiple.component.html',
+ styleUrls: ['./cjsTimlineMultiple.component.scss']
})
export class CjsTimline implements OnInit,OnChanges{
diff --git a/src/app/module/components/charts/comparing/barChart/compare.component.css b/src/app/module/components/charts/comparing/barChart/compare.component.css
deleted file mode 100644
index ce815c047d36702dc3c0289a9c3239af69478219..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/barChart/compare.component.css
+++ /dev/null
@@ -1,37 +0,0 @@
-
-.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;
-}
diff --git a/src/app/module/components/charts/comparing/barChart/compare.component.html b/src/app/module/components/charts/comparing/barChart/compare.component.html
deleted file mode 100644
index fb6667bc3698db88f23173f5742ba995bdb4350e..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/barChart/compare.component.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<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>
-
-
-
diff --git a/src/app/module/components/charts/comparing/barChart/compare.component.spec.ts b/src/app/module/components/charts/comparing/barChart/compare.component.spec.ts
deleted file mode 100644
index a897a273aa912f864beddd322b9ed33626886dbb..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/barChart/compare.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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();
- });
-});
diff --git a/src/app/module/components/charts/comparing/barChart/compare.component.ts b/src/app/module/components/charts/comparing/barChart/compare.component.ts
deleted file mode 100644
index f6f65f7927a5800b40c9c1455b5443f94a3ed9f9..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/barChart/compare.component.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Component } from '@angular/core';
-import {Chart} from "chart.js/auto";
-
-@Component({
- selector: 'app-barChart',
- 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)
- }
-}
diff --git a/src/app/module/components/charts/comparing/chartBar/zoom.component.css b/src/app/module/components/charts/comparing/chartBar/zoom.component.css
deleted file mode 100644
index 2cf506913d3f36091dfbde30eacb04835c570d1c..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/chartBar/zoom.component.css
+++ /dev/null
@@ -1,37 +0,0 @@
-
-.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-chart{
- display: flex;
- flex-direction: column;
-}
-
-.chart-form{
- margin-left: 30px;
- height: 150px;
-
- display: flex;
- align-items: center;
-}
diff --git a/src/app/module/components/charts/comparing/chartBar/zoom.component.html b/src/app/module/components/charts/comparing/chartBar/zoom.component.html
deleted file mode 100644
index f5254a53b23b0006fa39563e63cdc9c27bb2a4b3..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/chartBar/zoom.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="main-chart">
-
- <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="linechart" width="100%"></canvas>
- </div>
-
- <div class="chart">
- <canvas id="barchartB" ></canvas>
- </div>
-
-
-</div>
diff --git a/src/app/module/components/charts/comparing/chartBar/zoom.component.spec.ts b/src/app/module/components/charts/comparing/chartBar/zoom.component.spec.ts
deleted file mode 100644
index 0ba1246beaa6186b6f1888271ac8b7dd3b01f2ed..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/chartBar/zoom.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZoomComponent } from './zoom.component';
-
-describe('ZoomComponent', () => {
- let component: ZoomComponent;
- let fixture: ComponentFixture<ZoomComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ ZoomComponent ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(ZoomComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/module/components/charts/comparing/chartBar/zoom.component.ts b/src/app/module/components/charts/comparing/chartBar/zoom.component.ts
deleted file mode 100644
index 8c4c26d5249e5015bf97e65d6858e6d92049df66..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/chartBar/zoom.component.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Component } from '@angular/core';
-import {Chart} from "chart.js/auto";
-
-@Component({
- selector: 'app-chartBar',
- templateUrl: './zoom.component.html',
- styleUrls: ['./zoom.component.css']
-})
-export class ZoomComponent {
- labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
-
-//*************************lineChart-Trio*****************************
- data:any ={
- labels:this.labels,
- datasets: [ {
- label: "Temperature-1",
- data: [1400, 3000, 2500, 4500, 2500, 3400, 3000],
- fill:true,
- // fillColor: '#d20f0f',
- borderColor:"rgba(255, 10, 13, 0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- },
- {
- label: "Temperature-2",
- data: [1500, 2500, 2500, 4000, 2600, 3500, 2900],
- fill:true,
- // fillColor: '#d20f0f',
- // borderColor:"#200",
- borderColor:"rgba(136,26,28,0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- },
- {
- label: "Temperature-3",
- data: [1700, 2300, 2300, 3500, 2300, 4500, 2900],
- fill:true,
- // fillColor: '#d20f0f',
- // borderColor:"#200",
- borderColor:"rgba(255,10,141,0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- }
- ]
- }
-
- linConfig:any={
- type:'line',
- data:this.data,
- options:{
- responsive:true,
- radius:5,
- hoverRadius:12,
- hitRadius:30,
- /* scales: {y: { title: { display: true, text: 'mm' }},
-
- xAxes: {
- title: {
- display: true,
- text: "test",
- font: {
- size: 15
- }
- }
- }
- }
- */
-
- }
- }
- //*************************BarChart-Rain*****************************
- databar:any ={
- labels:this.labels,
- datasets: [ {
- label: "Rain",
- data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
- fill:true,
- fillColor:'#111',
- backgroundColor: "rgba(10,145,255,0.5)",
- // borderColor:"#111",
-
- }]
- }
- barConfig:any={
- type:'bar',
- data:this.databar,
- options:{
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- yAxes: [{
- title: {
- display: true,
- text: "test"},
- ticks: {
- beginAtZero:true
- }
- }]
- }
- },
- }
-
- linechart: any;
- barchartB:any
-
- ngOnInit(): void {
- this.linechart = new Chart('linechart', this.linConfig)
- this.barchartB = new Chart('barchartB', this.barConfig)
- }
-
-}
-
-
diff --git a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.css b/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.css
deleted file mode 100644
index 635d989667d913a89cd22ec0f558babdfb739798..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.css
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-/*you have to make the div position relativ so that the chart is working*/
-
-.chart{
- position: relative;
- width: 43vw;
- height: 40vh;
- background-color: var(--chart-background);
- overflow: hidden;
- padding: 10px;
-
-}
-
-.chart-container{
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
-
-}
-
-.main-chart{
- display: flex;
- flex-direction: column;
-}
-
-.chart-form{
- margin-left: 30px;
- height: 150px;
-
- display: flex;
- align-items: center;
-
-
-}
diff --git a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.html b/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.html
deleted file mode 100644
index 834d76f4d1c126a8008393a691b9086bc325378c..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="main-chart">
-
-</div>
-
-<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-container">
- <div class="chart">
- <canvas id="chart2" width="100%"></canvas>
- </div>
-
- <div class="chart">
- <canvas id="soloLineChart" width="100%"></canvas>
- </div>
-
- <div class="chart">
- <canvas id="barchart" width="100%"></canvas>
- </div>
-
- <div class="chart">
- <canvas id="pointChart" width="100%"></canvas>
- </div>
-</div>
diff --git a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.spec.ts b/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.spec.ts
deleted file mode 100644
index 58a99cb1b385ed86afe228d5a337a5737e80bd8b..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FourInOneComponent } from './fourInOne.component';
-
-describe('SummaryComponent', () => {
- let component: FourInOneComponent;
- let fixture: ComponentFixture<FourInOneComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ FourInOneComponent ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(FourInOneComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.ts b/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.ts
deleted file mode 100644
index d1f5fb5d95aea703ce12af3865bbfab80785edd9..0000000000000000000000000000000000000000
--- a/src/app/module/components/charts/comparing/fourInOne/fourInOne.component.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import { Component } from '@angular/core';
-import {Chart} from "chart.js/auto";
-
-@Component({
- selector: 'app-fourInOne',
- templateUrl: './fourInOne.component.html',
- styleUrls: ['./fourInOne.component.css']
-})
-export class FourInOneComponent {
- constructor() { }
- labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
-
-//*************************lineChart-Trio*****************************
- data:any ={
- labels:this.labels,
- datasets: [ {
- label: "Temperature-1",
- data: [14, 30, 25, 41, 25, 32, 30],
- fill:true,
- // fillColor: '#d20f0f',
- borderColor:"rgba(255, 10, 13, 0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- },
- {
- label: "Temperature-2",
- data: [15, 25, 25, 38, 26, 35, 29],
- fill:true,
- // fillColor: '#d20f0f',
- // borderColor:"#200",
- borderColor:"rgba(136,26,28,0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- },
- {
- label: "Temperature-3",
- data: [17, 23, 23, 35, 23, 40, 29],
- fill:true,
- // fillColor: '#d20f0f',
- // borderColor:"#200",
- borderColor:"rgba(255,10,141,0.8)",
- backgroundColor: "rgba(255, 10, 13, 0.1)",
- tension:0.2
- }
- ]
- }
-
- linConfig:any={
- type:'line',
- data:this.data,
- options:{
- responsive:true,
- radius:5,
- hoverRadius:12,
- hitRadius:30
- }
- }
- //*************************BarChart-Rain*****************************
- databar:any ={
- labels:this.labels,
- datasets: [ {
- label: "Rain",
- data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
- fill:true,
- fillColor:'#111',
- backgroundColor: "rgba(10,145,255,0.5)",
- // borderColor:"#111",
-
- }]
- }
- barConfig:any={
- type:'bar',
- data:this.databar,
- options:{
- responsive:true,
- radius:5,
- hoverRadius:12,
- hitRadius:30
- }
- }
-//*************************lineChart-Solo*****************************
- data_lineSolo:any ={
- labels:this.labels,
- datasets: [ {
- label: "Global Radiation",
- data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
- fill:true,
- fillColor:'#111',
- borderColor:"rgba(75,154,3,0.9)",
- backgroundColor: "rgba(10,255,43,0.1)",
- // borderColor:"#111",
-
- }]
- }
- config_lineSolo:any={
- type:'line',
- data:this.data_lineSolo,
- options:{
- responsive:true,
- radius:3,
- hoverRadius:12,
- hitRadius:30,
- tension:0.05,
-
- }
- }
- //*************************Pint-Dendrometer-Solo*****************************
- data_pointSolo:any ={
- labels:this.labels,
- datasets: [ {
- label: "Dendrometer",
- data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
- fill:true,
-
- // borderColor:"rgb(39,45,33)",
- borderColor:"rgb(100,176,27)",
- backgroundColor: "rgba(10,255,43,0.00)",
- showLine:false
- // borderColor:"#111",
-
- }]
- }
- config_pointSolo:any={
- type:'line',
- data:this.data_pointSolo,
- options:{
- plugins: {
- legend: {
- display: true,
- labels: {
- color: 'white'
- }
- }
- },
- labelColors:'white',
- responsive:true,
- radius:5,
- hoverRadius:12,
- hitRadius:30,
- tension:0.05,
- pointBorderWidth:4,
- scales: {
- x: {
- grid: {
- color:"rgba(255,255,255,0.3)",
- },
- ticks: {
- color: "white"
- }
- },
- y: {
- grid: {
- color:"rgba(255,255,255,0.3)",
- },
- ticks: {
- color: "white"
- }
- }
- }
-
- }
- }
-
- white_data_pointSolo:any ={
- labels:this.labels,
- datasets: [ {
- label: "Dendrometer",
- data: [1400, 300, 2500, 4500, 2500, 3400, 3000],
- fill:true,
- fillColor:'#111',
- borderColor:"rgba(75,154,3,0.9)",
- backgroundColor: "rgba(10,255,43,0)",
- showLine:false
- // borderColor:"#111",
-
- }]
- }
-
-
- white_config_pointSolo:any={
- type:'line',
- data:this.white_data_pointSolo,
- options:{
- responsive:true,
- radius:5,
- hoverRadius:12,
- hitRadius:30,
- tension:0.05,
- pointBorderWidth:4,
-
- }
- }
-
- linechart: any;
- barchart:any
- soloLineChart:any
- pointChart:any
-
- ngOnInit(): void {
- this.linechart=new Chart('chart2',this.linConfig)
- this.barchart=new Chart('barchart',this.barConfig)
- this.soloLineChart=new Chart('soloLineChart',this.config_lineSolo)
- this.pointChart= new Chart('pointChart',this.white_config_pointSolo)
- }
-}
diff --git a/src/app/module/pages/home/station-config/station-config.component.html b/src/app/module/pages/home/station-config/station-config.component.html
index a7d0e5f8e7d1f54115a0e251f3af1414de045506..ed53d212fd5e66d5c5035fb7776e39f239e792c2 100644
--- a/src/app/module/pages/home/station-config/station-config.component.html
+++ b/src/app/module/pages/home/station-config/station-config.component.html
@@ -1,13 +1,25 @@
-<section class="mt-3 rounded-xl">
+<section class="mt-3 rounded-xl relative">
<mat-tree class="rounded-xl mr-3" [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
- <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+ <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="justify-between">
<!-- use a disabled button to provide padding for tree leaf -->
+ <section class="flex items-center">
<button mat-icon-button disabled></button>
{{node.name}}
+ </section>
+
+ <section class="pr-2">
+ <button>
+ <mat-icon>
+ edit
+ </mat-icon>
+ </button>
+ </section>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
- <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+ <mat-tree-node #def (mouseenter)="def.focus();alert()" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="justify-between">
+
+ <section class="flex items-center">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
@@ -15,8 +27,110 @@
</mat-icon>
</button>
{{node.name}}
+ </section>
+ <section class="pr-2" *ngIf="def.onfocus;">
+ <button>
+ <mat-icon>
+ edit
+ </mat-icon>
+ </button>
+ </section>
+ {{def.onmouseover}}
+ sjhd
+ {{def.onfocus}}
+ s
</mat-tree-node>
</mat-tree>
+
+ <!-- Modal toggle -->
+ <button data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
+ Toggle modal
+ </button>
+
+ <!-- Main modal -->
+ <div class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+ <div class="relative w-full max-w-md max-h-full">
+ <!-- Modal content -->
+ <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+ <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-hide="authentication-modal">
+ <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+ <span class="sr-only">Close modal</span>
+ </button>
+ <div class="px-6 py-6 lg:px-8">
+ <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
+ <form class="space-y-6" action="#">
+ <div>
+ <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
+ <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required>
+ </div>
+ <div>
+ <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
+ <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required>
+ </div>
+ <div class="flex justify-between">
+ <div class="flex items-start">
+ <div class="flex items-center h-5">
+ <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required>
+ </div>
+ <label for="remember" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
+ </div>
+ <a href="#" class="text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</a>
+ </div>
+ <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login to your account</button>
+ <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
+ Not registered? <a href="#" class="text-blue-700 hover:underline dark:text-blue-500">Create account</a>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
</section>
{{this.dataSate}}
+{{this.state}}
+
+
+
+<!-- Modal toggle -->
+<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
+ Toggle modal
+</button>
+
+<!-- Main modal -->
+<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+ <div class="relative w-full max-w-2xl max-h-full">
+ <!-- Modal content -->
+ <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+ <!-- Modal header -->
+ <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+ Terms of Service
+ </h3>
+ <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
+ <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+ <span class="sr-only">Close modal</span>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div class="p-6 space-y-6">
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+ </p>
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+ </p>
+ </div>
+ <!-- Modal footer -->
+ <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+ <button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
+ <button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+
+
diff --git a/src/app/module/pages/home/station-config/station-config.component.ts b/src/app/module/pages/home/station-config/station-config.component.ts
index fc07e8e7ffc8d194a74c7ccbcc2e30f051fcc6fe..9e4ad18cab414ebcec269a55d86ed6509715e37a 100644
--- a/src/app/module/pages/home/station-config/station-config.component.ts
+++ b/src/app/module/pages/home/station-config/station-config.component.ts
@@ -18,7 +18,7 @@ import {combineLatest, Observable, of, switchMap, tap} from "rxjs";
*/
-
+let x:string=""
interface TreeNode {
name: string;
@@ -33,12 +33,15 @@ enum NodeType {
Sensor = 'Sensor',
}
-interface DateTreeNode {
+interface DateTreeNode extends TreeNode{
name: string;
type: NodeType;
children?: DateTreeNode[];
}
+
+let TREE_DATA1:DateTreeNode[]=[]
+
const TREE_DATA: TreeNode[] = [
{
name: 'Fruitss',
@@ -70,13 +73,6 @@ export class TreeStation {
name: "UNDEFINED",
children: [],
};
-/*
- constructor(station: Station) {
- this.tree_Data = {
- name: station.name ? station.name : "UNDEFINED",
- children: [],
- }
- }*/
addStation(station:Station)
{
@@ -107,16 +103,6 @@ export class TreeStation {
}
}
-export class TestTreeStation {
- private tree_Data?: TreeNode;
-
- constructor(station: Station) {
- this.tree_Data = {
- name: "UNDEFINED",
- children: [],
- }
- }
-}
/** Flat node with expandable and level information */
interface ExampleFlatNode {
expandable: boolean;
@@ -131,10 +117,10 @@ interface ExampleFlatNode {
})
export class StationConfigComponent implements OnInit{
-
+ public state:boolean=false
public dataSate=false;
public treeStation?:DateTreeNode
- private _transformer = (node: TreeNode, level: number) => {
+ private _transformer = (node: DateTreeNode, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
name: node.name,
@@ -163,12 +149,15 @@ export class StationConfigComponent implements OnInit{
private clientController: ClientControllerService,
private sensorController: SensorControllerService,
) {
- this.dataSource.data = TREE_DATA;
+
+ this.dataSource.data = TREE_DATA1;
+
}
ngOnInit(): void {
// this.fetchData();
+ TREE_DATA1=[]
this.fetchData();
}
@@ -212,9 +201,16 @@ export class StationConfigComponent implements OnInit{
// Handle the final result of stationNodes
let dateTreeNode: DateTreeNode = returnNode(station.name ?? "", NodeType.Station, clientsDataTree);
this.treeStation=dateTreeNode;
+ TREE_DATA1.push(dateTreeNode)
+ this.dataSource.data=TREE_DATA1
this.dataSate=true;
console.log('final result:', dateTreeNode);
+ console.log("tree data1",TREE_DATA1)
});
}
+ alert=()=>{alert("focused")}
+
}
+
+