Skip to content
Snippets Groups Projects
Commit 05cf9eb7 authored by ncastejon's avatar ncastejon
Browse files

Add actors page. Get data from remote loopback REST api

parent 5ed74747
Branches
Tags
No related merge requests found
Pipeline #
Showing
with 99 additions and 1 deletion
...@@ -25,6 +25,9 @@ ...@@ -25,6 +25,9 @@
<a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.approach.uri]" routerLinkActive="active-link" i18n="@@header.approach"> <a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.approach.uri]" routerLinkActive="active-link" i18n="@@header.approach">
Approach Approach
</a> </a>
<a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.actors.uri]" routerLinkActive="active-link" i18n="@@header.actors">
Actors
</a>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
......
<div class="section">
<div class="container is-fluid">
<div class="columns is-multiline">
<div class="column has-text-centered is-4" *ngFor="let actor of actors">
<div class="card">
<a href="{{actor.website}}"><img src="{{actor.logo}}" alt="{{actor.name}}" height="100"></a>
<p>{{actor.description}}</p>
</div>
</div>
</div>
</div>
</div>
img {
max-height: 100px;
}
.card {
padding: 15px;
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { ActorsService } from '../../services/actors.service';
@Component({
selector: 'app-actors',
templateUrl: './actors.component.html',
styleUrls: ['./actors.component.scss'],
})
export class ActorsComponent implements OnInit {
actors: any[];
constructor(
private _actorsService: ActorsService,
) { }
ngOnInit() {
this._actorsService.getActors().subscribe((actors) => {
this.actors = actors;
});
}
}
...@@ -9,6 +9,7 @@ import { ApproachComponent } from './approach/approach.component'; ...@@ -9,6 +9,7 @@ import { ApproachComponent } from './approach/approach.component';
import { WordpressPostsListTileComponent } from './wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component'; import { WordpressPostsListTileComponent } from './wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component';
import { WordpressPostDetailComponent } from './wordpress-post-detail/wordpress-post-detail.component'; import { WordpressPostDetailComponent } from './wordpress-post-detail/wordpress-post-detail.component';
import { WordpressPageErrorComponent } from './wordpress-page-error/wordpress-page-error.component'; import { WordpressPageErrorComponent } from './wordpress-page-error/wordpress-page-error.component';
import { ActorsComponent } from './actors/actors.component';
export { export {
WordpressPageComponent, WordpressPageComponent,
...@@ -21,6 +22,7 @@ export { ...@@ -21,6 +22,7 @@ export {
SiteMapComponent, SiteMapComponent,
ApproachComponent, ApproachComponent,
WordpressPageErrorComponent, WordpressPageErrorComponent,
ActorsComponent,
}; };
// tslint:disable-next-line:variable-name // tslint:disable-next-line:variable-name
...@@ -35,4 +37,5 @@ export const EditorialisationComponents = [ ...@@ -35,4 +37,5 @@ export const EditorialisationComponents = [
SiteMapComponent, SiteMapComponent,
ApproachComponent, ApproachComponent,
WordpressPageErrorComponent, WordpressPageErrorComponent,
ActorsComponent,
]; ];
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { HomeComponent, ApproachComponent, AccessibilityComponent, import { HomeComponent, ApproachComponent, AccessibilityComponent,
SiteMapComponent, LegalMentionsComponent } from './components'; SiteMapComponent, LegalMentionsComponent, ActorsComponent } from './components';
import { PageResolver } from './resolvers/page.resolver'; import { PageResolver } from './resolvers/page.resolver';
import { WordpressPostDetailComponent } from './components/wordpress-post-detail/wordpress-post-detail.component'; import { WordpressPostDetailComponent } from './components/wordpress-post-detail/wordpress-post-detail.component';
import { PostDetailResolver } from './resolvers/post-detail.resolver'; import { PostDetailResolver } from './resolvers/post-detail.resolver';
...@@ -31,6 +31,13 @@ export const routes: Routes = [ ...@@ -31,6 +31,13 @@ export const routes: Routes = [
title: AppRoutes.approach.title, title: AppRoutes.approach.title,
}, },
}, },
{
path: AppRoutes.actors.uri,
component: ActorsComponent,
data: {
title: AppRoutes.actors.title,
},
},
{ {
path: AppRoutes.accessibility.uri, path: AppRoutes.accessibility.uri,
component: AccessibilityComponent, component: AccessibilityComponent,
......
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
@Injectable()
export class ActorsService {
constructor(
private _httpClient: HttpClient,
) {}
getActors() {
return this._httpClient.get<any[]>(environment.loopback.url + '/actors');
}
}
import { EditorialisationService } from './editorialisation.service'; import { EditorialisationService } from './editorialisation.service';
import { ActorsService } from './actors.service';
export { export {
EditorialisationService, EditorialisationService,
ActorsService,
}; };
// tslint:disable-next-line:variable-name // tslint:disable-next-line:variable-name
export const EditorialisationServices = [ export const EditorialisationServices = [
EditorialisationService, EditorialisationService,
ActorsService,
]; ];
...@@ -28,6 +28,13 @@ export const AppRoutes = { ...@@ -28,6 +28,13 @@ export const AppRoutes = {
en: 'Site map', en: 'Site map',
}, },
}, },
actors: {
uri: 'acteurs',
title: {
fr: 'Acteurs',
en: 'Actors',
},
},
legalNotices: { legalNotices: {
uri: 'mentions-legales', uri: 'mentions-legales',
title: { title: {
......
...@@ -19,6 +19,10 @@ export const environment = { ...@@ -19,6 +19,10 @@ export const environment = {
url: 'https://matomo-intothesky.alpha.grandlyon.com', url: 'https://matomo-intothesky.alpha.grandlyon.com',
}, },
loopback: {
url: servicesProxyUrl + '/loopback',
},
// Path to the built app in a particular language // Path to the built app in a particular language
angularAppHost: { angularAppHost: {
fr: '/fr', fr: '/fr',
......
...@@ -19,6 +19,10 @@ export const environment = { ...@@ -19,6 +19,10 @@ export const environment = {
url: 'https://matomo-intothesky.alpha.grandlyon.com', url: 'https://matomo-intothesky.alpha.grandlyon.com',
}, },
loopback: {
url: 'http://localhost:3000/api',
},
// Path to the built app in a particular language // Path to the built app in a particular language
angularAppHost: { angularAppHost: {
fr: '/fr', fr: '/fr',
......
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
<source>Approach</source> <source>Approach</source>
<target>Approach</target> <target>Approach</target>
</trans-unit> </trans-unit>
<trans-unit id="header.actors" datatype="html">
<source>Actors</source>
<target>Actors</target>
</trans-unit>
<trans-unit id="footer.rss" datatype="html"> <trans-unit id="footer.rss" datatype="html">
<source>RSS Feed (new window)</source> <source>RSS Feed (new window)</source>
<target>RSS Feed (new window)</target> <target>RSS Feed (new window)</target>
......
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
<source>Approach</source> <source>Approach</source>
<target>La démarche</target> <target>La démarche</target>
</trans-unit> </trans-unit>
<trans-unit id="header.actors" datatype="html">
<source>Actors</source>
<target>Les acteurs</target>
</trans-unit>
<trans-unit id="footer.rss" datatype="html"> <trans-unit id="footer.rss" datatype="html">
<source>RSS Feed (new window)</source> <source>RSS Feed (new window)</source>
<target>Flux RSS (nouvelle fenêtre)</target> <target>Flux RSS (nouvelle fenêtre)</target>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment