100 lines
4.5 KiB
HTML
100 lines
4.5 KiB
HTML
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/music.mpd/search.js') }}"></script>
|
|
|
|
<script type="text/x-template" id="tmpl-music-mpd-search">
|
|
<modal id="music-mpd-search-modal" title="Search" v-model="visible"
|
|
:width="showResults ? '90vw' : 'initial'" ref="modal"
|
|
@open="$refs.form.querySelector('input[type=text]:first-child').focus()">
|
|
<div class="search">
|
|
<form ref="form" @submit.prevent="search" :class="{hidden: showResults}">
|
|
<div class="row">
|
|
<input type="text" v-model.lazy.trim="query.any" placeholder="Any field">
|
|
</div>
|
|
<div class="row">
|
|
<input type="text" v-model.lazy.trim="query.file" placeholder="Filename or URI">
|
|
</div>
|
|
<div class="row">
|
|
<input type="text" v-model.lazy.trim="query.artist" placeholder="Artist">
|
|
</div>
|
|
<div class="row">
|
|
<input type="text" v-model.lazy.trim="query.title" placeholder="Title">
|
|
</div>
|
|
<div class="row">
|
|
<input type="text" v-model.lazy.trim="query.album" placeholder="Album">
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="left col-6">
|
|
<button class="btn-default" type="button" v-if="results.length"
|
|
@click="$event.preventDefault(); showResults = true" title="Show results">
|
|
<i class="fa fa-list"></i>
|
|
</button>
|
|
</div>
|
|
<div class="pull-right" :class="{'col-6': results.length > 0, 'col-12': results.length == 0}">
|
|
<button class="btn-primary" type="submit">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="results-controls" :class="{hidden: !showResults}">
|
|
<div class="col-6">
|
|
<i class="fa fa-filter input-icon"></i>
|
|
<input type="text" class="with-icon" v-model="filter">
|
|
</div>
|
|
<div class="col-6 pull-right">
|
|
<button :class="{enabled: selectionMode}"
|
|
:title="selectionMode ? 'End selection' : 'Start selection'"
|
|
v-if="results.length > 0"
|
|
@click="toggleSelectionMode">
|
|
<i class="fa fa-check"></i>
|
|
</button>
|
|
<button title="Select all"
|
|
v-if="results.length > 0"
|
|
@click="selectAll">
|
|
<i class="fa fa-check-double"></i>
|
|
</button>
|
|
<button class="btn-default" title="Show search form" @click="resetForm">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results" :class="{hidden: !showResults}">
|
|
<dropdown id="music-mpd-search-dropdown"
|
|
v-if="results.length > 0"
|
|
ref="dropdown"
|
|
:items="dropdownItems">
|
|
</dropdown>
|
|
|
|
<div class="no-results" v-if="results.length === 0">No results</div>
|
|
<music-mpd-search-item
|
|
v-for="item in results"
|
|
v-if="matchesFilter(item)"
|
|
:key="item.file"
|
|
:item="item"
|
|
:selected="item.file in selectedItems"
|
|
@input="onItemClick">
|
|
</music-mpd-search-item>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="tmpl-music-mpd-search-item">
|
|
<div class="row item search-item"
|
|
:class="{selected: selected}"
|
|
@click="$emit('input', item)">
|
|
<div class="col-3 artist" v-text="item.artist" v-if="item.artist"></div>
|
|
<div class="col-3 artist empty" v-else>[No Artist]</div>
|
|
|
|
<div class="col-4 title" v-text="item.title || item.file"></div>
|
|
|
|
<div class="col-3 album" v-text="item.album" v-if="item.album"></div>
|
|
<div class="col-3 album empty" v-else>-</div>
|
|
|
|
<div class="col-2 pull-right duration" v-text="item.time && item.time != 0 ? convertTime(item.time) : '-:--'"></div>
|
|
</div>
|
|
</script>
|
|
|