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

mod stepper

dev
Philipp Lang 2 years ago
parent
6fdf7c3723
commit
9ebe66d3b5
4 changed files with 126 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      assets/js/Stepper.vue
  2. 4
      assets/js/components/Heading.vue
  3. 4
      assets/js/components/RadioGrid.vue
  4. 12
      assets/js/components/VSlider.vue

89
assets/js/Stepper.vue
View File

@ -1,136 +1,131 @@
<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 max-w-[960px]" @submit.prevent="submit">
<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-8 sm:py-16 px-3 sm:px-6">
<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 id="category" v-model="value.category" class="mt-8" :options="categories"></radio-grid>
<radio-grid id="category" v-model="value.category" :options="categories"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
</pagination>
</slide>
<!-- ********************************* Haus ********************************** -->
<slide v-if="value.category == 'Haus'" :key="1" class="py-16 px-8">
<slide v-if="value.category == 'Haus'" :key="1" 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>
<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>
<radio-grid id="house_plot_area" v-model="value.plot_area" :options="plotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="2" class="py-16 px-8">
<slide v-if="value.category == 'Haus'" :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>
<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" :options="livingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="3" class="py-16 px-8">
<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>
<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"
<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>
</slide>
<slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
<slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
<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>
<slider :min="1900" :max="maxYear" v-model="value.construction_year" class="mt-10 slider-custom"> </slider>
<v-slider :min="1900" :max="maxYear" v-model="value.construction_year"></v-slider>
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
<slide v-if="value.category == 'Haus'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
<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>
<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" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<!-- ********************************* Gewerbe ********************************** -->
<slide v-if="value.category == 'Gewerbe'" :key="1" class="py-16 px-8">
<slide v-if="value.category == 'Gewerbe'" :key="1" 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>
<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" :options="gewerbeLivingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Gewerbe'" :key="2" class="py-16 px-8">
<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>
<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>
<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>
</slide>
<slide v-if="value.category == 'Gewerbe'" :key="3" class="py-16 px-8">
<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>
<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"
<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>
</slide>
<slide v-if="value.category == 'Gewerbe'" :key="4" class="py-16 px-8">
<slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
<heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8">
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
<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>
<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" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<!-- ******************************** Wohnung ******************************** -->
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="2">
<slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="2">
<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 id="apartment_living_area" v-model="value.living_area" class="mt-8"
<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>
</slide>
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="3">
<slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="3">
<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>
<radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8"
<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>
</slide>
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="4">
<slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="4">
<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>
<!--
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
<veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
v-model="value.construction_year" />
-->
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="5">
<slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="5">
<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>
<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" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<!-- ******************************** Grundstueck ******************************** -->
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="2">
<slide v-if="value.category == 'Grundstück'" class="py-8 sm:py-16 px-3 sm:px-6" :key="2">
<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>
<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" :options="plotPlotAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide v-if="value.category == 'Grundstück'" class="py-16 px-8" :key="3">
<slide v-if="value.category == 'Grundstück'" class="py-8 sm:py-16 px-3 sm:px-6" :key="3">
<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>
<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" :options="conditions"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
</slide>
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-16 px-8">
<!--
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
<heading>Bitte geben Sie Ihre Daten ein</heading>
<div class="grid grid-cols-2 gap-4">
<v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
@ -197,14 +192,14 @@
</div>
</div>
</slide>
-->
</carousel>
</form>
</template>
<script>
import Heading from './components/Heading.vue';
import Slider from '@vueform/slider';
import wNumb from 'wnumb';
import VSlider from './components/VSlider.vue';
import 'nouislider/distribute/nouislider.min.css';
import axios from 'axios';
import dayjs from 'dayjs';
@ -212,7 +207,7 @@ import dayjs from 'dayjs';
export default {
components: {
Heading,
Slider,
VSlider,
},
data: function () {
return {
@ -224,7 +219,7 @@ export default {
},
finished: true,
value: {
category: 'Haus',
category: null,
living_area: null,
plot_area: null,
construction_year: null,
@ -240,7 +235,7 @@ export default {
source: 'Deine Immobilienbewertung',
datenschutz: false,
},
innerStep: 4,
innerStep: 0,
categories: [
{ key: 'Haus', label: 'Haus', icon: 'category-house' },
{ key: 'Grundstück', label: 'Grundstück', icon: 'category-plot' },

4
assets/js/components/Heading.vue
View File

@ -1,5 +1,7 @@
<template>
<h2 class="text-4xl font-bold text-gray-700 text-center mt-2"><slot></slot></h2>
<h2 class="text-2xl md:text-4xl font-bold text-gray-700 text-center mt-2 pb-4 md:pb-8">
<slot></slot>
</h2>
</template>
<script>

4
assets/js/components/RadioGrid.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex space-x-4 flex-wrap justify-center">
<label v-for="(item, index) in options" :key="index" class="w-40" :for="`${id}-${index}`">
<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(160px,1fr))] justify-between sm:gap-4">
<label v-for="(item, index) in options" :key="index" :for="`${id}-${index}`">
<input
:id="`${id}-${index}`"
class="invisible absolute left-0 top-0 peer"

12
assets/js/components/VSlider.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<slider :value="modelValue" @input="$emit('update:modelValue', $event)"> </slider>
<div class="px-10">
<slider :value="modelValue" class="slider-custom" @input="$emit('update:modelValue', $event)"> </slider>
</div>
</template>
@ -10,5 +10,13 @@ import Slider from '@vueform/slider';
defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {},
min: {
type: Number,
required: true,
},
max: {
type: Number,
required: true,
},
});
</script>

Write Preview
Loading…
Cancel
Save