204 lines
9.3 KiB
Vue
204 lines
9.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="hub hub-search" id="basicSearchId">
|
|
<div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
|
|
<div class="navButtonsContainer">
|
|
<h1 class="title-main" :style="fontColor">
|
|
<span :style="color('titleColor')" class="counter-container">
|
|
<span class="count">{{ $store.state.list ? $store.state.pagination.numberOfReslults : 0 }}</span> {{ $t('front_extern.vehicles')}}
|
|
</span>
|
|
</h1>
|
|
<template v-if="false">
|
|
<span class="divider advanced-mobile"> | </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> | </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
|
|
</template>
|
|
</div>
|
|
<div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> | </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
|
|
</div>
|
|
<div>
|
|
<Pagination
|
|
v-if="$store.state.pagination.numberOfReslults"
|
|
:total-pages="Math.ceil($store.state.pagination.numberOfReslults/$store.state.settings.perPage)"
|
|
:per-page="$store.state.settings.perPage"
|
|
:current-page="$store.state.pagination.page"
|
|
@pagechanged="$emit('reloadData')"
|
|
|
|
/>
|
|
</div>
|
|
<form v-if="true" style="padding: 10px;" id="hcifilterform" action="" method="GET" :style="[bckgrColor('searchBgColor')]">
|
|
<div id="expander">
|
|
<div class="expander-content">
|
|
<div class="filter-form">
|
|
<div class="layout--group">
|
|
<div class="layout--four-fifth full-w-mobile">
|
|
<div class="layout--group">
|
|
<div class="layout--one-fourth">
|
|
<div class="part-line connected">
|
|
<label for="Make" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_marke') }}</span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select">
|
|
<brand-selector
|
|
@brandChanged="$emit('brandChanged')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout--one-fourth">
|
|
<div class="part-line">
|
|
<label for="Model" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_modell') }}</span>
|
|
</label>
|
|
<div class="ghost-select-container" id="divModel">
|
|
<div class="ghost-select">
|
|
<model-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout--one-fourth">
|
|
<div class="part-line">
|
|
<label for="PriceTo" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_price') }} <span class="label-hint">{{ $t('front_extern.label_to') }}</span></span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select">
|
|
<price-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout--one-fourth">
|
|
<div class="part-line">
|
|
<label for="KmTo" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_km') }} <span class="label-hint">{{ $t('front_extern.label_to') }}</span></span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select">
|
|
<km-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="$store.state.locations.length > 1" class="layout--one-fourth">
|
|
<div class="part-line connected">
|
|
<label for="KmTo" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.standort') }}</span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select">
|
|
<standort-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout--one-fifth showOnMobile">
|
|
<div class="part-line">
|
|
<label for="Sort" class="line-label">
|
|
<span class="label-text" :style="color('titleColor')">{{ $t('front_extern.label_sortby') }}</span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select sort">
|
|
<sort-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout--group">
|
|
<div class="layout--one-fourth onMobile">
|
|
<div class="part-line">
|
|
<label for="Sort" class="line-label">
|
|
<span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span>
|
|
</label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
|
<div class="button" :style="bckgrColor">
|
|
<span class="icon" style="border-top-color: #FFFFFF!important;"></span>
|
|
</div>
|
|
<sort-selector
|
|
@reloadData="$emit('reloadData')"
|
|
/>
|
|
</div>
|
|
<div class="connector"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="hub hub-filter-list">
|
|
<div class="resultListContainer" style="margin: 0 auto;"></div>
|
|
<div id="listContainerToPrint" class="object-list-container search-result-container">
|
|
<p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
|
|
<product-grid
|
|
@detailClick="$emit('detailClick', $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ProductGrid from './ProductGrid.vue'
|
|
|
|
import SelectorBrand from './SelectorBrand.vue'
|
|
import SelectorModel from './SelectorModel.vue'
|
|
import SelectorPrice from './SelectorPrice.vue'
|
|
import SelectorKm from './SelectorKm.vue'
|
|
import SelectorSort from './SelectorSort.vue'
|
|
import SelectorStandort from './SelectorStandort.vue'
|
|
import Pagination from './Pagination.vue'
|
|
|
|
export default {
|
|
// :data="list"
|
|
// :lang="settings.lang"
|
|
// :settings="settings"
|
|
// props: ['data', 'lang', 'settings'],
|
|
|
|
components: {
|
|
'product-grid': ProductGrid,
|
|
'brand-selector': SelectorBrand,
|
|
'model-selector': SelectorModel,
|
|
'price-selector': SelectorPrice,
|
|
'km-selector': SelectorKm,
|
|
'sort-selector': SelectorSort,
|
|
'standort-selector': SelectorStandort,
|
|
'Pagination': Pagination,
|
|
},
|
|
data() {
|
|
},
|
|
computed: {
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.hub.hub-search, #expander {
|
|
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
|
}
|
|
.hub.hub-filter-list{
|
|
background-color: v-bind('#' + $store.state.settings.divBgColor + "!important") ;
|
|
}
|
|
|
|
</style>
|