From bb278084a80ad0cd13639677ce1ca8f594f3ab05 Mon Sep 17 00:00:00 2001 From: Jason McCollum Date: Tue, 18 Jun 2024 14:23:53 -0700 Subject: [PATCH] Add reset button to timeline view --- .../app/core/actions/routes-chart.actions.ts | 7 +++++++ .../app/core/containers/app/app.component.ts | 1 + .../metadata-control-bar.component.html | 3 ++- .../routes-chart-control-bar.component.html | 5 ++++- .../routes-chart-control-bar.component.ts | 4 ++++ .../core/effects/routes-chart.effects.spec.ts | 2 ++ .../app/core/effects/routes-chart.effects.ts | 19 +++++++++++++++++++ .../app/core/reducers/routes-chart.reducer.ts | 12 +++++++++++- .../table-control-bar.component.html | 11 +++++++++++ .../table-control-bar.component.scss | 6 ++++++ .../table-control-bar.component.ts | 2 ++ .../undo-redo/undo-redo.component.scss | 2 +- .../src/assets/images/reset_settings.svg | 1 + 13 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 application/frontend/src/assets/images/reset_settings.svg diff --git a/application/frontend/src/app/core/actions/routes-chart.actions.ts b/application/frontend/src/app/core/actions/routes-chart.actions.ts index 3d177061..1da4b964 100644 --- a/application/frontend/src/app/core/actions/routes-chart.actions.ts +++ b/application/frontend/src/app/core/actions/routes-chart.actions.ts @@ -89,3 +89,10 @@ export const mouseEnterVisitRequest = createAction( ); export const mouseExitVisitRequest = createAction('[RoutesChart] Mouse Exit Visit Request'); + +export const resetView = createAction('[RoutesChart] Reset View'); + +export const setView = createAction( + '[RoutesChart] Set View', + props<{ selectedRouteIds: number[]; rangeOffset: number }>() +); diff --git a/application/frontend/src/app/core/containers/app/app.component.ts b/application/frontend/src/app/core/containers/app/app.component.ts index 00142f10..6368f9a7 100644 --- a/application/frontend/src/app/core/containers/app/app.component.ts +++ b/application/frontend/src/app/core/containers/app/app.component.ts @@ -83,6 +83,7 @@ export class AppComponent { 'pdf', 'play', 'pickup', + 'reset_settings', 'route', 'satellite', 'save_alt', diff --git a/application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.html b/application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.html index 72a99e0f..65819392 100644 --- a/application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.html +++ b/application/frontend/src/app/core/containers/metadata-control-bar/metadata-control-bar.component.html @@ -1,7 +1,8 @@ + (displayColumnChange)="onDisplayColumnChange($event)" + [page]="page$ | async"> + { { selector: RoutesChartSelectors.selectRangeOffset, value: 0 }, { selector: ShipmentModelSelectors.selectGlobalDuration, value: null }, { selector: RoutesChartSelectors.selectFilteredRoutes, value: [] }, + { selector: RoutesChartSelectors.selectDefaultRangeOffset, value: 0 }, + { selector: RoutesChartSelectors.selectRoutes, value: [] } ], }), ], diff --git a/application/frontend/src/app/core/effects/routes-chart.effects.ts b/application/frontend/src/app/core/effects/routes-chart.effects.ts index d6147938..af16c3df 100644 --- a/application/frontend/src/app/core/effects/routes-chart.effects.ts +++ b/application/frontend/src/app/core/effects/routes-chart.effects.ts @@ -76,5 +76,24 @@ export class RoutesChartEffects { ) ); + resetViewEffect$ = createEffect(() => + this.actions$.pipe( + ofType(RoutesChartActions.resetView), + mergeMap(() => + this.store.pipe( + select(RoutesChartSelectors.selectRoutes), + take(1), + withLatestFrom(this.store.pipe(select(RoutesChartSelectors.selectDefaultRangeOffset))), + map(([routes, defaultRangeOffset]) => { + return RoutesChartActions.setView({ + selectedRouteIds: routes.map((r) => r.id), + rangeOffset: defaultRangeOffset, + }); + }) + ) + ) + ) + ); + constructor(private actions$: Actions, private store: Store) {} } diff --git a/application/frontend/src/app/core/reducers/routes-chart.reducer.ts b/application/frontend/src/app/core/reducers/routes-chart.reducer.ts index 34319d07..47e805e9 100644 --- a/application/frontend/src/app/core/reducers/routes-chart.reducer.ts +++ b/application/frontend/src/app/core/reducers/routes-chart.reducer.ts @@ -137,7 +137,17 @@ export const reducer = createReducer( [] ), }; - }) + }), + on(RoutesChartActions.setView, (state, props) => ({ + ...state, + selectedRoutes: props.selectedRouteIds, + filters: [], + pageIndex: 0, + pageSize: 50, + addedRange: 0, + rangeIndex: chartConfig.day.defaultRangeIndex, + rangeOffset: props.rangeOffset, + })) ); export const selectSelectedRoutes = (state: State): number[] => state.selectedRoutes; diff --git a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.html b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.html index 365b6f12..666b11c4 100644 --- a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.html +++ b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.html @@ -1,6 +1,17 @@ + diff --git a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.scss b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.scss index b4544fb8..90122a7d 100644 --- a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.scss +++ b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.scss @@ -29,3 +29,9 @@ app-table-control-bar { pointer-events: none; } } + +@media only screen and (max-width: 1600px) { + .reset-text { + display: none; + } +} diff --git a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.ts b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.ts index c84a0ea3..f02c6fe3 100644 --- a/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.ts +++ b/application/frontend/src/app/shared/components/table-control-bar/table-control-bar.component.ts @@ -40,6 +40,8 @@ export class TableControlBarComponent { @Input() page: Page; + @Output() resetView = new EventEmitter(); + Page = Page; onDisplayColumnChange(column: Column, active: boolean): void { diff --git a/application/frontend/src/app/shared/components/undo-redo/undo-redo.component.scss b/application/frontend/src/app/shared/components/undo-redo/undo-redo.component.scss index e9ae92fc..87971602 100644 --- a/application/frontend/src/app/shared/components/undo-redo/undo-redo.component.scss +++ b/application/frontend/src/app/shared/components/undo-redo/undo-redo.component.scss @@ -1,4 +1,4 @@ -@media only screen and (max-width: 1500px) { +@media only screen and (max-width: 1600px) { .undo-redo-text { display: none; } diff --git a/application/frontend/src/assets/images/reset_settings.svg b/application/frontend/src/assets/images/reset_settings.svg new file mode 100644 index 00000000..73c6d2d2 --- /dev/null +++ b/application/frontend/src/assets/images/reset_settings.svg @@ -0,0 +1 @@ + \ No newline at end of file