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

fix house

dev
Philipp Lang 2 years ago
parent
51a5578bc4
commit
e279af606e
2 changed files with 199 additions and 175 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. 92
      assets/js/Stepper.vue
  2. 10
      assets/js/components/Pagination.vue

92
assets/js/Stepper.vue
View File

@ -1,41 +1,47 @@
<template> <template>
<form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto w-[960px]" @submit.prevent="submit"> <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto w-[960px]" @submit.prevent="submit">
<carousel
v-model="innerStep"
:per-page="1"
:mouse-drag="false"
:pagination-enabled="false"
class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto"
>
<carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
<slide :key="0" class="py-16 px-8"> <slide :key="0" class="py-16 px-8">
<div class="w-full">
<div>
<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" v-model="value.category" class="mt-8" :options="categories"></radio-grid> <radio-grid id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"> </pagination>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
</pagination>
</div> </div>
</slide> </slide>
<!-- ********************************* Haus ********************************** --> <!-- ********************************* Haus ********************************** -->
<slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8"> <slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
<div>
<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">Grundstücksfläche</span> des Hauses?</heading>
<radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?
</heading>
<radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8"
:options="plotAreas"></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>
</div>
</slide> </slide>
<slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8"> <slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
<div>
<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">Wohnfläche</span> des Hauses?</heading> <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
<radio-grid id="house_living_area" v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
<radio-grid id="house_living_area" v-model="value.living_area" class="mt-8"
:options="livingAreas"></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>
</div>
</slide> </slide>
<slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8"> <slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
<div>
<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" class="mt-8" :options="numbersOfRooms"></radio-grid>
<radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
: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>
</div>
</slide> </slide>
<slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8"> <slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div> <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> <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
<!-- <!--
@ -43,31 +49,39 @@
:range="range" v-model="value.construction_year" /> :range="range" v-model="value.construction_year" />
--> -->
<pagination v-model="innerStep" class="mt-24"></pagination> <pagination v-model="innerStep" class="mt-24"></pagination>
</div>
</slide> </slide>
<slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8"> <slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
<div>
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
<radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<radio-grid id="house_condition" v-model="value.condition" class="mt-8"
:options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</div>
</slide> </slide>
<!-- ********************************* Gewerbe ********************************** --> <!-- ********************************* Gewerbe ********************************** -->
<slide v-if="value.category == 'Gewerbe'" :key="1" class="py-16 px-8"> <slide v-if="value.category == 'Gewerbe'" :key="1" class="py-16 px-8">
<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">Gewerbefläche</span> des Gewerbes?</heading> <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
<radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
<radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8"
:options="gewerbeLivingAreas"></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 == 'Gewerbe'" :key="2" class="py-16 px-8"> <slide v-if="value.category == 'Gewerbe'" :key="2" class="py-16 px-8">
<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>
<radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
<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" class="mt-8"
: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-16 px-8"> <slide v-if="value.category == 'Gewerbe'" :key="3" class="py-16 px-8">
<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" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
<radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
: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-16 px-8"> <slide v-if="value.category == 'Gewerbe'" :key="4" class="py-16 px-8">
@ -82,24 +96,27 @@
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8"> <slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
<radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8"
:options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide> </slide>
<!-- ******************************** Wohnung ******************************** --> <!-- ******************************** Wohnung ******************************** -->
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="2">
<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" class="mt-8" :options="apartmentLivingAreas"></radio-grid>
<radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8"
: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'" class="py-16 px-8">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="3">
<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" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
<radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
: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'" class="py-16 px-8">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="4">
<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>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading> <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
<!-- <!--
@ -108,29 +125,30 @@
--> -->
<pagination v-model="innerStep" class="mt-24"></pagination> <pagination v-model="innerStep" class="mt-24"></pagination>
</slide> </slide>
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8">
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="5">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div> <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
<radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<radio-grid id="apartment_condition" v-model="value.condition" class="mt-8"
:options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide> </slide>
<!-- ******************************** Grundstueck ******************************** --> <!-- ******************************** Grundstueck ******************************** -->
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8">
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="2">
<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 <span class="text-primary">Fläche</span><br />des Grundstücks?</heading> <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
<radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
<radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8"
: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 == 'Grundstück'" class="py-16 px-8">
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="3">
<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 der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading> <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
<radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid> <radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination> <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide> </slide>
<!--
<slide class="py-16 px-8">
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-16 px-8">
<heading>Bitte geben Sie Ihre Daten ein</heading> <heading>Bitte geben Sie Ihre Daten ein</heading>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" /> <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
@ -154,7 +172,7 @@
" submit></pagination> " submit></pagination>
</slide> </slide>
<slide>
<slide v-if="value.category" :key="slideCount[value.category] + 1">
<div <div
class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10"> class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
<div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]"> <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
@ -197,7 +215,6 @@
</div> </div>
</div> </div>
</slide> </slide>
-->
</carousel> </carousel>
</form> </form>
</template> </template>
@ -217,6 +234,12 @@ export default {
}, },
data: function () { data: function () {
return { return {
slideCount: {
'Haus': 6,
'Gewerbe': 6,
'Wohnung': 6,
'Grundstück': 3,
},
finished: true, finished: true,
tooltips: [wNumb({ decimals: 0 })], tooltips: [wNumb({ decimals: 0 })],
pipsy: { pipsy: {
@ -362,5 +385,4 @@ export default {
.radio-grid { .radio-grid {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
}
</style>
}</style>

10
assets/js/components/Pagination.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<div class="flex w-4/5 mx-auto justify-between"> <div class="flex w-4/5 mx-auto justify-between">
<div> <div>
<v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', value - 1)">Zurück</v-btn>
<v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', modelValue - 1)">Zurück</v-btn>
</div> </div>
<div> <div>
<v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', value + 1)">Weiter</v-btn>
<v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', modelValue + 1)">Weiter</v-btn>
<v-btn v-show="next && submit" href="#" class="mt-4" type="submit" :disabled="!nextable">Absenden</v-btn> <v-btn v-show="next && submit" href="#" class="mt-4" type="submit" :disabled="!nextable">Absenden</v-btn>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
defineProps({
defineEmits(['update:modelValue']);
const props = defineProps({
submit: { submit: {
type: Boolean, type: Boolean,
default: () => false, default: () => false,
@ -24,7 +26,7 @@ defineProps({
type: Boolean, type: Boolean,
default: () => true, default: () => true,
}, },
value: {
modelValue: {
default: () => null, default: () => null,
}, },
prevable: { prevable: {

Write Preview
Loading…
Cancel
Save