Skip to content

Commit 1658a72

Browse files
andrewevans0102andrewevans0102
committed
created components to show weather radar tile
1 parent 738f9fd commit 1658a72

12 files changed

+152
-75
lines changed

‎src/app/app.module.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import { environment } from '../environments/environment';
2121
import { EffectsModule } from '@ngrx/effects';
2222
import { WeatherEffects } from './weather/weather.effects';
2323
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
24-
import { RadarImagesComponent } from './cards/radar-images/radar-images.component';
24+
import { RadarMobileComponent } from './cards/radar-mobile/radar-mobile.component';
25+
import { RadarDesktopComponent } from './cards/radar-desktop/radar-desktop.component';
2526

2627
@NgModule({
2728
declarations: [
@@ -34,7 +35,8 @@ import { RadarImagesComponent } from './cards/radar-images/radar-images.componen
3435
HourlyForecastComponent,
3536
AboutMobileComponent,
3637
AboutDesktopComponent,
37-
RadarImagesComponent
38+
RadarMobileComponent,
39+
RadarDesktopComponent
3840
],
3941
entryComponents: [
4042
CurrentConditionsComponent,
@@ -43,7 +45,8 @@ import { RadarImagesComponent } from './cards/radar-images/radar-images.componen
4345
HourlyForecastComponent,
4446
AboutDesktopComponent,
4547
AboutMobileComponent,
46-
RadarImagesComponent
48+
RadarMobileComponent,
49+
RadarDesktopComponent
4750
],
4851
imports: [
4952
BrowserModule,

‎src/app/cards/radar-images/radar-images.component.css renamed to ‎src/app/cards/radar-desktop/radar-desktop.component.css

File renamed without changes.

‎src/app/cards/radar-desktop/radar-desktop.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<mat-grid-list cols="6" rowHeight="12em">
2+
<mat-grid-tile
3+
*ngFor="let radarImage of radarImages"
4+
[colspan]="0.5"
5+
[rowspan]="0.5">
6+
<div class="radar-images">
7+
<a href="{{radarImage.link}}"><p>{{ radarImage.location }}</p></a>
8+
<img src="{{radarImage.image}}" />
9+
</div>
10+
</mat-grid-tile>
11+
</mat-grid-list>

‎src/app/cards/radar-desktop/radar-desktop.component.spec.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { RadarDesktopComponent } from './radar-desktop.component';
3+
import {
4+
MatButtonModule,
5+
MatCardModule,
6+
MatGridListModule,
7+
MatIconModule,
8+
MatMenuModule,
9+
} from '@angular/material';
10+
11+
describe('RadarDesktopComponent', () => {
12+
let component: RadarDesktopComponent;
13+
let fixture: ComponentFixture<RadarDesktopComponent>;
14+
15+
beforeEach(async(() => {
16+
TestBed.configureTestingModule({
17+
declarations: [ RadarDesktopComponent ],
18+
imports: [
19+
MatButtonModule,
20+
MatCardModule,
21+
MatGridListModule,
22+
MatIconModule,
23+
MatMenuModule
24+
]
25+
})
26+
.compileComponents();
27+
}));
28+
29+
beforeEach(() => {
30+
fixture = TestBed.createComponent(RadarDesktopComponent);
31+
component = fixture.componentInstance;
32+
fixture.detectChanges();
33+
});
34+
35+
it('should create', () => {
36+
expect(component).toBeTruthy();
37+
});
38+
});

‎src/app/cards/radar-desktop/radar-desktop.component.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import * as radar from '../../../assets/radar.json';
3+
4+
@Component({
5+
selector: 'app-radar-desktop',
6+
templateUrl: './radar-desktop.component.html',
7+
styleUrls: ['./radar-desktop.component.css']
8+
})
9+
export class RadarDesktopComponent implements OnInit {
10+
11+
radarImages = [];
12+
13+
constructor() { }
14+
15+
ngOnInit() {
16+
const radarJSON = JSON.stringify(radar);
17+
const radarParsed = JSON.parse(radarJSON);
18+
radarParsed.default.forEach((parsedRadar) => {
19+
const radarImage = {
20+
location: parsedRadar.location,
21+
image: parsedRadar.image,
22+
link: parsedRadar.link
23+
};
24+
this.radarImages.push(radarImage);
25+
});
26+
}
27+
28+
}

‎src/app/cards/radar-images/radar-images.component.html

-22
This file was deleted.

‎src/app/cards/radar-images/radar-images.component.ts

-41
This file was deleted.

‎src/app/cards/radar-mobile/radar-mobile.component.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.radar-images {
2+
display: flex;
3+
justify-content: flex-start;
4+
align-items: center;
5+
flex-direction: column;
6+
}
7+
8+
img {
9+
width: 52;
10+
height: 50;
11+
}
12+
13+
a {
14+
font-size: 1.2em;
15+
}
16+
17+
p {
18+
margin-top: 0;
19+
margin-bottom: 0.5em;
20+
}

‎src/app/cards/radar-mobile/radar-mobile.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<mat-grid-list cols="2" rowHeight="9.5em">
2+
<mat-grid-tile
3+
*ngFor="let radarImage of radarImages"
4+
[colspan]="0.5"
5+
[rowspan]="0.5">
6+
<div class="radar-images">
7+
<a href="{{radarImage.link}}"><p>{{ radarImage.location }}</p></a>
8+
<img src="{{radarImage.image}}" />
9+
</div>
10+
</mat-grid-tile>
11+
</mat-grid-list>

‎src/app/cards/radar-images/radar-images.component.spec.ts renamed to ‎src/app/cards/radar-mobile/radar-mobile.component.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { RadarImagesComponent } from './radar-images.component';
2+
import { RadarMobileComponent } from './radar-mobile.component';
33
import {
44
MatButtonModule,
55
MatCardModule,
@@ -8,13 +8,13 @@ import {
88
MatMenuModule,
99
} from '@angular/material';
1010

11-
describe('RadarImagesComponent', () => {
12-
let component: RadarImagesComponent;
13-
let fixture: ComponentFixture<RadarImagesComponent>;
11+
describe('RadarMobileComponent', () => {
12+
let component: RadarMobileComponent;
13+
let fixture: ComponentFixture<RadarMobileComponent>;
1414

1515
beforeEach(async(() => {
1616
TestBed.configureTestingModule({
17-
declarations: [ RadarImagesComponent ],
17+
declarations: [ RadarMobileComponent ],
1818
imports: [
1919
MatButtonModule,
2020
MatCardModule,
@@ -27,7 +27,7 @@ describe('RadarImagesComponent', () => {
2727
}));
2828

2929
beforeEach(() => {
30-
fixture = TestBed.createComponent(RadarImagesComponent);
30+
fixture = TestBed.createComponent(RadarMobileComponent);
3131
component = fixture.componentInstance;
3232
fixture.detectChanges();
3333
});

‎src/app/cards/radar-mobile/radar-mobile.component.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import * as radar from '../../../assets/radar.json';
3+
4+
@Component({
5+
selector: 'app-radar-mobile',
6+
templateUrl: './radar-mobile.component.html',
7+
styleUrls: ['./radar-mobile.component.css']
8+
})
9+
export class RadarMobileComponent implements OnInit {
10+
11+
radarImages = [];
12+
13+
constructor() { }
14+
15+
ngOnInit() {
16+
const radarJSON = JSON.stringify(radar);
17+
const radarParsed = JSON.parse(radarJSON);
18+
radarParsed.default.forEach((parsedRadar) => {
19+
const radarImage = {
20+
location: parsedRadar.location,
21+
image: parsedRadar.image,
22+
link: parsedRadar.link
23+
};
24+
this.radarImages.push(radarImage);
25+
});
26+
}
27+
28+
}

‎src/app/weather/weather.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import * as USCities from '../../assets/us_cities.json';
1818
import { City } from '../models/city/city';
1919
import { MatAutocompleteSelectedEvent } from '@angular/material';
2020
import { LoadWeather } from './weather.actions';
21-
import { RadarImagesComponent } from '../cards/radar-images/radar-images.component';
21+
import { RadarDesktopComponent } from '../cards/radar-desktop/radar-desktop.component';
22+
import { RadarMobileComponent } from '../cards/radar-mobile/radar-mobile.component';
2223

2324
@Component({
2425
selector: 'app-weather',
@@ -83,7 +84,7 @@ export class WeatherComponent implements OnInit {
8384
title: 'Radar Images',
8485
cols: 3,
8586
rows: 1,
86-
component: RadarImagesComponent
87+
component: RadarDesktopComponent
8788
},
8889
{
8990
title: 'About',
@@ -123,7 +124,7 @@ export class WeatherComponent implements OnInit {
123124
title: 'Radar Images',
124125
cols: 3,
125126
rows: 2,
126-
component: RadarImagesComponent
127+
component: RadarMobileComponent
127128
},
128129
{
129130
title: 'About',

0 commit comments

Comments
 (0)