Skip to content

Commit ba6a101

Browse files
roguefactionroguefaction
committed
Merge branch 'feature-carousel-in-mainpage'
# Conflicts: # package.json # src/app/app.module.ts
2 parents 7916fea + 7c524d3 commit ba6a101

14 files changed

+109
-25
lines changed

‎angular.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,4 +133,4 @@
133133
}
134134
},
135135
"defaultProject": "good-deeds-fe"
136-
}
136+
}

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
"ng-bootstrap": "^1.6.3",
3131
"ngx-pagination": "^3.2.1",
3232
"sort-by-typescript": "^1.0.2",
33+
"jquery": "^3.3.1",
34+
"rxjs": "~6.3.3",
3335
"tslib": "^1.9.0",
3436
"typescript": "~3.2.2",
3537
"zone.js": "~0.8.26"

‎src/app/app-routing.module.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,11 @@ const routes: Routes = [
1919
{path: 'calendar', component: CalendarComponent},
2020
{path: '', redirectTo: '/home', pathMatch: 'full'},
2121
{path: '**', component: PageNotFoundComponent}
22-
23-
2422
];
2523

2624
@NgModule({
2725
imports: [RouterModule.forRoot(routes)],
2826
exports: [RouterModule]
2927
})
28+
3029
export class AppRoutingModule { }

‎src/app/app.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { CalendarComponent } from './calendar/calendar.component';
1717
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
1818
import { CalendarModule, DateAdapter } from 'angular-calendar';
1919
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
20+
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
2021

2122
@NgModule({
2223
declarations: [
@@ -38,6 +39,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
3839
AppRoutingModule,
3940
FormsModule,
4041
ReactiveFormsModule,
42+
NgbModule,
4143
NgxPaginationModule,
4244
BrowserAnimationsModule,
4345
CalendarModule.forRoot({

‎src/app/good-deeds-details/good-deeds-details.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h5 class="mb-0 header-class text-dark text-center">
2929
</h5>
3030
</div>
3131
<div class="col-1">
32-
<button class="btn btn-success bg-btn apply-button">Apply</button>
32+
<button class="btn btn-success bg-btn apply-button" disabled>Apply</button>
3333
</div>
3434
</div>
3535

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

+26
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,34 @@
1414
background: url('../../assets/images/vintage-rainbow-color-badge.png');
1515
background-size: cover;
1616
}
17+
1718
.home-padding{
1819
padding-right: 60px;
1920
}
2021

22+
.carousel-style{
23+
height: 40rem;
24+
width: 100%;
25+
object-fit: cover;
26+
}
27+
28+
.carousel-caption-edit {
29+
position: absolute;
30+
right: 15%;
31+
bottom: 12rem;
32+
left: 15%;
33+
z-index: 10;
34+
padding-top: 20px;
35+
padding-bottom: 20px;
36+
color: #fff;
37+
text-align: center;
38+
}
39+
40+
.carousel-text{
41+
font-size: 5rem;
42+
padding-bottom: 1rem;
43+
}
2144

45+
.carousel-text-secondary{
46+
font-size: 2rem;
47+
}

‎src/app/home-page/home-page.component.html

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
2-
<div class="jumbotron landing-image">
3-
<h1 class="text-center text-white display-2">Welcome to Good Deeds</h1>
1+
<div *ngIf="!isListReady" class="d-flex justify-content-center text-danger" role="status">
2+
<div class="spinner-border" role="status"></div>
43
</div>
4+
<div *ngIf="isListReady">
5+
<ngb-carousel interval="5000">
6+
7+
<div *ngFor="let image of images; let i = index" class="slider">
8+
<ng-template ngbSlide>
9+
<img [src]="image" [alt]="image" class="carousel-style">
10+
<div class="carousel-caption-edit" [(ngModel)]="deeds[i]" ngDefaultControl>
11+
<h1 class="carousel-text">{{deeds[i].title}}</h1>
12+
<p class="carousel-text-secondary">{{deeds[i].date}}</p>
13+
</div>
14+
</ng-template>
15+
</div>
516

17+
</ngb-carousel>
18+
</div>
619

720
<div class="container">
821
<div class="row">
@@ -13,6 +26,7 @@ <h1 class="text-center"><img class="m-3" src="../../assets/images/icons8-ask-que
1326
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum quis velit quis vestibulum.
1427
</p>
1528
</div>
29+
1630
<div class="col-12 col-md-4 home-padding">
1731
<h1 class="text-center"><img class="m-3" src="../../assets/images/icons8-place-marker-64.png"></h1>
1832
<p>

‎src/app/home-page/home-page.component.ts

+33-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import {Component, OnInit} from '@angular/core';
2+
import {Deed} from '../models/deed';
3+
import {DeedService} from '../services/deed.service';
4+
25

36
@Component({
47
selector: 'app-home-page',
@@ -7,9 +10,37 @@ import { Component, OnInit } from '@angular/core';
710
})
811
export class HomePageComponent implements OnInit {
912

10-
constructor() { }
13+
deeds: Deed[];
14+
isListReady: boolean;
15+
images: string[] = ['../../assets/images/carousel/image1.jpg',
16+
'../../assets/images/carousel/image2.jpg', '../../assets/images/carousel/image3.jpeg'];
17+
constructor(private deedService: DeedService) {
18+
}
19+
1120

1221
ngOnInit() {
22+
this.isListReady = false;
23+
this.getDeeds();
24+
console.log(this.images);
25+
26+
27+
}
28+
29+
getDeeds() {
30+
this.deedService.getUpcomingDeeds().subscribe(
31+
deeds => {
32+
console.log(deeds);
33+
this.deeds = deeds;
34+
},
35+
error => {
36+
console.log('error');
37+
},
38+
() => {
39+
console.log('completed');
40+
console.log(this.deeds);
41+
this.isListReady = true;
42+
}
43+
);
1344
}
1445

1546
}

‎src/app/register-deed/register-deed.component.html

+17-15
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ <h1 class="h1-padding">Deed registration</h1>
1212
<div class="form-group row">
1313
<label class="col-sm-2 col-form-label">Title*</label>
1414
<div class="col-sm-7">
15-
<input formControlName="title" class="form-control" placeholder="Save the squirrels" maxLength="50">
15+
<input formControlName="title" class="form-control" placeholder="Save the squirrels" maxLength="50">
1616
</div>
1717
</div>
1818
<div *ngIf="registerDeedForm.get('title').touched">
19-
<div *ngIf="registerDeedForm.get('title').hasError('required')" class="alert-danger alert" >
19+
<div *ngIf="registerDeedForm.get('title').hasError('required')" class="alert-danger alert">
2020
Title field is required
2121
</div>
2222
<div *ngIf="registerDeedForm.get('title').hasError('minlength')" class="alert-danger alert">
@@ -29,10 +29,11 @@ <h1 class="h1-padding">Deed registration</h1>
2929
</div>
3030

3131
<div class="form-group row">
32-
<label class="col-sm-2 col-form-label">Organization:</label>
33-
<div class="col-sm-7">
34-
<input formControlName="organization" class="form-control" placeholder="National Squirrel University" maxLength="50">
35-
</div>
32+
<label class="col-sm-2 col-form-label">Organization:</label>
33+
<div class="col-sm-7">
34+
<input formControlName="organization" class="form-control" placeholder="National Squirrel University"
35+
maxLength="50">
36+
</div>
3637
</div>
3738
<div *ngIf="registerDeedForm.get('organization').touched">
3839
<div *ngIf="registerDeedForm.get('organization').hasError('minlength')" class="alert-danger alert">
@@ -69,7 +70,7 @@ <h1 class="h1-padding">Deed registration</h1>
6970
<div class="form-group row">
7071
<label class="col-sm-2 col-form-label">Date*</label>
7172
<div class="col-sm-7">
72-
<input type="date" formControlName="date" class="form-control" placeholder="2010-10-10">
73+
<input type="date" formControlName="date" class="form-control" placeholder="2010-10-10">
7374
</div>
7475
</div>
7576
<div *ngIf="registerDeedForm.get('date').touched">
@@ -82,7 +83,7 @@ <h1 class="h1-padding">Deed registration</h1>
8283
<div class="form-group row">
8384
<label class="col-sm-2 col-form-label">Max People</label>
8485
<div class="col-sm-7">
85-
<input formControlName="maxPeople" class="form-control">
86+
<input formControlName="maxPeople" class="form-control" maxlength="8">
8687
</div>
8788
</div>
8889
<div *ngIf="registerDeedForm.get('maxPeople').touched">
@@ -142,12 +143,14 @@ <h1 class="h1-padding">Contacts</h1>
142143
<h1 class="h1-padding">Description</h1>
143144

144145

145-
<div class="form-group row">
146-
<textarea formControlName="description" #incidentDescription class="form-control col-md-9" id="exampleFormControlTextarea1" rows="4" placeholder="Describe what is this project about" maxLength="500"></textarea >
147-
<small class="col-md char-count">
148-
{{500 - incidentDescription.value.length}}/500
149-
</small>
150-
</div>
146+
<div class="form-group row">
147+
<textarea formControlName="description" #incidentDescription class="form-control col-md-9"
148+
id="exampleFormControlTextarea1" rows="4" placeholder="Describe what is this project about"
149+
maxLength="500"></textarea>
150+
<small class="col-md char-count">
151+
{{500 - incidentDescription.value.length}}/500
152+
</small>
153+
</div>
151154

152155
<div *ngIf="registerDeedForm.get('description').touched">
153156
<div *ngIf="registerDeedForm.get('description').hasError('maxlength')" class="alert-danger alert">
@@ -156,7 +159,6 @@ <h1 class="h1-padding">Description</h1>
156159
</div>
157160

158161

159-
160162
<div class="form-group row">
161163
<label class="col-sm-2 col-form-label">Tags:</label>
162164
<div class="col-sm-7">

‎src/app/services/deed.service.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export class DeedService {
2626
headers.append('Content-Type', 'application/json');
2727
}
2828

29-
3029
addDeed(deed: Deed) {
3130
return this.http.post('https://calm-waters-93672.herokuapp.com/deed', deed);
3231
}
@@ -37,4 +36,8 @@ export class DeedService {
3736
return this.deedToExpand;
3837
}
3938

39+
getUpcomingDeeds(): Observable<Deed[]> {
40+
return this.http.get<Deed[]>('https://calm-waters-93672.herokuapp.com/upcomingdeeds');
41+
}
42+
4043
}

‎src/assets/images/carousel/image1.jpg

253 KB
Loading

‎src/assets/images/carousel/image2.jpg

303 KB
Loading

‎src/assets/images/carousel/image3.jpeg

264 KB
Loading

0 commit comments

Comments
 (0)