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.
241 lines
12 KiB
241 lines
12 KiB
<template>
|
|
<carousel :per-page="1" :navigate-to="innerStep" class="flex gap-8 overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
|
|
<slide>
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
|
|
<heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
|
|
<radio-grid v-model="value.category_id" @input="innerStep++" class="mt-8" :options="categories"></radio-grid>
|
|
</slide>
|
|
|
|
<!-- ********************************* Haus ********************************** -->
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<h2 class="text-4xl font-bold text-gray-700 text-center mt-2">Bitte wählen Sie<br />die <span class="text-primary">Art</span> des Hauses</h2>
|
|
<radio-grid v-model="value.kind_id" @input="innerStep++" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
|
|
<radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
|
|
<radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
|
|
<heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
|
|
<pagination v-model="innerStep" class="mt-24"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
|
|
<heading>Wie viele<br /><span class="text-primary">Etagen</span> hat das Haus?</heading>
|
|
<radio-grid v-model="value.number_of_floors" @input="innerStep++" class="mt-8" :options="numbersOfFloors"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 7</div>
|
|
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
|
|
<radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'house'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 8</div>
|
|
<heading>Welche <span class="text-primary">Parkmöglichkeiten</span><br />sind am Haus vorhanden?</heading>
|
|
<radio-grid v-model="value.parking_space_type" @input="innerStep++" class="mt-8" :options="parkingSpaceTypes"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Wohnung ******************************** -->
|
|
<slide v-if="value.category_id == 'apartment'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
|
|
<radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'apartment'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
|
|
<heading>Wann wurde das<br />Wohnhaus <span class="text-primary">erbaut?</span></heading>
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
|
|
<pagination v-model="innerStep" class="mt-24"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category_id == 'apartment'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
|
|
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
|
|
<radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Grundstueck ******************************** -->
|
|
<slide v-if="value.category_id == 'plot'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<heading>Welche Fläche hat<br />das <span class="text-primary">Grundstück</span>?</heading>
|
|
<radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
|
|
</slide>
|
|
<!--
|
|
<div class="w-full flex-none ">
|
|
<div v-show="innerStep === 9">
|
|
<h2 class="text-xl font-bold text-primary text-center">Bitte geben Sie ihre Daten ein</h2>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname">
|
|
<input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname">
|
|
<input type="text" v-model="value.address" name="address" placeholder="Adresse">
|
|
<input type="text" v-model="value.plz" name="plz" placeholder="PLZ">
|
|
<input type="text" v-model="value.location" name="location" placeholder="Ort">
|
|
<input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer">
|
|
<input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse">
|
|
</div>
|
|
<h2 class="text-xl font-bold text-primary text-center">Daten des Objekts</h2>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<input type="text" v-model="value.property_plz" name="property_plz" placeholder="PLZ der Immobilie">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</carousel>
|
|
</template>
|
|
|
|
<script>
|
|
import {Carousel, Slide} from 'vue-carousel';
|
|
import Heading from './components/Heading.vue';
|
|
import veeno from 'veeno';
|
|
import wNumb from 'wnumb';
|
|
import 'nouislider/distribute/nouislider.min.css';
|
|
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
tooltips: [wNumb({decimals: 0})],
|
|
pipsy: {
|
|
mode: 'range',
|
|
density: 3,
|
|
filter: () => 1,
|
|
format: wNumb({
|
|
decimals: 0
|
|
})
|
|
},
|
|
range: {min: 1600, max: 2020},
|
|
value: {
|
|
category_id: 'plot',
|
|
kind_id: null,
|
|
living_area: null,
|
|
plot_area: null,
|
|
construction_year: null,
|
|
number_of_floors: null,
|
|
parking_space_type: null,
|
|
|
|
wohnflaeche: null,
|
|
rooms: 1,
|
|
constructedAt: 1950,
|
|
firstname: '',
|
|
lastname: '',
|
|
address: '',
|
|
zip: '',
|
|
location: '',
|
|
phone: '',
|
|
email: '',
|
|
etagen: null,
|
|
property_plz: '',
|
|
sellable: null,
|
|
furnishing: null
|
|
},
|
|
innerStep: 2,
|
|
categories: [
|
|
{key: 'house', label: 'Haus', icon: 'category-house'},
|
|
{key: 'plot', label: 'Grundstück', icon: 'category-plot'},
|
|
{key: 'apartment', label: 'Wohnung', icon: 'category-apartment'},
|
|
{key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'}
|
|
],
|
|
kinds: {
|
|
house: [
|
|
{
|
|
kind: 'singleFamily',
|
|
label: 'Einfamilienhaus',
|
|
icon: 'kind-house-einfamilie'
|
|
},
|
|
{
|
|
kind: 'multiFamily',
|
|
label: 'Mehrfamilienhaus',
|
|
icon: 'kind-house-mehrfamilie'
|
|
},
|
|
{
|
|
kind: 'rowHouse',
|
|
label: 'Reihenhaus',
|
|
icon: 'kind-house-reihenhaus'
|
|
},
|
|
{
|
|
kind: 'semiDetached',
|
|
label: 'Doppelhaushälfte',
|
|
icon: 'kind-house-doppelhaus'
|
|
}
|
|
]
|
|
},
|
|
livingAreas: [
|
|
{key: 'sm', label: 'bis 100 m²', icon: 'living-area-sm'},
|
|
{key: 'md', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
|
|
{key: 'lg', label: 'mehr als 200 m²', icon: 'living-area-lg'},
|
|
{key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
|
|
],
|
|
plotAreas: [
|
|
{key: 'sm', label: 'bis 200 m²', icon: 'plot-area-sm'},
|
|
{key: 'md', label: 'bis 201 - 800 m²', icon: 'plot-area-md'},
|
|
{key: 'lg', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
|
|
{key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
|
|
],
|
|
numbersOfFloors: [
|
|
{key: 'sm', label: '1', icon: 'plot-area-sm'},
|
|
{key: 'md', label: '2', icon: 'plot-area-md'},
|
|
{key: 'lg', label: '3', icon: 'plot-area-lg'},
|
|
{key: 'xl', label: 'mehr als 3', icon: 'plot-area-lg'}
|
|
],
|
|
numbersOfRooms: [
|
|
{key: 'sm', label: '1-2', icon: 'plot-area-sm'},
|
|
{key: 'md', label: '3-5', icon: 'plot-area-md'},
|
|
{key: 'lg', label: '5-8', icon: 'plot-area-lg'},
|
|
{key: 'xl', label: 'mehr als 8', icon: 'plot-area-lg'}
|
|
],
|
|
parkingSpaceTypes: [
|
|
{key: 'garage', label: 'Garage', icon: 'plot-area-sm'},
|
|
{key: 'im-freien', label: 'im Freien', icon: 'plot-area-md'},
|
|
{key: 'carport', label: 'Carport', icon: 'plot-area-lg'},
|
|
{key: 'tiefgarage', label: 'Tiefgarage', icon: 'plot-area-lg'}
|
|
],
|
|
wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
|
|
etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
|
|
sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
|
|
furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}]
|
|
};
|
|
},
|
|
methods: {
|
|
setCategoryId(id) {
|
|
this.value.category_id = id;
|
|
this.innerStep++;
|
|
},
|
|
setKindId(id) {
|
|
this.value.kind_id = id;
|
|
this.innerStep++;
|
|
},
|
|
back() {
|
|
this.innerStep--;
|
|
}
|
|
},
|
|
components: {
|
|
Carousel,
|
|
Slide,
|
|
Heading,
|
|
veeno
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.radio-grid {
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
}
|
|
</style>
|