Commit b01b3e71 authored by Léonard Treille's avatar Léonard Treille
Browse files

Start line list style refactoring

parent 61361d46
import { NgModule } from '@angular/core';
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LinesResolver } from 'src/app/features/lines/lines.resolver';
import { HorairesLignesComponent } from '@pages/horaires-lignes/horaires-lignes.component';
const routes: Routes = [];
const routes: Routes = [
{
path: '', component: HorairesLignesComponent,
resolve: {
lines: LinesResolver
}
},
// {
// path: 'detailligne/:id', component: DetailLigneComponent, data: {
// title: 'detail de la ligne ',
// description: 'Accedez à plus de details sur votre ligne',
// topButtonWithoutToolbar: true
// },
// },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This diff is collapsed.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'm-affluence';
title = 'm-affluence';
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatCardModule } from '@angular/material/card';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WINDOW_PROVIDERS } from './window.provider';
import { HorairesLignesComponent } from '@pages/horaires-lignes/horaires-lignes.component';
import { LogoLigneComponent } from '@components/logo-ligne/logo-ligne.component';
import { GroupByPipe } from '@pipes/groupBy.pipe';
@NgModule({
declarations: [
AppComponent
AppComponent,
HorairesLignesComponent,
LogoLigneComponent,
GroupByPipe,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
BrowserAnimationsModule,
HttpClientModule,
MatCardModule,
MatSidenavModule,
MatIconModule,
],
providers: [],
providers: [WINDOW_PROVIDERS],
bootstrap: [AppComponent]
})
export class AppModule { }
export interface Line {
color: string;
gtfsId: string;
id: string;
longName: string;
mode: string;
shortName: string;
textColor: string;
type: string;
}
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { LinesService } from './lines.service';
@Injectable({
providedIn: 'root'
})
export class LinesResolver implements Resolve<any> {
constructor(private linesService: LinesService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.linesService.lines) {
return this.linesService.lines;
}
return new Promise((resolve) => {
this.linesService.getLines().subscribe((lines) => {
this.linesService.lines = lines;
resolve(lines);
});
});
}
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { domain } from '@helpers/domain.helpers';
import { Line } from './lines.model';
@Injectable({
providedIn: 'root'
})
export class LinesService {
lines: Line[];
constructor(private http: HttpClient) { }
getLines(): Observable<Line[]> {
return this.http.get<Line[]>(`${domain}/api/routers/default/index/routes`);
}
}
import { environment } from 'src/environments/environment';
let _domain = 'http://localhost:3000';
if (environment.api === 'test') {
_domain = 'https://datatest.metromobilite.fr';
}
if (environment.api === 'testOuProd') {
if (window.location.hostname === 'app.metromobilite.fr') {
_domain = 'https://data.metromobilite.fr';
} else if (['apptest.metromobilite.fr', 'pwa.passmobilites.app'].includes(window.location.hostname)) {
_domain = 'https://datatest.metromobilite.fr';
} else {
_domain = 'https://data.metromobilite.fr';
}
}
export const domain = _domain;
const cssDeclaration = window.getComputedStyle(document.documentElement);
export namespace Style {
export function getProperty(name: string): string {
return cssDeclaration.getPropertyValue(name);
}
export const spacing = getProperty('--spacing');
export const shapeRadius = getProperty('--shape-radius');
export const mpwaBreakpoint = getProperty('--mpwa-breakpoint');
}
<mat-sidenav-container autosize class="app-layout">
<mat-sidenav-content>
<h1>Fréquentation aux arrêts</h1>
<div class="m-toolbar search-bar no-padding affluence">
<button id="search" mat-ripple appSearchDialog types="clusters" (closed)="onSearchClosed($event)" class="search-bar-input">
<mat-icon>search</mat-icon>
<span>Chercher un arrêt</span>
</button>
</div>
<div class="content end-bg">
<ng-container *ngFor="let obj of lines | groupBy:'type'">
<ng-container *ngIf="obj.key!='SCOL' && obj.key!='TAD' && obj.key!='SNC'">
<mat-card [ngSwitch]="obj.key" class="line-card dark-overlay-2">
<ng-container *ngSwitchCase="'TRAM'">
<mat-card-header>
<mat-card-title>Tram</mat-card-title>
<mat-card-subtitle>4h30 à 1h</mat-card-subtitle>
<div class="tram deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'CHRONO'">
<mat-card-header>
<mat-card-title>Chrono</mat-card-title>
<mat-card-subtitle>5h à 1h</mat-card-subtitle>
<div class="chrono deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'PROXIMO'">
<mat-card-header>
<mat-card-title>Proximo</mat-card-title>
<mat-card-subtitle>5h à 21h</mat-card-subtitle>
<div class="proximo deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'FLEXO'">
<mat-card-header>
<mat-card-title>Flexo</mat-card-title>
<mat-card-subtitle>6h30 à 20h</mat-card-subtitle>
<div class="flexo deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'C38'">
<mat-card-header>
<mat-card-title>Transisère</mat-card-title>
<div class="transisere deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'Structurantes'">
<mat-card-header>
<mat-card-title>TouGo</mat-card-title>
<div class="gresivaudan deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'Secondaires'">
</ng-container>
<ng-container *ngSwitchCase="'Urbaines'">
<mat-card-header>
<mat-card-title>Pays Voironnais</mat-card-title>
<div class="voironnais deco" aria-hidden="true"></div>
</mat-card-header>
</ng-container>
<ng-container *ngSwitchCase="'Interurbaines'">
</ng-container>
<mat-card-content>
<ul [class.space-between]="['C38', 'Secondaires'].includes(obj.key)">
<li *ngFor="let line of obj.value">
<a *ngIf=" line.type!='SCOL' && line.type!='SNC' && line.type!='TAD'" [routerLink]="['/horaires/lignes/detailligne', line.id]"
[state]="{ feature: line }">
<app-logo-ligne [ligne]="line" height="40" [class.circle]="line.type == 'TRAM' || line.type == 'CHRONO'"
[class.rounded]="!(line.type == 'TRAM' || line.type == 'CHRONO')"></app-logo-ligne>
</a>
</li>
</ul>
</mat-card-content>
</mat-card>
</ng-container>
</ng-container>
</div>
</mat-sidenav-content>
<mat-sidenav [mode]="sidenavMode" [opened]="sidenavOpened" position="end" class="aside">
<p>Right aside</p>
</mat-sidenav>
</mat-sidenav-container>
@import "../../../styles/variables";
.content {
transition: all 0.2s linear;
width: 100%;
box-sizing: border-box;
@media screen and (min-width: $mpwa-breakpoint) {
width: $content-width-desktop;
}
}
.mat-card-header {
margin-bottom: $spacing * 2;
}
:host {
.mat-card-content {
padding-bottom: 0;
}
}
ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
list-style-type: none;
li {
padding: 0;
margin: 0 $spacing $spacing 0;
flex-basis: 40px;
}
&.space-between {
justify-content: space-between;
li {
margin-right: 0;
}
}
}
h1 {
padding: $spacing;
margin-top: 140px;
margin-bottom: 19px;
font: Bold 32px/43px Roboto;
}
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { LinesService } from '@features/lines/lines.service';
import { Line } from '@features/lines/lines.model';
import { BreakpointService } from '@services/breakpoint.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
templateUrl: './horaires-lignes.component.html',
styleUrls: ['./horaires-lignes.component.scss']
})
export class HorairesLignesComponent implements OnInit, OnDestroy {
lines: Line[] = [];
sidenavMode = 'side';
sidenavOpened = false;
private unsubscriber = new Subject<void>();
constructor(
private linesService: LinesService,
private breakpointService: BreakpointService
) { }
ngOnInit() {
this.lines = this.linesService.lines;
this.breakpointService.breakpoint.pipe(takeUntil(this.unsubscriber)).subscribe((result) => {
this.sidenavMode = result.matches ? 'side' : 'over';
this.sidenavOpened = result.matches ? true : false;
});
}
ngOnDestroy(): void {
this.unsubscriber.next();
this.unsubscriber.complete();
}
onSearchClosed(result: any) {
if (result) {
// this.router.navigate(
// ['/detailpoi', result.feature.properties.type, result.feature.properties.code],
// { state: { feature: result.feature } }
// );
}
}
}
import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Style } from '@helpers/style.helper';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class BreakpointService {
breakpoint: Observable<BreakpointState>;
constructor(private breakpointObserver: BreakpointObserver) {
this.breakpoint = this.breakpointObserver.observe([`(min-width: ${Style.mpwaBreakpoint})`]);
}
}
@import "~@metromobilite/m-theme/style";
@import "styles/classes";
@import "styles/components/card";
@import "styles/components/aside";
@import "styles/components/toolbar";
:root {
--spacing: #{$spacing};
--shape-radius: #{$shape-radius};
--mpwa-breakpoint: #{$mpwa-breakpoint};
}
html,
body {
height: 100%;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment