open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP2 Wizard

Browse Source
pull/4019/head
twanariens 3 years ago
parent a12e02bd39
commit bd20cef16d
9 changed files with 232 additions and 127 deletions
Show Stats Download Patch File Download Diff File

58
src/Ombi/ClientApp/src/app/wizard/emby/emby.component.html
Unescape View File

@ -1,31 +1,39 @@

<div *ngIf="embySettings">
<div *ngIf="embySettings.servers">
<div *ngFor="let server of embySettings.servers">
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Emby Hostname or IP Address">
</mat-form-field>
</div>
<div class="mediaserver-container">
<div class="left-container mediaserver">
<img src="https://emby.media/resources/logowhite_1881.png">
</div>
<div class="right-container mediaserver">
<div class="right-container-content mediaserver">
<div *ngIf="embySettings">
<div *ngIf="embySettings.servers">
<div *ngFor="let server of embySettings.servers">
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Emby Hostname or IP Address">
</mat-form-field>
</div>
<div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
</mat-form-field>
</div>
<div>
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
</div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Emby API Key">
</mat-form-field>
</div>
<div style="text-align: center; margin-top: 20px">
<a (click)="save()" id="embyApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
</mat-form-field>
</div>
<div>
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
</div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Emby API Key">
</mat-form-field>
</div>
<div style="text-align: center; margin-top: 20px">
<a (click)="save()" id="embyApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

1
src/Ombi/ClientApp/src/app/wizard/emby/emby.component.ts
Unescape View File

@ -8,6 +8,7 @@ import { IEmbySettings } from "../../interfaces";
@Component({
selector: "wizard-emby",
templateUrl: "./emby.component.html",
styleUrls: ["../welcome/welcome.component.scss"],
})
export class EmbyComponent implements OnInit {

58
src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.html
Unescape View File

@ -1,31 +1,39 @@

<div *ngIf="jellyfinSettings">
<div *ngIf="jellyfinSettings.servers">
<div *ngFor="let server of jellyfinSettings.servers">
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Jellyfin Hostname or IP Address">
</mat-form-field>
</div>
<div class="mediaserver-container">
<div class="left-container mediaserver">
<img src="https://jellyfin.org/images/banner-dark.svg">
</div>
<div class="right-container mediaserver">
<div class="right-container-content mediaserver">
<div *ngIf="jellyfinSettings">
<div *ngIf="jellyfinSettings.servers">
<div *ngFor="let server of jellyfinSettings.servers">
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.ip" id="Ip" name="Ip" placeholder="Jellyfin Hostname or IP Address">
</mat-form-field>
</div>
<div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
</mat-form-field>
</div>
<div>
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
</div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Jellyfin API Key">
</mat-form-field>
</div>
<div style="text-align: center; margin-top: 20px">
<a (click)="save()" id="jellyfinApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.port" id="portNumber" name="Port" value="{{server.port}}">
</mat-form-field>
</div>
<div>
<mat-slide-toggle [(ngModel)]="server.ssl">Enable SSL</mat-slide-toggle>
</div>
<div>
<mat-form-field>
<input type="text" matInput [(ngModel)]="server.apiKey" id="apiKey" name="ApiKey" placeholder="Jellyfin API Key">
</mat-form-field>
</div>
<div style="text-align: center; margin-top: 20px">
<a (click)="save()" id="jellyfinApiKeySave" mat-raised-button color="primary">Save <div id="spinner"></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

1
src/Ombi/ClientApp/src/app/wizard/jellyfin/jellyfin.component.ts
Unescape View File

@ -8,6 +8,7 @@ import { IJellyfinSettings } from "../../interfaces";
@Component({
selector: "wizard-jellyfin",
templateUrl: "./jellyfin.component.html",
styleUrls: ["../welcome/welcome.component.scss"]
})
export class JellyfinComponent implements OnInit {

53
src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html
Unescape View File

@ -1,24 +1,35 @@
<div class="form-group">
<div>
<mat-form-field>
<input matInput type="text" [(ngModel)]="login" id="username" placeholder="Username">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput type="password" [(ngModel)]="password" placeholder="Password">
</mat-form-field>
</div>
</div>
<small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users</small>
<div class="form-group">
<div style="text-align: center; margin-top: 20px">
<button (click)="requestAuthToken()" mat-raised-button color="primary" >Request Token <i class="fas fa-key"></i></button>
<div class="mediaserver-container">
<div class="left-container mediaserver">
<img src="https://i.redd.it/5czvsiboj9g51.png">
</div>
</div>
<p class="text-center">OR</p>
<div class="form-group">
<div style="text-align: center; margin-top: 20px">
<button (click)="oauth()" mat-raised-button color="accent" type="button">Continue With Plex</button>
<div class="right-container mediaserver">
<div class="right-container-content mediaserver">
<div class="form-group">
<div>
<mat-form-field>
<input matInput type="text" [(ngModel)]="login" id="username" placeholder="Username">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput type="password" [(ngModel)]="password" placeholder="Password">
</mat-form-field>
</div>
</div>
<small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users</small>
<div class="plex-buttons">
<div class="form-group">
<div style="text-align: center; margin-top: 20px">
<button (click)="requestAuthToken()" mat-raised-button color="primary" >Request Token <i class="fas fa-key"></i></button>
</div>
</div>
<p class="text-center space-or">OR</p>
<div class="form-group">
<div style="text-align: center; margin-top: 20px">
<button (click)="oauth()" mat-raised-button color="accent" type="button">Continue With Plex</button>
</div>
</div>
</div>
</div>
</div>
</div>

1
src/Ombi/ClientApp/src/app/wizard/plex/plex.component.ts
Unescape View File

@ -9,6 +9,7 @@ import { StorageService } from "../../shared/storage/storage-service";
@Component({
selector: "wizard-plex",
templateUrl: "./plex.component.html",
styleUrls: ["../welcome/welcome.component.scss"],
})
export class PlexComponent implements OnInit, OnDestroy {

82
src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html
Unescape View File

@ -11,11 +11,16 @@
</div>
<div class="right-container">
<div class="right-container-content">
<p>Welcome to Ombi, this wizard will quickly take you through the inital setup!</p>
<br />
<h1>Welcome to Ombi!</h1>
<p>This wizard will quickly take you through the inital setup!</p>
<p>If you encounter any problems you can find help on the following platforms:</p>
<br />
<div class="social-media">
<a href="https://discord.gg/Sa7wNWb" target="_blank"><i class="fab fa-discord"></i></a>
<ul class="fa-ul">
<li><a href="https://discord.gg/Sa7wNWb" target="_blank"><span class="fa-li"><i class="fab fa-discord"></i></span>Ombi Discord</a>
<li><a href="https://github.com/Ombi-app/Ombi" target="_blank"><span class="fa-li"><i class="fab fa-github"></i></span>Ombi Github</a>
<li><a href="https://docs.ombi.app/" target="_blank"><span class="fa-li"><i class="fas fa-book"></i></span>Ombi Documentation</a>
</ul>
</div>
</div>
</div>
@ -27,48 +32,35 @@
</mat-step>
<mat-step [optional]="true">
<form >
<ng-template matStepLabel>Plex</ng-template>
<wizard-plex></wizard-plex>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [optional]="true">
<form >
<ng-template matStepLabel>Emby</ng-template>
<wizard-emby></wizard-emby>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [optional]="true">
<form >
<ng-template matStepLabel>Jellyfin</ng-template>
<wizard-jellyfin></wizard-jellyfin>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form >
<ng-template matStepLabel>Create a local admin</ng-template>
<wizard-local-admin [user]="localUser"></wizard-local-admin>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<form >
<ng-template matStepLabel>Media Server</ng-template>
<mat-tab-group>
<mat-tab label="Plex"><wizard-plex></wizard-plex></mat-tab>
<mat-tab label="Emby"><wizard-emby></wizard-emby></mat-tab>
<mat-tab label="Jellyfin"><wizard-jellyfin></wizard-jellyfin></mat-tab>
</mat-tab-group>
</form>
</mat-step>
<mat-step>
<form >
<ng-template matStepLabel>Create a local admin</ng-template>
<wizard-local-admin [user]="localUser"></wizard-local-admin>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [optional]="true">
<form >
<ng-template matStepLabel>Ombi config</ng-template>
<wizard-local-admin [user]="localUser"></wizard-local-admin>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>

101
src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss
Unescape View File

@ -18,13 +18,19 @@
min-height: 300px;
}
.welcome-container .left-container{
width:20%;
//border: 1px solid $ombi-background-primary;
.left-container{
width:30%;
}
.welcome-container .right-container{
.right-container{
width:70%;
}
.right-container-content{
width:100%;
}
.welcome-container .right-container{
display:flex;
align-items: center;
justify-content: center;
@ -34,14 +40,87 @@
float:right;
}
.fab {
.fab:before {
font-family: 'Font Awesome 5 Brands';
font-size: 28px !important;
padding: 5px;
margin-bottom: 5px;
border: 1px solid;
}
.fa-discord:before {
content: "\f392";
.social-media .fab{
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.fas:before {
font-family:"Font Awesome 5 Free";
font-weight:800;
}
.social-media .fas{
font-family: Roboto, "Helvetica Neue", sans-serif;
font-weight:400;
}
.social-media a{
color: #FFF;
}
.social-media{
display:grid;
}
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0;
}
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit;
}
.social-media ul li{
font-size:16px;
padding:5px;
}
.left-container.mediaserver img{
object-fit: contain;
width: 100%;
}
.left-container.mediaserver{
display:flex;
justify-content: center;
height:300px;
padding:20px;
}
.right-container.mediaserver{
display:flex;
justify-content: center;
align-items:center;
}
.right-container-content .mediaserver{
display:block;
}
.mediaserver-container{
display:flex;
height:100%;
width:100%;
}
.plex-buttons{
display:flex;
justify-content: center;
align-items: center;
}
p.space-or{
padding:20px;
margin-top:20px;
}

4
src/Ombi/ClientApp/src/styles/Styles.scss
Unescape View File

@ -132,3 +132,7 @@
background-color:$ombi-active;
color: $ombi-active-text;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background-color: $ombi-active;
}

Write Preview
Loading…
Cancel
Save