46 lines
No EOL
2.3 KiB
Text
46 lines
No EOL
2.3 KiB
Text
<template v-if="page == 'library-songs'">
|
|
<div class="content-inner">
|
|
<div class="row">
|
|
<div class="col" style="padding:0px;">
|
|
<h1 class="header-text">Songs</h1>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" style="padding:0px;">
|
|
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
|
<div class="search-input--icon"></div>
|
|
<input type="search"
|
|
style="width:100%;"
|
|
spellcheck="false"
|
|
placeholder="Search..."
|
|
@input="searchLibrarySongs"
|
|
v-model="library.songs.search" class="search-input">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto flex-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
|
|
<optgroup label="Sort By">
|
|
<option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()">
|
|
<optgroup label="Sort Order">
|
|
<option value="asc">Ascending</option>
|
|
<option value="desc">Descending</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
|
|
<mediaitem-list-item :item="item" :show-meta-data="true" :show-library-status="false" v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
|
</div>
|
|
</template> |