Skip to content
Snippets Groups Projects
Commit e9ff1b50 authored by MavericksFive's avatar MavericksFive
Browse files

connect ActivityCards to ListActivity

parent 67baa0b1
No related branches found
No related tags found
No related merge requests found
<app-listactivity #listactivity></app-listactivity>
<div class="d-flex justify-content-center p-3 mt-4">
<h1>Activités près de chez vous</h1>
</div>
......@@ -5,21 +6,21 @@
<div class="mw-100" style="height: 40px"></div>
<div class="container">
<div class="row justify-content-center">
<a routerLink="replaceWithComponentYves/sport" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<a (click)="changeType('Sport')" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<img src="/assets/images/sport.png" class="card-img-top" alt="sport">
<div class="card-body">
<h5 class="card-title">SPORTS</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</a>
<a routerLink="replaceWithComponentYves/conference" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<a (click)="changeType('Conférence')" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<img src="/assets/images/conference.png" class="card-img-top" alt="conference">
<div class="card-body">
<h5 class="card-title">CONFERENCES</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</a>
<a routerLink="replaceWithComponentYves/afterwork" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<a (click)="changeType('Afterwork')" class="col-sm card m-3 p-3 align-items-center" style="width: 18rem;">
<img src="/assets/images/afterwork.png" class="card-img-top" alt="afterwork">
<div class="card-body">
<h5 class="card-title">AFTERWORKS</h5>
......@@ -27,10 +28,4 @@
</div>
</a>
</div>
</div>
<div class="mw-100" style="height: 40px"></div>
<div class="container">
<button routerLink="/" class="btn btn-primary" type="submit">Return home</button>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { ListactivityComponent } from '../listactivity/listactivity.component';
@Component({
selector: 'app-activity-cards',
templateUrl: './activity-cards.component.html',
styleUrls: ['./activity-cards.component.css']
})
export class ActivityCardsComponent {
@ViewChild('listactivity') listactivity!: ListactivityComponent;
constructor(private router: Router){}
changeType(type:string): void {
this.router.navigateByUrl(`activities/${type}`)
}
}
......@@ -12,6 +12,11 @@ export class ActivityServiceService {
get(){
return this.listactivity=ACTIVITIES;
}
getByType(type:string){
return this.listactivity = ACTIVITIES.filter(activity => activity.type === type)
}
getname(activityname : string) {
const activity = ACTIVITIES.find(activity => activity.name === activityname);
if (!activity) {
......
......@@ -4,12 +4,13 @@ import { ActivityComponent } from './activity/activity.component';
import { DetailActivityComponent } from './detail-activity/detail-activity.component';
import { ListactivityComponent } from './listactivity/listactivity.component';
import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
import { ChangePageComponent } from './change-page/change-page.component';
const routes: Routes = [
{path:'activity', component:ListactivityComponent},
{path:'activities/:type', component:ListactivityComponent},
{path:'activity/:name', component:DetailActivityComponent},
{path:"ActivityCards", component:ActivityCardsComponent},
{path:'', component:ChangePageComponent}
];
@NgModule({
......
<router-outlet></router-outlet>
<app-change-page></app-change-page>
import { Component } from '@angular/core';
import { Component, Input, ChangeDetectorRef } from '@angular/core';
import { Activity } from '../activity';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivityServiceService } from '../activity-service.service';
@Component({
......@@ -8,8 +9,16 @@ import { ActivityServiceService } from '../activity-service.service';
styleUrls: ['./listactivity.component.css']
})
export class ListactivityComponent {
act: Activity[];
constructor(private activityservice : ActivityServiceService){
this.act = this.activityservice.get();
act!: Activity[];
type!: string;
constructor(private activityservice : ActivityServiceService, private route: ActivatedRoute, private router: Router) {
}
ngOnInit():void{
const listActivityType = this.route.snapshot.params['type'];
this.type = listActivityType
this.act = this.activityservice.getByType(this.type);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment