public
/
di-stepper
6
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

Update stepper view

master
philipp lang 2 years ago
parent
050ef2c06a
commit
4affc33a03
1 changed files with 66 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 143
      assets/js/Stepper.vue

143
assets/js/Stepper.vue
View File

@ -4,8 +4,10 @@
<slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6"> <slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div> <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> <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
<radio-grid id="category" :model-value="value.category" :options="categories" @update:modelValue="onUpdateCategory"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"> </pagination>
<radio-grid id="category" :model-value="value.category" :options="categories"
@update:modelValue="onUpdateCategory"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
</pagination>
</slide> </slide>
<!-- ********************************* Haus ********************************** --> <!-- ********************************* Haus ********************************** -->
@ -24,7 +26,8 @@
<slide v-if="value.category == 'Haus'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Haus'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div> <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 das Haus?</heading> <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
<radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" :options="numbersOfRooms"></radio-grid>
<radio-grid id="house_number_of_rooms" v-model="value.number_of_floors"
:options="numbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@ -49,14 +52,16 @@
</slide> </slide>
<slide v-if="value.category == 'Gewerbe'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Gewerbe'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes? </heading>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?
</heading>
<radio-grid id="gewerbe_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid> <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Gewerbe'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Gewerbe'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div> <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 das Gewerbe?</heading> <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
<radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
<radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors"
:options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@ -76,13 +81,15 @@
<slide v-if="value.category == 'Wohnung'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Wohnung'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div> <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> <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
<radio-grid id="apartment_living_area" v-model="value.living_area" :options="apartmentLivingAreas"></radio-grid>
<radio-grid id="apartment_living_area" v-model="value.living_area"
:options="apartmentLivingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Wohnung'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Wohnung'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading> <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
<radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
<radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors"
:options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Wohnung'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6"> <slide v-if="value.category == 'Wohnung'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
@ -122,36 +129,18 @@
<v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" /> <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
<v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" /> <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
<v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" /> <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
<v-checkbox
id="datenschutz"
v-model="value.datenschutz"
class="col-span-2"
name="datenschutz"
label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>'
/>
<v-checkbox id="datenschutz" v-model="value.datenschutz" class="col-span-2" name="datenschutz"
label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
</div> </div>
<pagination
v-model="innerStep"
class="mt-6"
:nextable="
value.object_address.length > 0 &&
value.object_zip.length > 0 &&
value.object_location.length > 0 &&
value.firstname.length !== 0 &&
value.lastname.length !== 0 &&
value.email.length !== 0 &&
value.phone.length !== 0 &&
value.datenschutz === true
"
submit
></pagination>
<pagination v-model="innerStep" class="mt-6" nextable submit></pagination>
</slide> </slide>
<slide v-if="value.category" :key="slideCount[value.category] + 1"> <slide v-if="value.category" :key="slideCount[value.category] + 1">
<div class="w-full h-full p-3 flex flex-col items-center justify-center"> <div class="w-full h-full p-3 flex flex-col items-center justify-center">
<div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div> <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
<div class="text-sm mt-4 md:text-lg"> <div class="text-sm mt-4 md:text-lg">
In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen melden.
In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen
melden.
</div> </div>
</div> </div>
</slide> </slide>
@ -160,7 +149,7 @@
</template> </template>
<script> <script>
import {nextTick} from 'vue';
import { nextTick } from 'vue';
import Heading from './components/Heading.vue'; import Heading from './components/Heading.vue';
import VSlider from './components/VSlider.vue'; import VSlider from './components/VSlider.vue';
import axios from 'axios'; import axios from 'axios';
@ -198,10 +187,10 @@ export default {
}, },
innerStep: 0, innerStep: 0,
categories: [ categories: [
{key: 'Haus', label: 'Haus', icon: 'category-house'},
{key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
{key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
{key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'},
{ key: 'Haus', label: 'Haus', icon: 'category-house' },
{ key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },
{ key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment' },
{ key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business' },
], ],
kinds: { kinds: {
house: [ house: [
@ -228,65 +217,65 @@ export default {
], ],
}, },
livingAreas: [ livingAreas: [
{key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
{key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
{key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm' },
{ key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md' },
{ key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
apartmentLivingAreas: [ apartmentLivingAreas: [
{key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'},
{key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'},
{key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm' },
{ key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md' },
{ key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
gewerbeLivingAreas: [ gewerbeLivingAreas: [
{key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'},
{key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'},
{key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'},
{key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm' },
{ key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md' },
{ key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg' },
{ key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
conditions: [ conditions: [
{key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
{key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
{key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
{key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
{key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'},
{ key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md' },
{ key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm' },
{ key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg' },
{ key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg' },
{ key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg' },
], ],
plotAreas: [ plotAreas: [
{key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
{key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
{key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm' },
{ key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md' },
{ key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
plotPlotAreas: [ plotPlotAreas: [
{key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'},
{key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'},
{key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm' },
{ key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md' },
{ key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
numbersOfFloors: [ numbersOfFloors: [
{key: '1', label: '1', icon: 'plot-area-sm'},
{key: '2', label: '2', icon: 'plot-area-md'},
{key: '3', label: '3', icon: 'plot-area-lg'},
{key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'},
{ key: '1', label: '1', icon: 'plot-area-sm' },
{ key: '2', label: '2', icon: 'plot-area-md' },
{ key: '3', label: '3', icon: 'plot-area-lg' },
{ key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg' },
], ],
numbersOfRooms: [ numbersOfRooms: [
{key: '1-2', label: '1-2', icon: 'plot-area-sm'},
{key: '3-5', label: '3-5', icon: 'plot-area-md'},
{key: '5-8', label: '5-8', icon: 'plot-area-lg'},
{key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'},
{ key: '1-2', label: '1-2', icon: 'plot-area-sm' },
{ key: '3-5', label: '3-5', icon: 'plot-area-md' },
{ key: '5-8', label: '5-8', icon: 'plot-area-lg' },
{ key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg' },
], ],
apartmentNumbersOfRooms: [ apartmentNumbersOfRooms: [
{key: '1-2', label: '1-2', icon: 'plot-area-sm'},
{key: '3-5', label: '3-5', icon: 'plot-area-md'},
{key: '6-8', label: '6-8', icon: 'plot-area-lg'},
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
{ key: '1-2', label: '1-2', icon: 'plot-area-sm' },
{ key: '3-5', label: '3-5', icon: 'plot-area-md' },
{ key: '6-8', label: '6-8', icon: 'plot-area-lg' },
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
], ],
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'}],
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' }],
}; };
}, },
computed: { computed: {

Write Preview
Loading…
Cancel
Save