Latest practices... also probably broke some styles - sorry (#1508)

* Latest practices

* Lock zone.js to 0.8.16 (for now, see https://github.com/angular/zone.js/pull/887 )

* Use es6-compatible minifier

* Attempt to fix pull req appveyor builds

* Attempt build fix again

* Remove cake gulp publish task - not needed anymore

* Use bootswatch

and remove unused bootstrap dependency

* Add bootstrap

* Fix things

build.cake

@@ -95,19 +95,11 @@ Task("SetVersionInfo")
 
 
 	buildSettings.ArgumentCustomization = args => args.Append("/p:SemVer=" + versionInfo.AssemblySemVer);
-	buildSettings.ArgumentCustomization = args => args.Append("/p:FullVer=" + fullVer);
+	buildSettings.ArgumentCustomization = args => args.Append("/p:FullVer=" + versionInfo.FullSemVer);
 	publishSettings.ArgumentCustomization = args => args.Append("/p:SemVer=" + versionInfo.AssemblySemVer);
-	publishSettings.ArgumentCustomization = args => args.Append("/p:FullVer=" + fullVer);
+	publishSettings.ArgumentCustomization = args => args.Append("/p:FullVer=" + versionInfo.FullSemVer);
-	buildSettings.VersionSuffix = versionInfo.BranchName;
+	//buildSettings.VersionSuffix = versionInfo.BranchName;
-	publishSettings.VersionSuffix = versionInfo.BranchName;
+	//publishSettings.VersionSuffix = versionInfo.BranchName;
-});
-
-Task("Restore")
-    .IsDependentOn("SetVersionInfo")
-	.IsDependentOn("Gulp Publish")
-    .Does(() =>
-{
-    DotNetCoreRestore(projDir);
 });
 
 Task("NPM")
@@ -121,18 +113,15 @@ var settings = new NpmInstallSettings {
 	NpmInstall(settings);
 });
 
-Task("Gulp Publish")
+Task("Restore")
-.IsDependentOn("NPM")
+    .IsDependentOn("SetVersionInfo")
-.Does(() => {
+	.IsDependentOn("NPM")
-
+    .Does(() =>
-var runScriptSettings = new NpmRunScriptSettings {
+{
-		ScriptName="publish",
+    DotNetCoreRestore(projDir);
-		WorkingDirectory = webProjDir,
-	};
-	
-	NpmRunScript(runScriptSettings);
 });
 
+
 Task("Build")
     .IsDependentOn("Restore")
     .Does(() =>

src/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "Angular.ng-template",
+        "ms-vscode.csharp"
+    ]
+}

src/.vscode/launch.json

@@ -10,17 +10,17 @@
             "request": "launch",
             "preLaunchTask": "build",
             // If you have changed target frameworks, make sure to update the program path.
-            "program": "${workspaceRoot}/Ombi/bin/Debug/netcoreapp1.1/Ombi.dll",
+            "program": "${workspaceRoot}/Ombi/bin/Debug/netcoreapp2.0/Ombi.dll",
             "args": [],
             "cwd": "${workspaceRoot}/Ombi",
             "stopAtEntry": false,
             "internalConsoleOptions": "openOnSessionStart",
             "launchBrowser": {
                 "enabled": true,
-                "args": "${auto-detect-url}",
+                "args": "http://localhost:5000",
                 "windows": {
                     "command": "cmd.exe",
-                    "args": "/C start ${auto-detect-url}"
+                    "args": "/C start http://localhost:5000"
                 },
                 "osx": {
                     "command": "open"

src/Ombi.Api.Sonarr/SonarrApi.cs

@@ -97,7 +97,7 @@ namespace Ombi.Api.Sonarr
 
                 return await Api.Request<NewSeries>(request);
             }
-            catch (JsonSerializationException e)
+            catch (JsonSerializationException)
             {
                 var error = await Api.Request<List<SonarrError>>(request);
                 var messages = error?.Select(x => x.errorMessage).ToList();

src/Ombi.Helpers/PlexHelper.cs

@@ -62,7 +62,7 @@ namespace Ombi.Helpers
                 return ep;
 
             }
-            catch (Exception e)
+            catch (Exception)
             {
                 return ep;
             }

src/Ombi.Schedule/Jobs/Radarr/RadarrCacher.cs

@@ -66,7 +66,7 @@ namespace Ombi.Schedule.Jobs.Radarr
                     }
                 }
             }
-            catch (Exception e)
+            catch (Exception)
             {
                 Logger.LogInformation(LoggingEvents.RadarrCacher, "Radarr is not setup, cannot cache episodes");
             }

src/Ombi/ClientApp/app/requests/tvrequests.component.scss

@@ -1,18 +1,3 @@
-table.ui-widget-content {
+th {
-    border: 1px solid #1f1f1f !important;
-    background: #1f1f1f !important;
-}
-.ui-widget-content {
-     color: #ffffff; 
-}
-.ui-state-default.ui-unselectable-text{
-    display:none;
-}
-.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-right,
-.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-down {
-    display: none;
-}
-
-th {
     text-align: left !important;
 }

src/Ombi/ClientApp/app/requests/tvrequests.component.ts

@@ -26,7 +26,7 @@ import { TreeNode, } from "primeng/primeng";
 })
 export class TvRequestsComponent implements OnInit, OnDestroy {
     constructor(private requestService: RequestService,
-    private auth:AuthService) {
+        private auth: AuthService) {
         this.searchChanged
             .debounceTime(600) // Wait Xms afterthe last event before emitting last event
             .distinctUntilChanged() // only emit if value is different from previous value
@@ -42,7 +42,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
                     .subscribe(m => this.tvRequests = this.transformData(m));
             });
     }
-    openClosestTab(el:any): void {
+    openClosestTab(el: any): void {
         var rowclass = "undefined";
         el = el.toElement;
         while (el.className != rowclass) {
@@ -55,13 +55,12 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
         // the class you specified
 
         // Then we loop through the children to find the caret which we want to click
-        var caretright = "ui-treetable-toggler fa fa-fw ui-c fa-caret-right";
+        var caretright = "ui-treetable-toggler fa fa-fw ui-clickable fa-caret-right";
-        var caretdown = "ui-treetable-toggler fa fa-fw ui-c fa-caret-down";
+        var caretdown = "ui-treetable-toggler fa fa-fw ui-clickable fa-caret-down";
         for (var value of el.children) {
             // the caret from the ui has 2 class selectors depending on if expanded or not
             // we search for both since we want to still toggle the clicking
-            if (value.className === caretright || value.className === caretdown )
+            if (value.className === caretright || value.className === caretdown) {
-            {
                 // Then we tell JS to click the element even though we hid it from the UI
                 value.click();
                 //Break from loop since we no longer need to continue looking
@@ -71,7 +70,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
     }
     transformData(data: ITvRequests[]): TreeNode[] {
         var temp: TreeNode[] = [];
-        data.forEach(function (value) {
+        data.forEach((value) => {
             temp.push({
                 "data": value,
                 "children": [{
@@ -121,7 +120,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
         //if you scroll really quickly then you start getting duplicates of movies
         //since it's async and some subsequent results return first and then incrementer
         //is increased so you see movies which had already been gotten show up...
-        this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded +1)
+        this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1)
             .takeUntil(this.subscriptions)
             .subscribe(x => {
                 this.tvRequests.push.apply(this.tvRequests, this.transformData(x));
@@ -218,7 +217,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
     }
 
     private removeRequestFromUi(key: ITvRequests) {
-        var index = this.tvRequests.indexOf(key, 0);
+        var index = this.tvRequests.findIndex(x => x.data === key);
         if (index > -1) {
             this.tvRequests.splice(index, 1);
         }

src/Ombi/ClientApp/app/search/tvsearch.component.ts

@@ -1,10 +1,6 @@
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/map';
-import "rxjs/add/operator/takeUntil";
 
 import { SearchService } from '../services/search.service';
 import { AuthService } from '../auth/auth.service';
@@ -19,10 +15,6 @@ import { TreeNode } from "primeng/primeng";
     selector: 'tv-search',
     templateUrl: './tvsearch.component.html',
     styleUrls: ['./../requests/tvrequests.component.scss'],
-    //Was required to turn off encapsulation since CSS only should be overridden for this component
-    //However when encapsulation is on angular injects prefixes to all classes so css selectors
-    //Stop working
-    encapsulation: ViewEncapsulation.None
 })
 export class TvSearchComponent implements OnInit, OnDestroy {
 
@@ -67,8 +59,8 @@ export class TvSearchComponent implements OnInit, OnDestroy {
         // the class you specified
 
         // Then we loop through the children to find the caret which we want to click
-        var caretright = "ui-treetable-toggler fa fa-fw ui-c fa-caret-right";
+        var caretright = "ui-treetable-toggler fa fa-fw ui-clickable fa-caret-right";
-        var caretdown = "ui-treetable-toggler fa fa-fw ui-c fa-caret-down";
+        var caretdown = "ui-treetable-toggler fa fa-fw ui-clickable fa-caret-down";
         for (var value of el.children) {
             // the caret from the ui has 2 class selectors depending on if expanded or not
             // we search for both since we want to still toggle the clicking

src/Ombi/ClientApp/imports.ts

@@ -0,0 +1,2 @@
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';

src/Ombi/ClientApp/main.ts

@@ -1,4 +1,7 @@
+import "./styles/base.scss";
+import "./styles/Themes/plex.scss";
 import './polyfills';
+import './imports';
 import 'bootstrap/dist/js/bootstrap';
 import 'pace-progress';
 
@@ -14,6 +17,7 @@ if (module['hot']) {
         const newRootElem = document.createElement('ombi');
         if (oldRootElem && oldRootElem.parentNode) {
             oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
+            oldRootElem.parentNode.removeChild(oldRootElem);
         }
         modulePromise.then(appModule => appModule.destroy());
     });

src/Ombi/ClientApp/styles/Themes/plex.scss

@@ -3,9 +3,7 @@ $primary-colour: #df691a;
 $primary-colour-outline: #ff761b;
 $bg-colour: #333333;
 $bg-colour-disabled: #252424;
-$i:
+$i:!important;
-!important
-;
 
 .form-control-custom {
     background-color: $bg-colour $i;
@@ -272,4 +270,12 @@ button.list-group-item:focus {
     border-radius: 0;
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.ui-widget-content {
+    border: 1px solid #1f1f1f !important;
+    background: #1f1f1f !important;
+}
+.ui-widget-content {
+     color: #ffffff; 
 }

src/Ombi/ClientApp/styles/_imports.scss

@@ -0,0 +1 @@
+@import './styles.scss';

src/Ombi/ClientApp/styles/base.scss

@@ -775,3 +775,11 @@ textarea {
     -webkit-box-shadow: none;
     box-shadow: none;
 }
+
+.ui-state-default.ui-unselectable-text{
+    display:none;
+}
+.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-right,
+.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-down {
+    display: none;
+}

src/Ombi/Ombi.csproj

@@ -4,7 +4,7 @@
     <TargetFramework>netcoreapp2.0</TargetFramework>
     <RuntimeIdentifiers>win10-x64;osx.10.12-x64;ubuntu.16.04-x64;debian.8-x64;centos.7-x64;</RuntimeIdentifiers>
     <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
-    <TypeScriptToolsVersion>2.3</TypeScriptToolsVersion>
+    <TypeScriptToolsVersion>2.5</TypeScriptToolsVersion>
     <AssemblyVersion>$(SemVer)</AssemblyVersion>
     <FileVersion>$(SemVer)</FileVersion>
     <Version>$(FullVer)</Version>
@@ -30,6 +30,13 @@
     <EmbeddedResource Remove="wwwroot\dist\**" />
     <None Remove="wwwroot\dist\**" />
   </ItemGroup>
+
+  <Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
+    <Exec Command="npm run-script vendor" />
+  </Target>
+  <Target Name="NpmCommandsRelease" Condition="'$(Configuration)'=='Release'" AfterTargets="Build">
+    <Exec Command="npm run-script publish" />
+  </Target>
   
   <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
     <ItemGroup>
@@ -83,5 +90,13 @@
       <DependentUpon>pipe.module.ts</DependentUpon>
     </None>
   </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Styles\" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="wwwroot\loading.css" />
+  </ItemGroup>
  
 </Project>

src/Ombi/Styles/_imports.scss

@@ -1,10 +0,0 @@
-//@import "~primeng/resources/themes/omega/theme.scss";
-
-/*@import './Themes/plex.scss';*/
-
-/*$fa-font-path: "../fonts/lib";
-@import "../bower_components/font-awesome/scss/font-awesome.scss";*/
-
-@import '../bootstrap.css';
-@import './Styles.scss';
-@import '_loading.scss';

src/Ombi/Styles/_loading.scss

@@ -1,69 +0,0 @@
-.app-loading-container {
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-box-pack: center;
-    -webkit-box-align: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    .app-loading {
-        margin: auto;
-        font-size: 2em;
-    }
-
-    .app-loading-one {
-        opacity: 0;
-        -webkit-animation: dot 1.3s infinite;
-        -webkit-animation-delay: 0.0s;
-        animation: app-loading-dot 1.3s infinite;
-        animation-delay: 0.0s;
-    }
-
-    .app-loading-two {
-        opacity: 0;
-        -webkit-animation: dot 1.3s infinite;
-        -webkit-animation-delay: 0.2s;
-        animation: app-loading-dot 1.3s infinite;
-        animation-delay: 0.2s;
-    }
-
-    .app-loading-three {
-        opacity: 0;
-        -webkit-animation: dot 1.3s infinite;
-        -webkit-animation-delay: 0.3s;
-        animation: app-loading-dot 1.3s infinite;
-        animation-delay: 0.3s;
-    }
-
-    @-webkit-keyframes app-loading-dot {
-        0% {
-            opacity: 0;
-        }
-
-        50% {
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-
-    @keyframes app-loading-dot {
-        0% {
-            opacity: 0;
-        }
-
-        50% {
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-}

src/Ombi/Views/Shared/_Layout.cshtml

@@ -6,7 +6,7 @@
         <title>Ombi</title>
         <base href="/" />
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-        <link rel="stylesheet" href="~/dist/main.css" asp-append-version="true" />
+        <link rel="stylesheet" href="~/loading.css" asp-append-version="true" />
         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
         <script src="~/dist/vendor.js" asp-append-version="true" defer></script>
         <script src="~/dist/main.js" asp-append-version="true" defer></script>

src/Ombi/gulpfile.js

@@ -1,4 +1,3 @@
-/// <binding BeforeBuild='build' />
 'use strict'; 
 
 const gulp = require('gulp');
@@ -42,11 +41,11 @@ gulp.task('test_run', function () {
 
 gulp.task('prod_var', function () {
     global.prod = true;
-})
+});
 
 gulp.task('analyse_var', function () {
     global.analyse = true;
-})
+});
 
 gulp.task('clean', function() {
   del.sync(outputDir, { force: true });

src/Ombi/package.json

@@ -3,75 +3,80 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
+    "vendor": "gulp vendor",
     "publish": "gulp publish"
   },
   "dependencies": {
-    "@angular/animations": "4.1.3",
+    "@angular/animations": "4.4.1",
-    "@angular/common": "^4.1.3",
+    "@angular/cdk": "^2.0.0-beta.10",
-    "@angular/compiler": "4.1.3",
+    "@angular/common": "^4.4.1",
-    "@angular/core": "4.1.3",
+    "@angular/compiler": "4.4.1",
-    "@angular/forms": "4.1.3",
+    "@angular/core": "4.4.1",
-    "@angular/http": "4.1.3",
+    "@angular/forms": "4.4.1",
-    "@angular/material": "2.0.0-beta.5",
+    "@angular/http": "4.4.1",
-    "@angular/platform-browser": "4.1.3",
+    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser-dynamic": "4.1.3",
+    "@angular/platform-browser": "4.4.1",
-    "@angular/platform-server": "4.1.3",
+    "@angular/platform-browser-dynamic": "4.4.1",
-    "@angular/router": "4.1.3",
+    "@angular/platform-server": "4.4.1",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
+    "@angular/router": "4.4.1",
-    "@types/core-js": "^0.9.41",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
-    "@types/intro.js": "^2.4.2",
+    "@types/core-js": "^0.9.43",
-    "@types/node": "7.0.23",
+    "@types/intro.js": "^2.4.3",
+    "@types/node": "8.0.28",
     "angular2-jwt": "^0.2.3",
-    "angular2-moment": "^1.3.3",
+    "angular2-moment": "^1.7.0",
     "angular2-template-loader": "0.6.2",
-    "aspnet-webpack": "^1.0.29",
+    "aspnet-webpack": "^2.0.1",
-    "awesome-typescript-loader": "3.1.3",
+    "awesome-typescript-loader": "3.2.3",
     "bootstrap": "^3.3.7",
     "bootswatch": "^3.3.7",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.1",
     "css": "2.2.1",
-    "css-loader": "0.28.4",
+    "css-loader": "0.28.7",
-    "del": "^2.2.2",
+    "del": "^3.0.0",
     "event-source-polyfill": "0.0.9",
     "expose-loader": "0.7.3",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "0.11.1",
+    "file-loader": "0.11.2",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
     "gulp-run": "^1.7.1",
     "hammerjs": "^2.0.8",
-    "html-loader": "0.4.5",
+    "html-loader": "0.5.1",
     "intro.js-mit": "^3.0.0",
     "jquery": "3.2.1",
     "ng2-dragula": "1.5.0",
     "ngx-clipboard": "^8.0.4",
     "ngx-infinite-scroll": "^0.5.1",
     "node-sass": "^4.5.3",
-    "npm": "^5.4.1",
+    "npm": "^5.4.2",
     "pace-progress": "^1.0.2",
-    "primeng": "^4.0.3",
+    "primeng": "^4.2.1",
     "reflect-metadata": "0.1.10",
-    "run-sequence": "^1.2.2",
+    "run-sequence": "^2.1.0",
-    "rxjs": "5.4.0",
+    "rxjs": "5.4.3",
-    "sass-loader": "^6.0.5",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
     "to-string-loader": "1.1.5",
-    "typescript": "2.3.4",
+    "typescript": "2.5.2",
-    "url-loader": "0.5.8",
+    "uglify-es": "^3.1.0",
-    "webpack": "^2.6.1",
+    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
-    "webpack-bundle-analyzer": "^2.8.2",
+    "url-loader": "0.5.9",
-    "webpack-hot-middleware": "2.18.0",
+    "webpack": "^3.6.0",
-    "zone.js": "0.8.11"
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-hot-middleware": "2.19.1",
+    "zone.js": "0.8.16"
   },
   "devDependencies": {
-    "@types/chai": "4.0.0",
+    "@types/chai": "4.0.4",
-    "@types/jasmine": "2.5.48",
+    "@types/jasmine": "2.6.0",
-    "chai": "4.0.1",
+    "chai": "4.1.2",
-    "jasmine-core": "2.6.2",
+    "jasmine-core": "2.8.0",
-    "karma": "1.7.0",
+    "karma": "1.7.1",
     "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "2.1.1",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-jasmine": "1.1.0",
-    "karma-webpack": "2.0.3"
+    "karma-webpack": "2.0.4"
   }
 }

src/Ombi/webpack.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = function (env) {
     const extractCSS = new ExtractTextPlugin('main.css');
@@ -13,7 +14,7 @@ module.exports = function (env) {
     const cssLoader = prod ? 'css-loader?minimize' : 'css-loader';
     const outputDir = './wwwroot/dist';
     const bundleConfig = {
-        entry: { 'main': './ClientApp/main.ts', 'styles': './Styles/Themes/plex.scss' },
+        entry: { 'main': './ClientApp/main.ts' },
         stats: { modules: false },
         context: __dirname,
         resolve: { extensions: ['.ts', '.js'] },
@@ -28,8 +29,8 @@ module.exports = function (env) {
                 { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                 { test: /\.html$/, use: 'html-loader?minimize=false' },
                 { test: /\.css$/, use: ['to-string-loader', cssLoader] },
-                { test: /\.scss$/, include: /ClientApp/, use: ['to-string-loader', cssLoader, 'sass-loader'] },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
-                { test: /\.scss$/, include: /Styles/, use: extractCSS.extract({ use: [cssLoader, 'sass-loader'] }) },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
@@ -42,7 +43,7 @@ module.exports = function (env) {
             })
         ].concat(prod ? [
             // Plugins that apply in production builds only
-            new webpack.optimize.UglifyJsPlugin()
+            new UglifyJSPlugin()
         ] : [
             // Plugins that apply in development builds only
         ]).concat(analyse ? [

src/Ombi/webpack.config.vendor.js

@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = function (env) {
     const extractCSS = new ExtractTextPlugin('vendor.css');
@@ -49,6 +50,8 @@ module.exports = function (env) {
                 'intro.js-mit/intro.js',
                 'intro.js-mit/introjs.css',
                 'ngx-clipboard',
+                'bootswatch/superhero/bootstrap.min.css',
+                'style-loader',
                 //'ng2-dragula',
                 //'dragula/dist/dragula.min.css'
             ]
@@ -59,6 +62,9 @@ module.exports = function (env) {
             library: '[name]_[hash]',
             path: path.join(__dirname, outputDir)
         },
+        node: {
+            fs: "empty",
+        },
         resolve: {
             alias: {
                 pace: 'pace-progress'
@@ -76,7 +82,7 @@ module.exports = function (env) {
             })
         ].concat(prod ? [
             // Plugins that apply in production builds only
-            new webpack.optimize.UglifyJsPlugin()
+            new UglifyJSPlugin()
         ] : [
             // Plugins that apply in development builds only
         ]).concat(analyse ? [

src/Ombi/wwwroot/loading.css

@@ -0,0 +1,69 @@
+.app-loading-container {
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.app-loading {
+    margin: auto;
+    font-size: 2em;
+}
+
+.app-loading-one {
+    opacity: 0;
+    -webkit-animation: dot 1.3s infinite;
+    -webkit-animation-delay: 0.0s;
+    animation: app-loading-dot 1.3s infinite;
+    animation-delay: 0.0s;
+}
+
+.app-loading-two {
+    opacity: 0;
+    -webkit-animation: dot 1.3s infinite;
+    -webkit-animation-delay: 0.2s;
+    animation: app-loading-dot 1.3s infinite;
+    animation-delay: 0.2s;
+}
+
+.app-loading-three {
+    opacity: 0;
+    -webkit-animation: dot 1.3s infinite;
+    -webkit-animation-delay: 0.3s;
+    animation: app-loading-dot 1.3s infinite;
+    animation-delay: 0.3s;
+}
+
+@-webkit-keyframes app-loading-dot {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes app-loading-dot {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}