From 8016c7952fc96e783b0c50664594dd3efe7c8460 Mon Sep 17 00:00:00 2001 From: philipp lang Date: Mon, 2 Nov 2020 02:17:49 +0100 Subject: [PATCH] Add stepper form --- assets/css/app.css | 105 +++++ assets/js/app.js | 86 ++++ assets/svg/home.svg | 8 + composer.json | 11 +- composer.lock | 919 +++++++++++++++++++++++++++++++++++++++- package-lock.json | 47 ++ package.json | 8 +- src/Stepper.php | 53 +++ src/css/app.css | 0 src/js/app.js | 0 stepper.php | 10 +- views/daten.twig.htm | 76 ++++ views/stepper.twig.htm | 68 +++ views/vorhaben.twig.htm | 65 +++ webpack.mix.js | 3 +- 15 files changed, 1430 insertions(+), 29 deletions(-) create mode 100644 assets/svg/home.svg create mode 100644 src/Stepper.php delete mode 100644 src/css/app.css delete mode 100644 src/js/app.js create mode 100644 views/daten.twig.htm create mode 100644 views/stepper.twig.htm create mode 100644 views/vorhaben.twig.htm diff --git a/assets/css/app.css b/assets/css/app.css index e69de29..f0b959f 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -0,0 +1,105 @@ +:root { + --bg-color: hsl(0.0, 0.0%, 90.2%); + --primary: hsl(82.3, 54.4%, 44.7%); + --secondary: hsl(194.5, 100.0%, 26.9%); + --gray: hsl(37.5, 25.0%, 93.7%); + --container: hsl(37.5, 50.0%, 96.9%); +} + +body { + background: var(--bg-color) !important; +} + +.stepper { + font-family: sans-serif; + background: var(--bg-color); + & > div { + h2 { + font-size: 2.3rem; + color: var(--secondary); + text-align: center; + } + .radio-grid { + display: grid; + grid-gap: 2rem; + grid-template-columns: repeat(3, 1fr); + margin-top: 1rem; + label { + height: 20rem; + position: relative; + input { + visibility: hidden; + z-index: -99; + position: absolute; + } + input + span { + border: 1px var(--primary) solid; + border-radius: 2rem; + overflow: hidden; + cursor: pointer; + background: white; + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + span:first-child { + display: flex; + flex: 1 0 0; + justify-content: center; + align-items: center; + } + span:nth-child(2) { + flex: 0 0 4rem; + background: var(--gray); + display: flex; + width: 100%; + justify-content: center; + align-items: center; + } + } + input:checked + span { + border-color: var(--secondary); + } + svg { + color: var(--secondary); + fill: currentColor; + width: 8rem; + height: 8rem; + } + } + } + .form-container { + background: var(--container); + border-radius: 2rem; + padding: 3rem; + display: grid; + grid-gap: 1rem; + .separator { + background: white; + height: 5px; + } + .form-grid { + display: grid; + grid-gap: 0.5rem; + grid-template-columns: 2fr 3fr 30px; + align-items: center; + input[type="text"] { + font-weight: bold; + border: var(--primary) 1px solid; + text-align: right; + } + .unit { + text-align: right; + } + .comment { + grid-column: 1 / -1; + font-size: 1.5rem; + } + } + } + } +} diff --git a/assets/js/app.js b/assets/js/app.js index e69de29..04ef613 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -0,0 +1,86 @@ +import 'alpinejs'; +import wNumb from 'wnumb'; + +var units = { + currency: wNumb({ + mark: ',', + thousand: '.', + prefix: '', + suffix: '', + decimals: 2 + }), + percent: wNumb({ + mark: ',', + thousand: '', + prefix: '', + suffix: ' %', + decimals: 2 + }) +}; + + +window.stepper = { + parts: { + notar: 0.02, + grundsteuer: 0.065, + makler: 0.0357 + }, + units: units, + step: 2, + greetings: [ + { value: 'frau', label: 'Frau' }, + { value: 'herr', label: 'Herr' }, + { value: 'divers', label: 'Divers' }, + ], + jobs: [ + { value: 'angestellt', label: 'Angestellte*r' }, + ], + titles: [ + { value: 'prof', label: 'Prof' }, + { value: 'dr', label: 'Dr' }, + ], + value: { + kind: 'kauf', + kauf: { + kaufpreis: 300000, + modernisierung: 0, + baukosten: 0, + eigenkapital: 0, + }, + bau: { + grundstueckspreis: 300000, + bezahlt: '0', + baukosten: 0, + eigenkapital: 0, + }, + anschluss: { + objektwert: 300000, + umschuldung: 50000, + zuskap: 50000 + }, + wert: 300000, + umschuldung: 0, + kapital_zus: 0, + greeting: null, + title: null, + firstname: '', + lastname: '', + zip: '', + location: '', + phone: '', + email: '', + job: '', + haushalt: '', + einnahme: '' + }, + kinds: [ + {label: 'Kauf einer Immobilie', value: 'kauf', icon: 'home'}, + {label: 'Eigenes Bauvorhaben', value: 'bau', icon: 'home'}, + {label: 'Anschlussfinanzierung', value: 'anschluss', icon: 'home'} + ], + + /* Methods */ + svg(icon) { + return ``; + } +}; diff --git a/assets/svg/home.svg b/assets/svg/home.svg new file mode 100644 index 0000000..a9af411 --- /dev/null +++ b/assets/svg/home.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/composer.json b/composer.json index 3da2392..5b30d35 100644 --- a/composer.json +++ b/composer.json @@ -1,12 +1,19 @@ { "name": "philipp/stepper", "require": { - "twig/twig": "^3.1" + "twig/twig": "^3.1", + "symfony/var-dumper": "^5.1", + "illuminate/support": "^8.12" }, "authors": [ { "name": "Philipp Lang", "email": "philipp@zoomyboy.de" } - ] + ], + "autoload": { + "psr-4": { + "Zoomyboy\\Stepper\\": "./src" + } + } } diff --git a/composer.lock b/composer.lock index 940d191..c19e1c7 100644 --- a/composer.lock +++ b/composer.lock @@ -4,27 +4,579 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "de3ae3ee192d50e467f027fa11fccd19", + "content-hash": "f18248db1f3f794199b815ed7694207a", "packages": [ + { + "name": "doctrine/inflector", + "version": "2.0.3", + "source": { + "type": "git", + "url": "https://github.com/doctrine/inflector.git", + "reference": "9cf661f4eb38f7c881cac67c75ea9b00bf97b210" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/doctrine/inflector/zipball/9cf661f4eb38f7c881cac67c75ea9b00bf97b210", + "reference": "9cf661f4eb38f7c881cac67c75ea9b00bf97b210", + "shasum": "" + }, + "require": { + "php": "^7.2 || ^8.0" + }, + "require-dev": { + "doctrine/coding-standard": "^7.0", + "phpstan/phpstan": "^0.11", + "phpstan/phpstan-phpunit": "^0.11", + "phpstan/phpstan-strict-rules": "^0.11", + "phpunit/phpunit": "^7.0 || ^8.0 || ^9.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.0.x-dev" + } + }, + "autoload": { + "psr-4": { + "Doctrine\\Inflector\\": "lib/Doctrine/Inflector" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Guilherme Blanco", + "email": "guilhermeblanco@gmail.com" + }, + { + "name": "Roman Borschel", + "email": "roman@code-factory.org" + }, + { + "name": "Benjamin Eberlei", + "email": "kontakt@beberlei.de" + }, + { + "name": "Jonathan Wage", + "email": "jonwage@gmail.com" + }, + { + "name": "Johannes Schmitt", + "email": "schmittjoh@gmail.com" + } + ], + "description": "PHP Doctrine Inflector is a small library that can perform string manipulations with regard to upper/lowercase and singular/plural forms of words.", + "homepage": "https://www.doctrine-project.org/projects/inflector.html", + "keywords": [ + "inflection", + "inflector", + "lowercase", + "manipulation", + "php", + "plural", + "singular", + "strings", + "uppercase", + "words" + ], + "funding": [ + { + "url": "https://www.doctrine-project.org/sponsorship.html", + "type": "custom" + }, + { + "url": "https://www.patreon.com/phpdoctrine", + "type": "patreon" + }, + { + "url": "https://tidelift.com/funding/github/packagist/doctrine%2Finflector", + "type": "tidelift" + } + ], + "time": "2020-05-29T15:13:26+00:00" + }, + { + "name": "illuminate/collections", + "version": "v8.12.3", + "source": { + "type": "git", + "url": "https://github.com/illuminate/collections.git", + "reference": "e61e796ff98e19eac5e6735ea6abfa66f4a2f6db" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/illuminate/collections/zipball/e61e796ff98e19eac5e6735ea6abfa66f4a2f6db", + "reference": "e61e796ff98e19eac5e6735ea6abfa66f4a2f6db", + "shasum": "" + }, + "require": { + "illuminate/contracts": "^8.0", + "illuminate/macroable": "^8.0", + "php": "^7.3|^8.0" + }, + "suggest": { + "symfony/var-dumper": "Required to use the dump method (^5.1)." + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "8.x-dev" + } + }, + "autoload": { + "psr-4": { + "Illuminate\\Support\\": "" + }, + "files": [ + "helpers.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Taylor Otwell", + "email": "taylor@laravel.com" + } + ], + "description": "The Illuminate Collections package.", + "homepage": "https://laravel.com", + "time": "2020-10-27T15:20:30+00:00" + }, + { + "name": "illuminate/contracts", + "version": "v8.12.3", + "source": { + "type": "git", + "url": "https://github.com/illuminate/contracts.git", + "reference": "c23428149639d5257916ad10d390cdbeffe4d504" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/illuminate/contracts/zipball/c23428149639d5257916ad10d390cdbeffe4d504", + "reference": "c23428149639d5257916ad10d390cdbeffe4d504", + "shasum": "" + }, + "require": { + "php": "^7.3|^8.0", + "psr/container": "^1.0", + "psr/simple-cache": "^1.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "8.x-dev" + } + }, + "autoload": { + "psr-4": { + "Illuminate\\Contracts\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Taylor Otwell", + "email": "taylor@laravel.com" + } + ], + "description": "The Illuminate Contracts package.", + "homepage": "https://laravel.com", + "time": "2020-10-28T13:17:42+00:00" + }, + { + "name": "illuminate/macroable", + "version": "v8.12.3", + "source": { + "type": "git", + "url": "https://github.com/illuminate/macroable.git", + "reference": "300aa13c086f25116b5f3cde3ca54ff5c822fb05" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/illuminate/macroable/zipball/300aa13c086f25116b5f3cde3ca54ff5c822fb05", + "reference": "300aa13c086f25116b5f3cde3ca54ff5c822fb05", + "shasum": "" + }, + "require": { + "php": "^7.3|^8.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "8.x-dev" + } + }, + "autoload": { + "psr-4": { + "Illuminate\\Support\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Taylor Otwell", + "email": "taylor@laravel.com" + } + ], + "description": "The Illuminate Macroable package.", + "homepage": "https://laravel.com", + "time": "2020-10-27T15:20:30+00:00" + }, + { + "name": "illuminate/support", + "version": "v8.12.3", + "source": { + "type": "git", + "url": "https://github.com/illuminate/support.git", + "reference": "4f8b2d2589dec51b3fb9844e35606a1f1a7536e8" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/illuminate/support/zipball/4f8b2d2589dec51b3fb9844e35606a1f1a7536e8", + "reference": "4f8b2d2589dec51b3fb9844e35606a1f1a7536e8", + "shasum": "" + }, + "require": { + "doctrine/inflector": "^1.4|^2.0", + "ext-json": "*", + "ext-mbstring": "*", + "illuminate/collections": "^8.0", + "illuminate/contracts": "^8.0", + "illuminate/macroable": "^8.0", + "nesbot/carbon": "^2.31", + "php": "^7.3|^8.0", + "voku/portable-ascii": "^1.4.8" + }, + "conflict": { + "tightenco/collect": "<5.5.33" + }, + "suggest": { + "illuminate/filesystem": "Required to use the composer class (^8.0).", + "ramsey/uuid": "Required to use Str::uuid() (^4.0).", + "symfony/process": "Required to use the composer class (^5.1).", + "symfony/var-dumper": "Required to use the dd function (^5.1).", + "vlucas/phpdotenv": "Required to use the Env class and env helper (^5.2)." + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "8.x-dev" + } + }, + "autoload": { + "psr-4": { + "Illuminate\\Support\\": "" + }, + "files": [ + "helpers.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Taylor Otwell", + "email": "taylor@laravel.com" + } + ], + "description": "The Illuminate Support package.", + "homepage": "https://laravel.com", + "time": "2020-10-29T15:17:19+00:00" + }, + { + "name": "nesbot/carbon", + "version": "2.41.5", + "source": { + "type": "git", + "url": "https://github.com/briannesbitt/Carbon.git", + "reference": "c4a9caf97cfc53adfc219043bcecf42bc663acee" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/c4a9caf97cfc53adfc219043bcecf42bc663acee", + "reference": "c4a9caf97cfc53adfc219043bcecf42bc663acee", + "shasum": "" + }, + "require": { + "ext-json": "*", + "php": "^7.1.8 || ^8.0", + "symfony/polyfill-mbstring": "^1.0", + "symfony/translation": "^3.4 || ^4.0 || ^5.0" + }, + "require-dev": { + "doctrine/orm": "^2.7", + "friendsofphp/php-cs-fixer": "^2.14 || ^3.0", + "kylekatarnls/multi-tester": "^2.0", + "phpmd/phpmd": "^2.9", + "phpstan/extension-installer": "^1.0", + "phpstan/phpstan": "^0.12.35", + "phpunit/phpunit": "^7.5 || ^8.0", + "squizlabs/php_codesniffer": "^3.4" + }, + "bin": [ + "bin/carbon" + ], + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.x-dev", + "dev-3.x": "3.x-dev" + }, + "laravel": { + "providers": [ + "Carbon\\Laravel\\ServiceProvider" + ] + }, + "phpstan": { + "includes": [ + "extension.neon" + ] + } + }, + "autoload": { + "psr-4": { + "Carbon\\": "src/Carbon/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Brian Nesbitt", + "email": "brian@nesbot.com", + "homepage": "http://nesbot.com" + }, + { + "name": "kylekatarnls", + "homepage": "http://github.com/kylekatarnls" + } + ], + "description": "An API extension for DateTime that supports 281 different languages.", + "homepage": "http://carbon.nesbot.com", + "keywords": [ + "date", + "datetime", + "time" + ], + "funding": [ + { + "url": "https://opencollective.com/Carbon", + "type": "open_collective" + }, + { + "url": "https://tidelift.com/funding/github/packagist/nesbot/carbon", + "type": "tidelift" + } + ], + "time": "2020-10-23T06:02:30+00:00" + }, + { + "name": "psr/container", + "version": "1.0.0", + "source": { + "type": "git", + "url": "https://github.com/php-fig/container.git", + "reference": "b7ce3b176482dbbc1245ebf52b181af44c2cf55f" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/php-fig/container/zipball/b7ce3b176482dbbc1245ebf52b181af44c2cf55f", + "reference": "b7ce3b176482dbbc1245ebf52b181af44c2cf55f", + "shasum": "" + }, + "require": { + "php": ">=5.3.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.0.x-dev" + } + }, + "autoload": { + "psr-4": { + "Psr\\Container\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "PHP-FIG", + "homepage": "http://www.php-fig.org/" + } + ], + "description": "Common Container Interface (PHP FIG PSR-11)", + "homepage": "https://github.com/php-fig/container", + "keywords": [ + "PSR-11", + "container", + "container-interface", + "container-interop", + "psr" + ], + "time": "2017-02-14T16:28:37+00:00" + }, + { + "name": "psr/simple-cache", + "version": "1.0.1", + "source": { + "type": "git", + "url": "https://github.com/php-fig/simple-cache.git", + "reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/php-fig/simple-cache/zipball/408d5eafb83c57f6365a3ca330ff23aa4a5fa39b", + "reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b", + "shasum": "" + }, + "require": { + "php": ">=5.3.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.0.x-dev" + } + }, + "autoload": { + "psr-4": { + "Psr\\SimpleCache\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "PHP-FIG", + "homepage": "http://www.php-fig.org/" + } + ], + "description": "Common interfaces for simple caching", + "keywords": [ + "cache", + "caching", + "psr", + "psr-16", + "simple-cache" + ], + "time": "2017-10-23T01:57:42+00:00" + }, { "name": "symfony/polyfill-ctype", "version": "v1.20.0", "source": { "type": "git", - "url": "https://github.com/symfony/polyfill-ctype.git", - "reference": "f4ba089a5b6366e453971d3aad5fe8e897b37f41" + "url": "https://github.com/symfony/polyfill-ctype.git", + "reference": "f4ba089a5b6366e453971d3aad5fe8e897b37f41" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/f4ba089a5b6366e453971d3aad5fe8e897b37f41", + "reference": "f4ba089a5b6366e453971d3aad5fe8e897b37f41", + "shasum": "" + }, + "require": { + "php": ">=7.1" + }, + "suggest": { + "ext-ctype": "For best performance" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-main": "1.20-dev" + }, + "thanks": { + "name": "symfony/polyfill", + "url": "https://github.com/symfony/polyfill" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Polyfill\\Ctype\\": "" + }, + "files": [ + "bootstrap.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Gert de Pagter", + "email": "BackEndTea@gmail.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony polyfill for ctype functions", + "homepage": "https://symfony.com", + "keywords": [ + "compatibility", + "ctype", + "polyfill", + "portable" + ], + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-10-23T14:02:19+00:00" + }, + { + "name": "symfony/polyfill-mbstring", + "version": "v1.20.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-mbstring.git", + "reference": "39d483bdf39be819deabf04ec872eb0b2410b531" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/f4ba089a5b6366e453971d3aad5fe8e897b37f41", - "reference": "f4ba089a5b6366e453971d3aad5fe8e897b37f41", + "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/39d483bdf39be819deabf04ec872eb0b2410b531", + "reference": "39d483bdf39be819deabf04ec872eb0b2410b531", "shasum": "" }, "require": { "php": ">=7.1" }, "suggest": { - "ext-ctype": "For best performance" + "ext-mbstring": "For best performance" }, "type": "library", "extra": { @@ -38,7 +590,7 @@ }, "autoload": { "psr-4": { - "Symfony\\Polyfill\\Ctype\\": "" + "Symfony\\Polyfill\\Mbstring\\": "" }, "files": [ "bootstrap.php" @@ -50,21 +602,22 @@ ], "authors": [ { - "name": "Gert de Pagter", - "email": "BackEndTea@gmail.com" + "name": "Nicolas Grekas", + "email": "p@tchwork.com" }, { "name": "Symfony Community", "homepage": "https://symfony.com/contributors" } ], - "description": "Symfony polyfill for ctype functions", + "description": "Symfony polyfill for the Mbstring extension", "homepage": "https://symfony.com", "keywords": [ "compatibility", - "ctype", + "mbstring", "polyfill", - "portable" + "portable", + "shim" ], "funding": [ { @@ -83,25 +636,22 @@ "time": "2020-10-23T14:02:19+00:00" }, { - "name": "symfony/polyfill-mbstring", + "name": "symfony/polyfill-php80", "version": "v1.20.0", "source": { "type": "git", - "url": "https://github.com/symfony/polyfill-mbstring.git", - "reference": "39d483bdf39be819deabf04ec872eb0b2410b531" + "url": "https://github.com/symfony/polyfill-php80.git", + "reference": "e70aa8b064c5b72d3df2abd5ab1e90464ad009de" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/39d483bdf39be819deabf04ec872eb0b2410b531", - "reference": "39d483bdf39be819deabf04ec872eb0b2410b531", + "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/e70aa8b064c5b72d3df2abd5ab1e90464ad009de", + "reference": "e70aa8b064c5b72d3df2abd5ab1e90464ad009de", "shasum": "" }, "require": { "php": ">=7.1" }, - "suggest": { - "ext-mbstring": "For best performance" - }, "type": "library", "extra": { "branch-alias": { @@ -114,10 +664,13 @@ }, "autoload": { "psr-4": { - "Symfony\\Polyfill\\Mbstring\\": "" + "Symfony\\Polyfill\\Php80\\": "" }, "files": [ "bootstrap.php" + ], + "classmap": [ + "Resources/stubs" ] }, "notification-url": "https://packagist.org/downloads/", @@ -125,6 +678,10 @@ "MIT" ], "authors": [ + { + "name": "Ion Bazan", + "email": "ion.bazan@gmail.com" + }, { "name": "Nicolas Grekas", "email": "p@tchwork.com" @@ -134,11 +691,10 @@ "homepage": "https://symfony.com/contributors" } ], - "description": "Symfony polyfill for the Mbstring extension", + "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions", "homepage": "https://symfony.com", "keywords": [ "compatibility", - "mbstring", "polyfill", "portable", "shim" @@ -159,6 +715,253 @@ ], "time": "2020-10-23T14:02:19+00:00" }, + { + "name": "symfony/translation", + "version": "v5.1.8", + "source": { + "type": "git", + "url": "https://github.com/symfony/translation.git", + "reference": "27980838fd261e04379fa91e94e81e662fe5a1b6" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/translation/zipball/27980838fd261e04379fa91e94e81e662fe5a1b6", + "reference": "27980838fd261e04379fa91e94e81e662fe5a1b6", + "shasum": "" + }, + "require": { + "php": ">=7.2.5", + "symfony/polyfill-mbstring": "~1.0", + "symfony/polyfill-php80": "^1.15", + "symfony/translation-contracts": "^2" + }, + "conflict": { + "symfony/config": "<4.4", + "symfony/dependency-injection": "<5.0", + "symfony/http-kernel": "<5.0", + "symfony/twig-bundle": "<5.0", + "symfony/yaml": "<4.4" + }, + "provide": { + "symfony/translation-implementation": "2.0" + }, + "require-dev": { + "psr/log": "~1.0", + "symfony/config": "^4.4|^5.0", + "symfony/console": "^4.4|^5.0", + "symfony/dependency-injection": "^5.0", + "symfony/finder": "^4.4|^5.0", + "symfony/http-kernel": "^5.0", + "symfony/intl": "^4.4|^5.0", + "symfony/service-contracts": "^1.1.2|^2", + "symfony/yaml": "^4.4|^5.0" + }, + "suggest": { + "psr/log-implementation": "To use logging capability in translator", + "symfony/config": "", + "symfony/yaml": "" + }, + "type": "library", + "autoload": { + "psr-4": { + "Symfony\\Component\\Translation\\": "" + }, + "exclude-from-classmap": [ + "/Tests/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Fabien Potencier", + "email": "fabien@symfony.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony Translation Component", + "homepage": "https://symfony.com", + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-10-24T12:01:57+00:00" + }, + { + "name": "symfony/translation-contracts", + "version": "v2.3.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/translation-contracts.git", + "reference": "e2eaa60b558f26a4b0354e1bbb25636efaaad105" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/e2eaa60b558f26a4b0354e1bbb25636efaaad105", + "reference": "e2eaa60b558f26a4b0354e1bbb25636efaaad105", + "shasum": "" + }, + "require": { + "php": ">=7.2.5" + }, + "suggest": { + "symfony/translation-implementation": "" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.3-dev" + }, + "thanks": { + "name": "symfony/contracts", + "url": "https://github.com/symfony/contracts" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Contracts\\Translation\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Generic abstractions related to translation", + "homepage": "https://symfony.com", + "keywords": [ + "abstractions", + "contracts", + "decoupling", + "interfaces", + "interoperability", + "standards" + ], + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-09-28T13:05:58+00:00" + }, + { + "name": "symfony/var-dumper", + "version": "v5.1.8", + "source": { + "type": "git", + "url": "https://github.com/symfony/var-dumper.git", + "reference": "4e13f3fcefb1fcaaa5efb5403581406f4e840b9a" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/var-dumper/zipball/4e13f3fcefb1fcaaa5efb5403581406f4e840b9a", + "reference": "4e13f3fcefb1fcaaa5efb5403581406f4e840b9a", + "shasum": "" + }, + "require": { + "php": ">=7.2.5", + "symfony/polyfill-mbstring": "~1.0", + "symfony/polyfill-php80": "^1.15" + }, + "conflict": { + "phpunit/phpunit": "<5.4.3", + "symfony/console": "<4.4" + }, + "require-dev": { + "ext-iconv": "*", + "symfony/console": "^4.4|^5.0", + "symfony/process": "^4.4|^5.0", + "twig/twig": "^2.4|^3.0" + }, + "suggest": { + "ext-iconv": "To convert non-UTF-8 strings to UTF-8 (or symfony/polyfill-iconv in case ext-iconv cannot be used).", + "ext-intl": "To show region name in time zone dump", + "symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script" + }, + "bin": [ + "Resources/bin/var-dump-server" + ], + "type": "library", + "autoload": { + "files": [ + "Resources/functions/dump.php" + ], + "psr-4": { + "Symfony\\Component\\VarDumper\\": "" + }, + "exclude-from-classmap": [ + "/Tests/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony mechanism for exploring and dumping PHP variables", + "homepage": "https://symfony.com", + "keywords": [ + "debug", + "dump" + ], + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-10-27T10:11:13+00:00" + }, { "name": "twig/twig", "version": "v3.1.1", @@ -230,6 +1033,76 @@ } ], "time": "2020-10-27T19:28:23+00:00" + }, + { + "name": "voku/portable-ascii", + "version": "1.5.3", + "source": { + "type": "git", + "url": "https://github.com/voku/portable-ascii.git", + "reference": "25bcbf01678930251fd572891447d9e318a6e2b8" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/voku/portable-ascii/zipball/25bcbf01678930251fd572891447d9e318a6e2b8", + "reference": "25bcbf01678930251fd572891447d9e318a6e2b8", + "shasum": "" + }, + "require": { + "php": ">=7.0.0" + }, + "require-dev": { + "phpunit/phpunit": "~6.0 || ~7.0" + }, + "suggest": { + "ext-intl": "Use Intl for transliterator_transliterate() support" + }, + "type": "library", + "autoload": { + "psr-4": { + "voku\\": "src/voku/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Lars Moelleken", + "homepage": "http://www.moelleken.org/" + } + ], + "description": "Portable ASCII library - performance optimized (ascii) string functions for php.", + "homepage": "https://github.com/voku/portable-ascii", + "keywords": [ + "ascii", + "clean", + "php" + ], + "funding": [ + { + "url": "https://www.paypal.me/moelleken", + "type": "custom" + }, + { + "url": "https://github.com/voku", + "type": "github" + }, + { + "url": "https://opencollective.com/portable-ascii", + "type": "open_collective" + }, + { + "url": "https://www.patreon.com/voku", + "type": "patreon" + }, + { + "url": "https://tidelift.com/funding/github/packagist/voku/portable-ascii", + "type": "tidelift" + } + ], + "time": "2020-07-22T23:32:04+00:00" } ], "packages-dev": [], diff --git a/package-lock.json b/package-lock.json index a41ed0e..64f5a00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1222,6 +1222,11 @@ "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=" }, + "alpinejs": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-2.7.3.tgz", + "integrity": "sha512-IRXnszk68s+FOGFMA1+K3rjLK44NqLShNpSy8aI6J3Ch9gss56FqlU6NVRP+mJes7LeQFCreH410luScVSkdfg==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -3254,6 +3259,12 @@ } } }, + "extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -5619,6 +5630,37 @@ } } }, + "postcss-css-variables": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.17.0.tgz", + "integrity": "sha512-/ZpFnJgksNOrQA72b3DKhExYh+0e2P5nEc3aPZ62G7JLmdDjWRFv3k/q4LxV7uzXFnmvkhXRbdVIiH5tKgfFNA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "escape-string-regexp": "^1.0.3", + "extend": "^3.0.1", + "postcss": "^6.0.8" + }, + "dependencies": { + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "postcss-discard-comments": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", @@ -8376,6 +8418,11 @@ "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" }, + "wnumb": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/wnumb/-/wnumb-1.2.0.tgz", + "integrity": "sha512-eYut5K/dW7usfk/Mwm6nxBNoTPp/uP7PlXld+hhg7lDtHLdHFnNclywGYM9BRC7Ohd4JhwuHg+vmOUGfd3NhVA==" + }, "worker-farm": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz", diff --git a/package.json b/package.json index b8c2890..c61731e 100644 --- a/package.json +++ b/package.json @@ -9,17 +9,21 @@ "watch": "npm run development -- --watch", "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" + "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", + "sprite": "cd assets/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../public/sprite.svg && rm -R sprite" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { + "alpinejs": "^2.7.3", "cross-env": "^7.0.2", "laravel-mix": "^5.0.7", - "postcss-nested": "^4.0" + "postcss-nested": "^4.0", + "wnumb": "^1.2.0" }, "devDependencies": { + "postcss-css-variables": "^0.17.0", "vue-template-compiler": "^2.6.12" } } diff --git a/src/Stepper.php b/src/Stepper.php new file mode 100644 index 0000000..dd845ee --- /dev/null +++ b/src/Stepper.php @@ -0,0 +1,53 @@ +twig = new Environment($loader); + + $this->twig->addFilter(new Filter('svg', [$this, 'svgTag'])); + $this->twig->addFilter(new Filter('prop', [$this, 'alpineProp'])); + $this->twig->addFunction(new Func('cprop', function ($aprop, $modifier) { + return $this->alpineProp($aprop, $modifier); + })); + } + + public function init() { + add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]); + add_shortcode('stepper', [ $this, 'handle' ]); + } + + public function enqueue() { + wp_enqueue_script('stepper-js', $this->url.'assets/public/app.js'); + wp_enqueue_style('stepper-css', $this->url.'assets/public/app.css'); + } + + public function handle() { + echo $this->twig->render('stepper.twig.htm', [ + 'sprite' => $this->url.'assets/public/sprite.svg' + ]); + } + + public function svgTag($e, $class = '') { + return ''; + } + + public function alpineProp($prop, $modifier) { + return ':value="units.'.$modifier.'.to('.$prop.')" + @focus="$event.target.value = '.$prop.'" + @change="'.$prop.' = units.'.$modifier.'.from($event.target.value)"'; + } + +} diff --git a/src/css/app.css b/src/css/app.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100644 index e69de29..0000000 diff --git a/stepper.php b/stepper.php index 5729ae0..7532e1f 100644 --- a/stepper.php +++ b/stepper.php @@ -12,4 +12,12 @@ * @package Stepper */ -// Your code starts here. +require_once(__DIR__.'/vendor/autoload.php'); + +use Zoomyboy\Stepper\Stepper; + + +$stepper = new Stepper(); +$stepper->url = plugin_dir_url(__FILE__); +$stepper->init(); + diff --git a/views/daten.twig.htm b/views/daten.twig.htm new file mode 100644 index 0000000..f2dc672 --- /dev/null +++ b/views/daten.twig.htm @@ -0,0 +1,76 @@ +
+

Geben Sie Ihre persönlichen Daten ein

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
diff --git a/views/stepper.twig.htm b/views/stepper.twig.htm new file mode 100644 index 0000000..7f28559 --- /dev/null +++ b/views/stepper.twig.htm @@ -0,0 +1,68 @@ +
+
+
+

Was möchten Sie finanzieren

+
+ +
+
+ + {% include 'vorhaben.twig.htm' with { + 'kind': "bau", + bezahlt: true, + second: {label: 'Baukosten', value: 'baukosten'}, + main: {label: 'Grundstückspreis', value: 'grundstueckspreis'} + } %} + + {% include 'vorhaben.twig.htm' with { + 'kind': "kauf", + bezahlt: false, + second: {label: 'Modernisierung', value: 'modernisierung'}, + main: {label: 'Kaufpreis', value: 'kaufpreis'} + } %} + + {% include 'daten.twig.htm' %} + +
+

Das Vorhaben in Zahlen

+ +
+
+ + + € +
+
+
+ + + € + Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an. +
+
+
+ + + € +
+
+
+
Darlehensbetrag
+
+ Darlehensbeträge werden auf volle 1.000 Euro gerundet. +
+
+ +
+
+ +
+
diff --git a/views/vorhaben.twig.htm b/views/vorhaben.twig.htm new file mode 100644 index 0000000..724032a --- /dev/null +++ b/views/vorhaben.twig.htm @@ -0,0 +1,65 @@ +
+

Ihr Bauvorhaben

+ +
+
+ + + € +
+ {% if bezahlt %} +
+ + +
+ {% endif %} +
+
+ + + € +
+
+
+ + + + + + € +
+
+
+ + + + + + € +
+
+
+ + + € + Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen. +
+
+
+ + + € +
+
+
+
=Darlehensbetrag
+
+ Darlehensbeträge werden auf volle 1.000 Euro gerundet. +
+
+ +
+
diff --git a/webpack.mix.js b/webpack.mix.js index a46cc60..6244f18 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -13,5 +13,6 @@ let mix = require('laravel-mix'); mix.js('assets/js/app.js', 'assets/public/app.js') .postCss('assets/css/app.css', 'assets/public/app.css', [ - require('postcss-nested') + require('postcss-nested'), + require('postcss-css-variables') ]);