stories

src/Ombi/ClientApp/.storybook/preview-body.html

@@ -5,5 +5,6 @@
 
     body {
         background: #0f171f;
+        color: white;
     }
 </style>

src/Ombi/ClientApp/.storybook/preview.js

@@ -1,6 +1,6 @@
 import { setCompodocJson } from "@storybook/addon-docs/angular";
 import docJson from "../documentation.json";
-// import '../src/styles/Styles.scss';
+
 import '../src/styles/_imports.scss';
 
 setCompodocJson(docJson);

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.stories.ts

@@ -1,9 +1,23 @@
 // also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { APP_BASE_HREF } from '@angular/common';
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
 import { Story, Meta, moduleMetadata } from '@storybook/angular';
 import { IRecentlyRequested, RequestType } from '../../interfaces';
 import { DetailedCardComponent } from './detailed-card.component';
 import { TranslateModule } from "@ngx-translate/core";
+import { ImageService } from "../../services/image.service";
+import { Observable, of } from 'rxjs';
+import { SharedModule } from '../../shared/shared.module';
+import { PipeModule } from '../../pipes/pipe.module';
+import { ImageComponent } from '../image/image.component';
+
+function imageServiceMock(): Partial<ImageService> {
+	return {
+    getMoviePoster: () : Observable<string> => of("https://assets.fanart.tv/fanart/movies/603/movieposter/the-matrix-52256ae1021be.jpg"),
+    getMovieBackground : () : Observable<string> => of("https://assets.fanart.tv/fanart/movies/603/movieposter/the-matrix-52256ae1021be.jpg"),
+		getTmdbTvPoster : () : Observable<string> => of("/bfxwMdQyJc0CL24m5VjtWAN30mt.jpg"),
+		getTmdbTvBackground : () : Observable<string> => of("/bfxwMdQyJc0CL24m5VjtWAN30mt.jpg"),
+	};
+}
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
 export default {
@@ -16,9 +30,17 @@ export default {
           provide: APP_BASE_HREF,
           useValue: {}
         },
+        {
+          provide: ImageService,
+          useValue: imageServiceMock()
+        }
       ],
       imports: [
         TranslateModule.forRoot(),
+        CommonModule,
+        ImageComponent,
+        SharedModule,
+        PipeModule
       ]
     })
   ]
@@ -44,6 +66,128 @@ NewMovieRequest.args = {
     mediaId: '603',
     overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
     releaseDate: new Date(2020, 1, 1),
-    posterPath: "https://assets.fanart.tv/fanart/movies/603/movieposter/the-matrix-52256ae1021be.jpg"
+  } as IRecentlyRequested,
+};
+
+export const MovieNoUsername = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+MovieNoUsername.args = {
+  request: {
+    title: 'The Matrix',
+    approved: false,
+    available: false,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    userId: '12345',
+    type: RequestType.movie,
+    mediaId: '603',
+    overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+export const AvailableMovie = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+AvailableMovie.args = {
+  request: {
+    title: 'The Matrix',
+    approved: false,
+    available: true,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.movie,
+    mediaId: '603',
+    overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+export const ApprovedMovie = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+ApprovedMovie.args = {
+  request: {
+    title: 'The Matrix',
+    approved: true,
+    available: false,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.movie,
+    mediaId: '603',
+    overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+export const NewTvRequest = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+NewTvRequest.args = {
+  request: {
+    title: 'For All Mankind',
+    approved: false,
+    available: false,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.tvShow,
+    mediaId: '603',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+
+export const ApprovedTv = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+ApprovedTv.args = {
+  request: {
+    title: 'For All Mankind',
+    approved: true,
+    available: false,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.tvShow,
+    mediaId: '603',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+export const AvailableTv = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+AvailableTv.args = {
+  request: {
+    title: 'For All Mankind',
+    approved: true,
+    available: true,
+    tvPartiallyAvailable: false,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.tvShow,
+    mediaId: '603',
+    releaseDate: new Date(2020, 1, 1),
+  } as IRecentlyRequested,
+};
+
+
+export const PartiallyAvailableTv = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+PartiallyAvailableTv.args = {
+  request: {
+    title: 'For All Mankind',
+    approved: true,
+    available: false,
+    tvPartiallyAvailable: true,
+    requestDate: new Date(2022, 1, 1),
+    username: 'John Doe',
+    userId: '12345',
+    type: RequestType.tvShow,
+    mediaId: '603',
+    releaseDate: new Date(2020, 1, 1),
   } as IRecentlyRequested,
 };