Add furnishing

assets/js/Stepper.vue

@@ -72,6 +72,20 @@
         </div>
         <div class="px-3 w-full">
             <div v-show="innerStep === 5">
+                <h2 class="text-xl font-bold text-primary text-center">Wie ist die Ausstattung des Hauses</h2>
+                <div class="radio-grid grid-cols-4">
+                    <label :key="index" v-for="furnishing, index in furnishings" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="furnishing" :value="index" v-model="value.furnishing">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="furnishing.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 6">
                 <h2 class="text-xl font-bold text-primary text-center">Wie viele Zimmer hat das Haus</h2>
                 <div class="flex flex-col">
                     <input type="range" min="1" max="10" v-model="value.rooms">
@@ -81,17 +95,31 @@
             </div>
         </div>
         <div class="px-3 w-full">
-            <div v-show="innerStep === 6">
+            <div v-show="innerStep === 7">
                 <h2 class="text-xl font-bold text-primary text-center">Wann wurde das Haus gebaut?</h2>
                 <div class="flex flex-col">
-                    <input type="range" min="1900" max="2021" v-model="value.constructedAt">
+                    <input type="range" min="1880" max="2021" v-model="value.constructedAt">
                     <input type="text" class="mt-10" v-model="value.constructedAt" name="constructed_at">
                     <a href="#" @click.prevent="step++">Weiter</a>
                 </div>
             </div>
         </div>
         <div class="px-3 w-full">
-            <div v-show="innerStep === 7">
+            <div v-show="innerStep === 8">
+                <h2 class="text-xl font-bold text-primary text-center">Wann wollen Sie die Immobilie verkaufen?</h2>
+                <div class="radio-grid grid-cols-3">
+                    <label :key="index" v-for="sellable, index in sellables" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="sellable" :value="index" v-model="value.sellable">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="sellable.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <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">
@@ -102,6 +130,10 @@
                     <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>
     </div>
@@ -126,9 +158,12 @@ export default {
                 phone: '',
                 email: '',
                 etagen: null,
+                property_plz: '',
+                sellable: null,
+                furnishing: null,
             },
             innerStep: 0,
-            slideCount: 8,
+            slideCount: 10,
             categories: [
                 { key: 'house', label: 'Haus', kinds: [
                     { label: 'Einfamilienhaus' },
@@ -141,22 +176,33 @@ export default {
                 { key: 'gewerbe', label: 'Gewerbe', kinds: [] },
             ],
             grundstuecksflaechen: [
-                { label: 'bis 300 m²' },
-                { label: 'bis 301 - 1000 m²' },
-                { label: 'über 1000 m²' },
-                { label: 'weiß nicht' },
+                { label: 'bis 200 m²' },
+                { label: 'bis 201 - 800 m²' },
+                { label: 'mehr als 800 m²' },
+                { label: 'nicht bekannt' },
             ],
             wohnflaechen: [
-                { label: 'bis 100 m²' },
-                { label: '101 - 200 m²' },
-                { label: 'über 200 m²' },
-                { label: 'weiß nicht' },
+                { 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' },
             ]
         };
     },