Develop

src/app/pages/admin/albums/albums-overview/albums-overview.component.html

@@ -1,14 +1,17 @@
-<div class="card albums">
+<div class="card albums" *ngIf="vm$ | async as vm">
     <div class="card-body">
         <h5 class="card-title">Album content</h5>
         <div class="form-group form">
             <label for="album">Select an album</label>
-            <select [(ngModel)]="selectedAlbumId" class="form-control albums_select" id="album" required>
-                <option *ngFor="let album of albums" [value]="album.id">{{ album.title }}</option>
+            <select
+                [(ngModel)]="selectedAlbumId"
+                (ngModelChange)="onAlbumSelect($event)"
+                class="form-control albums_select"
+                id="album"
+                required
+            >
+                <option *ngFor="let album of vm.albums" [value]="album.id">{{ album.title }}</option>
             </select>
-            <div>
-                <button class="btn btn-primary" [disabled]="!selectedAlbumId" (click)="onAlbumSelect()">Select</button>
-            </div>
         </div>
 
         <div class="alert alert-warning" *ngIf="showDeleteConfirmation">
@@ -23,17 +26,17 @@ <h5 class="card-title">Album content</h5>
             <button (click)="confirmDelete()" class="btn btn-primary confirm">Confirm</button>
             <button (click)="cancelDelete()" class="btn btn-secondary">Cancel</button>
 
-            <div class="delete-status-container" *ngIf="deleteResult$ | async as deleteResult">
-                <loading-message *ngIf="deleteResult | loading">Deleting location</loading-message>
-                <error-message *ngIf="deleteResult | error">An error occurred while deleting the location</error-message>
+            <div class="delete-status-container" *ngIf="vm.deleteResult">
+                <loading-message *ngIf="vm.deleteResult | loading">Deleting location</loading-message>
+                <error-message *ngIf="vm.deleteResult | error">An error occurred while deleting the location</error-message>
             </div>
         </div>
 
         <photo-table
-            *ngIf="selectedAlbumDetails"
+            *ngIf="vm.selectedAlbumDetails"
             [showDeleteButton]="true"
-            (delete)="onPendingDelete($event)"
-            [photos]="selectedAlbumDetails.photos"
+            (delete)="onPendingDelete($event, vm.selectedAlbumId, vm.selectedAlbumName)"
+            [photos]="vm.selectedAlbumDetails.photos"
         ></photo-table>
     </div>
 </div>

src/app/pages/admin/albums/albums-overview/albums-overview.component.scss

@@ -1,3 +1,5 @@
+@import '../../../../../styles/variables.scss';
+
 .albums {
     &_select {
         margin-bottom: 1rem;
@@ -6,4 +8,12 @@
     .form {
         margin-bottom: 1rem;
     }
+
+    .confirm {
+        margin-right: $margin;
+    }
+
+    .delete-status-container {
+        margin-top: $margin;
+    }
 }

src/app/pages/admin/albums/albums-overview/albums-overview.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { AlbumService } from 'src/app/core/services/album.service';
 import { Album, AlbumDetails } from 'src/app/core/types/album.type';
 import { PhotoTableComponent } from '../../../../core/components/photo-table/photo-table.component';
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { AsyncPipe, JsonPipe, NgFor, NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Observable, ReplaySubject, of, switchMap, tap } from 'rxjs';
+import { Observable, ReplaySubject, combineLatest, map, of, startWith, switchMap, tap } from 'rxjs';
 import { DataStatus, StateStatus } from 'src/app/core/types/data-status.types';
 import { DataStatusPipesModule } from 'src/app/core/pipes/status/data-status-pipes.module';
 import { LoadingMessageComponent } from '../../../../core/components/loading-message/loading-message.component';
@@ -24,28 +24,43 @@ import { NullableDisplayPipe } from '../../../../core/pipes/nullable-display.pip
         NgIf,
         PhotoTableComponent,
         AsyncPipe,
+        JsonPipe,
         DataStatusPipesModule,
         LoadingMessageComponent,
         ErrorMessageComponent,
         NullableDisplayPipe
     ]
 })
 export class AlbumsOverviewComponent {
-    albums: Album[];
-    selectedAlbumId: string;
-    selectedAlbumDetails: AlbumDetails | null;
+    vm$: Observable<{
+        albums: Album[];
+        selectedAlbumId: number | null;
+        selectedAlbumName: string | null;
+        selectedAlbumDetails: AlbumDetails | null;
+        deleteResult: DataStatus<null> | null;
+    }>;
 
+    selectedAlbumId: string;
+    selectedAlbumId$: ReplaySubject<string> = new ReplaySubject();
     deleted$: ReplaySubject<AlbumPhotoDelete | null> = new ReplaySubject<AlbumPhotoDelete | null>();
-    deleteResult$: Observable<DataStatus<null> | null> = new Observable<null>();
-    numberOfItems: number = 50;
 
     photoToDelete: AlbumPhotoDelete;
     showDeleteConfirmation: boolean;
 
     constructor(private readonly _albumService: AlbumService, windowService: WindowService) {
-        this._albumService.getAlbums().subscribe(albums => (this.albums = albums));
-
-        this.deleteResult$ = this.deleted$.pipe(
+        const albums$ = this._albumService.getAlbums();
+        const selectedAlbumDetails$ = this.selectedAlbumId$.pipe(
+            map(albumId => this.getAlbumId(albumId)),
+            switchMap(albumId =>
+                this._albumService.getById(albumId).pipe(
+                    map(albumDetails => {
+                        return { albumDetails, albumId };
+                    })
+                )
+            ),
+            startWith(null)
+        );
+        const deleteResult$ = this.deleted$.pipe(
             switchMap(photoToDelete =>
                 photoToDelete
                     ? this._albumService.deletePhoto(photoToDelete.albumId, photoToDelete.photoId).pipe(
@@ -57,25 +72,32 @@ export class AlbumsOverviewComponent {
                           })
                       )
                     : of(null)
-            )
+            ),
+            startWith(null)
+        );
+
+        this.vm$ = combineLatest([albums$, selectedAlbumDetails$, deleteResult$]).pipe(
+            map(([albums, selectedAlbumDetails, deleteResult]) => ({
+                albums,
+                selectedAlbumId: selectedAlbumDetails?.albumId ?? null,
+                selectedAlbumDetails: selectedAlbumDetails?.albumDetails ?? null,
+                selectedAlbumName: albums.find(album => album.id === selectedAlbumDetails?.albumId)?.title ?? null,
+                deleteResult
+            }))
         );
     }
 
-    onAlbumSelect(): void {
-        this.selectedAlbumDetails = null;
+    onAlbumSelect(albumId: string): void {
         this.cancelDelete();
-        this._albumService
-            .getById(this.getAlbumId(this.selectedAlbumId))
-            .subscribe(albumDetails => (this.selectedAlbumDetails = albumDetails));
+        this.selectedAlbumId$.next(albumId);
     }
 
-    onPendingDelete(photoId: number): void {
-        const albumId = this.getAlbumId(this.selectedAlbumId);
-        this.photoToDelete = {
-            albumId: albumId,
-            albumName: this.albums.find(album => album.id === albumId)?.title ?? null,
-            photoId
-        };
+    onPendingDelete(photoId: number, albumId: number | null, albumName: string | null): void {
+        if (albumId === null || albumName === null) {
+            return;
+        }
+
+        this.photoToDelete = { albumId, albumName, photoId };
         this.showDeleteConfirmation = true;
     }
 

src/app/pages/admin/updates/add-update/add-update.component.html

@@ -57,7 +57,13 @@ <h5 class="card-title">Blog photos</h5>
 
             <div class="album-select">
                 <label for="albumId">Album</label>
-                <select id="albumId" [(ngModel)]="blogPhotosAlbumId" (change)="onBlogAlbumChange()" class="form-control" required>
+                <select
+                    id="albumId"
+                    [(ngModel)]="blogPhotosAlbumId"
+                    (ngModelChange)="onBlogAlbumChange($event)"
+                    class="form-control"
+                    required
+                >
                     <option *ngFor="let album of blogAlbums" [value]="album.id">{{ album.title }}</option>
                 </select>
             </div>

src/app/pages/admin/updates/add-update/add-update.component.ts

@@ -105,8 +105,8 @@ export class AddUpdateComponent {
         this.distance = this.places.find(place => place.id === parseInt(placeId, 10))?.distance ?? null;
     }
 
-    onBlogAlbumChange(): void {
-        this.blogPhotosAlbumId$.next(this.blogPhotosAlbumId);
+    onBlogAlbumChange(albumId: string): void {
+        this.blogPhotosAlbumId$.next(albumId);
     }
 
     reloadComponent(): void {

src/app/pages/hike/banner/hike-banner.component.scss

@@ -1,5 +1,7 @@
 @import '../../../../styles/variables.scss';
 
+$bannerHeight: 350px;
+
 .banner {
     width: 100%;
     background-position: center;

src/app/pages/hike/highlights-chain/highlights-chain.component.scss

@@ -45,7 +45,7 @@
         border: 1px solid $secondary-600;
         color: $light;
         font-size: 0.9rem;
-        transition: background-color $transitionTimeFast ease-in-out;
+        transition: background-color $transitionTime ease-in-out;
 
         &:hover {
             background-color: $secondary-600;

src/app/pages/hike/highlights-chain/point-highlight/point-highlight.component.scss

@@ -9,7 +9,7 @@ $connectorDotDiameter: 2 * $connectorDotRadius;
     width: 100%;
     padding: $padding;
     background-color: $light;
-    border-color: $borderColor;
+    border-color: $secondary-500;
 
     .expansion {
         // Positioning
@@ -29,7 +29,7 @@ $connectorDotDiameter: 2 * $connectorDotRadius;
         background-color: $secondary-500;
         border: 1px solid $secondary-600;
         border-radius: $borderRadius;
-        transition: background-color $transitionTimeFast ease-in-out;
+        transition: background-color $transitionTime ease-in-out;
 
         .expansion-icon {
             padding-left: 3px;

src/app/pages/hike/hike.component.scss

@@ -6,7 +6,7 @@
     padding-left: $paddingSm;
     padding-right: $paddingSm;
     padding-bottom: $padding;
-    margin-top: $chainMarginTop;
+    margin-top: $marginLg;
     border-bottom: 1px solid $primary-200;
 }
 

src/app/pages/home/photo-grid/photo-carousel/photo-carousel.component.scss

@@ -30,11 +30,11 @@
 
     .carousel-button {
         position: absolute;
-        fill: var(--poker-green-verylight);
+        fill: $primary-600;
         transition-duration: 0.1s;
 
         &:hover {
-            fill: var(--poker-green-light);
+            fill: $primary-700;
             transform: scale(1.2);
 
             @include small() {

src/styles/styles.scss

@@ -14,6 +14,7 @@ body {
     background-color: $light-600;
     font-family: 'Inter', sans-serif;
     font-weight: 400;
+    color: $dark;
 }
 
 h1,
@@ -29,32 +30,23 @@ h6 {
 
 a:link {
     text-decoration: none;
-    color: var(--poker-green-verylight);
+    color: $primary-600;
 }
 
 a:visited {
     text-decoration: none;
-    color: var(--poker-green-verylight);
+    color: $primary-600;
 }
 
 a:hover {
     text-decoration: none;
-    color: var(--poker-green);
-}
-
-h2 {
-    color: var(--poker-green);
+    color: $primary-800;
 }
 
 h3.page-title {
     margin-bottom: 1rem;
 }
 
-.vertical-padding {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
 // This is styling for html that is inserted in markdown text and thus needs to be global
 .update-text {
     &-link {

src/styles/variables.scss

@@ -35,15 +35,11 @@ $light-500: $light;
 $light-600: #f4f4f4;
 
 // Breakpoints
-$maxWidthXs: 400px;
 $maxWidthSm: 500px;
-$maxWidthLg: 1920px;
 
 // Basic
 $borderRadius: 3px;
-$transitionTimeUnitless: 250; // ms, unitless value, used in TS
-$transitionTime: $transitionTimeUnitless * 1ms;
-$transitionTimeFast: 125ms;
+$transitionTime: 125ms;
 $spacingSm: 0.35rem;
 $spacing: 0.75rem;
 $spacingLg: 1.5rem;
@@ -53,60 +49,21 @@ $margin: $spacing;
 $marginSm: $spacingSm;
 $marginLg: $spacingLg;
 
-// Hike
-$bannerHeightSm: 300px;
-$bannerHeight: 350px;
-
 // Highlights chain
-$chainMarginTop: $marginLg;
 $connectorWidth: 2; //rem;
+$connectorWidthSm: 0; // rem;
 $connectorBorderWidth: 1px;
-$connectorWidthSm: 0;
-$leftCenterpointXs: 0.3;
-$rightCenterpointXs: 0.7;
-$leftCenterpointSm: 0.35;
-$rightCenterpointSm: 0.65;
-$leftCenterpoint: 0.4;
-$rightCenterpoint: 0.6;
-$cardWidth: 9.5rem;
-$startWidth: 0.8 * $cardWidth;
-$connectorBorderStyle: 2px dashed $primary-700;
-$connectorBorderRadius: 15px;
-$borderColor: $secondary-500;
 $connectorColor: $primary-500;
 
 // CSS variables
 // Only declare variables here if they are dynamic (i.e. different media queries) or interacted with programatically from TS.
 // Interacting with CSS from TS should only be done when no pure CSS solution is available.
 // Declare variables first as SCSS-variables, and use those variables here to maintain a single source of truth.
 :root {
-    --poker-green: #30413c; // To be replaced by SCSS variable
-    --poker-green-light: #475a54; // To be replaced by SCSS variable
-    --poker-green-verylight: #5b716b; // To be replaced by SCSS variable
-    --poker-green-dark: #172622; // To be replaced by SCSS variable
-
-    --transition-time-unitless: #{$transitionTimeUnitless}; // Used in TS
-    --padding: #{$padding}; // To be replaced by SCSS variable
-
-    // --highlights-width: 100%; // Used in TS
-
-    --left-centerpoint: #{$leftCenterpoint};
-    --right-centerpoint: #{$rightCenterpoint};
-
     --connector-width: #{$connectorWidth};
 
     // Order of breakpoints is important here. Smallest screens satisfy all breakpoints, so last values count
     @media screen and (max-width: #{$maxWidthSm}) {
-        --left-centerpoint: #{$leftCenterpointSm};
-        --right-centerpoint: #{$rightCenterpointSm};
         --connector-width: #{$connectorWidthSm};
     }
-
-    @media screen and (max-width: #{$maxWidthXs}) {
-        --left-centerpoint: #{$leftCenterpointXs};
-        --right-centerpoint: #{$rightCenterpointXs};
-    }
-
-    --left-centerpoint-percentage: calc(var(--left-centerpoint) * 100%);
-    --right-centerpoint-percentage: calc(var(--right-centerpoint) * 100%);
 }