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

Import and update some element from pwa

parent c6407e09
import { Component, OnInit, Input, HostBinding } from '@angular/core';
@Component({
selector: 'app-logo-ligne',
template: `
<svg [ngStyle]="{'width.px':width, 'height.px':height, 'background':'#'+ligne?.color}" [attr.viewBox]="viewBoxSize">
<title>{{ligne?.longName}}</title>
<!--<ng-container *ngIf="this.cercle; else rectangle">
<circle class="svgFond" cx="50" cy="50" r="50" stroke="white" stroke-width="0" [attr.fill]="'#'+ligne?.color" />
</ng-container>
<ng-template #rectangle>
<rect class="svgFond" [attr.x]="x" y="10" [attr.width]="widthRect" stroke="white" stroke-width="0" height="80" rx="5" ry="5" [attr.fill]="'#'+ligne?.color" />
</ng-template>-->
<text class="svgNumLigne" x="50%" y="50%" text-anchor="middle" dy="15px" [attr.fill]="'#'+ligne?.textColor">{{ligne?.shortName}}</text>
</svg>
`,
styles: [
':host, svg { display: block; } svg { transition: all 250ms; }',
'svg { font-size: 40px; font-family: Roboto; font-weight:bold; stroke-width:6px; }',
]
})
export class LogoLigneComponent implements OnInit {
@Input() ligne: any;
@Input() @HostBinding('style.min-height.px') height: number;
@Input() @HostBinding('style.min-width.px') width: number;
// width:number;
viewBoxSize: any;
id: any;
x: string;
widthRect: string;
cercle: boolean;
constructor() { }
ngOnInit() {
if (!this.ligne) return 'Erreur ligne';
if (this.ligne.type === 'SNC') {
this.ligne.shortName = 'TER';
}
if (this.ligne.type === 'TRAM' || this.ligne.type === 'CHRONO') {// Cercle
this.cercle = true;
this.viewBoxSize = '0 0 100 100';
if (!this.width) this.width = this.height;
} else if (this.ligne.type === 'FLEXO' || this.ligne.type === 'PROXIMO' || this.ligne.type === 'NAVETTE' || this.ligne.shortName.length <= 2) {// carré
this.cercle = false;
this.viewBoxSize = '0 0 100 100';
// this.x = '5';
// this.widthRect = '90';
if (!this.width) this.width = this.height;
} else {// rectangle
this.cercle = false;
this.viewBoxSize = '0 0 125 100';
// this.x = '10';
// this.widthRect = '172';
if (!this.width) this.width = 88;
}
}
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'groupBy' })
export class GroupByPipe implements PipeTransform {
transform(collection: Array<any>, property: string): Array<any> {
// prevents the application from breaking if the array of objects doesn't exist yet
if (!collection) {
return null;
}
const groupedCollection = collection.reduce((previous, current) => {
if (!previous[current[property]]) {
previous[current[property]] = [current];
} else {
previous[current[property]].push(current);
}
return previous;
}, {});
// this will return an array of objects, each object containing a group of objects
return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
}
}
import { InjectionToken, FactoryProvider } from '@angular/core';
export const WINDOW = new InjectionToken<Window>('window');
const windowProvider: FactoryProvider = {
provide: WINDOW,
useFactory: () => window
};
export const WINDOW_PROVIDERS = [
windowProvider
];
export const environment = {
production: true
production: true,
api: 'testOuProd',
// matomo: false,
};
......@@ -3,7 +3,9 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
production: false,
api: 'test',
// matomo: false,
};
/*
......
@import "./variables";
.app-layout {
@media screen and (min-width: $mpwa-breakpoint) {
width: $content-width-desktop + $spacing * 4 + 328px;
margin: auto;
}
}
// @import "~@angular/material/theming";
@import "~@metromobilite/m-theme/variables";
$font-family: Roboto, "Helvetica Neue", sans-serif;
$content-width-desktop: 439px;
/************ Breakpoints ******************/
$mpwa-breakpoint: $content-width-desktop + $spacing * 2 + 328px;
// /************ Colors ***********************/
$mat-light-theme-background: map-merge(
$mat-light-theme-background,
(
m-icon: map_get($mat-grey, 300),
m-leg-default: map_get($mat-grey, 300),
m-filtertc-head: map_get($mat-grey, 800),
m-backdrop: rgba(0, 0, 0, 0.32),
m-darker-bg: map_get($mat-grey, 200),
)
);
$mpwa-light-background: $mat-light-theme-background;
$mat-dark-theme-background: map-merge(
$mat-dark-theme-background,
(
m-icon: map_get($mat-grey, 300),
m-leg-default: #39343c,
m-filtertc-head: map_get($mat-grey, 800),
m-backdrop: rgba(0, 0, 0, 0.32),
)
);
$mpwa-dark-background: $mat-dark-theme-background;
$mat-light-theme-foreground: map-merge(
$mat-light-theme-foreground,
(
white-text: #fff,
m-sub-text: map_get($mat-grey, 500),
m-text-grey: map_get($mat-grey, A700),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
m-steps-counter: map_get($mat-grey, 700),
m-drag-handle: $dark-dividers,
)
);
$mpwa-light-foreground: $mat-light-theme-foreground;
$mat-dark-theme-foreground: map-merge(
$mat-dark-theme-foreground,
(
m-sub-text: map_get($mat-grey, 500),
m-text-grey: map_get($mat-grey, A700),
m-steps-counter: map_get($mat-grey, 700),
m-drag-handle: $light-dividers,
)
);
$mpwa-dark-foreground: $mat-dark-theme-foreground;
$mpwa-toolbar-height: $toolbar-height;
$mpwa-toolbar-main-navigation-height: $toolbar-main-nav-height;
$mpwa-search-bar-height: 48px;
$mpwa-drawer-header-height: 73px;
$mpwa-drawer-offset: $mpwa-search-bar-height + ($spacing * 2);
$mpwa-light-box-shadow: 0 4px 8px rgba(black, 0.5);
$mpwa-dark-box-shadow: 0 4px 8px rgba(black, 0.7);
$mpwa-time-fz: $header-fz-big;
$mpwa-time-fz-next: $header-fz-big / 2;
$m-card-dark-bg: dark-color-overlay(2);
$sticky-top: 218px;
.mat-drawer-container {
@media screen and (min-width: $mpwa-breakpoint) {
&,
.mat-drawer,
.mat-drawer-inner-container {
// Fix sticky issue in sidenav
overflow: visible !important;
}
body.light-theme & .mat-drawer,
body.dark-theme & .mat-drawer {
background: transparent;
border: none;
}
}
}
.aside {
width: 304px;
@media screen and (min-width: $mpwa-breakpoint) {
width: 328px;
.mat-drawer-inner-container {
position: sticky;
top: $sticky-top;
height: auto;
body.dark-theme & {
border: solid 1px rgba(255, 255, 255, 0.12);
background: map-get($mpwa-dark-background, container);
border-radius: $shape-radius;
box-sizing: border-box;
padding: $spacing * 2;
}
}
}
}
@import "../variables";
.mat-card {
body.dark-theme & {
background: $m-card-dark-bg;
}
body.light-theme & {
background: map-get($mpwa-light-background, background);
}
&.line-card {
margin: $spacing;
padding: $spacing * 2 0 $spacing 0;
.mat-card-title {
font-size: $default-fz;
margin: 0;
}
.mat-card-subtitle {
font-size: $default-fz - 0.2rem;
margin: 0;
&:not(:first-child) {
margin-top: $spacing;
}
body.dark-theme & {
opacity: 0.7;
}
}
.mat-card-header {
align-items: center;
margin-bottom: $spacing * 2;
}
.mat-card-header-text {
flex: 1;
display: flex;
flex-direction: column;
}
.mat-card-content {
padding: $spacing;
}
.deco {
height: 35px;
flex-grow: 1;
margin-left: $spacing * 2;
background-position: top right;
background-repeat: no-repeat;
position: relative;
margin-right: $spacing;
&::before {
content: "";
display: block;
width: 42px;
height: 100%;
body.dark-theme & {
background: linear-gradient(to right, $m-card-dark-bg, rgba($m-card-dark-bg, 0));
}
body.light-theme & {
background: linear-gradient(
to right,
map-get($mpwa-light-background, background),
rgba(map-get($mpwa-light-background, background), 0)
);
}
}
}
.tram {
background-image: url("~/assets/bus/Tram.png");
}
.chrono {
background-image: url("~/assets/bus/Chronos.png");
}
.proximo {
background-image: url("~/assets/bus/Proximos.png");
}
.flexo {
background-image: url("~/assets/bus/Flexos.png");
}
.transisere {
background-image: url("~/assets/bus/transisere_car.png");
}
.gresivaudan {
background-image: url("~/assets/bus/TouGo.png");
}
.voironnais {
background-image: url("~/assets/bus/Voironnais.png");
}
}
&.plan-card {
margin: $spacing;
padding: 0;
.mat-card-header {
padding: $spacing * 2;
}
.mat-card-header-text {
margin: 0;
}
}
}
@import "../variables";
.m-toolbar,
.mat-toolbar {
&.search-bar {
@extend .drop-shadow;
pointer-events: auto;
box-sizing: border-box;
z-index: 1;
user-select: none;
body.dark-theme & {
color: map-get($mpwa-dark-foreground, text);
}
body.light-theme & {
color: map-get($mpwa-light-foreground, text);
}
&.floating {
margin: $spacing;
padding: 0;
border-radius: $shape-radius;
overflow: hidden;
width: auto;
body.dark-theme & {
background: dark-color-overlay(2);
}
body.light-theme & {
background: light-color-overlay(0);
}
}
&.affluence {
padding: 0;
margin: 0 $spacing;
border-radius: $shape-radius;
background: transparent;
overflow: hidden;
width: $content-width-desktop - $spacing * 2;
margin-bottom: 68px;
.search-bar-input {
padding-left: $spacing * 3;
body.dark-theme & {
background: dark-color-overlay(2);
}
body.light-theme & {
background: light-color-overlay(0);
}
}
}
@media screen and (min-width: $mpwa-breakpoint + 1) {
&.floating {
border-radius: 0;
margin: 0;
padding: $spacing;
box-shadow: none;
}
.search-bar-input {
body.dark-theme & {
border: 1px solid map-get($mpwa-dark-foreground, divider);
}
body.light-theme & {
border: 1px solid map-get($mpwa-light-foreground, divider);
}
}
}
}
&.search-point {
padding: 0;
overflow: hidden;
width: auto;
body.dark-theme & {
background: dark-color-overlay(2);
}
body.light-theme & {
background: light-color-overlay(2);
}
}
.search-bar-input {
background: transparent;
border: 1px solid transparent;
width: 100%;
box-sizing: border-box;
height: $mpwa-search-bar-height;
border-radius: $shape-radius;
overflow: hidden;
line-height: $mpwa-search-bar-height;
display: flex;
align-items: center;
padding-left: 40px + ($spacing * 2);
padding-right: $spacing * 2;
text-align: left;
transition: all 250ms;
> span {
flex: 1;
}
body.dark-theme & {
color: rgba(map-get($mpwa-dark-foreground, text), 0.7);
&.error {
border: 1px solid map-get($dark-warn, default);
}
}
body.light-theme & {
color: rgba(map-get($mpwa-light-foreground, text), 0.7);
&.error {
border: 1px solid map-get($light-warn, default);
}
}
.search-point & {
padding-right: 40px + ($spacing * 2);
}
&:focus {
outline: none;
body.dark-theme & {
border: 1px solid map-get($dark-primary, default);
}
body.light-theme & {
border: 1px solid map-get($light-primary, default);
}
}
@media screen and (min-width: $mpwa-breakpoint + 1) {
body.dark-theme & {
border: 1px solid map-get($mpwa-dark-foreground, divider);
}
body.light-theme & {
border: 1px solid map-get($mpwa-light-foreground, divider);
}
}
}
&:not(.floating) {
body.dark-theme & .search-bar-input:not(:focus):not(.error) {
border: 1px solid map-get($mpwa-dark-foreground, divider);
}
body.light-theme & .search-bar-input:not(:focus):not(.error) {
border: 1px solid map-get($mpwa-light-foreground, divider);
}
}
&.no-padding {
padding: 0;
}
@media screen and (min-width: $mpwa-breakpoint + 1) {
&,
&.search-bar,
&.search-bar.above {
width: 600px;
}
}
}
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