Skip to content

Commit 1390aa5

Browse files
author
Oleg Kopot
committed
Create angular project
1 parent 398702b commit 1390aa5

40 files changed

+603
-22
lines changed

‎src/app/app.component.html‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
11
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{title}}!
5-
</h1>
6-
<img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
18-
</li>
19-
</ul>
2+
<router-outlet></router-outlet>
3+
4+
205

‎src/app/app.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { Component } from '@angular/core';
2+
import { WeatherService } from "./services/weather.service";
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.css']
78
})
89
export class AppComponent {
9-
title = 'app';
10+
title = 'app';
11+
constructor(){
12+
}
1013
}

‎src/app/app.module.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,28 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
5+
import { MainPageComponent } from './main-page/main-page.component';
6+
import { WeatherPresentationComponent } from './weather-presentation/weather-presentation.component';
7+
import { WeatherService } from "./services/weather.service";
8+
import {HttpClientModule} from '@angular/common/http';
9+
import { FormsModule } from "@angular/forms"
10+
import { AppRoutingModule } from "./app.routing";
11+
import { HistoryPresentationComponent } from './history-presentation/history-presentation.component';
512

613
@NgModule({
714
declarations: [
8-
AppComponent
15+
AppComponent,
16+
MainPageComponent,
17+
WeatherPresentationComponent,
18+
HistoryPresentationComponent
919
],
1020
imports: [
11-
BrowserModule
21+
BrowserModule,
22+
HttpClientModule,
23+
FormsModule,
24+
AppRoutingModule
1225
],
13-
providers: [],
26+
providers: [WeatherService],
1427
bootstrap: [AppComponent]
1528
})
1629
export class AppModule { }

‎src/app/app.routing.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { MainPageComponent } from "./main-page/main-page.component";
4+
import { WeatherPresentationComponent } from "./weather-presentation/weather-presentation.component";
5+
import { HistoryPresentationComponent } from "./history-presentation/history-presentation.component";
6+
7+
8+
const routes: Routes = [
9+
{ path:'', redirectTo:'/mainpage', pathMatch:'full'},
10+
{ path:'mainpage', component:MainPageComponent},
11+
{ path:'mainpage/weathers/:cityName/:countOfDays', component:WeatherPresentationComponent},
12+
{ path:'mainpage/histories', component:HistoryPresentationComponent}
13+
];
14+
15+
@NgModule({
16+
imports: [ RouterModule.forRoot(routes) ],
17+
exports: [ RouterModule ]
18+
})
19+
20+
export class AppRoutingModule {}

‎src/app/app.settings.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export class AppSettings {
2+
public static API_ENDPOINT='http://localhost:56070/api/';
3+
}

‎src/app/history-presentation/history-presentation.component.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body{
2+
background-color: rgba(255,244,238,231);
3+
}
4+
5+
table{
6+
margin: 20px 0 20px 0;
7+
border-top: 1px solid #605D8B;
8+
padding: 5px;
9+
font-size: 15pt;
10+
width: 100%;
11+
}
12+
13+
th {
14+
background-color: #4CAF50;
15+
color: white;
16+
padding: 15px;
17+
}
18+
19+
tr:hover {background-color: #f5f5f5}
20+
21+
td{
22+
padding: 15px;
23+
text-align: center;
24+
border-bottom: 1px solid #ddd;
25+
}
26+
27+
button {
28+
font-size: 15pt;
29+
font-family: Arial;
30+
background-color: #eee;
31+
border: none;
32+
padding: 5px 10px;
33+
border-radius: 4px;
34+
cursor: pointer; cursor: hand;
35+
margin: 5px;
36+
}
37+
38+
button:hover {
39+
background-color: #cfd8dc;
40+
}
41+
button:disabled {
42+
background-color: #eee;
43+
color: #ccc;
44+
cursor: auto;
45+
}
46+
47+
h1{
48+
color:red;
49+
}
50+
51+
.day-temp{
52+
color: #fff;
53+
background-color: #f0ad4e;
54+
font-weight: 700;
55+
}
56+
57+
.night-temp{
58+
color: #fff;
59+
background-color: #999;
60+
font-weight: 700;
61+
}

‎src/app/history-presentation/history-presentation.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<h1 *ngIf="loading">Waiting...</h1>
2+
<div *ngIf="!loading">
3+
<button (click)="goBack()">Back</button>
4+
<table>
5+
<tr>
6+
<th>Time</th>
7+
<th>City</th>
8+
<th>Day</th>
9+
<th>Weather</th>
10+
<th>Day temperature</th>
11+
<th>Night temperature</th>
12+
</tr>
13+
<tr *ngFor="let history of histories">
14+
<td>{{history.Time}}</td>
15+
<td>{{history.City.Name}}</td>
16+
<td>{{history.City.Weathers[0].Day}}</td>
17+
<td>
18+
<img src="/assets/icons/{{history.City.Weathers[0].IconId}}"/>
19+
<br/>
20+
{{history.City.Weathers[0].MainWeather}}
21+
</td>
22+
<td class="day-temp">{{history.City.Weathers[0].DayAvgTemp}} °C</td>
23+
<td class="night-temp">{{history.City.Weathers[0].DayMinTemp}} °C</td>
24+
</tr>
25+
</table>
26+
<button (click)="goBack()">Back</button>
27+
</div>

‎src/app/history-presentation/history-presentation.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HistoryPresentationComponent } from './history-presentation.component';
4+
5+
describe('HistoryPresentationComponent', () => {
6+
let component: HistoryPresentationComponent;
7+
let fixture: ComponentFixture<HistoryPresentationComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ HistoryPresentationComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(HistoryPresentationComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should be created', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/history-presentation/history-presentation.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { History } from "../models/history";
3+
import { WeatherService } from "../services/weather.service";
4+
import { Location } from '@angular/common';
5+
6+
@Component({
7+
selector: 'app-history-presentation',
8+
templateUrl: './history-presentation.component.html',
9+
styleUrls: ['./history-presentation.component.css']
10+
})
11+
export class HistoryPresentationComponent implements OnInit {
12+
histories: Array<History>;
13+
loading:boolean;
14+
15+
constructor(private service: WeatherService,
16+
private location: Location) {
17+
}
18+
19+
ngOnInit() {
20+
this.loading = true;
21+
this.histories = this.service.getHistories();
22+
this.loading = false;
23+
}
24+
25+
goBack(): void {
26+
this.location.back();
27+
}
28+
}

‎src/app/main-page/main-page.component.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body{
2+
background-color: rgba(255,244,238,231);
3+
}
4+
.mainpage{
5+
font-size: 18pt;
6+
padding: 5px;
7+
margin: 5px;
8+
text-align: left;
9+
10+
}
11+
12+
.mainpage > div{
13+
padding: 5px;
14+
margin: auto;
15+
}
16+
17+
input, select{
18+
font-size: 13pt;
19+
font-family: Arial;
20+
padding: 5px 10px;
21+
border-radius: 4px;
22+
margin: 5px;
23+
}
24+
button {
25+
font-size: 13pt;
26+
font-family: Arial;
27+
background-color: #eee;
28+
border: none;
29+
padding: 5px 10px;
30+
border-radius: 4px;
31+
cursor: pointer; cursor: hand;
32+
}
33+
34+
button:hover {
35+
background-color: #cfd8dc;
36+
}
37+
button:disabled {
38+
background-color: #eee;
39+
color: #ccc;
40+
cursor: auto;
41+
}
42+
43+
label {
44+
margin: .5em 0;
45+
color: #605D8B;
46+
font-weight: bold;
47+
}
48+
49+
.loading{
50+
color:red;
51+
}

0 commit comments

Comments
 (0)