\r\n\r\n
\r\n","import { Directive, Input, ElementRef, OnChanges } from '@angular/core';\r\n\r\n@Directive({\r\n\tselector : '[focus]' // [focus]=\"true|false\"\r\n})\r\nexport class FocusDirective implements OnChanges {\r\n\t@Input() focus : boolean;\r\n\r\n\tconstructor(private element : ElementRef) {\r\n\t\t\r\n\t}\r\n\t\r\n\tngOnChanges() {\r\n\t\tif (this.focus)\r\n\t\t\tsetTimeout( ()=> this.element.nativeElement.focus() ,200);\r\n\t}\r\n}","// The file contents for the current environment will overwrite these during build.\r\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\r\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\r\n// The list of which env maps to which file can be found in `.angular-cli.json`.\r\n\r\nexport const environment = {\r\n production: false\r\n};\r\n","import {Component, OnInit } from '@angular/core';\r\nimport { AlbumService } from './albumService';\r\nimport { Album } from '../business/entities';\r\n\r\nimport {AppConfiguration} from \"../business/appConfiguration\";\r\nimport {Router} from \"@angular/router\";\r\nimport {ErrorInfo} from \"../common/errorDisplay\";\r\nimport {slideIn, slideInLeft} from \"../common/animations\";\r\nimport { UserInfo } from \"../business/userInfo\";\r\n\r\ndeclare var $:any;\r\n\r\n@Component({\r\n selector: 'album-list',\r\n templateUrl: './albumList.html',\r\n animations: [ slideIn ]\r\n})\r\nexport class AlbumList implements OnInit {\r\n\r\n constructor(private router:Router,\r\n private albumService: AlbumService,\r\n private config: AppConfiguration) {\r\n }\r\n\r\n albumList: Album[] = [];\r\n busy: boolean = true;\r\n error:ErrorInfo = new ErrorInfo();\r\n\r\n\r\n ngOnInit() {\r\n this.getAlbums();\r\n\r\n this.config.isSearchAllowed = true;\r\n this.config.activeTab = \"albums\";\r\n this.config.searchText = \"\";\r\n\r\n // ??? Non-DOM way to do this?\r\n setTimeout(() => {\r\n $(\"#SearchBox\").focus();\r\n },200);\r\n }\r\n\r\n get filteredAlbumList() {\r\n if (this.config.searchText && this.config.searchText.length > 1) {\r\n var lsearchText = this.config.searchText.toLowerCase();\r\n\r\n return this.albumList.filter((a) => {\r\n const title = a.Title;\r\n const artist = a.Artist;\r\n let artistName = null;\r\n if (artist)\r\n artistName = artist.ArtistName;\r\n\r\n return (title && title.toLowerCase().includes(lsearchText)) ||\r\n (artistName && artistName.toLowerCase().includes(lsearchText));\r\n });\r\n }\r\n\r\n return this.albumList;\r\n }\r\n\r\n getAlbums() {\r\n this.busy = true;\r\n this.albumList = [];\r\n this.albumService.getAlbums()\r\n .subscribe(albums => {\r\n this.albumList = albums;\r\n this.busy = false;\r\n\r\n // reset to last scroll position of the list\r\n setTimeout(()=> $(\"#MainView\").scrollTop(this.albumService.listScrollPos), 100);\r\n }, err => {\r\n if (!err.message)\r\n this.error.error(\"Unable to load albums right now. Most likely the server is not responding.\");\r\n else\r\n this.error.error(err);\r\n this.busy = false;\r\n });\r\n }\r\n\r\n albumClick(album: Album) {\r\n // save scroll position before navigation\r\n this.albumService.listScrollPos = $(\"#MainView\").scrollTop();\r\n\r\n this.router.navigate(['/album', album.Id]);\r\n }\r\n\r\n\r\n addAlbum() {\r\n\r\n }\r\n\r\n deleteAlbum(album: Album) {\r\n\r\n }\r\n}\r\n","\r\n AlbumViewer Login\r\n
\r\n\r\n \r\n
\r\n\r\n Please sign in\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n","import {Component, OnInit, ElementRef} from '@angular/core';\r\nimport {Album, Artist} from \"../business/entities\";\r\nimport {AlbumService} from \"./albumService\";\r\nimport {Router, ActivatedRoute} from \"@angular/router\";\r\nimport {ErrorInfo} from \"../common/errorDisplay\";\r\nimport {AppConfiguration} from \"../business/appConfiguration\";\r\nimport { UserInfo } from \"../business/userInfo\";\r\n\r\nimport {Observable, of, Subscriber} from 'rxjs';\r\nimport {debounceTime, distinctUntilChanged, switchMap, catchError, mergeMap} from 'rxjs/operators';\r\n\r\nimport { TypeaheadModule } from 'ngx-bootstrap/typeahead';\r\n\r\n//declare var $:any ;\r\ndeclare var $:any;\r\ndeclare var toastr:any;\r\ndeclare var window:any;\r\n\r\nimport { slideInLeft, slideIn } from \"../common/animations\";\r\nimport {ToastrService} from \"ngx-toastr\";\r\n\r\n\r\n\r\n@Component({\r\n selector: 'album-editor',\r\n templateUrl: 'albumEditor.html',\r\n animations: [ slideIn ]\r\n})\r\nexport class AlbumEditor implements OnInit {\r\n constructor(private route: ActivatedRoute,\r\n private router: Router,\r\n private albumService: AlbumService,\r\n private config:AppConfiguration,\r\n private user: UserInfo,\r\n private toastr:ToastrService\r\n ) { }\r\n\r\n album: Album = new Album();\r\n error: ErrorInfo = new ErrorInfo();\r\n loaded = false;\r\n aniFrame = 'in';\r\n\r\n searchTerm: string;\r\n searchResults:Observable\r\n \r\n Album {{filteredAlbumList.length}}\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n ![]()
\r\n
\r\n \r\n\r\n
\r\n {{album.Title}}
\r\n by {{album.Artist.ArtistName}} {{(album.Year ? 'in ' + album.Year : '')}}
\r\n {{album.Description}}
\r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n","import {Injectable} from '@angular/core';\r\nimport {Album, Artist, Track} from '../business/entities';\r\nimport {AppConfiguration} from \"../business/appConfiguration\";\r\nimport {ErrorInfo} from \"../common/errorDisplay\";\r\nimport {Observable} from \"rxjs\";\r\nimport {map, catchError, tap} from \"rxjs/operators\";\r\n\r\nimport {HttpClient} from \"@angular/common/http\";\r\n\r\n\r\n// import 'rxjs/Operator/map';\r\n// import 'rxjs/add/operator/catch';\r\n// import 'rxjs/add/observable/throw';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class AlbumService {\r\n constructor( private httpClient: HttpClient,\r\n private config: AppConfiguration) {\r\n }\r\n\r\n albumList: Album[] = [];\r\n album: Album = new Album();\r\n\r\n //artistList: Artist[] = [];\r\n listScrollPos = 0;\r\n\r\n getAlbums(): Observable\r\n\r\n
\r\n\r\n\r\n \r\n
\r\n\r\n \r\n ![]()
\r\n
\r\n\r\n\r\n Preview
\r\n\r\n
\r\n\r\n
\r\n {{album.Title}}
\r\nby {{album.Artist.ArtistName}} {{(album.Year ? 'in ' + album.Year : '')}}\r\n - Buy on Amazon\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n\r\n
\r\n\r\n","import { trigger, state, style, transition, animate } from '@angular/animations';\r\n\r\nexport const slideIn = trigger('slideIn', [\r\n state('*', style({\r\n transform: 'translateX(100%)',\r\n })),\r\n state('in', style({\r\n transform: 'translateX(0)',\r\n })),\r\n state('out', style({\r\n transform: 'translateX(-100%)',\r\n })),\r\n transition('* => in', animate('400ms ease-in')),\r\n transition('in => out', animate('400ms ease-out'))\r\n]);\r\n\r\nexport const slideInLeft = trigger('slideInLeft', [\r\n state('*', style({\r\n transform: 'translateX(-100%)',\r\n })),\r\n state('in', style({\r\n transform: 'translateX(0)',\r\n })),\r\n state('out', style({\r\n transform: 'translateX(100%)',\r\n })),\r\n transition('* => in', animate('300ms ease-in')),\r\n transition('in => out', animate('300ms ease-out'))\r\n]);\r\n","import {Component} from '@angular/core';\r\nimport {UserInfo} from \"./business/userInfo\";\r\n\r\ndeclare var toastr:any;\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n title = 'Test Application';\r\n\r\n constructor(private user: UserInfo) {\r\n // check authentication when the page is loaded\r\n // fire and forget - service updates the auth\r\n // status model\r\n this.user.checkAuthentication()\r\n .subscribe();\r\n\r\n // re-check infrequently - once every 2 minutes\r\n setInterval( ()=> {\r\n var previousStatus = user.isAuthenticated;\r\n this.user.checkAuthentication()\r\n .subscribe((isAuthenticated)=> {\r\n if (!isAuthenticated && previousStatus)\r\n toastr.warning(\"Your session has expired. Please log in again.\");\r\n });\r\n },120000)\r\n }\r\n}\r\n","\r\n\r\n
\r\n\r\n\r\n Artists\r\n
\r\n\r\n \r\n \r\n \r\n {{artist.AlbumCount}}\r\n {{artist.ArtistName}}\r\n\r\n {{artistList.length}}
\r\n \r\n ![](\"{{)
\r\n
\r\n \r\n \r\n\r\n
\r\n\r\n\r\n","import { Component, OnInit } from '@angular/core';\r\nimport {AppConfiguration} from \"../business/appConfiguration\";\r\n\r\n@Component({\r\n //moduleId: module.id,\r\n selector: 'app-footer',\r\n templateUrl: 'appFooter.html'\r\n})\r\nexport class AppFooter implements OnInit {\r\n constructor(public config:AppConfiguration) {\r\n\r\n }\r\n\r\n ngOnInit() {\r\n\r\n }\r\n\r\n}\r\n","\r\n","import {Component, OnInit, Input} from '@angular/core';\r\nimport {Track} from \"../business/entities\";\r\nimport {AlbumService} from \"./albumService\";\r\n\r\n@Component({\r\n //moduleId: module.id,\r\n selector: 'album-songlist',\r\n templateUrl: 'albumSongList.html'\r\n})\r\nexport class AlbumSongList implements OnInit {\r\n constructor(private albumService:AlbumService) {\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n @Input() tracks: Track[] = [];\r\n @Input() allowEditing: boolean = false;\r\n isSongVisible = false;\r\n track:Track = new Track();\r\n\r\n addTrack(track){\r\n this.track = new Track();\r\n this.isSongVisible = true;\r\n }\r\n cancelTrack() {\r\n this.track = new Track();\r\n this.isSongVisible = false;\r\n }\r\n\r\n saveTrack(track){\r\n this.albumService.addSong(track);\r\n this.isSongVisible = false;\r\n }\r\n\r\n removeTrack(track: Track) {\r\n this.albumService.removeSong(track);\r\n }\r\n\r\n}\r\n","\r\n
\r\n \r\n \r\n\r\n
\r\n\r\n\r\n\r\n\r\n
\r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n | \r\n {{track.SongName}} | \r\n{{track.Length}} | \r\n\r\n \r\n | \r\n
![](\"images/headphone-head.png\")
\r\n \r\n \r\n
","import {NgModule, Injectable} from '@angular/core'\r\nimport {AppRoutingModule} from './app-routing.module';\r\nimport {AppComponent} from \"./app.component\";\r\n\r\nimport {FormsModule} from '@angular/forms';\r\nimport {BrowserModule} from '@angular/platform-browser';\r\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\r\nimport {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http'; // use this\r\n\r\n\r\n// components\r\nimport {AppHeader} from './common/appHeader';\r\nimport {AppFooter} from \"./common/appFooter\";\r\n\r\nimport {AlbumList} from './albums/albumList';\r\nimport {AlbumDisplay} from './albums/albumDisplay';\r\nimport {AlbumEditor} from './albums/albumEditor';\r\nimport {ArtistList} from './artists/artistList';\r\nimport {ArtistDisplay} from './artists/artistDisplay';\r\n\r\nimport {LocationStrategy, HashLocationStrategy} from '@angular/common';\r\nimport {AlbumSongList} from \"./albums/albumSongList\";\r\n\r\n// directives and shared components\r\nimport {ErrorDisplay, ErrorInfo} from './common/errorDisplay';\r\nimport {ArtistEditor} from \"./artists/artistEditor\";\r\nimport {LoginComponent} from './common/login';\r\n\r\nimport {AboutComponent} from './options/about';\r\nimport { OptionsComponent } from './options/options';\r\n\r\n/* Custom Components or overrides */\r\nimport {HttpRequestInterceptor} from './business/httpRequestInterceptor'\r\nimport { FocusDirective } from './common/focusDirective';\r\nimport {ToastrModule} from \"ngx-toastr\";\r\nimport {ModalModule} from \"ngx-bootstrap/modal\";\r\nimport {TypeaheadModule} from \"ngx-bootstrap/typeahead\";\r\n\r\n// Enable production mode\r\n// import { enableProdMode } from '@angular/core';\r\n// enableProdMode();\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n BrowserAnimationsModule,\r\n FormsModule,\r\n HttpClientModule,\r\n AppRoutingModule,\r\n\r\n ToastrModule.forRoot({\r\n timeOut: 5000,\r\n closeButton: true,\r\n positionClass: 'toast-bottom-right'\r\n }),\r\n\r\n // ngx-bootstrap components\r\n ModalModule.forRoot(),\r\n TypeaheadModule.forRoot()\r\n ],\r\n\r\n // components\r\n declarations: [\r\n AppComponent,\r\n AppHeader,\r\n AppFooter,\r\n\r\n OptionsComponent,\r\n AboutComponent,\r\n AlbumList,\r\n AlbumDisplay,\r\n AlbumEditor,\r\n AlbumSongList,\r\n ArtistList,\r\n ArtistDisplay,\r\n ArtistEditor,\r\n ErrorDisplay,\r\n LoginComponent,\r\n\r\n FocusDirective\r\n ],\r\n // services, pipes and providers\r\n providers: [\r\n\r\n // make sure you use this for Hash Urls rather than HTML 5 routing\r\n //{ provide: LocationStrategy, useClass: HashLocationStrategy },\r\n\r\n // {\r\n // provide: XHRBackend,\r\n // useFactory: (xhr, opts, strategy, user) => {\r\n // return new CoreXHRBackend(xhr, opts, strategy, user);\r\n // },\r\n // deps: [BrowserXhr, ResponseOptions, XSRFStrategy, UserInfo],\r\n // }\r\n\r\n // Http Interceptor(s) - this one adds with Client Credentials\r\n [\r\n { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true }\r\n ],\r\n ],\r\n\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n\r\n}\r\n","import { Component, OnInit, ViewChild} from '@angular/core';\r\nimport { ArtistService} from \"./artistService\";\r\nimport { Artist, Album} from \"../business/entities\";\r\nimport { AppConfiguration} from \"../business/appConfiguration\";\r\nimport { ActivatedRoute, Router } from \"@angular/router\";\r\n\r\nimport {UserInfo} from \"../business/userInfo\";\r\nimport {ErrorInfo} from \"../common/errorDisplay\";\r\nimport { ArtistEditor } from \"./artistEditor\";\r\nimport {slideIn} from \"../common/animations\";\r\n\r\n@Component({\r\n //moduleId: module.id,\r\n selector: 'artist-display',\r\n templateUrl: './artistDisplay.html',\r\n animations: [ slideIn ]\r\n})\r\nexport class ArtistDisplay implements OnInit {\r\n // reference a child editor component\r\n @ViewChild(ArtistEditor) editor:ArtistEditor;\r\n\r\n artist: Artist = new Artist();\r\n albums: Album[] = [];\r\n artistId = null;\r\n formActive = true;\r\n\r\n error:ErrorInfo = new ErrorInfo();\r\n\r\n constructor(private route: ActivatedRoute,\r\n private artistService: ArtistService,\r\n private config: AppConfiguration,\r\n private router: Router,\r\n private user: UserInfo) {\r\n }\r\n\r\n\r\n ngOnInit() {\r\n this.config.isSearchAllowed = false;\r\n\r\n var id = this.route.snapshot.params[\"id\"];\r\n if (id < 1)\r\n return;\r\n\r\n this.artistService.getArtist(id)\r\n .subscribe(\r\n (result: any) => {\r\n this.artist = result.Artist;\r\n this.albums = result.Albums;\r\n },\r\n (err) => {\r\n this.error.error(err);\r\n });\r\n }\r\n\r\n\r\n\r\n albumClick(album) {\r\n //window.location.hash = \"album/\" + album.Id;\r\n this.router.navigate(['/album', album.Id]);\r\n }\r\n\r\n openModalEditor(artistEditor){\r\n if (!this.user.isAuthenticated) {\r\n this.user.requestedUrl = this.router.url;\r\n this.router.navigate([\"/login\"]);\r\n return;\r\n }\r\n\r\n this.editor.open();\r\n }\r\n\r\n addAlbum() {\r\n\r\n }\r\n\r\n deleteArtist(artist:Artist) {\r\n this.artistService.deleteArtist(artist)\r\n .subscribe((result) => {\r\n this.error.info(\"Album deleted.\");\r\n setTimeout(()=> {\r\n this.router.navigate([\"/artists\"]);\r\n this.artistService.artistList =\r\n this.artistService.artistList.filter( art=> art.Id != artist.Id );\r\n }, 1200);\r\n }, (err)=> { console.log(err); this.error.error(err) });\r\n }\r\n\r\n deleteAlbum(album:Album) {\r\n\r\n }\r\n}\r\n","\r\n\r\n
\r\n\r\n\r\n\r\n \r\n \r\n Artists\r\n\r\n \r\n\r\n \r\n
\r\n\r\n {{artist.ArtistName}}
\r\n\r\n \r\n\r\n\r\n
\r\n\r\n\r\n \r\n ![]()
\r\n
\r\n \r\n
\r\n {{artist.Description }}
\r\n\r\n {{artist.ArtistName}} on the Web\r\n Albums
\r\n \r\n\r\n\r\n \r\n\r\n
\r\n\r\n \r\n \r\n Add Album\r\n \r\n\r\n\r\n\r\n\r\n ![]()
\r\n
\r\n \r\n
\r\n {{album.Title}}
\r\n \r\n {{(album.Year ? 'in ' + album.Year : '')}}\r\n
\r\n {{album.Description}}
\r\n \r\n \r\n\r\n
\r\n `\r\n})\r\n\r\nexport class ErrorDisplay implements OnInit {\r\n constructor() {\r\n }\r\n\r\n /**\r\n * Error object that is bound to the component.\r\n * @type {ErrorInfo}\r\n */\r\n @Input() error: ErrorInfo = new ErrorInfo();\r\n\r\n ngOnInit() {\r\n }\r\n}\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class ErrorInfo {\r\n constructor() {\r\n this.reset();\r\n }\r\n\r\n message: string;\r\n icon: string;\r\n dismissable: boolean;\r\n header: string;\r\n imageIcon: string;\r\n iconColor: string;\r\n\r\n response: Response = null;\r\n\r\n reset() {\r\n this.message = \"\";\r\n this.header = \"\";\r\n this.dismissable = false;\r\n this.icon = \"warning\";\r\n this.imageIcon = \"warning\";\r\n this.iconColor = \"inherit\";\r\n }\r\n\r\n /**\r\n * Low level method to set message properties\r\n * @param msg - the message to set to\r\n * @param icon? - sets the icon property (warning*)\r\n * @param iconColor? - sets the icon color (left as is)\r\n */\r\n show(msg: string, icon?: string, iconColor?: string) {\r\n this.message = msg;\r\n this.icon = icon ? icon : \"warning\";\r\n if (iconColor)\r\n this.iconColor = iconColor;\r\n\r\n this.fixupIcons();\r\n\r\n\r\n // if(this.icon == \"warning\")\r\n // toastr.warning(this.message);\r\n // if(this.icon == \"info\")\r\n // toastr.info(this.message);\r\n // if (this.icon == \"success\")\r\n // toastr.success(this.message);\r\n }\r\n\r\n /**\r\n * Displays an error alert\r\n * @param msg - Either a message string or error object with .message property\r\n */\r\n error(msg) {\r\n if (typeof(msg) === 'object' && msg.message)\r\n this.message = msg.message;\r\n else\r\n this.message = msg;\r\n\r\n this.show(this.message, \"warning\");\r\n }\r\n\r\n /**\r\n * DIsplays an info style alert\r\n * @param msg - message to display\r\n */\r\n info(msg) {\r\n this.show(msg, \"info\");\r\n }\r\n\r\n /**\r\n * Fixes up icons and colors based on standard icon settings\r\n * this method is called in internally after any of the helper\r\n * methods are called. You can call this when setting any icon\r\n * related properties manually.\r\n */\r\n fixupIcons() {\r\n var err = this;\r\n\r\n if (err.icon === \"info\")\r\n err.imageIcon = \"info-circle\";\r\n if (err.icon === \"error\" || err.icon === \"danger\" || err.icon === \"warning\") {\r\n err.imageIcon = \"warning\";\r\n err.iconColor = \"firebrick\";\r\n }\r\n if (err.icon === \"success\") {\r\n err.imageIcon = \"check\";\r\n err.iconColor = \"green\";\r\n }\r\n }\r\n\r\n /**\r\n * Parse a toPromise() .catch() clause error\r\n * from a response object and returns an errorInfo object\r\n * @param response\r\n * @returns {Promise\r\n \r\n {{error.header}}\r\n
\r\n \r\n\r\n {{error.message}}\r\n \r\n \r\n \r\n\r\n \r\n\r\n
\r\n","import { Component, OnInit } from '@angular/core';\r\nimport {AppConfiguration} from \"../business/appConfiguration\";\r\nimport {UserInfo} from \"../business/userInfo\";\r\nimport {ErrorInfo} from \"../common/errorDisplay\";\r\nimport {HttpClient } from \"@angular/common/http\";\r\nimport { ApplicationStats } from '../business/entities';\r\n\r\ndeclare var $:any;\r\ndeclare var toastr:any;\r\ndeclare var window: any;\r\n\r\n@Component({\r\n selector: 'options',\r\n templateUrl: 'options.html'\r\n})\r\nexport class OptionsComponent implements OnInit {\r\n error: ErrorInfo = new ErrorInfo();\r\n\r\n constructor(public config: AppConfiguration,\r\n public user: UserInfo,\r\n private http: HttpClient) {\r\n }\r\n\r\n ngOnInit() {\r\n this.config.isSearchAllowed = false;\r\n if (this.config.applicationStats.OsPlatform == null) {\r\n this.http.get\r\n
\r\n\r\n ![]()
\r\n
\r\n \r\n
\r\n More from\r\n \r\n {{album.Artist.ArtistName}}
\r\n![]()
\r\n \r\n
\r\n \r\n {{album.Title}}\r\n
\r\n\r\n\r\n\r\n by {{album.Artist.ArtistName}}\r\n {{(album.Year ? 'in ' + album.Year : '')}}\r\n
\r\n \r\n\r\n \r\n\r\n\r\n \r\n More from\r\n \r\n {{album.Artist.ArtistName}}
\r\n
\r\n \r\n
\r\n","import {Component} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'about',\r\n templateUrl: 'about.html'\r\n})\r\nexport class AboutComponent {\r\n\r\n}\r\n","\r\n \r\n \r\n
\r\n\r\n\r\n \r\n Reset Data\r\n
\r\nReset data to original sample data.
\r\n \r\n\r\n \r\n\r\n \r\n About Album Viewer\r\n
\r\n\r\n Server Platform: {{config.applicationStats.OsPlatform}}
\r\n ASP.NET Version: {{config.applicationStats.AspDotnetVersion}}
\r\n Angular Version: {{config.applicationStats.AngularVersion}}
\r\n Data Mode: {{config.applicationStats.DataMode}}\r\n
\r\n \r\n Back to Album List\r\n
\r\n \r\n \r\n \r\n\r\n \r\n GitHub \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n Settings
\r\n\r\n\r\n \r\n \r\n
\r\n \r\n \r\n Sign in\r\n
\r\n \r\n \r\n\r\n \r\n Sign out\r\n
\r\n \r\n \r\n
\r\n Back to Application\r\n\r\n
\r\n","import { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\n\r\nimport { AlbumList } from './albums/albumList';\r\nimport { AlbumDisplay} from './albums/albumDisplay';\r\nimport {AlbumEditor } from './albums/albumEditor';\r\nimport { ArtistList } from './artists/artistList';\r\nimport { ArtistDisplay} from \"./artists/artistDisplay\";\r\nimport {OptionsComponent} from \"./options/options\";\r\nimport {LoginComponent} from \"./common/login\";\r\nimport {AboutComponent} from \"./options/about\";\r\n\r\nconst routes: Routes = [\r\n\t{path: '', redirectTo: 'albums', pathMatch: 'full'},\r\n\t{path: 'albums', component: AlbumList },\r\n\t{path: 'album/:id', component: AlbumDisplay },\r\n\t{path: 'album/edit/:id', component: AlbumEditor },\r\n\t{path: 'artists', component: ArtistList },\r\n\t{path: 'artist/:id', component: ArtistDisplay },\r\n\t{path: 'options', component: OptionsComponent },\r\n\t{ path: 'login', component: LoginComponent },\r\n\t{ path: 'logout', component: LoginComponent },\r\n\t{ path: 'about', component: AboutComponent}\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],\r\n exports: [RouterModule], \r\n providers: []\r\n})\r\nexport class AppRoutingModule { }\r\n","import { Injectable } from '@angular/core';\r\nimport {\r\n HttpEvent, HttpInterceptor, HttpHandler, HttpRequest\r\n} from '@angular/common/http';\r\n\r\nimport { Observable } from 'rxjs';\r\nimport {UserInfo} from \"./userInfo\";\r\n\r\n/** Inject With Credentials into the request */\r\n@Injectable()\r\nexport class HttpRequestInterceptor implements HttpInterceptor {\r\n\r\n constructor(private userInfo:UserInfo){\r\n\r\n }\r\n intercept(req: HttpRequest\r\n About the AlbumViewer Sample\r\n
\r\n\r\n\r\n
\r\n\r\n ASP.NET Core API backend
\r\n\r\n This application runs an ASP.NET Core 2.0 API server with a\r\n JSON Service backend . \r\n
\r\n\r\n
\r\n\r\n Angular Front End
\r\n\r\n The client interface uses Angular 7 to provide the front end logic and\r\n UI management features. There are album and artist services that\r\n talk to the backend interface and page level components and child\r\n components that handle individual view pages of the application.\r\n
\r\n\r\n
\r\n\r\n Mobile enabled based on modified Bootstrap 4.0 Interface
\r\n\r\n The base Bootstrap framework is used for the core UI features\r\n of the interface. The base template has been customized for\r\n this application.\r\n
\r\n\r\n The application is mobile focused and uses custom resizing\r\n and toolbar relocation based on the screen/device size used.\r\n The application should be comfortably usable from phone up to full screen\r\n desktop applications.\r\n
\r\n\r\n Back to Application\r\n\r\n