217 lines
13 KiB
Vue
217 lines
13 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 class="counter-container">
|
|
<span class="count">{{ data.results ? data.results.length : 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>AA
|
|
<form v-if="true" id="hcifilterform" action="" method="GET">
|
|
<div class="expander">
|
|
<div class="expander-content" style="background-color: #fff!important;">
|
|
<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: #d63e2d!important;">Marke</span></label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select"><span class="label">Alle</span>
|
|
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div>
|
|
<select class="ghost" data-param="make" id="markenID" name="Make">
|
|
<option value="0">Alle</option>
|
|
<option value="APRILIA">APRILIA</option>
|
|
<option value="BMW">BMW</option>
|
|
<option value="KAWASAKI">KAWASAKI</option>
|
|
<option value="SUZUKI">SUZUKI</option>
|
|
<option value="YAMAHA">YAMAHA</option>
|
|
</select>
|
|
</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: #d63e2d!important;">Modell</span></label>
|
|
<div class="ghost-select-container" id="divModel">
|
|
<div class="ghost-select"><span class="label"> </span>
|
|
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="model" id="modelID" name="Model">
|
|
<option value="0">Alle</option>
|
|
</select>
|
|
</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: #d63e2d!important;">Preis <span class="label-hint">bis</span></span></label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select"><span class="label">Alle</span>
|
|
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="priceto" id="PriceTo" name="PriceTo">
|
|
<option value="" selected="selected">Alle</option>
|
|
<option value="1000">CHF 1000</option>
|
|
<option value="2000">CHF 2'000</option>
|
|
<option value="3000">CHF 3'000</option>
|
|
<option value="4000">CHF 4'000</option>
|
|
<option value="5000">CHF 5'000</option>
|
|
<option value="7500">CHF 7'500</option>
|
|
<option value="10000">CHF 10'000</option>
|
|
<option value="12500">CHF 12'500</option>
|
|
<option value="15000">CHF 15'000</option>
|
|
<option value="17500">CHF 17'500</option>
|
|
<option value="20000">CHF 20'000</option>
|
|
<option value="22500">CHF 22'500</option>
|
|
<option value="25000">CHF 25'000</option>
|
|
<option value="30000">CHF 30'000</option>
|
|
<option value="35000">CHF 35'000</option>
|
|
<option value="40000">CHF 40'000</option>
|
|
<option value="45000">CHF 45'000</option>
|
|
<option value="50000">CHF 50'000</option>
|
|
<option value="60000">CHF 60'000</option>
|
|
<option value="70000">CHF 70'000</option>
|
|
<option value="80000">CHF 80'000</option>
|
|
<option value="90000">CHF 90'000</option>
|
|
<option value="100000">CHF 100'000</option>
|
|
<option value="150000">CHF 150'000</option>
|
|
<option value="200000">CHF 200'000</option>
|
|
<option value="300000">CHF 300'000</option>
|
|
</select>
|
|
</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: #d63e2d!important;">km <span class="label-hint">bis</span></span></label>
|
|
<div class="ghost-select-container">
|
|
<div class="ghost-select"><span class="label">Alle</span>
|
|
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="kmto" id="KmTo" name="KmTo">
|
|
<option value="">Alle</option>
|
|
<option value="1000">1'000 Km</option>
|
|
<option value="5000">5'000 Km</option>
|
|
<option value="7500">7'500 Km</option>
|
|
<option value="10000">10'000 Km</option>
|
|
<option value="25000">25'000 Km</option>
|
|
<option value="50000">50'000 Km</option>
|
|
<option value="60000">60'000 Km</option>
|
|
<option value="70000">70'000 Km</option>
|
|
<option value="80000">80'000 Km</option>
|
|
<option value="90000">90'000 Km</option>
|
|
<option value="100000">100'000 Km</option>
|
|
<option value="125000">125'000 Km</option>
|
|
<option value="150000">150'000 Km</option>
|
|
<option value="175000">175'000 Km</option>
|
|
<option value="200000">200'000 Km</option>
|
|
</select>
|
|
</div>
|
|
<div class="connector"></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: #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="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
|
<option value="" selected="selected">Bitte auswählen</option>
|
|
<option value="price_asc">Preis (tiefster zuerst)</option>
|
|
<option value="price_desc">Preis (höchster zuerst)</option>
|
|
<option value="km_asc">Km (tiefste zuerst)</option>
|
|
<option value="km_desc">Km (höchste zuerst)</option>
|
|
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
|
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
|
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
|
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
|
</select>
|
|
</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="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
|
<option value="">Bitte auswählen</option>
|
|
<option value="price_asc">Preis (tiefster zuerst)</option>
|
|
<option value="price_desc">Preis (höchster zuerst)</option>
|
|
<option value="km_asc">Km (tiefste zuerst)</option>
|
|
<option value="km_desc">Km (höchste zuerst)</option>
|
|
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
|
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
|
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
|
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
|
</select>
|
|
</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
|
|
:data="data.results"
|
|
:lang="lang"
|
|
:settings="settings"
|
|
@detailClick="$emit('detailClick', $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { emit } from 'process';
|
|
import ProductGrid from './ProductGrid.vue'
|
|
|
|
export default {
|
|
props: ['data', 'lang', 'settings'],
|
|
components: {
|
|
'product-grid': ProductGrid,
|
|
},
|
|
data() {
|
|
},
|
|
computed: {
|
|
// titleColor: function() {
|
|
// return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
|
|
// },
|
|
// bgColor: function() {
|
|
// return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
|
// },
|
|
fgColor: function() {
|
|
// console.log(this.settings)
|
|
console.log('this.settings.divBGColor', this.settings.divBGColor)
|
|
return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
|
},
|
|
// bgColor: function() {
|
|
// // console.log('this.settings.divBGColor', this.settings.divBGColor)
|
|
// return this.settings.divBGColor ? 'background-color: #' + this.settings.divBGColor + ' !important' : '11';
|
|
// },
|
|
fontColor: function() {
|
|
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|