Add fields

assets/css/app.css

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 
 @import "stepper";
+@import "range";
 
 @import "tailwindcss/utilities";
 

assets/css/range.css

@@ -0,0 +1,91 @@
+input[type=range] {
+    width: 100%;
+    margin: 7.3px 0;
+    background-color: transparent;
+    -webkit-appearance: none;
+}
+input[type=range]:focus {
+    outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+    background: rgba(48, 113, 169, 0.78);
+    border: 0.2px solid #010101;
+    border-radius: 1.3px;
+    width: 100%;
+    height: 11.4px;
+    cursor: pointer;
+}
+input[type=range]::-webkit-slider-thumb {
+    margin-top: -7.5px;
+    width: 26px;
+    height: 26px;
+    background: #feffff;
+    border: 1.8px solid #00001e;
+    border-radius: 15px;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #367ebd;
+}
+input[type=range]::-moz-range-track {
+    background: rgba(48, 113, 169, 0.78);
+    border: 0.2px solid #010101;
+    border-radius: 1.3px;
+    width: 100%;
+    height: 11.4px;
+    cursor: pointer;
+}
+input[type=range]::-moz-range-thumb {
+    width: 26px;
+    height: 26px;
+    background: #feffff;
+    border: 1.8px solid #00001e;
+    border-radius: 15px;
+    cursor: pointer;
+}
+input[type=range]::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    border-width: 8.2px 0;
+    color: transparent;
+    width: 100%;
+    height: 11.4px;
+    cursor: pointer;
+}
+input[type=range]::-ms-fill-lower {
+    background: #2a6495;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+}
+input[type=range]::-ms-fill-upper {
+    background: rgba(48, 113, 169, 0.78);
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+}
+input[type=range]::-ms-thumb {
+    width: 26px;
+    height: 26px;
+    background: #feffff;
+    border: 1.8px solid #00001e;
+    border-radius: 15px;
+    cursor: pointer;
+    margin-top: 0px;
+    /*Needed to keep the Edge thumb centred*/
+}
+input[type=range]:focus::-ms-fill-lower {
+    background: rgba(48, 113, 169, 0.78);
+}
+input[type=range]:focus::-ms-fill-upper {
+    background: #367ebd;
+}
+/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
+how to remove the virtical space around the range input in IE*/
+    @supports (-ms-ime-align:auto) {
+        /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
+        input[type=range] {
+            margin: 0;
+            /*Edge starts the margin from the thumb, not the track as other browsers do*/
+        }
+    }
+

assets/css/stepper.css

@@ -7,6 +7,16 @@
 
 .stepper {
 
+    .option-box > span {
+        @apply bg-gray-200 p-3 rounded flex justify-center items-center flex-col;
+        & > span:nth-child(1) svg {
+            @apply w-10 h-10;
+        }
+        & > span:nth-child(1) {
+            @apply font-semibold mt-5;
+        }
+    }
+
     .fancy-checkbox {
         display: flex;
         align-items: center;

assets/js/Stepper.vue

@@ -1,10 +1,108 @@
 <template>
     <div class="slider" ref="stepper">
-        <div>
-            <a href="#" @click.prevent="step++">weiter</a>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 0">
+                <h2 class="text-xl font-bold text-primary text-center">Welche Immobilie möchten Sie verkaufen?</h2>
+                <div class="radio-grid grid-cols-4">
+                    <label :key="index" v-for="category, index in categories" class="option-box">
+                        <input class="invisible absolute left-0 top-0" v-model="value.category_id" :value="index" @change="step++" type="radio" name="category">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="category.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
         </div>
-        <div>
-            aaaa
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 1">
+                <h2 class="text-xl font-bold text-primary text-center">Bitte wählen Sie die Art des Hauses</h2>
+                <div v-if="value.category_id !== null" class="radio-grid grid-cols-2">
+                    <label :key="index" v-for="kind, index in categories[value.category_id].kinds" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.kind_id">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="kind.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 2">
+                <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Grundstücksfläche</h2>
+                <div class="radio-grid grid-cols-4">
+                    <label :key="index" v-for="gf, index in grundstuecksflaechen" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.grundstuecksflaeche">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="gf.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 3">
+                <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Wohnfläche</h2>
+                <div class="radio-grid grid-cols-4">
+                    <label :key="index" v-for="gf, index in wohnflaechen" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.wohnflaeche">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="gf.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 4">
+                <h2 class="text-xl font-bold text-primary text-center">Wie viele Etagen hat das Haus?</h2>
+                <div class="radio-grid grid-cols-4">
+                    <label :key="index" v-for="etage, index in etagen" class="option-box">
+                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.etagen">
+                        <span>
+                            <span v-html="svg('home')"></span>
+                            <span v-text="etage.label"></span>
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 5">
+                <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">
+                    <input type="text" class="mt-10" v-model="value.rooms" name="rooms">
+                    <a href="#" @click.prevent="step++">Weiter</a>
+                </div>
+            </div>
+        </div>
+        <div class="px-3 w-full">
+            <div v-show="innerStep === 6">
+                <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="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">
+                <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">
+                    <input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname">
+                    <input type="text" v-model="value.address" name="address" placeholder="Adresse">
+                    <input type="text" v-model="value.plz" name="plz" placeholder="PLZ">
+                    <input type="text" v-model="value.location" name="location" placeholder="Ort">
+                    <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>
+            </div>
         </div>
     </div>
 </template>
@@ -13,8 +111,53 @@
 export default {
     data: function() {
         return {
+            value: {
+                category_id: null,
+                kind_id: null,
+                grundstuecksflaeche: null,
+                wohnflaeche: null,
+                rooms: 1,
+                constructedAt: 1950,
+                firstname: '',
+                lastname: '',
+                address: '',
+                zip: '',
+                location: '',
+                phone: '',
+                email: '',
+                etagen: null,
+            },
             innerStep: 0,
-            slideCount: 2,
+            slideCount: 8,
+            categories: [
+                { key: 'house', label: 'Haus', kinds: [
+                    { label: 'Einfamilienhaus' },
+                    { label: 'Mehrfamilienhaus' },
+                    { label: 'Reihenhaus' },
+                    { label: 'Doppelhaushälfte' },
+                ] },
+                { key: 'area', label: 'Grundstück', kinds: [] },
+                { key: 'apartment', label: 'Wohnung', kinds: [] },
+                { key: 'gewerbe', label: 'Gewerbe', kinds: [] },
+            ],
+            grundstuecksflaechen: [
+                { label: 'bis 300 m²' },
+                { label: 'bis 301 - 1000 m²' },
+                { label: 'über 1000 m²' },
+                { label: 'weiß nicht' },
+            ],
+            wohnflaechen: [
+                { label: 'bis 100 m²' },
+                { label: '101 - 200 m²' },
+                { label: 'über 200 m²' },
+                { label: 'weiß nicht' },
+            ],
+            etagen: [
+                { label: '1' },
+                { label: '2' },
+                { label: '3' },
+                { label: '4 oder mehr' },
+            ]
         };
     },
     computed: {
@@ -32,29 +175,15 @@ export default {
             }
         },
     },
-    methods: {
-        slideTo(e, index) {
-            if (e !== null) {
-                e.preventDefault();
-            }
-
-            var _self = this;
-            this.step = index;
-
-            if (index === 0) {
-                window.setTimeout(function() {
-                    _self.value.kind = null;
-                }, 500);
-            }
-
-            jQuery('html, body').stop().animate({
-                'scrollTop': jQuery('#stepper-main').offset().top
-            }, 600, 'swing');
-
-            this.$nextTick(function() {
-                _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
-            });
-        }
+    mounted() {
+        this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep;
     }
 };
 </script>
+
+<style scoped>
+.radio-grid {
+    display: grid;
+    grid-gap: 1rem;
+}
+</style>

assets/js/app.js

@@ -2,7 +2,9 @@ import axios from 'axios';
 import wNumb from 'wnumb';
 import Vue from 'vue';
 import Stepper from './Stepper.vue';
+import svg from './svg.mixin.js';
 
+Vue.mixin(svg);
 const app = new Vue({
     components: {
         Stepper
@@ -100,9 +102,6 @@ window.stepper = {
     ],
 
     /* Methods */
-    svg(icon) {
-        return `<svg class="icon-${icon}"><use xlink:href="${this.sprite}#${icon}"></use></svg>`;
-    },
 
     submit() {
         axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {

assets/js/svg.mixin.js

@@ -0,0 +1,7 @@
+export default {
+    methods: {
+        svg(icon, cls) {
+            return `<svg class="${cls} fill-current icon-${icon}"><use xlink:href="/wp-content/plugins/stepper/assets/public/img/sprite.svg#${icon}"></use></svg>`;
+        }
+    }
+};

package.json

@@ -10,7 +10,7 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "img": "cd assets/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../public/sprite.svg && rm -R sprite"
+    "img": "rm -R assets/public/img; cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img assets/public/img"
   },
   "keywords": [],
   "author": "",

src/Stepper.php

@@ -11,7 +11,8 @@ use Twig\TwigFunction as Func;
 class Stepper {
 
     private $twig;
-    public $url;
+    public string $url;
+    public string $scriptUrl;
 
     public function __construct() {
         $loader = new FilesystemLoader(__DIR__.'/../views');
@@ -45,29 +46,15 @@ class Stepper {
     }
 
     public function enqueue() {
-        wp_enqueue_script('stepper-js', $this->url.'assets/public/app.js', [], false, true);
-        wp_enqueue_style('stepper-css', $this->url.'assets/public/app.css');
+        wp_enqueue_script('stepper-js', $this->scriptUrl.'app.js', [], false, true);
+        wp_enqueue_style('stepper-css', $this->scriptUrl.'app.css');
     }
 
     public function handle() {
-        if (array_key_exists('kind', $_GET)) {
-            $data = [
-                'kaufpreis' => $_GET['kaufpreis'],
-                'eigenk' => $_GET['eigenkapital'],
-                'kind' => $_GET['kind'],
-                'step' => 1
-            ];
-        } else {
-            $data = [
-                'kaufpreis' => 300000,
-                'eigenk' => 0,
-                'kind' => null,
-                'step' => 0
-            ];
-        }
+        $data = [];
 
         return $this->twig->render('stepper.twig.htm', [
-            'sprite' => $this->url.'assets/public/sprite.svg',
+            'sprite' => $this->url.'assets/public/img/sprite.svg',
             'data' => $data,
         ]);
     }

stepper.php

@@ -20,5 +20,8 @@ use Zoomyboy\Stepper\Stepper;
 $stepper = new Stepper();
 $stepper->loadEnv(__DIR__);
 $stepper->url = plugin_dir_url(__FILE__);
+$stepper->scriptUrl = file_exists(__DIR__.'/assets/public/hot')
+    ? 'http://localhost:8080/'
+    : plugin_dir_url(__FILE__);
 $stepper->initFrontend();
 

tailwind.config.js

@@ -1,11 +1,17 @@
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
+    purge: [],
+    darkMode: false, // or 'media' or 'class'
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    DEFAULT: 'hsl(26.5, 86.5%, 50.8%)'
+                }
+            }
+        },
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
 }