Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 07:20:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adding an identify panel

Browse Source
This commit is contained in:
Zoe Roux 2020-04-19 15:42:31 +02:00
parent aad61bfb43
commit aa8b50d167
2 changed files with 90 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -38,6 +38,7 @@ import {CollectionsListComponent} from "./collection-list/collections-list.compo
import { MetadataEditComponent } from './metadata-edit/metadata-edit.component'; import { MetadataEditComponent } from './metadata-edit/metadata-edit.component';
import {MatChipsModule} from "@angular/material/chips"; import {MatChipsModule} from "@angular/material/chips";
import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {MatAutocompleteModule} from "@angular/material/autocomplete";
import {MatExpansionModule} from "@angular/material/expansion";
@NgModule({ @NgModule({
@ -83,7 +84,8 @@ import {MatAutocompleteModule} from "@angular/material/autocomplete";
MatCheckboxModule, MatCheckboxModule,
AuthModule, AuthModule,
MatChipsModule, MatChipsModule,
MatAutocompleteModule MatAutocompleteModule,
MatExpansionModule
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

149
src/app/metadata-edit/metadata-edit.component.html
View File

@ -1,77 +1,92 @@
<h2 mat-dialog-title>Editing metadata of {{this.show.title}}</h2> <h2 mat-dialog-title>Editing metadata of {{this.show.title}}</h2>
<div matDialogContent> <div matDialogContent class="pb-2">
<form #showForm="ngForm"> <mat-accordion>
<mat-form-field class="w-100"> <mat-expansion-panel expanded="true">
<mat-label>Title</mat-label> <mat-expansion-panel-header>
<input matInput [(ngModel)]="this.show.title" name="title"> <mat-panel-title>Edit metadata</mat-panel-title>
</mat-form-field> <mat-panel-description>Manually edit each property</mat-panel-description>
</mat-expansion-panel-header>
<form #showForm="ngForm">
<mat-form-field class="w-100">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="this.show.title" name="title">
</mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Aliases</mat-label> <mat-label>Aliases</mat-label>
<mat-chip-list #aliasList> <mat-chip-list #aliasList>
<mat-chip *ngFor="let alias of this.show.aliases" (removed)="removeAlias(alias)" removable="true"> <mat-chip *ngFor="let alias of this.show.aliases" (removed)="removeAlias(alias)" removable="true">
{{alias}} {{alias}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input #aliasInput placeholder="New alias..." [matChipInputFor]="aliasList" (matChipInputTokenEnd)="addAlias($event)" /> <input #aliasInput placeholder="New alias..." [matChipInputFor]="aliasList" (matChipInputTokenEnd)="addAlias($event)" />
</mat-chip-list> </mat-chip-list>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Overview</mat-label> <mat-label>Overview</mat-label>
<textarea matInput [(ngModel)]="this.show.overview" name="overview"></textarea> <textarea matInput [(ngModel)]="this.show.overview" name="overview"></textarea>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-25 pr-3"> <mat-form-field class="w-25 pr-3">
<mat-label>Start Year</mat-label> <mat-label>Start Year</mat-label>
<input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/> <input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-25 pr-3"> <mat-form-field class="w-25 pr-3">
<mat-label>End Year</mat-label> <mat-label>End Year</mat-label>
<input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/> <input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-50"> <mat-form-field class="w-50">
<mat-label>Status</mat-label> <mat-label>Status</mat-label>
<mat-select> <mat-select>
<mat-option value="Finished">Finished</mat-option> <mat-option value="Finished">Finished</mat-option>
<mat-option value="Airing">Airing</mat-option> <mat-option value="Airing">Airing</mat-option>
<mat-option value="Planned">Planned</mat-option> <mat-option value="Planned">Planned</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Genres</mat-label> <mat-label>Genres</mat-label>
<mat-chip-list #genreList> <mat-chip-list #genreList>
<mat-chip *ngFor="let genre of this.show.genres" (removed)="removeGenre(genre)" removable="true"> <mat-chip *ngFor="let genre of this.show.genres" (removed)="removeGenre(genre)" removable="true">
{{genre.name}} {{genre.name}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
<input #genreInput placeholder="New genre..." [matChipInputFor]="genreList" (matChipInputTokenEnd)="addGenre($event)" <input #genreInput placeholder="New genre..." [matChipInputFor]="genreList" (matChipInputTokenEnd)="addGenre($event)"
[matAutocomplete]="genreAuto" /> [matAutocomplete]="genreAuto" />
<mat-autocomplete #genreAuto="matAutocomplete" (optionSelected)="autocompleteGenre($event)"> <mat-autocomplete #genreAuto="matAutocomplete" (optionSelected)="autocompleteGenre($event)">
<mat-option *ngFor="let genre of this.allGenres" [value]="genre"> <mat-option *ngFor="let genre of this.allGenres" [value]="genre">
{{genre.name}} {{genre.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-chip-list> </mat-chip-list>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Trailer</mat-label> <mat-label>Trailer</mat-label>
<input matInput [(ngModel)]="this.show.trailerUrl" name="trailer"> <input matInput [(ngModel)]="this.show.trailerUrl" name="trailer">
</mat-form-field> </mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Studio</mat-label> <mat-label>Studio</mat-label>
<input matInput [value]="this.show.studio?.name" (input)="this.show.studio = {slug: null, name: $event.target.value}; console.log(this.show.studio)" <input matInput [value]="this.show.studio?.name" (input)="this.show.studio = {slug: null, name: $event.target.value}; console.log(this.show.studio)"
[matAutocomplete]="studioAuto" name="studio"> [matAutocomplete]="studioAuto" name="studio">
<mat-autocomplete #studioAuto="matAutocomplete" (optionSelected)="this.show.studio = $event.option.value"> <mat-autocomplete #studioAuto="matAutocomplete" (optionSelected)="this.show.studio = $event.option.value">
<mat-option *ngFor="let studio of this.allStudios" [value]="studio"> <mat-option *ngFor="let studio of this.allStudios" [value]="studio">
{{studio.name}} {{studio.name}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
</form> </form>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Identify show</mat-panel-title>
<mat-panel-description>Search on metadata providers</mat-panel-description>
</mat-expansion-panel-header>
<p>Comming soon</p>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button> <button mat-button mat-dialog-close>Cancel</button>