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

Update category

dev
Philipp Lang 2 years ago
parent
0a12539d78
commit
4babd47c44
1 changed files with 21 additions and 20 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. 41
      assets/js/Stepper.vue

41
assets/js/Stepper.vue
View File

@ -4,36 +4,36 @@
<slide class="py-16 px-8">
<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_id" class="mt-8" :options="categories"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
<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>
</slide>
<!-- ********************************* Haus ********************************** -->
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<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>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<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>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<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" :options="numbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<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="1" :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 class="py-16 px-8" v-if="value.category_id == 'Haus'">
<slide class="py-16 px-8" v-if="value.category == 'Haus'">
<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>
@ -41,31 +41,31 @@
</slide>
<!-- ********************************* Gewerbe ********************************** -->
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<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>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<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>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<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" :options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<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" v-model="value.construction_year" />
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
<slide class="py-16 px-8" v-if="value.category == 'Gewerbe'">
<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>
@ -73,25 +73,25 @@
</slide>
<!-- ******************************** Wohnung ******************************** -->
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<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" :options="apartmentLivingAreas"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<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" :options="apartmentNumbersOfRooms"></radio-grid>
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<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" v-model="value.construction_year" />
<pagination v-model="innerStep" class="mt-24"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
<slide class="py-16 px-8" v-if="value.category == 'Wohnung'">
<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>
@ -99,13 +99,13 @@
</slide>
<!-- ******************************** Grundstueck ******************************** -->
<slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
<slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
<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>
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
</slide>
<slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
<slide class="py-16 px-8" v-if="value.category == 'Grundstück'">
<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>
@ -206,7 +206,7 @@ export default {
},
range: {min: [1800, 1], max: [dayjs().year(), 1]},
value: {
category_id: null,
category: null,
living_area: null,
plot_area: null,
construction_year: null,
@ -219,6 +219,7 @@ export default {
lastname: '',
phone: '',
email: '',
source: 'Deine Immobilienbewertung',
datenschutz: false
},
innerStep: 0,
@ -316,7 +317,7 @@ export default {
},
methods: {
setCategoryId(id) {
this.value.category_id = id;
this.value.category = id;
this.innerStep++;
},
back() {

Write Preview
Loading…
Cancel
Save