160 lines
9.7 KiB
Plaintext
160 lines
9.7 KiB
Plaintext
|
@using System.Drawing
|
||
|
|
@using Blazorise.Extensions
|
||
|
|
@using WatchIt.DTO.Models.Controllers.Photos.Photo
|
||
|
|
@using WatchIt.Website.Components.Subcomponents.Common
|
||
|
|
|
||
|
|
@inherits Component
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="panel">
|
||
|
|
<div class="container-grid">
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col">
|
||
|
|
<div class="d-flex align-items-center h-100">
|
||
|
|
<h4 class="m-0"><strong>Photos</strong></h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
@if (!_photoEditMode)
|
||
|
|
{
|
||
|
|
<button type="button" class="btn btn-secondary" disabled="@(!Id.HasValue || !_loaded)" @onclick="() => InitEditPhoto(null)">Add new photo</button>
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="d-flex gap-3 align-items-center">
|
||
|
|
<button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto">
|
||
|
|
<LoadingButtonContent IsLoading="@(_photoEditSaving)" LoadingContent="Saving..." Content="Save"/>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
@if (!_photoEditMode)
|
||
|
|
{
|
||
|
|
if (_loaded)
|
||
|
|
{
|
||
|
|
if (!_photos.IsNullOrEmpty())
|
||
|
|
{
|
||
|
|
<div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0">
|
||
|
|
@foreach (PhotoResponse photo in _photos)
|
||
|
|
{
|
||
|
|
<div class="container-grid photo-container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<Image Content="@(photo)" AlternativeText="photo" Width="350" Placeholder="/assets/placeholders/photo.png" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mt-2 gx-2">
|
||
|
|
@if (photo.Background is not null)
|
||
|
|
{
|
||
|
|
<div class="col-auto">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div id="backgroundIndicator" class="border rounded-circle circle-@(photo.Background.IsUniversal ? "blue" : "grey") p-1" data-toggle="tooltip" data-placement="top" title="@(photo.Background.IsUniversal ? "Universal" : "Media-only") background">
|
||
|
|
<img class="no-vertical-align" src="assets/icons/background.png" alt="background_icon" height="20px" width="20px"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
<div class="col">
|
||
|
|
<div class="d-flex align-items-center h-100 text-size-upload-date">
|
||
|
|
Upload: @(photo.UploadDate.ToString("g"))
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<button type="button" class="btn btn-secondary btn-sm" @onclick="() => InitEditPhoto(photo.Id)" disabled="@(_photoDeleting.Contains(photo.Id))">
|
||
|
|
<img src="assets/icons/edit.png" alt="edit_icon" height="20px" width="20px"/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<button type="button" class="btn btn-danger btn-sm" disabled="@(_photoDeleting.Contains(photo.Id))" @onclick="() => DeletePhoto(photo.Id)">
|
||
|
|
@if (!_photoDeleting.Contains(photo.Id))
|
||
|
|
{
|
||
|
|
<img src="assets/icons/delete.png" alt="delete_icon" height="20px" width="20px"/>
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||
|
|
}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="d-flex justify-content-center">
|
||
|
|
Photo list is empty
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="d-flex justify-content-center">
|
||
|
|
<Loading Color="Loading.Colors.Light"/>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="container-grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-auto">
|
||
|
|
<div class="container-grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<Image Content="@(_photoEditRequest)" Placeholder="/assets/placeholders/photo.png" AlternativeText="edit_photo" Width="300" AspectRatio="Image.ImageComponentAspectRatio.Photo"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@if (_photoEditId is null)
|
||
|
|
{
|
||
|
|
<div class="row mt-2">
|
||
|
|
<div class="col">
|
||
|
|
<InputFile class="form-control" OnChange="LoadPhoto" autocomplete="off" style="width: 300px;"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="container-grid">
|
||
|
|
<div class="row form-group">
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-check">
|
||
|
|
<InputCheckbox class="form-check-input" @bind-Value="_photoEditIsBackground"/>
|
||
|
|
<label class="form-check-label">Use as background</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="form-check">
|
||
|
|
<InputCheckbox class="form-check-input" @bind-Value="_photoEditBackgroundData.IsUniversal" disabled="@(!_photoEditIsBackground)"/>
|
||
|
|
<label class="form-check-label">Use as universal background</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row form-group my-1">
|
||
|
|
<label for="first-gradient-color" class="col-4 col-form-label">First gradient color</label>
|
||
|
|
<div class="col-8">
|
||
|
|
<input type="color" class="form-control form-control-color w-100" id="first-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.FirstGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoFirstGradientColorChanged">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row form-group">
|
||
|
|
<label for="second-gradient-color" class="col-4 col-form-label">Second gradient color</label>
|
||
|
|
<div class="col-8">
|
||
|
|
<input type="color" class="form-control form-control-color w-100" id="second-gradient-color" value="@(ColorTranslator.ToHtml(_photoEditBackgroundData.SecondGradientColor))" disabled="@(!_photoEditIsBackground)" @onchange="EditPhotoSecondGradientColorChanged">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|