CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/App.razor

<div class="container">
    <a style="float:right" href="/classic-index">Back OLD Home Page</a>
    <h3 style="float:left">Blazor WASM UI</h3>
    <h2 class="w-100 text-center">
        &nbsp;
        @if (Libraries != null && MediaTags == null)
        {
            <span>Loading tags...</span>
        }
        &nbsp;
    </h2>

    @if (Progress?.IsLoading != false)
    {
        <span>Waiting server ready...</span>
        <span>@(Progress?.LoadedTags ?? 0)</span>
        <span>/</span>
        <span>@(Progress?.TotalTrackCount ?? 0)</span>
    }
    else if (Libraries == null)
    {
        <span>Loading file set...</span>
    }
    else
    {
        <ul class="nav nav-tabs justify-content-center nav-fill" id="RootTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                    Browse
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                    Search
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    Playlists
                </button>
            </li>
        </ul>
        <div class="tab-content" id="RootTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="row justify-content-evenly mt-2">
                    <div class="d-flex flex-row bd-highlight mt-2">
                        <div>
                            Libs(@Libraries.Count):
                        </div>
                        <Select2 class="flex-fill" TItem="KeyValuePair<string,Library>"
                             TSource="IReadOnlyCollection<KeyValuePair<string,Library>>"
                             IdSelector="c => c.Key"
                             TextSelector="c =>c.Value.Name+' '+'('+c.Value.Discs.Count+')'"
                             FilterFunction="FilterLibrary"
                             GetElementById="async (items, id, token) => items.FirstOrDefault(q=>q.Key==id)"
                             Datasource="Libraries.OrderBy(p=>p.Key).ToArray()"
                             Value="@SelectedLibs"
                             Multiselect="false"
                             OnValueChanged="SelectedLibraryChanged" />
                    </div>
                    <div class="row mt-2">
                        <div class="col-12">
                            @if (CurrentLibrary != null)
                            {
                                <div class="row">
                                    @foreach (var d in CurrentLibrary.Discs.OrderByDescending(p => p.Key))
                                    {
                                        <div class="col-md-3">
                                            <div class="card mb-3 shadow-sm" @onclick="()=>SelectDisc(d.Key)">
                                                <img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,d.Key)">
                                                <div class="card-body">
                                                    <p class="card-text">@d.Value.Name</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-sm btn-outline-secondary">Track @d.Value.MainTracks.Count</button>
                                                            <button type="button" class="btn btn-sm btn-outline-secondary">SubSet @d.Value.SubTracks.Count</button>
                                                        </div>
                                                        <small class="text-muted">@GetDiscDurationDisplay(CurrentLibraryKey,d.Key)</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalToggleLabel">@CurrentDisc?.Name</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        @if (CurrentDisc != null)
                                        {
                                            <div class="col-md-4"><img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,CurrentDiscKey)"></div>
                                            <div class="col-md-8">
                                                <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-main" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                            Main
                                                        </button>
                                                    </li>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                    {
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                                @subSet.item.Value.Name
                                                            </button>
                                                        </li>
                                                    }
                                                </ul>
                                                <div class="tab-content" id="ModalDiscTabContent">
                                                    <div class="tab-pane fade show active" id="tracks-main" role="tabpanel" aria-labelledby="home-tab">
                                                        <a href="@ApiClient.GetListPageUrl(CurrentLibraryKey,CurrentDiscKey)" target="_fnz_play">Playlist page</a>
                                                        <table class="table">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">Name</th>
                                                                    <th scope="col"></th>
                                                                    <th scope="col">Duration</th>
                                                                    <th scope="col">Size</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach (var t in CurrentDisc.MainTracks.OrderBy(p => p.Key))
                                                                {
                                                                    <tr>
                                                                        <th scope="row">
                                                                            <a href="@ApiClient.GetMediaUrl(CurrentLibraryKey,CurrentDiscKey,t.Key)" target="_fnz_play">@t.Value</a>
                                                                        </th>
                                                                        <td></td>
                                                                        <td>TODO</td>
                                                                        <td>TODO</td>
                                                                    </tr>
                                                                }
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                    {
                                                        <div class="tab-pane fade show" id="tracks-@subSet.index" role="tabpanel" aria-labelledby="home-tab">
                                                            <a href="@ApiClient.GetListPageUrl(CurrentLibraryKey,CurrentDiscKey,subSet.item.Key)" target="_fnz_play">Playlist page</a>
                                                            <table class="table">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col">Name</th>
                                                                        <th scope="col"></th>
                                                                        <th scope="col">Duration</th>
                                                                        <th scope="col">Size</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach (var t in subSet.item.Value.Tracks.OrderBy(p => p.Key))
                                                                    {
                                                                        <tr>
                                                                            <th scope="row">
                                                                                <a href="@ApiClient.GetMediaUrl(CurrentLibraryKey,CurrentDiscKey,t.Key,subSet.item.Key)" target="_fnz_play">@t.Value</a>
                                                                            </th>
                                                                            <td></td>
                                                                            <td>TODO</td>
                                                                            <td>TODO</td>
                                                                        </tr>
                                                                    }
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="container">
                    <h1>此处应有搜索界面</h1>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="container">
                    <h1>此处应有列表界面</h1>
                </div>
            </div>
        </div>
    }
</div>