!wip on the layer#Cake integration

src/Ombi.Api.Github/GithubApi.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Net.Http;
 using System.Threading.Tasks;
 using Ombi.Api.Github.Models;
@@ -23,5 +24,16 @@ namespace Ombi.Api.Github
             request.AddHeader("User-Agent", "Ombi");
             return await _api.Request<List<CakeThemes>>(request);
         }
+
+        public async Task<string> GetThemesRawContent(string url)
+        {
+            var sections = url.Split('/');
+            var lastPart = sections.Last();
+            url = url.Replace(lastPart, string.Empty);
+            var request = new Request(lastPart, url, HttpMethod.Get);
+            request.AddHeader("Accept", "application/vnd.github.v3+json");
+            request.AddHeader("User-Agent", "Ombi");
+            return await _api.RequestContent(request);
+        }
     }
 }

src/Ombi.Api.Github/IGithubApi.cs

@@ -7,5 +7,6 @@ namespace Ombi.Api.Github
     public interface IGithubApi
     {
         Task<List<CakeThemes>> GetCakeThemes();
+        Task<string> GetThemesRawContent(string url);
     }
 }

src/Ombi.Settings/Settings/Models/CustomizationSettings.cs

@@ -1,4 +1,5 @@
-using System.ComponentModel.DataAnnotations.Schema;
+using System;
+using System.ComponentModel.DataAnnotations.Schema;
 using Newtonsoft.Json;
 using Ombi.Helpers;
 
@@ -14,6 +15,34 @@ namespace Ombi.Settings.Settings.Models
         public string PresetThemeName { get; set; }
         public string PresetThemeContent { get; set; }
 
+        [NotMapped]
+        public string PresetThemeVersionVersion
+        {
+            get
+            {
+                if (HasPresetTheme)
+                {
+                    var parts = PresetThemeName.Split('-');
+                    return parts[3].Replace(".css", string.Empty);
+                }
+                return string.Empty;
+            }
+        }
+
+        [NotMapped]
+        public string PresetThemeDisplayName
+        {
+            get
+            {
+                if (HasPresetTheme)
+                {
+                    var parts = PresetThemeName.Split('-');
+                    return parts[1];
+                }
+                return string.Empty;
+            }
+        }
+
         [NotMapped]
         public bool HasPresetTheme => PresetThemeName.HasValue() || PresetThemeContent.HasValue();
 

src/Ombi/ClientApp/app/interfaces/ISettings.ts

@@ -94,6 +94,11 @@ export interface ICustomizationSettings extends ISettings {
     applicationUrl: string;
     logo: string;
     customCssLink: string;
+    hasPresetTheme: boolean;
+    presetThemeName: string;
+    presetThemeContent: string;
+    presetThemeDisplayName: string;
+    presetThemeVersion: string;
 }
 
 export interface IThemes {

src/Ombi/ClientApp/app/landingpage/landingpage.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="landingPageSettings && customizationSettings && background">
+<div *ngIf="landingPageSettings && customizationSettings">
-    <img class="landingDiv bg" [style.background-image]="background" />
+    <img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
 
     <div class="centered col-md-12">
         <div class="row">

src/Ombi/ClientApp/app/login/login.component.html

@@ -2,9 +2,9 @@
 you can substitue the span of reauth email for a input with the email and
 include the remember me checkbox
 -->
-<div *ngIf="form && customizationSettings && background">
+<div *ngIf="form && customizationSettings">
 
-    <img class="landingDiv bg" [style.background-image]="background" />
+    <img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
     <div class="container" id="login">
         <div class="card card-container">
             <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->

src/Ombi/ClientApp/app/services/settings.service.ts

@@ -127,6 +127,10 @@ export class SettingsService extends ServiceAuthHelpers {
         return this.httpAuth.get(`${this.url}/themes`).map(this.extractData).catch(this.handleError);
     }
 
+    public getThemeContent(themeUrl: string): Observable<string> {
+        return this.httpAuth.get(`${this.url}/themecontent?url=${themeUrl}`).map(this.extractData).catch(this.handleError);
+    }
+
     public getEmailNotificationSettings(): Observable<IEmailNotificationSettings> {
         return this.httpAuth.get(`${this.url}/notifications/email`).map(this.extractData).catch(this.handleError);
     }

src/Ombi/ClientApp/app/settings/customization/customization.component.html

@@ -7,21 +7,24 @@
         <div class="form-group">
             <label for="applicationName" class="control-label">Application Name</label>
             <div>
-                <input type="text" [(ngModel)]="settings.applicationName" class="form-control form-control-custom " id="applicationName" name="applicationName" placeholder="Ombi" value="{{settings.applicationName}}">
+                <input type="text" [(ngModel)]="settings.applicationName" class="form-control form-control-custom " id="applicationName"
+                    name="applicationName" placeholder="Ombi" value="{{settings.applicationName}}">
             </div>
         </div>
 
         <div class="form-group">
             <label for="applicationurl" class="control-label">Application URL</label>
             <div>
-                <input type="text" [(ngModel)]="settings.applicationUrl" class="form-control form-control-custom " id="applicationurl" name="applicationurl" placeholder="http://ombi.io/" value="{{settings.applicationUrl}}">
+                <input type="text" [(ngModel)]="settings.applicationUrl" class="form-control form-control-custom " id="applicationurl" name="applicationurl"
+                    placeholder="http://ombi.io/" value="{{settings.applicationUrl}}">
             </div>
         </div>
 
         <div class="form-group">
             <label for="logo" class="control-label">Custom Logo</label>
             <div>
-                <input type="text" [(ngModel)]="settings.logo" class="form-control form-control-custom " id="logo" name="logo" value="{{settings.logo}}" tooltipPosition="top" pTooltip="Use a URL e.g. www.google.com/logo.png">
+                <input type="text" [(ngModel)]="settings.logo" class="form-control form-control-custom " id="logo" name="logo" value="{{settings.logo}}"
+                    tooltipPosition="top" pTooltip="Use a URL e.g. www.google.com/logo.png">
             </div>
         </div>
 
@@ -29,7 +32,8 @@
         <div class="form-group">
             <label for="customLink" class="control-label">Custom CSS Link</label>
             <div>
-                <input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " name="customLink" value="{{settings.customCssLink}}" tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi">
+                <input type="text" [(ngModel)]="settings.customCssLink" class="form-control form-control-custom " name="customLink" value="{{settings.customCssLink}}"
+                    tooltipPosition="top" pTooltip="A link to a CSS file, you can use this to use your own styles for Ombi">
             </div>
         </div>
 
@@ -42,7 +46,23 @@
         </div>
 
     </div>
-    <div class="col-md-6">
+    <!-- <div class="col-md-6">
+        <div *ngIf="themes">
+            <div class="form-group">
+                <label for="presetTheme" class="control-label">Preset Themes</label>
+                <div id="presetTheme">
+                    <select class="form-control form-control-custom" (change)="dropDownChange($event)">
+                        <option *ngFor="let theme of themes" value="{{theme.fullName}}">{{theme.displayName}} {{theme.version}}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <textarea rows="4" type="text" class="form-control-custom form-control " id="themeContent" name="themeContent" [(ngModel)]="settings.presetThemeContent"> {{settings.presetThemeContent}} </textarea>
+            </div>
+
+        </div>
+    </div> -->
+
 
     <div *ngIf="settings.logo" class="form-group">
         <label for="logo" class="control-label">Logo Preview:</label>
@@ -51,5 +71,4 @@
         </div>
     </div>
 
-    </div>
 </fieldset>

src/Ombi/ClientApp/app/settings/customization/customization.component.ts

@@ -15,8 +15,18 @@ export class CustomizationComponent implements OnInit {
     constructor(private settingsService: SettingsService, private notificationService: NotificationService) {  }
 
     public ngOnInit() {
-        this.settingsService.getCustomization().subscribe(x => this.settings = x);
+        this.settingsService.getCustomization().subscribe(x => {
-        this.settingsService.getThemes().subscribe(x => this.themes = x);
+            this.settings = x;
+            this.settingsService.getThemes().subscribe(t => {
+                this.themes = t;
+                if(x.hasPresetTheme) {
+                    this.themes.unshift({displayName: x.presetThemeDisplayName, fullName: x.presetThemeName, url: "", version: x.presetThemeVersion});
+                } else {
+                    this.themes.unshift({displayName: "Please Select", fullName: "-1", url: "-1", version: ""});
+                }
+            });
+        });
+
     }
 
     public save() {
@@ -28,4 +38,20 @@ export class CustomizationComponent implements OnInit {
             }
         });
     }
+
+    public dropDownChange(event: any): void {
+        const selectedThemeFullName = <string>event.target.value;
+        const selectedTheme = this.themes.filter((val) => {
+            return val.fullName === selectedThemeFullName;
+        });
+
+        // if(selectedTheme[0].fullName === this.settings.presetThemeName) {
+        //     return;
+        // }
+        
+        this.settings.presetThemeName = selectedThemeFullName;
+        this.settingsService.getThemeContent(selectedTheme[0].url).subscribe(x => {
+            this.settings.presetThemeContent = x;
+        });
+    }
 }

src/Ombi/Controllers/SettingsController.cs

@@ -221,6 +221,10 @@ namespace Ombi.Controllers
             return await Save(settings);
         }
 
+        /// <summary>
+        /// Get's the preset themes available
+        /// </summary>
+        /// <returns></returns>
         [HttpGet("themes")]
         public async Task<IEnumerable<PresetThemeViewModel>> GetThemes()
         {
@@ -249,6 +253,19 @@ namespace Ombi.Controllers
             return model;
         }
 
+        /// <summary>
+        /// Gets the content of the theme available
+        /// </summary>
+        /// <param name="url"></param>
+        /// <returns></returns>
+        [HttpGet("themecontent")]
+        public async Task<string> GetThemeContent([FromQuery]string url)
+        {
+            var content = await _githubApi.GetThemesRawContent(url);
+            
+            return content;
+        }
+
         /// <summary>
         /// Gets the Sonarr Settings.
         /// </summary>

src/Ombi/Views/Shared/_Layout.cshtml

@@ -28,6 +28,8 @@
 <html>
 <head>
     <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="Ombi, media request tool">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@appName</title>
     <base href="/@baseUrl"/>
@@ -56,7 +58,7 @@
     @{
         if (!string.IsNullOrEmpty(customization.CustomCssLink))
         {
-            <link rel="stylesheet" href="@customization.CustomCssLink" />
+            <link rel="stylesheet" href="@customization.CustomCssLink" asp-append-version="true"/>
         }
     }
     <link rel="stylesheet" href="~/loading.css" asp-append-version="true" />