You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.4 KiB
111 lines
4.4 KiB
<section x-show="isActiveTab(2)" id="sidebar-advanced-search" class="p-4"> |
|
<fieldset class="is-panel-block" |
|
x-data="advancedSearch()" |
|
> |
|
<!-- water body selectors --> |
|
<div class="columns"> |
|
<div class="dropdown column " :class="gopen ? 'is-active' : ''"> |
|
<div class="dropdown-trigger"> |
|
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="gopen = ! gopen; getDropdownData('g')"> |
|
<span>Waterbody Groups</span> |
|
<span class="icon is-small"> |
|
<i class="fas fa-angle-down" aria-hidden="true"></i> |
|
</span> |
|
</button> |
|
</div> |
|
<div class="dropdown-menu" id="dropdown-group" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
|
<div class="dropdown-content" x-model="gid"> |
|
<template x-for="wbgroup in g" :key="wbgroup.id"> |
|
<a href="#" class="dropdown-item" x-text="wbgroup.label" :id="'sel-group-' + wbgroup.id" @click="$dispatch('select', { el: $el, id: wbgroup.id })"> |
|
</a> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="dropdown column" :class="bopen ? 'is-active' : ''"> |
|
<div class="dropdown-trigger"> |
|
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="bopen = ! bopen; getDropdownData('b')"> |
|
<span>Waterbody</span> |
|
<span class="icon is-small"> |
|
<i class="fas fa-angle-down" aria-hidden="true"></i> |
|
</span> |
|
</button> |
|
</div> |
|
<div class="dropdown-menu" id="dropdown-wbody" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
|
<div class="dropdown-content" x-model="bid"> |
|
<template x-for="wbody in b" :key="wbody.id"> |
|
<a href="#" class="dropdown-item" x-text="wbody.label" :id="'sel-body-' + wbody.id" @click="$dispatch('select', { el: $el, id: wbody.id })"> |
|
</a> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="tags-selection-g" class="tags"> |
|
<span class="tag" x-text="tagName('g', gid)"></span> |
|
</div> |
|
<div id="tags-selection-b" class="tags"> |
|
<template x-for="id in bid"> |
|
<span class="tag" x-text="tagName('b', id)"></span> |
|
</template> |
|
</div> |
|
<!-- criterias selectors --> |
|
<div class="columns"> |
|
<div class="dropdown column" :class="dopen ? 'is-active' : ''"> |
|
<div class="dropdown-trigger"> |
|
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')"> |
|
<span>Descriptors</span> |
|
<span class="icon is-small"> |
|
<i class="fas fa-angle-down" aria-hidden="true"></i> |
|
</span> |
|
</button> |
|
</div> |
|
<div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
|
<div class="dropdown-content" x-model="did" > |
|
<template x-for="descriptor in d" :key="descriptor.code"> |
|
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })"> |
|
</a> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="dropdown column" :class="copen ? 'is-active' : ''"> |
|
<div class="dropdown-trigger"> |
|
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')"> |
|
<span>Criterias</span> |
|
<span class="icon is-small"> |
|
<i class="fas fa-angle-down" aria-hidden="true"></i> |
|
</span> |
|
</button> |
|
</div> |
|
<div class="dropdown-menu" id="dropdown-criteria" role="menu"> |
|
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)"> |
|
<template x-for="criteria in c" :key="criteria.code"> |
|
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })"> |
|
</a> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="tags-selection-d" class="tags"> |
|
<span class="tag" x-text="tagName('d', did)"></span> |
|
</div> |
|
<div id="tags-selection-c" class="tags"> |
|
<template x-for="id in cid"> |
|
<span class="tag" x-text="tagName('c', id)"></span> |
|
</template> |
|
</div> |
|
<div x-init="loadCal"> |
|
<input type="date" id="start" name="trip-start" |
|
value="" |
|
min="2017-01-01"> |
|
</div> |
|
<div class="p-4"> |
|
<button class="button is-primary" @click="search()" x-bind:disabled="submitDisabled">Make Request...</button> |
|
<button class="button" @click="clearSearch()">Clear Filters</button> |
|
</div> |
|
</fieldset> |
|
</section> |
|
|
|
|
|
|