css changes

pull/3539/head
twanariens 5 years ago
parent 3ca0aebfd6
commit 743794ac40

@ -1,5 +1,87 @@
@import "~styles/variables.scss";
.small-middle-container{
margin: auto;
width: 80%;
width: 85%;
}
//Kinda restyled the entire calendar
::ng-deep .dark .fc th {
background-color:#545454 !important;
color: #FFF;
border: 1px solid #303030;
}
::ng-deep .dark .fc td.ui-widget-content{
background-color:#424242 !important;
color: #FFF;
border: 1px solid #303030;
}
::ng-deep .dark .fc td.fc-head-container {
border: 1px solid #303030;
}
::ng-deep .dark fc-day-grid-event fc-h-event fc-event fc-start fc-end{
background:$accent-dark !important;
}
::ng-deep .ui-button {
margin-top:10px !important;
text-transform: uppercase;
text-decoration: none;
padding: 8px;
border: 1px solid rgb(221, 221, 221) !important;
display: inline-block;
transition: all 0.4s ease 0s;
background-color: $accent !important;
}
::ng-deep .dark .ui-button {
background-color: $accent-dark !important;
border: 1px solid #494949 !important;
color: #494949 !important;
}
::ng-deep .dark .ui-button:enabled:hover {
color: #303030 !important;
background: $accent-dark !important;
border-color: $accent-dark !important;
transition: all 0.4s ease 0s;
}
::ng-deep .input-group-addon{
margin-left:10px;
}
::ng-deep .fc .fc-event{
background: $accent !important;
color:#FFF !important;
font-size:0.9em;
font-weight:400;
border: 0px solid !important;
}
::ng-deep .dark .fc .fc-event{
background:$accent-dark !important;
color:#303030 !important;
font-size:0.9em;
font-weight:400;
}
::ng-deep .fc-header-toolbar{
display:block;
}
::ng-deep .fc-left{
float:left;
}
::ng-deep .fc-right{
float:right;
}
::ng-deep .fc-center{
margin-left:44%;
padding-top: 10px;
}

@ -17,7 +17,6 @@ export class CalendarComponent implements OnInit {
constructor(private calendarService: CalendarService) { }
public async ngOnInit() {
debugger;
this.loading()
this.entries = await this.calendarService.getCalendarEntries();
@ -26,10 +25,9 @@ export class CalendarComponent implements OnInit {
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
right: 'agendaWeek,month'
},
eventClick: (e: any) => {
debugger;
e.preventDefault();
}
};

@ -16,6 +16,7 @@
.details strong {
font-weight: bold;
}
.grow {
transition: all .2s ease-in-out;
}

@ -2,14 +2,17 @@ $ombi-primary:#3f3f3f;
$card-background: #2b2b2b;
#cardImage {
border-radius: 5px 5px 0px 0px;
height:75%;
}
.dark-card {
border-radius: 8px;
}
// Changed height to 100% to make all cards the same height
.card-spacing {
margin-top: 10%;
height:100%;
}
@ -39,8 +42,10 @@ $border-width: 3px;
text-align: center;
}
// Changed height to 100% to make all cards the same height
.grow {
transition: all .2s ease-in-out;
height:100%;
}
.grow:hover {
@ -52,3 +57,25 @@ $border-width: 3px;
// color: white;
border-radius: 2%
}
/* Title adjust for the Discover page */
.mat-card-content h6 {
overflow:hidden;
white-space:nowrap;
font-weight:400;
font-size:1.1rem;
}
/* Summary adjust for Discover page */
.small, small {
font-size:0.8rem;
}
@media (min-width: 2000px) {
#cardImage {
height:80%;
object-fit:cover;
display:block;
}
}

@ -4,7 +4,7 @@
.small-middle-container {
margin: auto;
width: 80%;
width: 85%;
}
.small-padding {
@ -25,3 +25,152 @@
.small-space {
padding-top: 1%;
}
::ng-deep .mat-card-image {
height:75%;
object-fit:cover;
display:block;
}
.card-spacing {
height:100%;
}
.mat-card-content h6 {
overflow:hidden;
white-space:nowrap;
font-weight:500;
font-size:1.1rem;
}
@media (min-width: 300px) {
.col-xl-2 {
flex: 0 0 100%;
max-width: 100%;
min-width: 100%;
}
.small-middle-container{
width:100%;
}
.btn-group {
width:100%;
}
mat-button-base {
width:100%;
}
.col{
padding-right: 10px !important;
padding-left:10px !important;
}
.row{
margin-left:0px;
}
.small-padding{
padding-left: 5px !important;
padding-right: 0px !important;
height: 40em;
}
::ng-deep .mat-card-image {
height:85% !important;
}
}
@media (min-width: 600px) {
.justify-content-md-center {
justify-content: center !important;
}
.small-middle-container{
width:auto;
}
.btn-group {
width:auto;
}
mat-button-base {
width:auto;
}
::ng-deep .mat-card-image {
height:75% !important;
}
}
@media (min-width: 700px) {
.col-xl-2 {
flex: 0 0 50%;
max-width: 50%;
min-width: 50%;
}
.col{
padding-right: 15px !important;
padding-left: 15px !important;
}
.small-padding{
padding-left: 20px !important;
padding-right: 20px !important;
height:auto;
}
.row{
margin-left:0px;
}
.small-middle-container{
width:auto;
}
.btn-group {
width:auto;
}
mat-button-base {
width:auto;
}
}
@media (min-width: 1000px) {
.col-xl-2 {
flex: 0 0 33.33333%;
max-width: 33.33333%;
min-width: 33.33333%;
}
}
@media (min-width: 1300px) {
.col-xl-2 {
flex: 0 0 20%;
max-width: 25%;
min-width: 25%;
}
}
@media (min-width: 1600px) {
.col-xl-2 {
flex: 0 0 20%;
max-width: 20%;
min-width: 20%;
}
}
@media (min-width: 1900px) {
.col-xl-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
min-width: 16.66666667%;
}
}
@media (min-width: 2200px) {
.col-xl-2 {
flex: 0 0 14.285713%;
max-width: 14.285713%;
min-width: 14.285713%;
}
}

@ -9,7 +9,9 @@
 {{nav.name | translate}}
</a> </span>
<a class="bottom-nav-link" mat-list-item [routerLinkActive]="theme === 'dark' ? 'active-list-item-dark' : 'active-list-item'" aria-label="Toggle sidenav" (click)="logOut();">
<a class="bottom-nav-link" mat-list-item
[routerLinkActive]="getTheme()" aria-label="Toggle sidenav"
(click)="logOut();">
<mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
{{ 'NavigationBar.Logout' | translate }}
</a>
@ -36,7 +38,7 @@
<div class="col-1">
<div class="float-right">
<a mat-list-item (click)="switchTheme()">
<mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">brightness_7</mat-icon>
<mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
<mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
</a>
</div>

@ -4,7 +4,7 @@
}
.sidenav {
width: 200px;
width: 220px;
}
.sidenav .mat-toolbar {
@ -47,12 +47,26 @@
color:white;
}
.active-list-item-dark {
::ng-deep .dark .active-list-item {
background: $accent-dark !important;
color:black;
color:black !important;
font-weight:500;
}
// Changed color with !important and changed the font weight
/*.active-list-item-dark {
background: $accent-dark !important;
color:black !important;
font-weight:500;
}*/
// changed bottom to 10px so when you overlay a link it won't get blocked by URL
.bottom-nav-link {
bottom: 0;
bottom: 10px;
position: absolute;
//background-color:#E84C3D;
}
/*bottom-nav-link:hover{
background-color:rgb(226, 52, 36) !important;
}*/

@ -63,8 +63,9 @@ export class MyNavComponent implements OnInit {
}
}
// @TIDUSJAR Don't know if we need this method anymore?
public getTheme(){
return this.theme === 'dark' ? 'active-list-item-dark' : 'active-list-item';
return 'active-list-item';
}
}

@ -0,0 +1,31 @@
@import "~styles/variables.scss";
.dark .mat-header-cell {
background: $accent-dark !important;
font-size: 1em;
font-weight: bold;
color: #303030;
}
.mat-form-field {
float:right;
}
::ng-deep .dark .mat-form-field-label{
font-size: 1.2em;
}
::ng-deep .mat-form-field-infix {
width: 10em;
margin-top:1em;
}
::ng-deep .dark .mat-tab-label-active{
background: $accent-dark !important;
color: #303030 !important;
font-weight:bold;
}
::ng-deep .mat-tab-label{
opacity: 1;
}

@ -12,7 +12,7 @@ import { RequestFilterType } from "../../models/RequestFilterType";
@Component({
templateUrl: "./movies-grid.component.html",
selector: "movies-grid",
styleUrls: ["../requests-list.component.scss"]
styleUrls: ["./movies-grid.component.scss"]
})
export class MoviesGridComponent implements OnInit, AfterViewInit {
public dataSource: IMovieRequests[] = [];

@ -1,5 +1,6 @@
<div class="small-middle-container">
<mat-tab-group>
<div class="buttons">
<mat-tab label="Movies">
<ng-template matTabContent>
<movies-grid (onOpenOptions)="onOpenOptions($event)"></movies-grid>
@ -14,6 +15,7 @@
<h1>Coming soon</h1>
<p>...</p>
</mat-tab>
</div>
</mat-tab-group>
</div>

@ -1,4 +1,53 @@
@import "~styles/variables.scss";
.small-middle-container{
margin: auto;
width: 95%;
width: 85%;
margin-top:10px;
}
::ng-deep .dark .mat-header-cell {
background: rgba(0, 0, 0, 0.381)!important;
font-size: 1em;
font-weight: 500;
color: rgba(255, 255, 255, 0.842) !important;
}
::ng-deep .dark .mat-header-cell .mat-checkbox-frame {
border-color: #FFF;
}
.mat-form-field {
float:right;
}
::ng-deep .mat-form-field-label{
font-size: 1.2em;
}
::ng-deep .mat-form-field-infix {
width: 10em;
margin-top:1em;
}
::ng-deep .dark .mat-tab-label-active{
background: $accent-dark !important;
color: #303030 !important;
font-weight:bold;
}
::ng-deep .mat-tab-label{
opacity: 1;
}
::ng-deep .mat-tab-header {
margin-top: 2em;
}
::ng-deep .dark .mat-sort-header-arrow{
color:#303030;
}
::ng-deep .mat-column-actions{
text-align:end;
}

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div *ngIf="about" class="container">
<div *ngIf="about" class="small-middle-container">
<legend>About</legend>
<div class="mat-table">

@ -18,3 +18,9 @@
overflow: hidden;
word-wrap: break-word;
}
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Authentication-Settings'"></wiki>
<fieldset *ngIf="form">
<legend>Authentication</legend>
@ -65,3 +65,4 @@
</div>
</form>
</fieldset>
</div>

@ -0,0 +1,20 @@
@import "~styles/variables.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
.control-label{
font-weight:400;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -6,6 +6,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./authentication.component.html",
styleUrls: ["./authentication.component.scss"],
})
export class AuthenticationComponent implements OnInit {

@ -1,18 +1,29 @@
<settings-menu>
</settings-menu>
<div class="small-middle-container">
<div *ngIf="form">
<fieldset>
<legend>CouchPotato Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<div class="col-md-6">
<div class="col-md-6" style="display:block;">
<div class="col-md-4">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
<input type="checkbox" id="enable" formControlName="enabled">
<label for="enable">Enable</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl">
<label for="Ssl">SSL</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<div class="">
@ -37,13 +48,6 @@
<small *ngIf="form.get('apiKey').hasError('required')" class="error-text">The API Key is required</small>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl"><label for="Ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="SubDir" class="control-label">Base Url</label>
<div>
@ -98,3 +102,4 @@
</form>
</fieldset>
</div>
</div>

@ -0,0 +1,32 @@
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
.col-md-6{
display: contents;
}
.col-md-4{
display: contents;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-4{
display: inline-table;
}
}

@ -7,6 +7,7 @@ import { ICouchPotatoProfiles } from "../../interfaces";
@Component({
templateUrl: "./couchpotato.component.html",
styleUrls: ["./couchpotato.component.scss"]
})
export class CouchPotatoComponent implements OnInit {

@ -1,7 +1,7 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Customization-Settings'"></wiki>
<fieldset *ngIf="settings" class="container">
<fieldset *ngIf="settings">
<legend>Customization</legend>
<div class="col-12">
@ -14,7 +14,7 @@
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Custom Logo" [(ngModel)]="settings.logo">
<input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo">
</mat-form-field>
<div *ngIf="settings.logo" class="form-group">
@ -42,12 +42,13 @@
</mat-checkbox>
<div class="form-group">
<button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
</div>
<mat-form-field>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea>
</mat-form-field>
<div class="form-group">
<button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
</div>
</div>
<!-- <div class="col-7"> -->
@ -58,3 +59,4 @@
</fieldset>
</div>

@ -0,0 +1,42 @@
@import "~styles/shared.scss";
.col-12 {
display:grid;
}
textarea {
min-height:100px;
height: auto;
max-height:800px;
}
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -6,6 +6,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./customization.component.html",
styleUrls: ["./customization.component.scss"],
})
export class CustomizationComponent implements OnInit {

@ -1,11 +1,11 @@
<settings-menu>
</settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/DogNzb-Settings'"></wiki>
<div *ngIf="form">
<fieldset>
<legend>DogNzb Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
@ -52,3 +52,4 @@
</form>
</fieldset>
</div>
</div>

@ -0,0 +1,16 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -5,6 +5,7 @@ import { NotificationService, SettingsService } from "../../services";
@Component({
templateUrl: "./dognzb.component.html",
styleUrls: ["./dognzb.component.scss"]
})
export class DogNzbComponent implements OnInit {

@ -0,0 +1,110 @@

<settings-menu></settings-menu>
<div class="small-middle-container">
<div *ngIf="settings">
<fieldset>
<legend>
Emby/Jellyfin Configuration
</legend>
<div class="row">
<div class="form-group col-md-3">
<div class="checkbox">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable">
<label for="enable">Enable</label>
</div>
</div>
<div class="col-md-2 col-md-push-7">
<button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<div class="col-md-2" style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br />
<br />
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">Server name</label>
<div>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name" value="{{server.name}}">
</div>
</div>
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<div>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip" value="{{server.ip}}">
</div>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">Port</label>
<div>
<input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number" value="{{server.port}}">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" ng-checked="server.ssl">
<label for="ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Emby Api Key</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.apiKey" placeholder="Emby Api Key" value="{{server.apiKey}}">
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Externally Facing Hostname
<i class="fa fa-question-circle"
pTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button"></i>
</label>
<div>
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.serverHostname" placeholder="e.g. https://jellyfin.server.com/" value="{{server.serverHostname}}">
<small><span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span>
<span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span></small>
</div>
</div>
<div class="form-group">
<div>
<button id="testEmby" type="button" (click)="test(server)" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button>
</div>
</div>
<div class="form-group">
<div>
<button id="discover" type="button" (click)="discoverServerInfo(server)" class="btn btn-primary-outline">Discover Server Information <div id="spinner"></div></button>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
<div class="col-md-1">
<div class="form-group">
<div>
<button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<div>
<button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Cacher</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>

@ -1,7 +1,7 @@

<settings-menu></settings-menu>
<div *ngIf="settings" class="container">
<div class="small-middle-container">
<div *ngIf="settings">
<fieldset>
<legend>
Emby/Jellyfin Configuration
@ -15,23 +15,16 @@
</div>
</div>
<div class="col-md-2 offset-md-7">
<button mat-raised-button type="button" (click)="addTab()" color="accent">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<div class="row">
<mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms">
<mat-tab *ngFor="let server of settings.servers" [label]="server.name">
<div class="col-md-2" style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br />
<br />
<div class="col-md-6">
<div class="col-md-10">
<mat-form-field class="full">
<input matInput placeholder="Server Name" [(ngModel)]="server.name" value="{{server.name}}">
</mat-form-field>
@ -81,23 +74,19 @@
</div>
</div>
</div>
<div class="col-md-2 offset-md-4">
<button mat-raised-button type="button" (click)="removeServer(server)" color="warn">Remove Server</button>
</div>
</div>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
</mat-tab>
<mat-tab label="" disabled=true> </mat-tab>
<mat-tab label="Add Server" position=100> </mat-tab>
<div class="col-md-1">
</mat-tab-group>
<div class="col-md-2">
<div class="form-group">
<div>
<button mat-raised-button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" color="accent">Submit</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="col-md-2">
<div class="form-group">
<div>
<button mat-raised-button (click)="runCacher()" type="button" id="save" color="primary">Manually Run Cacher</button>
@ -106,3 +95,4 @@
</div>
</fieldset>
</div>
</div>

@ -1,3 +1,45 @@
.full {
width: 100%;
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-10{
display: grid;
}
.col-md-2{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-2{
display: inline-table;
}
}

@ -2,6 +2,8 @@
import { IEmbyServer, IEmbySettings } from "../../interfaces";
import { EmbyService, JobService, NotificationService, SettingsService, TesterService } from "../../services";
import { MatTabChangeEvent, MatTabGroup } from "@angular/material";
import {FormControl} from '@angular/forms';
@Component({
templateUrl: "./emby.component.html",
@ -11,6 +13,7 @@ export class EmbyComponent implements OnInit {
public settings: IEmbySettings;
public hasDiscovered: boolean;
selected = new FormControl(0);
constructor(private settingsService: SettingsService,
private notificationService: NotificationService,
@ -29,21 +32,25 @@ export class EmbyComponent implements OnInit {
this.hasDiscovered = true;
}
public addTab() {
public addTab(event: MatTabChangeEvent) {
const tabName = event.tab.textLabel;
if (tabName == "Add Server"){
if (this.settings.servers == null) {
this.settings.servers = [];
}
this.settings.servers.push({
name: " ",
name: "New " + this.settings.servers.length + "*",
id: Math.floor(Math.random() * (99999 - 0 + 1) + 1),
apiKey: "",
administratorId: "",
enableEpisodeSearching: false,
ip: "",
port: 8097,
port: 0,
ssl: false,
subDir: "",
} as IEmbyServer);
this.selected.setValue(this.settings.servers.length - 1);
}
}
public test(server: IEmbyServer) {
@ -60,6 +67,7 @@ export class EmbyComponent implements OnInit {
const index = this.settings.servers.indexOf(server, 0);
if (index > -1) {
this.settings.servers.splice(index, 1);
this.selected.setValue(this.settings.servers.length - 1);
}
}

@ -0,0 +1,27 @@

<settings-menu></settings-menu>
<div class="small-middle-container">
<table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<td>Title</td>
<td>Type</td>
<td>Retry Count</td>
<td>Error Description</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let v of vm">
<td class="vcenter">
{{v.title}}
</td>
<td>{{RequestType[v.type] | humanize}}</td>
<td class="vcenter">{{v.retryCount}}</td>
<td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></td>
<td class="vcenter"><button class="btn btn-sm btn-danger-outline" (click)="remove(v)">Remove</button></td>
</tr>
</tbody>
</table>
</div>

@ -0,0 +1,5 @@
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}

@ -3,7 +3,8 @@ import { IFailedRequestsViewModel, RequestType } from "../../interfaces";
import { RequestRetryService } from "../../services";
@Component({
templateUrl: "./failedrequest.component.html",
templateUrl: "./failedrequests.component.html",
styleUrls: ["./failedrequests.component.scss"],
})
export class FailedRequestsComponent implements OnInit {

@ -1,9 +1,10 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Issue-Settings'"></wiki>
<fieldset>
<legend>Issues</legend>
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
@ -61,7 +62,8 @@
</div>
</div>
<div class="row">
<div class="row categoryResults">
<legend>Categories:</legend>
<div *ngFor="let cat of categories">
<div class="col-md-9">
{{cat.value}}
@ -74,3 +76,4 @@
</div>
</div>
</fieldset>
</div>

@ -0,0 +1,52 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.control-label{
font-weight:400;
}
.col-md-6{
display: contents;
}
.col-md-9{
display: inline-table;
}
.col-md-3{
display: inline-table;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .categoryResults{
background-color: rgba(0, 0, 0, 0.05);
padding: 1em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
}

@ -6,6 +6,7 @@ import { IssuesService, NotificationService, SettingsService } from "../../servi
@Component({
templateUrl: "./issues.component.html",
styleUrls: ["./issues.component.scss"]
})
export class IssuesComponent implements OnInit {

@ -0,0 +1,5 @@
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}

@ -5,6 +5,7 @@ import { NotificationService, SettingsService } from "../../services";
@Component({
templateUrl: "./jobs.component.html",
styleUrls: ["./jobs.component.scss"]
})
export class JobsComponent implements OnInit {

@ -1,20 +1,19 @@

<settings-menu></settings-menu>
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Landing-Page-Settings'"></wiki>
<div *ngIf="settings">
<fieldset>
<fieldset *ngIf="settings" class="container">
<legend>Landing Page Configuration</legend>
<div class="col-12">
<mat-checkbox [(ngModel)]="settings.enabled">
Enable
</mat-checkbox>
<div class="form-group">
<!--<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="enable" name="enable" [(ngModel)]="settings.enabled" ng-checked="settings.enabled">
<label for="enable">Enable</label>
</div>
</div>
</div>-->
<p class="form-group">Notice Message</p>
<div class="form-group">
@ -55,5 +54,6 @@
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</fieldset>
</div>
</fieldset>
</div>

@ -0,0 +1,30 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
@media (min-width: 1200px){
.container {
max-width: inherit;
}
}
@media (min-width: 992px){
.container {
max-width: inherit;
}
}
@media (min-width: 768px){
.container {
max-width: inherit;
}
}
@media (min-width: 576px){
.container {
max-width: inherit;
}
}

@ -6,6 +6,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./landingpage.component.html",
styleUrls: ["./landingpage.component.scss"],
})
export class LandingPageComponent implements OnInit {

@ -1,18 +1,17 @@
<settings-menu></settings-menu>
<div *ngIf="form" class="container">
<div class="small-middle-container">
<div *ngIf="form">
<fieldset>
<legend>Lidarr Settings</legend>
<div style="float: right;">
<mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle>
<div style="float: right;">
<div class="md-form-field"><mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle></div>
<div class="md-form-field"><mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle></div>
</div>
<div>
<form novalidate [formGroup]="form" class="row" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<div class="col">
<div>
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
</div>
<div>
<form novalidate [formGroup]="form" class="row" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-5">
<div class="md-form-field">
<mat-form-field>
@ -44,7 +43,7 @@
</mat-form-field>
</div>
</div>
<div class="col">
<div class="col-md-5">
<div class="md-form-field">
<mat-form-field>
@ -117,3 +116,4 @@
</div>
</fieldset>
</div>
</div>

@ -0,0 +1,50 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-6{
display: contents;
}
.col-md-5{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-5{
display: inline-table;
}
}

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./lidarr.component.html",
styleUrls: ["./lidarr.component.scss"]
})
export class LidarrComponent implements OnInit {

@ -1,8 +1,13 @@
.small-middle-container{
margin: auto;
width: 80%;
width: 85%;
margin-top:10px;
}
.code-block {
font-size: 10px;
font-size: 12px;
}
::ng-deep .dark .code-block {
color:#FFF !important;
}

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Mass-Email'"></wiki>
<fieldset>
<legend>Mass Email</legend>
@ -48,3 +48,4 @@
</fieldset>
</div>

@ -0,0 +1,5 @@
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}

@ -5,6 +5,7 @@ import { IdentityService, NotificationMessageService, NotificationService, Setti
@Component({
templateUrl: "./massemail.component.html",
styleUrls: ["./massemail.component.scss"]
})
export class MassEmailComponent implements OnInit {

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Discord Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./discord.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class DiscordComponent implements OnInit {

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="emailForm">
<div *ngIf="emailForm" class="small-middle-container">
<fieldset>
<legend>Email Notifications</legend>
<div class="col-md-6">

@ -9,6 +9,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./emailnotification.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class EmailNotificationComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Gotify Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./gotify.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class GotifyComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Mattermost Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./mattermost.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class MattermostComponent implements OnInit {

@ -1,6 +1,6 @@
<settings-menu>
</settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Mobile Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { MobileService, SettingsService } from "../../services";
@Component({
templateUrl: "./mobile.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class MobileComponent implements OnInit {

@ -1,7 +1,7 @@
<settings-menu></settings-menu>
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Newsletter-Settings'"></wiki>
<div *ngIf="settings">
<div *ngIf="settings" class="small-middle-container">
<fieldset>
<legend>Newsletter</legend>
<div class="col-md-6">

@ -6,6 +6,7 @@ import { TesterService } from "../../services/applications/tester.service";
@Component({
templateUrl: "./newsletter.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class NewsletterComponent implements OnInit {

@ -1,4 +1,5 @@
::ng-deep ngb-accordion > div.card {
@import "~styles/shared.scss";
::ng-deep ngb-accordion > div.card {
color:white;
padding-top: 0px;
}
@ -6,3 +7,9 @@
::ng-deep ngb-accordion > div.card > div.card-header {
padding:0px;
}
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Pushbullet Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./pushbullet.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class PushbulletComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Pushover Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./pushover.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class PushoverComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Slack Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./slack.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class SlackComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,6 +1,6 @@
<settings-menu>
</settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Telegram Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./telegram.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class TelegramComponent implements OnInit {

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Webhook Notifications</legend>
<div class="col-md-6">

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./webhook.component.html",
styleUrls: ["./notificationtemplate.component.scss"]
})
export class WebhookComponent implements OnInit {
public NotificationType = NotificationType;

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki>
<fieldset *ngIf="form" class="container">
<legend>Ombi Configuration</legend>
@ -72,3 +72,4 @@
</div>
</form>
</fieldset>
</div>

@ -0,0 +1,21 @@
.col-12 {
display:grid;
}
textarea {
min-height:100px;
height: auto;
max-height:800px;
}
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}
@media (min-width: 1600px) {
.container {
max-width: 1500px;
}
}

@ -9,6 +9,7 @@ import * as languageData from "../../../other/iso-lang.json";
@Component({
templateUrl: "./ombi.component.html",
styleUrls: ["./ombi.component.scss"],
})
export class OmbiComponent implements OnInit {

@ -0,0 +1,198 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<div class="row">
<div class="col-md-2 col-md-push-10" style="float:right;">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
</div>
<div *ngIf="settings">
<fieldset>
<legend>Plex Configuration</legend>
<div class="row">
<div class="form-group col-md-3">
<div class="checkbox">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable">
<label for="enable">Enable</label>
</div>
</div>
<div class="col-md-2 col-md-push-7" style="float:right;">
<button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<div class="col-md-2 " style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br />
<br />
<div class="col-md-6">
<!-- Main Content -->
<div class="form-group">
<label for="name" class="control-label">Server name</label>
<div>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name"
value="{{server.name}}">
</div>
</div>
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<div>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip"
value="{{server.ip}}">
</div>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">Port</label>
<div>
<input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number"
value="{{server.port}}">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl">
<label for="ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Plex Authorization Token</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.plexAuthToken" placeholder="Plex Auth Token"
value="{{server.plexAuthToken}}">
</div>
</div>
<div class="form-group">
<label for="MachineIdentifier" class="control-label">Machine Identifier</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="MachineIdentifier" name="MachineIdentifier" [(ngModel)]="server.machineIdentifier"
value="{{server.machineIdentifier}}">
</div>
</div>
</div>
<div class="col-md-5" style="float:right;">
<div class="form-group">
<label for="username" class="control-label">Username and Password</label>
<div>
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div>
<button id="requestToken" (click)="requestServers(server)" class="btn btn-primary-outline">Load Servers
<i class="fa fa-key"></i>
</button>
</div>
</div>
<br />
<br />
<div class="form-group" *ngIf="loadedServers">
<label for="username" class="control-label">Please select the server</label>
<br />
<div class="btn-group">
<div class="btn-group">
<a [attr.disabled]="!serversButton ? true : null" href="#" class="btn btn-info-outline dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
Servers
<span class="caret"></span>
</a>
<ul *ngIf="loadedServers" class="dropdown-menu">
<li *ngFor="let s of loadedServers.servers.server">
<a (click)="selectServer(s,server)">{{s.name}}</a>
</li>
</ul>
</div>
</div>
</div>
<hr/>
<label>Please select the libraries you want Ombi to look in for content</label>
<br />
<small>Note: if nothing is selected, we will monitor all libraries</small>
<div class="form-group">
<div>
<button (click)="loadLibraries(server)" class="btn btn-primary-outline">Load Libraries
<i class="fa fa-film"></i>
</button>
</div>
</div>
<div *ngIf="server.plexSelectedLibraries">
<div *ngFor="let lib of server.plexSelectedLibraries">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="{{lib.title}}" [(ngModel)]="lib.enabled" [checked]="lib.enabled">
<label for="{{lib.title}}">{{lib.title}}</label>
</div>
</div>
</div>
</div>
<div class="form-group" *ngIf="advanced">
<label for="episodeBatchSize" class="control-label">Episode Batch Size</label>
<div>
<input type="number" class="form-control-custom form-small form-control" id="episodeBatchSize" name="episodeBatchSize" [(ngModel)]="server.episodeBatchSize"
value="{{server.episodeBatchSize}}" tooltipPosition="top" pTooltip="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here">
</div>
</div>
<div class="form-group">
<div>
<button id="testPlex" type="button" (click)="testPlex(server)" class="btn btn-primary-outline">
Test Connectivity
<div id="spinner"></div>
</button>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
<div class="col-md-2">
<div class="form-group">
<div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div>
<button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Full Sync</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div>
<button (click)="runRecentlyAddedCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Recently Added Sync</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>

@ -1,6 +1,7 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<div class="row">
<div class="col-md-2 col-md-push-10">
<div class="col-md-2 col-md-push-10" style="float:right;">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
@ -17,18 +18,9 @@
<label for="enable">Enable</label>
</div>
</div>
<div class="col-md-2 col-md-push-7">
<button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms">
<mat-tab *ngFor="let server of settings.servers" [label]="server.name">
<div class="col-md-2 " style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
@ -86,7 +78,7 @@
</div>
</div>
<div class="col-md-6">
<div class="col-md-4" style="float:right;">
<div class="form-group">
<label for="username" class="control-label">Username and Password</label>
<div>
@ -166,11 +158,11 @@
</div>
</div>
</mat-tab>
<mat-tab label="" disabled=true> </mat-tab>
<mat-tab label="Add Server" position=100> </mat-tab>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
</mat-tab-group>
<div class="col-md-2">
<div class="form-group">
<div>
@ -194,3 +186,4 @@
</div>
</fieldset>
</div>
</div>

@ -0,0 +1,50 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-6{
display: contents;
}
.col-md-5{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-5{
display: inline-table;
}
}

@ -1,12 +1,15 @@
import { Component, OnDestroy, OnInit } from "@angular/core";
import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { IPlexLibrariesSettings, IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
import { JobService, NotificationService, PlexService, SettingsService, TesterService } from "../../services";
import { MatTabChangeEvent, MatTabGroup } from "@angular/material";
import {FormControl} from '@angular/forms';
@Component({
templateUrl: "./plex.component.html",
styleUrls: ["./plex.component.scss"]
})
export class PlexComponent implements OnInit, OnDestroy {
public settings: IPlexSettings;
@ -14,6 +17,8 @@ export class PlexComponent implements OnInit, OnDestroy {
public username: string;
public password: string;
public serversButton = false;
selected = new FormControl(0);
@ViewChild("tabGroup", {static: false}) public tagGroup: MatTabGroup;
public advanced = false;
@ -67,18 +72,26 @@ export class PlexComponent implements OnInit, OnDestroy {
});
}
public addTab() {
public addTab(event: MatTabChangeEvent) {
const tabName = event.tab.textLabel;
if (tabName == "Add Server"){
if (this.settings.servers == null) {
this.settings.servers = [];
}
this.settings.servers.push(<IPlexServer> { name: "New*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
this.settings.servers.push(<IPlexServer> { name: "New" + this.settings.servers.length + "*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
//this.tagGroup.selectedIndex = (0);
this.selected.setValue(this.settings.servers.length - 1);
}
}
public removeServer(server: IPlexServer) {
const index = this.settings.servers.indexOf(server, 0);
if (index > -1) {
this.settings.servers.splice(index, 1);
this.selected.setValue(this.settings.servers.length - 1);
}
}

@ -1,21 +1,14 @@
<settings-menu></settings-menu>
<div *ngIf="form" class="container">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Radarr Settings</legend>
<div style="float: right;">
<mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle>
</div>
<div>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<div class="col">
<div>
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
<div class="md-form-field"><mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle></div>
<div class="md-form-field"><mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle></div>
</div>
<div class="col-md-12">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-5">
<div class="md-form-field">
<mat-form-field>
<input matInput placeholder="Hostname or IP" formControlName="ip">
@ -46,7 +39,7 @@
</mat-form-field>
</div>
</div>
<div class="col">
<div class="col-md-5">
<div class="md-form-field">
<mat-form-field>

@ -0,0 +1,56 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-6{
display: contents;
}
.col-md-5{
display: contents;
}
.col-md-4{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
::ng-deep .load {
max-width: fit-content;
margin-left:3em;
padding: 0.5rem 1.14rem;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-5{
display: inline-table;
}
.col-md-4{
display: inline-table;
}
}

@ -10,6 +10,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./radarr.component.html",
styleUrls: ["./radarr.component.scss"]
})
export class RadarrComponent implements OnInit {

@ -61,5 +61,3 @@
<button mat-menu-item [routerLink]="['/Settings/Jobs']">Scheduled Tasks</button>
<button mat-menu-item [routerLink]="['/Settings/Logs']">Logs</button>
</mat-menu>
<hr/>

@ -1,6 +1,6 @@

<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>SickRage Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">

@ -0,0 +1,15 @@
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -8,6 +8,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./sickrage.component.html",
styleUrls: ["./sickrage.component.scss"]
})
export class SickRageComponent implements OnInit {

@ -1,15 +1,15 @@
<settings-menu></settings-menu>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Sonarr Settings</legend>
<div style="float: right;">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:3%;">
<div class="col-md-6">
<div class="col-md-6">
<div class="col-md-6" style="display:block;">
<div class="col-md-4">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="enable" formControlName="enabled">
@ -18,7 +18,7 @@
</div>
</div>
<div class="col-md-6">
<div class="col-md-4">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="v3" formControlName="v3">
@ -27,6 +27,16 @@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl">
<label for="Ssl">SSL</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Ip" class="control-label">Sonarr Hostname or IP
@ -57,13 +67,6 @@
<input type="text" class="form-control form-control-custom " [ngClass]="{'form-error': form.get('apiKey').hasError('required')}"
formControlName="apiKey" id="ApiKey" name="ApiKey">
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl"><label for="Ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="SubDir" class="control-label">Sonarr Base Url</label>
<div>
@ -72,7 +75,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-5">
<div class="form-group col-md-12">
<label for="profiles" class="control-label">Quality Profiles
@ -83,7 +86,7 @@
id="select" formControlName="qualityProfile">
<option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
</select>
<button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline col-md-4 col-md-push-1">
<button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline col-md-4 col-md-push-1 load">
Load Qualities <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
@ -111,7 +114,7 @@
[ngClass]="{'form-error': form.get('rootPath').hasError('required')}">
<option *ngFor="let folder of rootFolders" value="{{folder.id}}">{{folder.path}}</option>
</select>
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline col-md-4 col-md-push-1">
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline load col-md-4 col-md-push-1">
Load Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
@ -156,20 +159,20 @@
<label for="addOnly">Do not search</label>
</div>
</div>
<div class="form-group col-md-6">
</div>
<div class="col-md-4">
<div class="form-group col-md-7">
<div>
<button type="submit" class="btn btn-primary-outline ">Submit</button>
</div>
</div>
<div class="form-group col-md-6">
<div class="form-group col-md-7">
<div>
<button type="button" (click)="test(form)" class="btn btn-primary-outline">Test Connectivity
<span id="spinner"> </span></button>
</div>
</div>
</div>
</form>
</fieldset>

@ -0,0 +1,56 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-6{
display: contents;
}
.col-md-5{
display: contents;
}
.col-md-4{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
::ng-deep .load {
max-width: fit-content;
margin-left:3em;
padding: 0.5rem 1.14rem;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-5{
display: inline-table;
}
.col-md-4{
display: inline-table;
}
}

@ -11,6 +11,7 @@ import { SettingsService } from "../../services";
@Component({
templateUrl: "./sonarr.component.html",
styleUrls: ["./sonarr.component.scss"]
})
export class SonarrComponent implements OnInit {

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<fieldset *ngIf="settings">
<legend>The Movie Database</legend>
<div class="col-md-6">
@ -48,3 +48,4 @@
</div>
</div>
</fieldset>
</div>

@ -0,0 +1,16 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -14,6 +14,7 @@ interface IKeywordTag {
@Component({
templateUrl: "./themoviedb.component.html",
styleUrls: ["./themoviedb.component.scss"]
})
export class TheMovieDbComponent implements OnInit {

@ -1,7 +1,7 @@

<settings-menu></settings-menu>
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Update-Settings'"></wiki>
<div *ngIf="form">
<div *ngIf="form" class="small-middle-container">
<fieldset>
<legend>Update Settings</legend>
<div class="form-group" style="float: right">

@ -0,0 +1,5 @@
.small-middle-container{
margin: auto;
width: 85%;
margin-top:10px;
}

@ -6,6 +6,7 @@ import { JobService, SettingsService } from "../../services";
@Component({
templateUrl: "./update.component.html",
styleUrls: ["./update.component.scss"]
})
export class UpdateComponent implements OnInit {

@ -1,5 +1,5 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/User-Importer-Settings'"></wiki>
<fieldset *ngIf="settings">
<legend>User Importer Settings</legend>
@ -82,3 +82,4 @@
</div>
</div>
</fieldset>
</div>

@ -0,0 +1,50 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
.col-md-6{
display: contents;
}
.col-md-5{
display: contents;
}
.control-label{
font-weight:400;
}
.row{
display:block;
}
.btn-danger-outline{
background-color: #E84C3D;
}
.btn-success-outline{
background-color: #1b9d1b;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}
@media (min-width:1440px) {
.col-md-6{
display: inline-table;
}
.col-md-5{
display: inline-table;
}
}

@ -6,6 +6,7 @@ import { EmbyService, IdentityService, JobService, NotificationService, PlexServ
@Component({
templateUrl: "./usermanagement.component.html",
styleUrls: ["./usermanagement.component.scss"]
})
export class UserManagementComponent implements OnInit {

@ -1,9 +1,10 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Vote-Settings'"></wiki>
<fieldset>
<legend>Vote</legend>
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-12">
<div class="form-group">
<div class="checkbox">
@ -42,9 +43,5 @@
</div>
</form>
</fieldset>
</div>

@ -0,0 +1,16 @@
@import "~styles/shared.scss";
.small-middle-container{
margin: auto;
width: 95%;
margin-top:10px;
}
::ng-deep .dark .small-middle-container{
background-color: rgba(0, 0, 0, 0.10);
padding: 2em;
}
::ng-deep .dark .btn:hover{
box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
color: inherit;
}

@ -5,6 +5,7 @@ import { NotificationService, SettingsService } from "../../services";
@Component({
templateUrl: "./vote.component.html",
styleUrls: ["vote.component.scss"]
})
export class VoteComponent implements OnInit {

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save