29 changed files with 165 additions and 156 deletions
@ -1,4 +0,0 @@ |
|||||
{ |
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 |
|
||||
"recommendations": ["angular.ng-template"] |
|
||||
} |
|
||||
@ -1,20 +0,0 @@ |
|||||
{ |
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 |
|
||||
"version": "0.2.0", |
|
||||
"configurations": [ |
|
||||
{ |
|
||||
"name": "ng serve", |
|
||||
"type": "pwa-chrome", |
|
||||
"request": "launch", |
|
||||
"preLaunchTask": "npm: start", |
|
||||
"url": "http://localhost:4200/" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "ng test", |
|
||||
"type": "chrome", |
|
||||
"request": "launch", |
|
||||
"preLaunchTask": "npm: test", |
|
||||
"url": "http://localhost:9876/debug.html" |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
@ -1,42 +0,0 @@ |
|||||
{ |
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 |
|
||||
"version": "2.0.0", |
|
||||
"tasks": [ |
|
||||
{ |
|
||||
"type": "npm", |
|
||||
"script": "start", |
|
||||
"isBackground": true, |
|
||||
"problemMatcher": { |
|
||||
"owner": "typescript", |
|
||||
"pattern": "$tsc", |
|
||||
"background": { |
|
||||
"activeOnStart": true, |
|
||||
"beginsPattern": { |
|
||||
"regexp": "(.*?)" |
|
||||
}, |
|
||||
"endsPattern": { |
|
||||
"regexp": "bundle generation complete" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"type": "npm", |
|
||||
"script": "test", |
|
||||
"isBackground": true, |
|
||||
"problemMatcher": { |
|
||||
"owner": "typescript", |
|
||||
"pattern": "$tsc", |
|
||||
"background": { |
|
||||
"activeOnStart": true, |
|
||||
"beginsPattern": { |
|
||||
"regexp": "(.*?)" |
|
||||
}, |
|
||||
"endsPattern": { |
|
||||
"regexp": "bundle generation complete" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<p>app-layout works!</p> |
|
||||
@ -1,23 +0,0 @@ |
|||||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||
|
|
||||
import { AppLayoutComponent } from './app-layout.component'; |
|
||||
|
|
||||
describe('AppLayoutComponent', () => { |
|
||||
let component: AppLayoutComponent; |
|
||||
let fixture: ComponentFixture<AppLayoutComponent>; |
|
||||
|
|
||||
beforeEach(async () => { |
|
||||
await TestBed.configureTestingModule({ |
|
||||
declarations: [ AppLayoutComponent ] |
|
||||
}) |
|
||||
.compileComponents(); |
|
||||
|
|
||||
fixture = TestBed.createComponent(AppLayoutComponent); |
|
||||
component = fixture.componentInstance; |
|
||||
fixture.detectChanges(); |
|
||||
}); |
|
||||
|
|
||||
it('should create', () => { |
|
||||
expect(component).toBeTruthy(); |
|
||||
}); |
|
||||
}); |
|
||||
@ -1,15 +0,0 @@ |
|||||
import { Component, OnInit } from '@angular/core'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'app-app-layout', |
|
||||
templateUrl: './app-layout.component.html', |
|
||||
styleUrls: ['./app-layout.component.scss'] |
|
||||
}) |
|
||||
export class AppLayoutComponent implements OnInit { |
|
||||
|
|
||||
constructor() { } |
|
||||
|
|
||||
ngOnInit(): void { |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,3 +1,20 @@ |
|||||
<div class="dashboard-container"> |
<div class="dashboard-container"> |
||||
<app-graph [data]="data"></app-graph> |
|
||||
|
|
||||
|
<div class="date-container"> |
||||
|
<input type="date" class="input-date" [(ngModel)]="day" (change)="getData()" [max]="today"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-container" *ngIf="data.length"> |
||||
|
<span class="item"><span class="icon-watch_later"></span> Date/Time: <span class="value">{{data[data.length-1].date}}</span></span> |
||||
|
<span class="item"><span class="icon-wind"></span> Speed: <span class="value">{{data[data.length-1].speed}} Km/h</span></span> |
||||
|
<span class="item"><span class="icon-compass"></span> Direction: <span class="value">{{dirLabels[data[data.length-1].direction]}} {{dirArrows[data[data.length-1].direction]}}</span></span> |
||||
|
<span class="item"><span class="icon-device_thermostat"></span> Temperature: <span class="value">{{data[data.length-1].temperature}} °C</span></span> |
||||
|
<span class="item"><span class="icon-play_for_work"></span> Pressure: <span class="value">{{data[data.length-1].pressure}} hpa</span></span> |
||||
|
<span class="item"><span class="icon-opacity"></span> Humidity: <span class="value">{{data[data.length-1].humidity}}%</span></span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="graph-container"> |
||||
|
<div class="no-data" *ngIf="!data.length">No data for selected date</div> |
||||
|
<app-graph [data]="data" *ngIf="data.length"></app-graph> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
|||||
@ -0,0 +1,44 @@ |
|||||
|
@import "../../assets/scss/variables"; |
||||
|
|
||||
|
.dashboard-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.date-container { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.info-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
width: 100%; |
||||
|
|
||||
|
.item { |
||||
|
display: inline-block; |
||||
|
padding: 5px 10px; |
||||
|
border: 1px solid $gray; |
||||
|
border-radius: 3px; |
||||
|
margin: 3px; |
||||
|
font-size: $font-14; |
||||
|
font-weight: bold; |
||||
|
.value { |
||||
|
font-weight: normal; |
||||
|
font-size: $font-18; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.graph-container { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.no-data { |
||||
|
padding: 20px; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
@ -1,6 +1,6 @@ |
|||||
<div class="graph"> |
<div class="graph"> |
||||
<div class="canvas-container"> |
<div class="canvas-container"> |
||||
<div echarts class="canvas" [options]="graph.options" (chartInit)="onChartInit($event, graph)"></div> |
|
||||
|
<div echarts class="canvas" [options]="graph.options" (chartInit)="onChartInit($event, graph)" (chartFinished)="onChartInit($event, graph)"></div> |
||||
<div class="canvas-loader" *ngIf="graph.loading"><div class="spinner"></div></div> |
<div class="canvas-loader" *ngIf="graph.loading"><div class="spinner"></div></div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|||||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue