Angular application cleanup.

* Fix HttpClient code throughout application
* Fix Observable error handling code
* Add Configuration Info for Angular and .NET Version
* Add documentation for running from DockerHub Container

src/AlbumViewerAngular/src/app/albums/albumList.ts

@@ -64,7 +64,10 @@ export class AlbumList implements OnInit {
         // reset scroll position of the list
         setTimeout(()=> $("#MainView").scrollTop(this.albumService.listScrollPos), 100);
       }, err => {
-        this.error.error(err);
+        if (!err.message)
+          this.error.error("Unable to load albums right now. Most likely the server is not responding.");
+        else
+          this.error.error(err);
         this.busy = false;
       });
   }

src/AlbumViewerAngular/src/app/artists/artistList.ts

@@ -60,7 +60,12 @@ export class ArtistList implements OnInit {
           }, 20);
           return this.artistList;
         },
-        err => { this.error.error(err) }
+        err => {
+          if (!err.message)
+            this.error.error("Unable to load artists right now. Most likely the server is not responding.");
+          else
+            this.error.error(err) 
+          }
       );
   }
 

src/AlbumViewerAngular/src/app/business/appConfiguration.ts

@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
 import {ApplicationStats} from "./entities";
 
+declare var $:any;
 declare var toastr: any;
 declare var location: any;
 
 @Injectable()
 export class AppConfiguration {
-      constructor(){
-        debugger;
+      constructor(){        
           console.log("AppConfiguration ctor");
           this.setToastrOptions();
 
@@ -17,6 +17,8 @@ export class AppConfiguration {
           //this.urls.baseUrl = "http://localhost:26448/"; // iis Express
           //this.urls.baseUrl = "http://localhost/albumviewer/"; // iis          
           //this.urls.baseUrl = "https://albumviewer.west-wind.com/";  // online
+
+
       }
 
       // top level search text

src/AlbumViewerAngular/src/app/business/entities.ts

@@ -1,4 +1,5 @@
-import {Injectable} from '@angular/core';
+import {Injectable, OnInit} from '@angular/core';
+declare var $:any;
 
 @Injectable()
 export class Album {
@@ -45,4 +46,7 @@ export class Track {
 @Injectable()
 export class ApplicationStats {
     OsPlatform:string = null;
+    AngularVersion = "Unknown"; 
+    AspDotnetVersion = "Unknown";  
+
 }

src/AlbumViewerAngular/src/app/business/userInfo.ts

@@ -1,9 +1,12 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {AppConfiguration} from "./appConfiguration";
+
 import {Observable}  from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
+import 'rxjs/add/observable/throw';
+
 
 import {ErrorInfo} from "../common/errorDisplay";
 
@@ -47,9 +50,9 @@ export class UserInfo {
     }
 
     logout() {
-        return this.http.get(this.config.urls.url("logout"))
+        return this.http.get<boolean>(this.config.urls.url("logout"))
             .map(
-                (response) => {
+                (success) => {
                     this.isAuthenticated = false;
                     return true;
                 }
@@ -69,7 +72,7 @@ export class UserInfo {
                 this.isAuthenticated = result;
                 return result;
             })
-            .catch((response) => {
+            .catch((response) => {                
                 this.isAuthenticated = false;
                 return Observable.throw(response);
             });

src/AlbumViewerAngular/src/app/common/errorDisplay.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit, Input} from '@angular/core';
 import {Response} from "@angular/http";
 import {Observable}  from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+
 
 /**
  *   A Bootstrap based alert display

src/AlbumViewerAngular/src/app/options/about.html

@@ -6,21 +6,21 @@
     }
   </style>
   <div class="page-header-text">
-    <i class="fa fa-info-circle"></i>  About the AlbumViewer 2 Sample
+    <i class="fa fa-info-circle"></i>  About the AlbumViewer Sample
   </div>
 
   <div class="well well-sm">
     <h4>ASP.NET Core API backend</h4>
     <p>
-      This application runs an ASP.NET Core API  server with a
-      JSON Service backend. 
+      This application runs an ASP.NET Core 2.0 API server with a
+      JSON Service backend . 
     </p>
   </div>
 
   <div class="well well-sm">
-    <h4>Angular 2.0 Front End</h4>
+    <h4>Angular (5.x) Front End</h4>
     <p>
-      The client interface uses Angular 2.0 to provide the front en logic and
+      The client interface uses Angular 5.x to provide the front end logic and
       UI management features. There are album and artist services that
       talk to the backend interface and page level components and child
       components that handle individual view pages of the application.

src/AlbumViewerAngular/src/app/options/options.html

@@ -1,8 +1,11 @@
 <div  class="container">
-
+  
   <error-display [error]="error"></error-display>
 
   <div class="list-group" style="margin-top: 20px;">
+      <style>
+          .list-group .fa { color: steelblue; font-size: 1.3em;padding-right: 15px;}
+      </style>
     <a  href="javascript:{}" (click)="reloadData()" class="list-group-item">
       <h4 class="list-group-item-heading">
         <i class="fa fa-fw fa-refresh"></i>
@@ -15,8 +18,11 @@ <h4 class="list-group-item-heading">
         <i class="fa fa-fw fa-info-circle"></i>
         About Album Viewer
       </h4>
-      <div ></div>
-      <small *ngIf="config.applicationStats.OsPlatform">Server Platform: {{config.applicationStats.OsPlatform}}</small>
+      <p>
+        <small *ngIf="config.applicationStats.OsPlatform">Server Platform: {{config.applicationStats.OsPlatform}}</small><br/>
+        <small *ngIf="config.applicationStats.OsPlatform">ASP.NET Version: {{config.applicationStats.AspDotnetVersion}}</small><br/>
+        <small *ngIf="config.applicationStats.OsPlatform">Angular Version: {{config.applicationStats.AngularVersion}}</small>        
+      </p>
     </a>
     <a href="default.htm" class="list-group-item">
       <h4>

src/AlbumViewerAngular/src/app/options/options.ts

@@ -2,8 +2,10 @@
 import {AppConfiguration} from "../business/appConfiguration";
 import {UserInfo} from "../business/userInfo";
 import {ErrorInfo} from "../common/errorDisplay";
-import {Http} from "@angular/http";
+import {HttpClient } from "@angular/common/http";
+import { ApplicationStats } from '../business/entities';
 
+declare var $:any;
 declare var toastr:any;
 declare var window: any;
 @Component({
@@ -15,16 +17,21 @@ export class OptionsComponent implements OnInit {
 
     constructor(public config: AppConfiguration,
                 public user: UserInfo,
-                private http: Http) {
+                private http: HttpClient) {
     }
 
     ngOnInit() {
         this.config.isSearchAllowed = false;
 
         if (this.config.applicationStats.OsPlatform == null) {
-            this.http.get(this.config.urls.url("applicationStats"))
-				.subscribe(response => {
-						this.config.applicationStats = response.json();
+            this.http.get<ApplicationStats>(this.config.urls.url("applicationStats"))
+				.subscribe(stats => {
+                        this.config.applicationStats = stats;
+
+                        var $ngv = $("[ng-version]");
+                        if ($ngv.length > 0)
+                            this.config.applicationStats.AngularVersion = $ngv.attr("ng-version");
+
                 },response=> {
 					let obsErr = new ErrorInfo().parseObservableResponseError(response);
 					let msg = (<any> obsErr).error.message;
@@ -37,10 +44,9 @@ export class OptionsComponent implements OnInit {
         if (!this.user.isAuthenticated)
             window.location.hash = "login";
 
-        this.http.get(this.config.urls.url("reloadData"), {withCredentials: true})
+        this.http.get<boolean>(this.config.urls.url("reloadData") )
 			.subscribe(
-                response => {
-                    let success = response.json();
+                success => {                    
                     if (success)
                         toastr.success("Data has been reloaded.");
                     else

src/AlbumViewerAngular/src/css/albumviewer.css

@@ -31,20 +31,6 @@ h3 {
   }
 }
 
-#Loader-Block {
-  position: absolute;
-  width: 270px;
-  margin-left: -135px;
-  top: 30%;
-  left: 50%;
-  background: #444;
-  color: white;
-  padding: 20px;
-  border-radius: 4px;
-  text-align: center;
-  z-index: 1000;
-  box-shadow: 4px 4px 6px #535353;
-}
 .statusbar-push{
   /* add 15px for iPhone status bar */
   padding-top: 15px;

src/AlbumViewerAngular/src/index.html

@@ -24,13 +24,28 @@
   <![endif]-->
 
   <title>West Wind Album Viewer</title>
-
+  <style>
+    /* put here to avoid delay loaded css stylesheet for loading image */
+    #Loader-Block {
+      position: absolute;
+      width: 270px;
+      margin-left: -135px;
+      top: 30%;
+      left: 50%;
+      background: #444;
+      color: white;
+      padding: 20px;
+      border-radius: 4px;
+      text-align: center;
+      z-index: 1000;
+      box-shadow: 4px 4px 6px #535353;
+    }
+  </style>
 </head>
 <body>
 
 <app-root>
   <div id="Loader-Block" class="center-block">
-
     <img src="touch-icon.png" style="height: 65px" class="pull-left"/>
     <i class="fa fa-circle-o-notch fa-5x fa-spin"></i>
 

src/AlbumViewerAngular/src/main.ts

@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
-if (environment.production) {
+if (environment.production) {  
   enableProdMode();
 }
 

src/AlbumViewerNetCore/.editorconfig

@@ -10,3 +10,6 @@ max_line_length = null
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.sh]
+end_of_line = crlf

src/AlbumViewerNetCore/Controllers/ConfigurationController.cs

@@ -9,6 +9,7 @@
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
+using System.Reflection;
 
 // For more information on enabling Web API for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
 
@@ -38,17 +39,22 @@ public ApplicationConfiguration GetConfiguration()
 
 
 	    [HttpGet("api/applicationstats")]
-	    public object GetApplicationStats()
-	    {
-		    var stats = new
-		    {
-			    OsPlatform = System.Runtime.InteropServices.RuntimeInformation.OSDescription,
-			    HostName = System.Environment.MachineName,
-			    Ip = HttpContext.Connection.LocalIpAddress.ToString()
-		    };
+        public object GetApplicationStats()
+        {
+            var rt = typeof(IHostingEnvironment)
+                .GetTypeInfo()
+                .Assembly
+                .GetCustomAttribute<AssemblyFileVersionAttribute>();
+            var v = new Version(rt.Version);
+
+            var stats = new
+            {
+                OsPlatform = System.Runtime.InteropServices.RuntimeInformation.OSDescription,
+                AspDotnetVersion = v.ToString()
+            };
 
-		    return stats;
-	    }
+            return stats;
+        }
 
 
         /// <summary>

src/AlbumViewerNetCore/wwwroot/index.html

@@ -2,4 +2,18 @@
 
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-  <![endif]--><title>West Wind Album Viewer</title><link href="styles.2a5ae953a031f5dc7957.bundle.css" rel="stylesheet"/></head><body><app-root><div id="Loader-Block" class="center-block"><img src="touch-icon.png" style="height: 65px" class="pull-left"/> <i class="fa fa-circle-o-notch fa-5x fa-spin"></i><p style="clear: both;font-size: 1.5em; margin-top: 20px">Getting things ready...</p></div></app-root><script type="text/javascript" src="inline.ab7bacb3edfb21413330.bundle.js"></script><script type="text/javascript" src="polyfills.e8bddc586f67afdffd0d.bundle.js"></script><script type="text/javascript" src="scripts.95d612125d47438d323f.bundle.js"></script><script type="text/javascript" src="main.d649e9a061e6f9798071.bundle.js"></script></body></html><!--<!doctype html>--><!--<html>--><!--<head>--><!--<meta charset="utf-8">--><!--<title>AlbumViewer</title>--><!--<base href="/">--><!--<meta name="viewport" content="width=device-width, initial-scale=1">--><!--<link rel="icon" type="image/x-icon" href="favicon.ico">--><!--</head>--><!--<body>--><!--<app-root>Loading...</app-root>--><!--</body>--><!--</html>-->
+  <![endif]--><title>West Wind Album Viewer</title><style>/* put here to avoid delay loaded css stylesheet for loading image */
+    #Loader-Block {
+      position: absolute;
+      width: 270px;
+      margin-left: -135px;
+      top: 30%;
+      left: 50%;
+      background: #444;
+      color: white;
+      padding: 20px;
+      border-radius: 4px;
+      text-align: center;
+      z-index: 1000;
+      box-shadow: 4px 4px 6px #535353;
+    }</style><link href="styles.509d04277f15a90fa4d8.bundle.css" rel="stylesheet"/></head><body><app-root><div id="Loader-Block" class="center-block"><img src="touch-icon.png" style="height: 65px" class="pull-left"/> <i class="fa fa-circle-o-notch fa-5x fa-spin"></i><p style="clear: both;font-size: 1.5em; margin-top: 20px">Getting things ready...</p></div></app-root><script type="text/javascript" src="inline.d1d4b2662370396de34e.bundle.js"></script><script type="text/javascript" src="polyfills.e8bddc586f67afdffd0d.bundle.js"></script><script type="text/javascript" src="scripts.95d612125d47438d323f.bundle.js"></script><script type="text/javascript" src="main.d48a9c915c5ce137660a.bundle.js"></script></body></html><!--<!doctype html>--><!--<html>--><!--<head>--><!--<meta charset="utf-8">--><!--<title>AlbumViewer</title>--><!--<base href="/">--><!--<meta name="viewport" content="width=device-width, initial-scale=1">--><!--<link rel="icon" type="image/x-icon" href="favicon.ico">--><!--</head>--><!--<body>--><!--<app-root>Loading...</app-root>--><!--</body>--><!--</html>-->