Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-22 23:10:35 -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]
}) })

159
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>
<mat-form-field class="w-100"> <form #showForm="ngForm">
<mat-label>Aliases</mat-label> <mat-form-field class="w-100">
<mat-chip-list #aliasList> <mat-label>Title</mat-label>
<mat-chip *ngFor="let alias of this.show.aliases" (removed)="removeAlias(alias)" removable="true"> <input matInput [(ngModel)]="this.show.title" name="title">
{{alias}} </mat-form-field>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input #aliasInput placeholder="New alias..." [matChipInputFor]="aliasList" (matChipInputTokenEnd)="addAlias($event)" />
</mat-chip-list>
</mat-form-field>
<mat-form-field class="w-100">
<mat-label>Overview</mat-label>
<textarea matInput [(ngModel)]="this.show.overview" name="overview"></textarea>
</mat-form-field>
<mat-form-field class="w-25 pr-3">
<mat-label>Start Year</mat-label>
<input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/>
</mat-form-field>
<mat-form-field class="w-25 pr-3">
<mat-label>End Year</mat-label>
<input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/>
</mat-form-field>
<mat-form-field class="w-50">
<mat-label>Status</mat-label>
<mat-select>
<mat-option value="Finished">Finished</mat-option>
<mat-option value="Airing">Airing</mat-option>
<mat-option value="Planned">Planned</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>Genres</mat-label> <mat-label>Aliases</mat-label>
<mat-chip-list #genreList> <mat-chip-list #aliasList>
<mat-chip *ngFor="let genre of this.show.genres" (removed)="removeGenre(genre)" removable="true"> <mat-chip *ngFor="let alias of this.show.aliases" (removed)="removeAlias(alias)" removable="true">
{{genre.name}} {{alias}}
<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 #aliasInput placeholder="New alias..." [matChipInputFor]="aliasList" (matChipInputTokenEnd)="addAlias($event)" />
[matAutocomplete]="genreAuto" /> </mat-chip-list>
<mat-autocomplete #genreAuto="matAutocomplete" (optionSelected)="autocompleteGenre($event)"> </mat-form-field>
<mat-option *ngFor="let genre of this.allGenres" [value]="genre">
{{genre.name}} <mat-form-field class="w-100">
</mat-option> <mat-label>Overview</mat-label>
</mat-autocomplete> <textarea matInput [(ngModel)]="this.show.overview" name="overview"></textarea>
</mat-chip-list> </mat-form-field>
</mat-form-field>
<mat-form-field class="w-25 pr-3">
<mat-form-field class="w-100"> <mat-label>Start Year</mat-label>
<mat-label>Trailer</mat-label> <input matInput [(ngModel)]="this.show.startYear" name="startYear" type="number" [max]="this.show.endYear"/>
<input matInput [(ngModel)]="this.show.trailerUrl" name="trailer"> </mat-form-field>
</mat-form-field> <mat-form-field class="w-25 pr-3">
<mat-label>End Year</mat-label>
<mat-form-field class="w-100"> <input matInput [(ngModel)]="this.show.endYear" name="endYear" type="number" [min]="this.show.startYear"/>
<mat-label>Studio</mat-label> </mat-form-field>
<input matInput [value]="this.show.studio?.name" (input)="this.show.studio = {slug: null, name: $event.target.value}; console.log(this.show.studio)" <mat-form-field class="w-50">
[matAutocomplete]="studioAuto" name="studio"> <mat-label>Status</mat-label>
<mat-autocomplete #studioAuto="matAutocomplete" (optionSelected)="this.show.studio = $event.option.value"> <mat-select>
<mat-option *ngFor="let studio of this.allStudios" [value]="studio"> <mat-option value="Finished">Finished</mat-option>
{{studio.name}} <mat-option value="Airing">Airing</mat-option>
</mat-option> <mat-option value="Planned">Planned</mat-option>
</mat-autocomplete> </mat-select>
</mat-form-field> </mat-form-field>
</form>
<mat-form-field class="w-100">
<mat-label>Genres</mat-label>
<mat-chip-list #genreList>
<mat-chip *ngFor="let genre of this.show.genres" (removed)="removeGenre(genre)" removable="true">
{{genre.name}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input #genreInput placeholder="New genre..." [matChipInputFor]="genreList" (matChipInputTokenEnd)="addGenre($event)"
[matAutocomplete]="genreAuto" />
<mat-autocomplete #genreAuto="matAutocomplete" (optionSelected)="autocompleteGenre($event)">
<mat-option *ngFor="let genre of this.allGenres" [value]="genre">
{{genre.name}}
</mat-option>
</mat-autocomplete>
</mat-chip-list>
</mat-form-field>
<mat-form-field class="w-100">
<mat-label>Trailer</mat-label>
<input matInput [(ngModel)]="this.show.trailerUrl" name="trailer">
</mat-form-field>
<mat-form-field class="w-100">
<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)"
[matAutocomplete]="studioAuto" name="studio">
<mat-autocomplete #studioAuto="matAutocomplete" (optionSelected)="this.show.studio = $event.option.value">
<mat-option *ngFor="let studio of this.allStudios" [value]="studio">
{{studio.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</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>