o.moresis
2 years ago
7 changed files with 225 additions and 88 deletions
@ -1,63 +1,81 @@
@@ -1,63 +1,81 @@
|
||||
<?php |
||||
|
||||
?> |
||||
<div x-data="moreInfo()"> |
||||
<fieldset id="checkbox-container" class="field"></fieldset> |
||||
<div id="chart-wrapper" x-init="drawDataChart()"> |
||||
<canvas id="data-chart" ></canvas> |
||||
</div> |
||||
<p class="px-4">You may request the whole entity (cruise/station etc.) without selecting search criteria or be more specific by doing so.</p> |
||||
<fieldset class="is-panel-block" |
||||
x-data="moreInfo()" |
||||
> |
||||
|
||||
<div x-ref="grid" x-init="populateFeatureGrid($el)"></div> |
||||
<div class="dropdown" :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> |
||||
<fieldset class="is-panel-block"> |
||||
<div x-ref="grid" x-init="populateFeatureGrid($el)"></div> |
||||
<div class="dropdown" :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" x-ref="dinput" > |
||||
<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-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="did" x-ref="dinput" > |
||||
<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 class="dropdown" :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 class="dropdown" :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 id="tags-selection-d" class="tags"> |
||||
<span class="tag" x-text="tagName('d', did)"></span> |
||||
</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 id="tags-selection" class="tags"> |
||||
<template x-for="id in cid"> |
||||
<span class="tag" x-text="tagName('c', id)"></span> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<div id="tags-selection-d" class="tags"> |
||||
<span class="tag" x-text="tagName('d', did)"></span> |
||||
</div> |
||||
<div id="tags-selection" 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> |
||||
<button @click="search()">Request Data...</button> |
||||
</div> |
||||
<div x-init="loadCal"> |
||||
<input type="date" id="start" name="trip-start" |
||||
value="" |
||||
min="2017-01-01"> |
||||
</div> |
||||
<div> |
||||
<button @click="search()">Request Data...</button> |
||||
</div> |
||||
</fieldset> |
||||
</div> |
||||
<style> |
||||
.chart-wrapper { |
||||
position: relative; |
||||
} |
||||
|
||||
.chart-wrapper > canvas { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
pointer-events:none; |
||||
} |
||||
|
||||
.chart-area-wrapper { |
||||
width: 15000px; |
||||
overflow-x: scroll; |
||||
} |
||||
|
||||
</style> |
||||
|
Loading…
Reference in new issue