Skip to content

Commit

Permalink
fix: review part two
Browse files Browse the repository at this point in the history
  • Loading branch information
MarioCastigliano committed Dec 12, 2024
1 parent 77f0d3c commit 132f2d6
Show file tree
Hide file tree
Showing 23 changed files with 660 additions and 285 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
title: 'experimental/sbb-pearl-chain',
title: 'experimental/sbb-pearl-chain-legacy',
};

export default meta;
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class SbbPearlChainLegacyElement extends LitElement {
public static override styles: CSSResultGroup = style;

/**
* Define the legs of the pearl-chain.
* Define the legs of the pearl-chain-legacy.
* Format:
* `{"legs": [{"duration": 25}, ...]}`
* `duration` in minutes. Duration of the leg is relative
Expand Down
12 changes: 6 additions & 6 deletions src/elements-experimental/pearl-chain-legacy/readme.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The `sbb-pearl-chain` component displays all parts of a journey, including changes of trains or other kinds of transports.
The `sbb-pearl-chain-legacy` component displays all parts of a journey, including changes of trains or other kinds of transports.
Also, it is possible to render the current position.

The `legs` property is mandatory.
Expand Down Expand Up @@ -54,8 +54,8 @@ This is helpful if you need a specific state of the component.

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | `[]` | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
| `now` | `now` | public | `Date \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
| Name | Attribute | Privacy | Type | Default | Description |
| ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | `[]` | Define the legs of the pearl-chain-legacy. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
| `now` | `now` | public | `Date \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import style from './pearl-chain-time.scss?lit&inline';
import '../pearl-chain-legacy.js';

/**
* Combined with `sbb-pearl-chain`, it displays walk time information.
* Combined with `sbb-pearl-chain-legacy`, it displays walk time information.
*/
export
@customElement('sbb-pearl-chain-time')
Expand Down
2 changes: 1 addition & 1 deletion src/elements-experimental/pearl-chain-time/readme.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
The `sbb-pearl-chain-time` component adds an optional walk icon and a duration in minutes
before and/or after the [sbb-pearl-chain](/docs/experimental-sbb-pearl-chain--docs).
before and/or after the [sbb-pearl-chain-legacy](/docs/experimental-sbb-pearl-chain-legacy--docs).

The walk time indicates that the user has to walk to get to the destination, or to the station to begin the journey.

Expand Down
1 change: 1 addition & 0 deletions src/elements/core/datetime.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './datetime/date-adapter.js';
export * from './datetime/native-date-adapter.js';
export * from './datetime/time-adapter.js';
104 changes: 104 additions & 0 deletions src/elements/core/datetime/time-adapter.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import { expect } from '@open-wc/testing';

import { TimeAdapter } from './time-adapter.js';

describe('TimeAdapter', () => {
let timeAdapter: TimeAdapter;

beforeEach(() => {
timeAdapter = new TimeAdapter();
});

it('addMilliseconds should return the right value', () => {
let date = new Date(2023, 4, 1, 20, 5, 20, 200);

expect(date.toISOString()).to.be.equal('2023-05-01T18:05:20.200Z');

date = timeAdapter.addMilliseconds(date, 200);
expect(date.toISOString()).to.be.equal('2023-05-01T18:05:20.400Z');

date = timeAdapter.addMilliseconds(date, -300);
expect(date.toISOString()).to.be.equal('2023-05-01T18:05:20.100Z');
});

it('addMinutes should return the right value', () => {
let date = new Date(2023, 4, 1, 20, 5);

expect(date.toISOString()).to.be.equal('2023-05-01T18:05:00.000Z');

date = timeAdapter.addMinutes(date, 20);
expect(date.toISOString()).to.be.equal('2023-05-01T18:25:00.000Z');

date = timeAdapter.addMinutes(date, 150);
expect(date.toISOString()).to.be.equal('2023-05-01T20:55:00.000Z');
});

it('differenceInMilliseconds should return the right value', () => {
let firstDate = new Date(2023, 4, 1, 18, 5);
let secondDate = new Date(2023, 4, 1, 20, 5);

expect(timeAdapter.differenceInMilliseconds(firstDate, secondDate)).to.be.equal(-7200000);

firstDate = new Date(2023, 4, 3, 16, 5);
secondDate = new Date(2023, 4, 3, 8, 5);

expect(timeAdapter.differenceInMilliseconds(firstDate, secondDate)).to.be.equal(28800000);
});

it('differenceInMinutes should return the right value', () => {
let firstDate = new Date(2023, 4, 1, 18, 5);
let secondDate = new Date(2023, 4, 1, 20, 5);

expect(timeAdapter.differenceInMinutes(firstDate, secondDate)).to.be.equal(-120);

firstDate = new Date(2023, 4, 3, 16, 55);
secondDate = new Date(2023, 4, 3, 16, 5);

expect(timeAdapter.differenceInMinutes(firstDate, secondDate)).to.be.equal(50);
});

it('isBefore should return the right value', () => {
let firstDate = new Date(2023, 4, 1, 18, 5);
let secondDate = new Date(2023, 4, 1, 20, 5);

expect(timeAdapter.isBefore(firstDate, secondDate)).to.be.equal(true);

firstDate = new Date(2023, 4, 3, 16, 55);
secondDate = new Date(2023, 4, 3, 16, 5);

expect(timeAdapter.isBefore(firstDate, secondDate)).to.be.equal(false);
});

it('isAfter should return the right value', () => {
let firstDate = new Date(2023, 4, 1, 18, 5);
let secondDate = new Date(2023, 4, 1, 20, 5);

expect(timeAdapter.isAfter(firstDate, secondDate)).to.be.equal(false);

firstDate = new Date(2023, 4, 3, 16, 55);
secondDate = new Date(2023, 4, 3, 16, 5);

expect(timeAdapter.isAfter(firstDate, secondDate)).to.be.equal(true);
});

it('isValid should return the right value', () => {
expect(timeAdapter.isValid(new Date(2023, 4, 1, 18, 5))).to.be.equal(true);
expect(timeAdapter.isValid(new Date(NaN))).to.be.equal(false);
});

it('deserialize should return the right value', () => {
expect(timeAdapter.deserialize(new Date(2023, 4, 1, 18, 5)).toISOString()).to.be.equal(
'2023-05-01T16:05:00.000Z',
);
expect(timeAdapter.deserialize('2022-08-18T04:00').toISOString()).to.be.equal(
'2022-08-18T02:00:00.000Z',
);
expect(timeAdapter.deserialize('1661788000').toISOString()).to.be.equal(
'2022-08-29T15:46:40.000Z',
);
expect(timeAdapter.deserialize(1660628000).toISOString()).to.be.equal(
'2022-08-16T05:33:20.000Z',
);
expect(timeAdapter.isValid(timeAdapter.deserialize('Invalid input'))).to.be.equal(false);
});
});
56 changes: 56 additions & 0 deletions src/elements/core/datetime/time-adapter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export class TimeAdapter {
public constructor() {}

public addMilliseconds(date: Date, amount: number): Date {
const timestamp: number = date.getTime();
return new Date(timestamp + amount);
}

public addMinutes(date: Date, amount: number): Date {
return this.addMilliseconds(date, amount * 60000);
}

public differenceInMilliseconds(firstDate: Date, secondDate: Date): number {
return firstDate.getTime() - secondDate.getTime();
}

public differenceInMinutes(firstDate: Date, secondDate: Date): number {
return this.differenceInMilliseconds(firstDate, secondDate) / 60000;
}

public isBefore(firstDate: Date, secondDate: Date): boolean {
return this.differenceInMilliseconds(firstDate, secondDate) < 0;
}

public isAfter(firstDate: Date, secondDate: Date): boolean {
return this.differenceInMilliseconds(firstDate, secondDate) > 0;
}

/** Checks whether the given `date` is a valid Date. */
public isValid(date: Date | null | undefined): boolean {
return !!date && !isNaN(date.valueOf());
}

/** Creates a Date from a valid input (Date, string or number in seconds). */
public deserialize(date: Date | string | number | null | undefined): Date {
if (typeof date === 'object' && date instanceof Date) {
return date;
} else if (typeof date === 'string') {
if (!date) {
return new Date(NaN);
} else if (!Number.isNaN(+date)) {
return new Date(+date * 1000);
} else {
return new Date(date.includes('T') ? date : date + 'T00:00:00');
}
} else if (typeof date === 'number') {
return new Date(date * 1000);
}

return new Date(NaN);
}

public invalid(): Date {
return new Date(NaN);
}
}
31 changes: 24 additions & 7 deletions src/elements/core/styles/mixins/pearl-chain-bullet.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
--sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
--sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);
--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
--sbb-pearl-chain-bullet-color-irrelzevant: var(--sbb-color-metal);
--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
--sbb-pearl-chain-bullet-animation-duration: 1920ms;
Expand All @@ -19,6 +19,7 @@
--sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(14.14)};
--sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3.5)};
--sbb-pearl-chain-bullet-crossed-border-width: #{functions.px-to-rem-build(1.5)};
--sbb-pearl-chain-bullet-background-color: Canvas;
}

@mixin pearl-chain-bullet {
Expand All @@ -44,8 +45,8 @@
min-width: var(--sbb-pearl-chain-bullet-size-stop);
height: var(--sbb-pearl-chain-bullet-size-stop);
width: var(--sbb-pearl-chain-bullet-size-stop);
border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
background: Canvas;
border: var(--sbb-pearl-chain-bullet-border-width) solid var(--sbb-pearl-chain-bullet-color);
background: var(--sbb-pearl-chain-bullet-background-color);
}

@mixin pearl-chain-bullet-past {
Expand All @@ -68,17 +69,18 @@
}

@mixin pearl-chain-bullet-skipped {
border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
background: Canvas;
border: var(--sbb-pearl-chain-bullet-border-width) solid var(--sbb-pearl-chain-bullet-color);
background: var(--sbb-pearl-chain-bullet-background-color);

&::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%) rotate(45deg);
border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;
background: var(--sbb-pearl-chain-bullet-color-disruption);
border-block-end: var(--sbb-pearl-chain-bullet-crossed-border-width) solid
var(--sbb-pearl-chain-bullet-color-disruption);
background: var(--sbb-pearl-chain-bullet-background-color);
height: var(--sbb-pearl-chain-bullet-crossed-height);
width: var(--sbb-pearl-chain-bullet-crossed-width);

Expand All @@ -88,6 +90,21 @@
}
}

@mixin pearl-chain-bullet-skipped-transparent {
mask: linear-gradient(
45deg,
var(--sbb-color-black) 0%,
var(--sbb-color-black) 48%,
transparent 48%,
transparent 60%,
var(--sbb-color-black) 60%,
var(--sbb-color-black) 100%
);
mask-clip: no-clip;

@include pearl-chain-bullet-skipped;
}

@mixin pearl-chain-bullet-skipped-stop {
--sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
--sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};
Expand Down
Loading

0 comments on commit 132f2d6

Please sign in to comment.