karusic/front/src/app/scene/album-edit/SceneAlbumEdit.html

169 lines
4.2 KiB
HTML

<div class="main-reduce edit-page">
<div class="title">
Edit album
</div>
@if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The album has been removed
<br/><br/><br/>
</div>
</div>
}
@else if (itemIsNotFound) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The album does not exist
<br/><br/><br/>
</div>
</div>
}
@else if (itemIsLoading) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
}
@else {
<div class="fill-all">
<div class="request_raw">
<div class="label">
name:
</div>
<div class="input">
<input type="text"
placeholder="Name of the album"
[value]="nameAlbum"
(input)="onName($event.target.value)"
/>
</div>
</div>
<!--
<div class="request_raw">
<div class="label">
<i class="material-icons">date_range</i> Date:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="2112"
[value]="data.time"
(input)="onDate($event.target)"/>
</div>
</div>
-->
<div class="request_raw">
<div class="label">
Description:
</div>
<div class="input">
<input type="text"
placeholder="Description of the Media"
[value]="description"
(input)="onDescription($event.target.value)"/>
</div>
</div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title">
Covers
</div>
<div class="fill-all">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
@for (element of coversDisplay; track element.id;) {
<div class="cover">
<div class="cover-image">
<img src="{{element.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(element.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
</div>
}
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title">
Administration
</div>
<div class="fill-all">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{idAlbum}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Tracks:
</div>
<div class="input">
{{trackCount}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
@if(trackCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove album
</button>
</div>
}
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove album, track depending on it
</div>
}
</div>
<div class="clear"></div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize"
[mediaSize]="upload.mediaSize"
[result]="upload.result"
[error]="upload.error"></upload-progress>
<delete-confirm
[comment]="confirmDeleteComment"
[imageUrl]=confirmDeleteImageUrl
(callback)="deleteConfirmed()"></delete-confirm>