.row(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
.standard-sidebar
.form-group
input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
.form
h2(v-once) {{ $t('filter') }}
h3(v-once) {{ $t('equipmentType') }}
.form-group
.form-check(
v-for="group in groups",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="group.selected")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t(group.key) }}
.standard-page
.clearfix
h1.float-left.mb-0.page-header(v-once) {{ $t('items') }}
.float-right
span.dropdown-label {{ $t('sortBy') }}
b-dropdown(:text="$t(sortBy)", right=true)
b-dropdown-item(@click="sortBy = 'quantity'", :active="sortBy === 'quantity'") {{ $t('quantity') }}
b-dropdown-item(@click="sortBy = 'AZ'", :active="sortBy === 'AZ'") {{ $t('AZ') }}
div(
v-for="group in groups",
v-if="group.selected",
:key="group.key",
)
h2
| {{ $t(group.key) }}
|
span.badge.badge-pill.badge-default {{group.quantity}}
.items(v-if="group.key === 'eggs'")
item(
v-for="({data: item, quantity}, index) in items[group.key]",
v-if="group.open || index < itemsPerLine",
:item="item",
:key="item.key",
:itemContentClass="`${group.classPrefix}${item.key}`",
v-drag.drop.hatch="item.key",
@itemDragOver="onDragOver($event, item)",
@itemDropped="onDrop($event, item)",
@itemDragLeave="onDragLeave()",
@click="onEggClicked($event, item)"
)
template(slot="popoverContent", scope="ctx")
h4.popover-content-title {{ ctx.item.text() }}
.popover-content-text {{ ctx.item.notes() }}
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
.items(v-else-if="group.key === 'hatchingPotions'")
item(
v-for="({data: item, quantity}, index) in items[group.key]",
v-if="group.open || index < itemsPerLine",
:item="item",
:key="item.key",
:itemContentClass="`${group.classPrefix}${item.key}`",
v-drag.hatch="item.key",
@itemDragEnd="onDragEnd($event, item)",
@itemDragStart="onDragStart($event, item)",
@click="onPotionClicked($event, item)"
)
template(slot="popoverContent", scope="ctx")
h4.popover-content-title {{ ctx.item.text() }}
.popover-content-text {{ ctx.item.notes() }}
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
.items(v-else)
item(
v-for="({data: item, quantity}, index) in items[group.key]",
v-if="group.open || index < itemsPerLine",
:item="item",
:key="item.key",
:itemContentClass="`${group.classPrefix}${item.key}`",
)
template(slot="popoverContent", scope="ctx")
h4.popover-content-title {{ ctx.item.text() }}
.popover-content-text {{ ctx.item.notes() }}
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-quantity {{ quantity }}
div(v-if="items[group.key].length === 0")
p(v-once) {{ $t('noGearItemsOfType', { type: $t(group.key) }) }}
a.btn.btn-show-more(
v-if="items[group.key].length > itemsPerLine",
@click="group.open = !group.open"
) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}
div.hatchingPotionInfo(ref="draggingPotionInfo")
div(v-if="currentDraggingPotion != null")
div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
div.popover
div.popover-content {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text() }) }}
div.hatchingPotionInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
div(v-if="currentDraggingPotion != null")
div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
div.popover
div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text() }) }}