* code cleanup

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/app/animations/fade-in.animation.ts

@@ -1,14 +1,14 @@
-import {trigger, state, animate, transition, style} from '@angular/animations';
+import { trigger, state, animate, transition, style } from '@angular/animations';
 
 export const fadeInAnimation =
-  trigger('fadeInAnimation', [
+    trigger('fadeInAnimation', [
-    // route 'enter' transition
+        // route 'enter' transition
-    transition(':enter', [
+        transition(':enter', [
 
-      // styles at start of transition
+            // styles at start of transition
-      style({opacity: 0}),
+            style({opacity: 0}),
 
-      // animation and styles at end of transition
+            // animation and styles at end of transition
-      animate('3s', style({opacity: 1}))
+            animate('3s', style({opacity: 1}))
-    ]),
+        ]),
-  ]);
+    ]);

src/app/animations/slide-in-out.animation.ts

@@ -1,51 +1,51 @@
-import {trigger, state, animate, transition, style} from '@angular/animations';
+import { trigger, state, animate, transition, style } from '@angular/animations';
 
 export const slideInOutAnimation =
-  trigger('slideInOutAnimation', [
+    trigger('slideInOutAnimation', [
 
-    // end state styles for route container (host)
+        // end state styles for route container (host)
-    state('*', style({
+        state('*', style({
-      // the view covers the whole screen with a semi tranparent background
+            // the view covers the whole screen with a semi tranparent background
-      position: 'fixed',
+            position: 'fixed',
-      top: 0,
+            top: 0,
-      left: 0,
+            left: 0,
-      right: 0,
+            right: 0,
-      bottom: 0,
+            bottom: 0,
-      // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+            // backgroundColor: 'rgba(0, 0, 0, 0.8)'
-    })),
+        })),
 
-    // route 'enter' transition
+        // route 'enter' transition
-    transition(':enter', [
+        transition(':enter', [
 
-      // styles at start of transition
+            // styles at start of transition
-      style({
+            style({
-        // start with the content positioned off the right of the screen,
+                // start with the content positioned off the right of the screen,
-        // -400% is required instead of -100% because the negative position adds to the width of the element
+                // -400% is required instead of -100% because the negative position adds to the width of the element
-        top: '-100%',
+                top: '-100%',
 
-        // start with background opacity set to 0 (invisible)
+                // start with background opacity set to 0 (invisible)
-        // backgroundColor: 'rgba(0, 0, 0, 0)'
+                // backgroundColor: 'rgba(0, 0, 0, 0)'
-      }),
+            }),
 
-      // animation and styles at end of transition
+            // animation and styles at end of transition
-      animate('.5s ease-in-out', style({
+            animate('.5s ease-in-out', style({
-        // transition the right position to 0 which slides the content into view
+                // transition the right position to 0 which slides the content into view
-        top: 0,
+                top: 0,
 
-        // transition the background opacity to 0.8 to fade it in
+                // transition the background opacity to 0.8 to fade it in
-        // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+                // backgroundColor: 'rgba(0, 0, 0, 0.8)'
-      }))
+            }))
-    ]),
+        ]),
 
-    // route 'leave' transition
+        // route 'leave' transition
-    transition(':leave', [
+        transition(':leave', [
-      // animation and styles at end of transition
+            // animation and styles at end of transition
-      animate('.5s ease-in-out', style({
+            animate('.5s ease-in-out', style({
-        // transition the right position to -400% which slides the content out of view
+                // transition the right position to -400% which slides the content out of view
-        top: '-100%',
+                top: '-100%',
 
-        // transition the background opacity to 0 to fade it out
+                // transition the background opacity to 0 to fade it out
-        // backgroundColor: 'rgba(0, 0, 0, 0)'
+                // backgroundColor: 'rgba(0, 0, 0, 0)'
-      }))
+            }))
-    ])
+        ])
-  ]);
+    ]);

src/app/app.server.module.ts

@@ -6,11 +6,12 @@ import { AppComponent } from './app.component';
 import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 
 @NgModule({
-  imports: [
+    imports: [
-    AppModule,
+        AppModule,
-    ServerModule,
+        ServerModule,
-    ModuleMapLoaderModule,
+        ModuleMapLoaderModule,
-  ],
+    ],
-  bootstrap: [AppComponent],
+    bootstrap: [AppComponent],
 })
-export class AppServerModule {}
+export class AppServerModule {
+}

src/app/gallery/album/album.component.html

@@ -1,7 +1,7 @@
 <div class="main container">
   <h1>
     <a [routerLink]="['']" title="Back to albums list"><i class="fa fa-level-up"></i></a>
-    {{album.name}}
+    {{album?.name}}
     <a rel="nofollow" [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
   </h1>
   <div class="row images">
@@ -13,4 +13,4 @@
                  (click)="imageClick(album.slug, thumbnail.path)"></a>
   </div>
 </div>
-<app-display-image (imageChange)="switchImage($event)"></app-display-image>
+<app-display-image (imageChange)="switchImage($event)"></app-display-image>

src/app/gallery/display-image/display-image.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
-import { Location } from "@angular/common";
 
 import { environment } from "../../../environments/environment";
 import { Title } from "@angular/platform-browser";
@@ -45,8 +44,7 @@ export class DisplayImageComponent implements OnInit {
     }
 
     public get imageUrl(): string {
-        let url = environment.apiUrl + `/image/${this.slug}/${this.image}`;
+        return environment.apiUrl + `/image/${this.slug}/${this.image}`;
-        return url;
     }
 
     public activate(slug = "", image = "", extitle = "") {

src/app/gallery/display-image/display-image.service.ts

@@ -2,8 +2,5 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DisplayImageService {
-
+    activate: (message?: string, title?: string, extitle?: string) => Promise<boolean>;
-  constructor() { }
-  activate: (message?: string, title?: string, extitle? :string) => Promise<boolean>;
-
 }

src/app/gallery/gallery-routing.module.ts

@@ -2,51 +2,52 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { GalleryComponent } from "./gallery/gallery.component";
-import { GalleryService } from "./shared/gallery.service";
+import { GalleryService } from "./shared";
 import { AlbumComponent } from "./album/album.component";
 import { DisplayImageComponent } from "./display-image/display-image.component";
 
 const routes: Routes = [
-  {
+    {
-    path: '',
+        path: '',
-    children: [],
+        children: [],
-    component: GalleryComponent,
+        component: GalleryComponent,
-    resolve: {
+        resolve: {
-      albums: GalleryService,
+            albums: GalleryService,
-    },
+        },
-  }, {
+    }, {
-    path: 'galleries',
+        path: 'galleries',
-    children: [],
+        children: [],
-    component: GalleryComponent,
+        component: GalleryComponent,
-    resolve: {
+        resolve: {
-      albums: GalleryService,
+            albums: GalleryService,
-    },
+        },
-  }, {
+    }, {
-    path: 'album/:slug',
+        path: 'album/:slug',
-    children: [],
+        children: [],
-    component: AlbumComponent,
+        component: AlbumComponent,
-    resolve: {
+        resolve: {
-      albums: GalleryService,
+            albums: GalleryService,
-    },
+        },
-  }, {
+    }, {
-    path: 'album/:slug/:image',
+        path: 'album/:slug/:image',
-    children: [],
+        children: [],
-    component: AlbumComponent,
+        component: AlbumComponent,
-    resolve: {
+        resolve: {
-      albums: GalleryService,
+            albums: GalleryService,
-    },
+        },
-  }, {
+    }, {
-    path: 'image/:slug/:image',
+        path: 'image/:slug/:image',
-    children: [],
+        children: [],
-    component: DisplayImageComponent,
+        component: DisplayImageComponent,
-    resolve: {
+        resolve: {
-      albums: GalleryService,
+            albums: GalleryService,
-    },
+        },
-  }
+    }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+    imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+    exports: [RouterModule]
 })
-export class GalleryRoutingModule { }
+export class GalleryRoutingModule {
+}

src/app/gallery/gallery.module.ts

@@ -10,20 +10,21 @@ import { DisplayImageService } from './display-image/display-image.service';
 import { ThumbnailComponent } from './thumbnail/thumbnail.component';
 
 @NgModule({
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    HttpClientModule,
+        HttpClientModule,
-    GalleryRoutingModule,
+        GalleryRoutingModule,
-  ],
+    ],
-  exports: [
+    exports: [
-    GalleryComponent,
+        GalleryComponent,
-  ],
+    ],
-  declarations: [
+    declarations: [
-    GalleryComponent,
+        GalleryComponent,
-    AlbumComponent,
+        AlbumComponent,
-    DisplayImageComponent,
+        DisplayImageComponent,
-    ThumbnailComponent,
+        ThumbnailComponent,
-  ],
+    ],
-  providers: [ GalleryService, DisplayImageService ]
+    providers: [GalleryService, DisplayImageService]
 })
-export class GalleryModule { }
+export class GalleryModule {
+}

src/app/gallery/gallery/gallery.component.ts

@@ -30,6 +30,14 @@ export class GalleryComponent implements OnInit {
                 property: 'og:image',
                 content: this.imageUrl(this.albums[0])
             });
+            this.metaService.updateTag({
+                property: 'og:title',
+                content: "photos.yvan.hu"
+            });
+            this.metaService.updateTag({
+                property: 'og:description',
+                content: "My public photo gallery"
+            });
         });
     }
 

src/app/gallery/shared/album.model.ts

@@ -4,12 +4,12 @@ export const IMAGE_STANDARD = 0;
 export const IMAGE_PANORAMA = 1;
 
 export class Album {
-  public slug: string = "";
+    public slug: string = "";
-  public name: string = "";
+    public name: string = "";
-  public date: string = "";
+    public date: string = "";
-  public coverImage: Image;
+    public coverImage: Image;
-  public type: number = IMAGE_STANDARD;
+    public type: number = IMAGE_STANDARD;
-  public isNew: boolean = false;
+    public isNew: boolean = false;
-  public isPublic: boolean = true;
+    public isPublic: boolean = true;
-  public images: Array<Image> = [];
+    public images: Array<Image> = [];
 }

src/app/gallery/shared/gallery.service.ts

@@ -7,33 +7,33 @@ import { environment } from "../../../environments/environment";
 import { Album } from "./album.model";
 
 @Injectable()
-export class GalleryService implements Resolve<Array<Album>|false> {
+export class GalleryService implements Resolve<Array<Album> | false> {
 
-  public albums: Array<Album> = [];
+    public albums: Array<Album> = [];
 
-  constructor(
+    constructor(
-    private httpService: HttpClient,
+        private httpService: HttpClient,
-  ) {}
+    ) {}
 
-  public listGalleries(): Observable<Array<Album>> {
+    public listGalleries(): Observable<Array<Album>> {
-    return this.httpService.get<Array<Album>>(environment.apiUrl + '/api/galleries');
+        return this.httpService.get<Array<Album>>(environment.apiUrl + '/api/galleries');
-  }
+    }
-
+
-  /**
+    /**
-   * @param {ActivatedRouteSnapshot} route
+     * @param {ActivatedRouteSnapshot} route
-   * @returns {Promise<Array<Album>>}
+     * @returns {Promise<Array<Album>>}
-   * @todo add some cache ttl to albums?
+     * @todo add some cache ttl to albums?
-   */
+     */
-  public resolve(route: ActivatedRouteSnapshot): Promise<Array<Album>|false> {
+    public resolve(route: ActivatedRouteSnapshot): Promise<Array<Album> | false> {
-    if(this.albums.length) {
+        if (this.albums.length) {
-      return Promise.resolve(this.albums);
+            return Promise.resolve(this.albums);
+        }
+        return this.listGalleries().toPromise().then(result => {
+            if (result) {
+                this.albums = result;
+                return result;
+            }
+            return false;
+        });
     }
-    return this.listGalleries().toPromise().then(result => {
-      if(result) {
-        this.albums = result;
-        return result;
-      }
-      return false;
-    });
-  }
 }

src/app/gallery/shared/image.model.ts

@@ -1,9 +1,9 @@
 export class Image {
-  public dir: string = "";
+    public dir: string = "";
-  public label: string = "";
+    public label: string = "";
-  public path: string = "";
+    public path: string = "";
-  public width: number = 0;
+    public width: number = 0;
-  public height: number = 0;
+    public height: number = 0;
-  public thumbWidth: number = 0;
+    public thumbWidth: number = 0;
-  public thumbHeight: number = 0;
+    public thumbHeight: number = 0;
 }

src/app/gallery/shared/thumb-label.model.ts

@@ -1,5 +1,5 @@
 export class ThumbLabel {
-  public title: string = "";
+    public title: string = "";
-  public extraLeft: string = "";
+    public extraLeft: string = "";
-  public extraRight: string = "";
+    public extraRight: string = "";
 }

src/app/gallery/shared/thumbnail.model.ts

@@ -1,10 +1,10 @@
-import {ThumbLabel} from "./thumb-label.model";
+import { ThumbLabel } from "./thumb-label.model";
 
 export class Thumbnail {
-  public slug: string = '';
+    public slug: string = '';
-  public image: string = '';
+    public image: string = '';
-  public path: string = '';
+    public path: string = '';
-  public label: ThumbLabel = new ThumbLabel();
+    public label: ThumbLabel = new ThumbLabel();
-  public height: number = 0;
+    public height: number = 0;
-  public width: number = 0;
+    public width: number = 0;
 }

src/app/gallery/thumbnail/thumbnail.component.ts

@@ -1,22 +1,16 @@
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
-import {ThumbLabel} from "../shared/thumb-label.model";
+import { ThumbLabel } from "../shared/thumb-label.model";
 
 @Component({
-  selector: 'app-thumbnail, [app-thumbnail]',
+    selector: 'app-thumbnail, [app-thumbnail]',
-  templateUrl: './thumbnail.component.html',
+    templateUrl: './thumbnail.component.html',
-  styleUrls: ['./thumbnail.component.css']
+    styleUrls: ['./thumbnail.component.css']
 })
-export class ThumbnailComponent implements OnInit {
+export class ThumbnailComponent {
-
+    @Input() image: string = "";
-  @Input() image: string = "";
+    @Input() label: ThumbLabel = null;
-  @Input() label: ThumbLabel = null;
+    @Input() target: any = {};
-  @Input() target: any = {};
+    @Input() width: number = 0;
-  @Input() width: number = 0;
+    @Input() height: number = 0;
-  @Input() height: number = 0;
-
-  constructor() {}
-
-  ngOnInit() {}
-
 }

src/index.html

@@ -4,10 +4,6 @@
     <meta charset="utf-8">
     <title>Gallery</title>
     <base href="/">
-
-    <meta name="og:title" content="Angullery"/>
-    <meta name="og:description" content="A really simple photo album"/>
-
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="assets/css/font-awesome.min.css">
     <link rel="icon" type="image/x-icon" href="favicon.ico">