Skip to content

Commit 59275fd

Browse files
DaniilRybDaniilRyb
committed
added slide show and autocomplete for search mission name
1 parent 723f797 commit 59275fd

31 files changed

+314
-117
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# Сервис SpaceXLauncher
22
### Данный сервис позволяет отслеживать запуски компании SpaceX
3-
![](src/img/img.png)
3+
![](src/img/img1.png)
4+
5+
![](src/img/img2.png)
6+
7+
![](src/img/img3.png)
8+
9+
![](src/img/img4.png)
410

511
# Как использовать
612

‎package-lock.json

Lines changed: 41 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"@angular/platform-browser": "^15.1.0",
2222
"@angular/platform-browser-dynamic": "^15.1.0",
2323
"@angular/router": "^15.1.0",
24+
"@fortawesome/fontawesome-free": "^6.3.0",
25+
"mdb-angular-ui-kit": "^4.0.0",
2426
"rxjs": "~7.8.0",
2527
"tslib": "^2.3.0",
2628
"zone.js": "~0.12.0"

‎src/app/app.module.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
3+
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { HomeComponent } from './components/home/home.component';
77
import { NotFoundPageComponent } from './components/not-found-page/not-found-page.component';
88
import { ListLaunchesComponent } from './components/list-launches/list-launches.component';
99
import { MissionComponent } from './components/mission/mission.component';
1010
import { HttpClientModule } from "@angular/common/http";
11-
import { FormsModule } from "@angular/forms";
11+
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
1212
import { FilterMissionsNamePipe } from './pipes/filter-missions-name.pipe';
1313
import { FilterDatePipe } from './pipes/filter-date.pipe';
1414
import { RocketsComponent } from './components/rockets/rockets.component';
@@ -26,6 +26,8 @@ import { MatSelectModule } from "@angular/material/select";
2626
import { MatInputModule } from '@angular/material/input';
2727
import { ScrollPageComponent } from './components/scroll-page/scroll-page.component'
2828
import { MatProgressBarModule } from "@angular/material/progress-bar";
29+
import { MatAutocompleteModule } from "@angular/material/autocomplete";
30+
import { MdbCarouselModule } from "mdb-angular-ui-kit/carousel";
2931

3032

3133
@NgModule({
@@ -57,7 +59,11 @@ import { MatProgressBarModule } from "@angular/material/progress-bar";
5759
MatOptionModule,
5860
MatSelectModule,
5961
MatInputModule,
60-
MatProgressBarModule
62+
MatProgressBarModule,
63+
ReactiveFormsModule,
64+
MatAutocompleteModule,
65+
MdbCheckboxModule,
66+
MdbCarouselModule
6167
],
6268
providers: [],
6369
bootstrap: [AppComponent]

‎src/app/components/falcon-heavy/falcon-heavy.component.html

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробное описание</h2>
2-
<div class="w-75 justify-content-center m-auto p-4">
2+
<div class="m-auto p-4">
33
<table class="table table-striped table-hover">
44
<tbody>
55
<tr>
@@ -130,15 +130,14 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
130130
</tr>
131131
<tr *ngFor="let img of rocketsService.rockets[2].flickr_images" class="text-center">
132132
<th class="text-lg-start" scope="row">Изображения</th>
133-
<td><img [alt]="rocketsService.rockets[2].name"
134-
[src]="img"
135-
[title]="rocketsService.rockets[2].name + ' rocket image'"
136-
height="400" width="700"></td>
133+
<td>
134+
<img [alt]="rocketsService.rockets[2].name"
135+
[src]="img"
136+
[title]="rocketsService.rockets[2].name + ' rocket image'"
137+
height="400" width="700"></td>
137138
</tr>
138-
<tr>
139+
<tr class="text-center">
139140
<th scope="row">Видео</th>
140-
<!--<h3 class="font-bold mt-4 mb-4 text-uppercase">Видео</h3>
141-
-->
142141
<td>
143142
<iframe class="shadow-lg" height="400" src="https://www.youtube.com/embed/wbSwFU6tY1c"
144143
title="Starship | SN10 | High-Altitude Flight Test"
@@ -149,4 +148,4 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
149148
</tbody>
150149
</table>
151150
</div>
152-
<app-scroll-page></app-scroll-page>
151+
<app-scroll-page/>

‎src/app/components/falcon1/falcon1.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробное описание</h2>
2-
<div class="w-75 m-auto p-4">
2+
<div class="m-auto p-4">
33
<table class="table table-striped">
44
<tbody>
55
<tr>
@@ -136,7 +136,7 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
136136
height="400" width="700">
137137
</td>
138138
</tr>
139-
<tr>
139+
<tr class="text-center">
140140
<th scope="row">Видео</th>
141141
<!--<h3 class="font-bold mt-4 mb-4 text-uppercase">Видео</h3>
142142
-->
@@ -146,7 +146,8 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
146146
width="700">
147147
</iframe>
148148
</td>
149+
</tr>
149150
</tbody>
150151
</table>
151152
</div>
152-
<app-scroll-page></app-scroll-page>
153+
<app-scroll-page/>

‎src/app/components/falcon9/falcon9.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробное описание</h2>
2-
<div class="w-75 justify-content-center m-auto p-4">
2+
<div class="m-auto p-4">
33
<table class="table table-striped table-hover">
44
<tbody>
55
<tr>
@@ -136,7 +136,7 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
136136
height="400" width="700">
137137
</td>
138138
</tr>
139-
<tr>
139+
<tr class="text-center">
140140
<th scope="row">Видео</th>
141141
<!--<h3 class="font-bold mt-4 mb-4 text-uppercase">Видео</h3>
142142
-->
@@ -150,4 +150,4 @@ <h2 class="font-bold text-center mt-4 text-uppercase fw-bolder">Подробно
150150
</tbody>
151151
</table>
152152
</div>
153-
<app-scroll-page></app-scroll-page>
153+
<app-scroll-page/>

‎src/app/components/home/home.component.html

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,72 @@
1-
<div [style]="slideShowAnimation()" class="background h-100 w-100 position-relative">
2-
<div class="position-absolute bottom-0">
3-
<h6 class="text-white text-uppercase fw-bolder p-2 m-2">
4-
Разработал:
5-
<a class="text-white" href="https://github.com/DaniilRyb?tab=repositories"
6-
title="https://github.com/DaniilRyb?tab=repositories">Daniil Rybakov</a>
7-
</h6>
1+
<!--<div [style]="slideShowAnimation()" class="background h-100 w-100 position-relative">
2+
<div class="position-absolute bottom-0 d-inline p-2">
3+
<a href="https://github.com/DaniilRyb?tab=repositories"
4+
title="https://github.com/DaniilRyb?tab=repositories" target="_blank" class="p-2 m-1">
5+
<img src="assets/icons-github.svg" width="40" height="40">
6+
</a>
7+
<a href="https://vk.com/daniil_ryb"
8+
title="https://vk.com/daniil_ryb" target="_blank" class="p-2 m-1">
9+
<img src="assets/icons-vk.svg" width="40" height="40">
10+
</a>
11+
<a href="/"
12+
title="LinkedIn" target="_blank" class="p-2 m-1">
13+
<img src="assets/icons-linkedin.svg" width="40" height="40">
14+
</a>
815
</div>
9-
<div class="display-3 text-white display-6 text-uppercase text-center p-5 fw-bolder position-absolute top-1 absolute">
10-
Привет! Этот сервис создан для отслеживания запусков компании SpaceX. Здесь можно найти информацию о прошедших
11-
запусках и описание ракет
16+
<div class="d-inline position-absolute bottom-0 end-0">
17+
<h4 class="text-white p-2 text-uppercase">Created by Daniil Rybakov</h4>
18+
</div>-->
1219

13-
<!--<p class="fs-4 p-2">
14-
<span class="fst-italic">Space Exploration Technologies Corporation, SpaceX</span> —
15-
американская компания, производитель космической техники. Штаб-квартира — в городе Хоторне, Калифорния, США.
16-
Основана в 2002 году прежним акционером PayPal и CEO Tesla Motors Илоном Маском с целью сократить расходы на
17-
полёты
18-
в космос для открытия пути к колонизации Марса.
19-
Компания разработала ракеты-носители Falcon 1, Falcon 9 и Falcon Heavy, с самого начала преследуя цель сделать
20-
их
21-
многоразовыми, и космический корабль Dragon (выводимый на орбиту теми же Falcon 9), предназначенный для
22-
пополнения
23-
запасов на Международной космической станции.</p>-->
20+
<!--<p class="fs-4 p-2">
21+
<span class="fst-italic">Space Exploration Technologies Corporation, SpaceX</span> —
22+
американская компания, производитель космической техники. Штаб-квартира — в городе Хоторне, Калифорния, США.
23+
Основана в 2002 году прежним акционером PayPal и CEO Tesla Motors Илоном Маском с целью сократить расходы на
24+
полёты
25+
в космос для открытия пути к колонизации Марса.
26+
Компания разработала ракеты-носители Falcon 1, Falcon 9 и Falcon Heavy, с самого начала преследуя цель сделать
27+
их
28+
многоразовыми, и космический корабль Dragon (выводимый на орбиту теми же Falcon 9), предназначенный для
29+
пополнения
30+
запасов на Международной космической станции.</p>-->
2431

25-
<!--
26-
<div class="flex-fill p-5">
27-
<img
28-
alt="Falcon9 SpaceX"
29-
class="shadow-lg bg-white rounded" height="500"
30-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Bangabandhu_Satellite-1_Mission_%2842025499722%29.jpg/533px-Bangabandhu_Satellite-1_Mission_%2842025499722%29.jpg"
31-
width="400">
32-
<p class="mt-3 fst-italic fw-bolder text-center">Запуск Falcon 9 Block 5 со спутником Bangabandhu-1</p>
33-
</div>-->
32+
<!--
33+
<div class="flex-fill p-5">
34+
<img
35+
alt="Falcon9 SpaceX"
36+
class="shadow-lg bg-white rounded" height="500"
37+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Bangabandhu_Satellite-1_Mission_%2842025499722%29.jpg/533px-Bangabandhu_Satellite-1_Mission_%2842025499722%29.jpg"
38+
width="400">
39+
<p class="mt-3 fst-italic fw-bolder text-center">Запуск Falcon 9 Block 5 со спутником Bangabandhu-1</p>
40+
</div>-->
41+
<!--</div>-->
42+
43+
<div class="p-0 w-100 position-relative">
44+
<mdb-carousel [animation]="'slide'" class="p-0">
45+
<mdb-carousel-item *ngFor="let item of items">
46+
<img [alt]="item" [src]="item" class="d-block w-100 h-100">
47+
</mdb-carousel-item>
48+
</mdb-carousel>
49+
<div class="display-3 text-white display-6 text-uppercase text-center fw-bolder position-absolute top-1 absolute">
50+
Привет! Этот сервис создан для отслеживания запусков компании SpaceX. Здесь можно найти информацию о прошедших
51+
запусках и описание ракет
52+
</div>
53+
<div class="position-absolute bottom-0 d-inline p-2">
54+
<a class="p-2 m-1"
55+
href="https://github.com/DaniilRyb?tab=repositories" target="_blank"
56+
title="https://github.com/DaniilRyb?tab=repositories">
57+
<img alt="GitHub" height="40" src="assets/icons-github.svg" width="40">
58+
</a>
59+
<a class="p-2 m-1"
60+
href="https://vk.com/daniil_ryb" target="_blank" title="https://vk.com/daniil_ryb">
61+
<img alt="vk" height="40" src="assets/icons-vk.svg" width="40">
62+
</a>
63+
<a class="p-2 m-1"
64+
href="/" target="_blank" title="LinkedIn">
65+
<img alt="LinkedIn" height="40" src="assets/icons-linkedin.svg" width="40">
66+
</a>
67+
</div>
68+
<div class="d-inline position-absolute bottom-0 end-0">
69+
<h4 class="text-white p-2 text-uppercase">Created by Daniil Rybakov</h4>
3470
</div>
3571
</div>
72+

‎src/app/components/home/home.component.ts

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,24 @@ import { Component } from '@angular/core';
77
})
88
export class HomeComponent {
99

10-
arrayImg = [
11-
"https://images.unsplash.com/photo-1465788786008-f75a725b34e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
12-
"https://wallpaperaccess.com/full/418036.jpg",
13-
"https://live.staticflickr.com/65535/52667587548_33d9678f25_4k.jpg",
14-
"https://images.unsplash.com/photo-1541185933-ef5d8ed016c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
15-
"https://preview.redd.it/xulol31zvnby.jpg?auto=webp&s=9a4a755078bdc1dc6fa8d247728bf66b517f8ae5",
16-
"https://wallpapers.com/images/featured/obi5wntvz2881e6i.jpg"
17-
]
10+
/* slideShowAnimation() {
11+
return `background: url('assets/img${2}.jpg') no-repeat fixed center center;
12+
background-size: cover;
13+
-webkit-background-size: cover;
14+
-moz-background-size: cover;
15+
-o-background-size: cover; `;
1816
19-
slideShowAnimation() {
20-
return `background: url('assets/img${2}.jpg') no-repeat fixed center center;
21-
background-size: cover;
22-
-webkit-background-size: cover;
23-
-moz-background-size: cover;
24-
-o-background-size: cover; `;
17+
}*/
2518

26-
}
19+
items = [
20+
'assets/img.jpg',
21+
'assets/img2.jpg',
22+
'assets/img3.jpg',
23+
'assets/img4.jpg',
24+
'assets/img5.jpg',
25+
'assets/img6.webp',
26+
'assets/img7.jpg',
27+
'assets/img8.jpg'
28+
];
2729

2830
}

‎src/app/components/list-launches/list-launches.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,5 @@ section {
2727
.example-button-container {
2828
display: flex;
2929
justify-content: center;
30-
width: 120px;
30+
width: 170px;
3131
}

0 commit comments

Comments
 (0)