DiscDialog.razor 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @inherits FnzComponentBase
  2. @code {
  3. [Parameter, Required] public FeDisc Disc { get; set; }
  4. [Parameter] public EventCallback<FeTrack> OnAddToPlaylist { get; set; } = EventCallback<FeTrack>.Empty;
  5. private FnzBoostrapModal modalDisc { get; set; }
  6. }
  7. @code {
  8. public void Show()
  9. {
  10. JSRuntime.InvokeVoidAsync("ResetModalDisc");
  11. modalDisc.Show();
  12. }
  13. }
  14. <FnzBoostrapModal @ref="modalDisc" CssClass="modal-xl">
  15. <Title>@Disc?.Name</Title>
  16. <Body>
  17. <div class="container-fluid">
  18. <div class="row">
  19. <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.CoverPath" onerror="this.src='blazor-192.png'"></div>
  20. <div class="col-md-8">
  21. <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
  22. @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
  23. {
  24. <li class="nav-item " role="presentation">
  25. <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button">
  26. @subSet.item?.Name
  27. </button>
  28. </li>
  29. }
  30. @if (Disc?.Bks != null)
  31. {
  32. <li class="nav-item " role="presentation">
  33. <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK" type="button">
  34. PIC
  35. </button>
  36. </li>
  37. }
  38. </ul>
  39. <div class="tab-content" id="ModalDiscTabContent">
  40. @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
  41. {
  42. <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel">
  43. <DiscDialogTrackSetTable TrackSet="subSet.item" OnClickAddTrackToList="OnAddToPlaylist"></DiscDialogTrackSetTable>
  44. </div>
  45. }
  46. @if (Disc?.Bks != null)
  47. {
  48. <div class="tab-pane fade p-2" id="tracks-BK" role="tabpanel">
  49. <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
  50. </div>
  51. }
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </Body>
  57. </FnzBoostrapModal>