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

Add mail

dev
philipp lang 5 years ago
parent
d850b2e0f1
commit
19cb94afb3
7 changed files with 155 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      assets/css/app.css
  2. 15
      assets/js/app.js
  3. 1
      package.json
  4. 10
      src/Stepper.php
  5. 21
      views/mail.twig.htm
  6. 15
      views/stepper.twig.htm
  7. 12
      views/vorhaben.twig.htm

173
assets/css/app.css
View File

@ -11,95 +11,110 @@ body {
} }
.stepper { .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;
form {
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;
} }
span:nth-child(2) {
flex: 0 0 4rem;
background: var(--gray);
input + span {
border: 1px var(--primary) solid;
border-radius: 2rem;
overflow: hidden;
cursor: pointer;
background: white;
display: flex; display: flex;
width: 100%;
justify-content: center;
flex-direction: column;
align-items: center; 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;
} }
} }
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 {
.form-container {
background: var(--container);
border-radius: 2rem;
padding: 3rem;
display: 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;
grid-gap: 1rem;
.separator {
background: white;
height: 5px;
} }
.comment {
grid-column: 1 / -1;
font-size: 1.5rem;
.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;
}
} }
} }
} }
.step {
height: 5px;
position: relative;
div {
position: absolute;
transition: width 0.5s;
top: 0;
left: 0;
height: 100%;
background: var(--primary);
}
}
} }
} }

15
assets/js/app.js
View File

@ -1,7 +1,8 @@
import axios from 'axios';
import 'alpinejs'; import 'alpinejs';
import wNumb from 'wnumb'; import wNumb from 'wnumb';
var units = {
var units = window.units = {
currency: wNumb({ currency: wNumb({
mark: ',', mark: ',',
thousand: '.', thousand: '.',
@ -13,7 +14,7 @@ var units = {
mark: ',', mark: ',',
thousand: '', thousand: '',
prefix: '', prefix: '',
suffix: ' %',
suffix: '',
decimals: 2 decimals: 2
}) })
}; };
@ -26,7 +27,7 @@ window.stepper = {
makler: 0.0357 makler: 0.0357
}, },
units: units, units: units,
step: 2,
step: 0,
greetings: [ greetings: [
{ value: 'frau', label: 'Frau' }, { value: 'frau', label: 'Frau' },
{ value: 'herr', label: 'Herr' }, { value: 'herr', label: 'Herr' },
@ -40,7 +41,7 @@ window.stepper = {
{ value: 'dr', label: 'Dr' }, { value: 'dr', label: 'Dr' },
], ],
value: { value: {
kind: 'kauf',
kind: null,
kauf: { kauf: {
kaufpreis: 300000, kaufpreis: 300000,
modernisierung: 0, modernisierung: 0,
@ -82,5 +83,11 @@ window.stepper = {
/* Methods */ /* Methods */
svg(icon) { svg(icon) {
return `<svg><use xlink:href="${this.sprite}#${icon}"></use></svg>`; return `<svg><use xlink:href="${this.sprite}#${icon}"></use></svg>`;
},
submit() {
axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
...this.value
});
} }
}; };

1
package.json
View File

@ -17,6 +17,7 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"alpinejs": "^2.7.3", "alpinejs": "^2.7.3",
"axios": "^0.21.0",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"laravel-mix": "^5.0.7", "laravel-mix": "^5.0.7",
"postcss-nested": "^4.0", "postcss-nested": "^4.0",

10
src/Stepper.php
View File

@ -26,6 +26,7 @@ class Stepper {
public function init() { public function init() {
add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]); add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
add_shortcode('stepper', [ $this, 'handle' ]); add_shortcode('stepper', [ $this, 'handle' ]);
} }
@ -50,4 +51,13 @@ class Stepper {
@change="'.$prop.' = units.'.$modifier.'.from($event.target.value)"'; @change="'.$prop.' = units.'.$modifier.'.from($event.target.value)"';
} }
public function onSubmit() {
json_decode(file_get_contents('php://input'));
wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', json_decode(file_get_contents('php://input'), true)), [
'From' => 'philipp@aweos.de'
]);
die();
}
} }

21
views/mail.twig.htm
View File

@ -0,0 +1,21 @@
Eine neue Anfrage ist eingetroffen.
Name: {{firstname}} {{lastname}}
Adresse: {{zip}} {{location}}
Tel: {{phone}}
Mail: {{email}}
Anfrage für: {{kind}}
{% if kind == 'kauf' %}
* Kaufpreis: {{kauf.kaufpreis}} €
* Modernisierung: {{kauf.modernisierung}} €
* Baukosten: {{kauf.baukosten}} €
* Eigenkapital: {{kauf.eigenkapital}} €
{% endif %}
{% if kind == 'bau' %}
* Grundstückspreis: {{bau.grundstueckspreis}} €
* Bezahlt: {{bau.bezahlt}} €
* Baukosten: {{bau.baukosten}} €
* Eigenkapital: {{bau.eigenkapital}} €
{% endif %}

15
views/stepper.twig.htm
View File

@ -1,5 +1,5 @@
<form>
<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
<form @submit.prevent="submit">
<div x-show="step == 0"> <div x-show="step == 0">
<h2>Was möchten Sie finanzieren</h2> <h2>Was möchten Sie finanzieren</h2>
<div class="radio-grid"> <div class="radio-grid">
@ -31,7 +31,7 @@
{% include 'daten.twig.htm' %} {% include 'daten.twig.htm' %}
<div x-show="step == 1 && kind == 'anschluss'">
<div x-show="step == 1 && value.kind == 'anschluss'">
<h2 class="gradient">Das Vorhaben in Zahlen</h2> <h2 class="gradient">Das Vorhaben in Zahlen</h2>
<div class="form-container"> <div class="form-container">
@ -57,12 +57,15 @@
<div> <div>
<div>Darlehensbetrag</div> <div>Darlehensbetrag</div>
<div x-text="units.currency.to(value.anschluss.objektwert + value.anschluss.umschuldung + value.anschluss.zuskap)"></div> <div x-text="units.currency.to(value.anschluss.objektwert + value.anschluss.umschuldung + value.anschluss.zuskap)"></div>
<span class="comment">Darlehensbeträge werden auf volle 1.000 Euro gerundet.</span>
</div> </div>
<div class="separator gray"></div> <div class="separator gray"></div>
<button type="button" value="Werte übernehmen und weiter zum letzten Schritt"></button> <button type="button" value="Werte übernehmen und weiter zum letzten Schritt"></button>
</div> </div>
</div> </div>
</div>
</form>
<div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
<button type="submit">Absenden</button>
</form>
</div>

12
views/vorhaben.twig.htm
View File

@ -42,8 +42,15 @@
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div class="form-grid"> <div class="form-grid">
<label>Makler <span class="result-label" x-text="units.percent.to(parts.makler * 100)"></span></label>
<input type="text" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)">
<label>
Makler
<input type="text" class="result-label"
:value="units.percent.to(parts.makler * 100)"
@focus="$event.target.value = units.percent.to(parts.makler * 100)"
@change="parts.makler = units.percent.from($event.target.value) / 100"
>
</label>
<input type="text" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" disabled>
<span class="unit">€</span> <span class="unit">€</span>
<span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span> <span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
</div> </div>
@ -57,7 +64,6 @@
<div> <div>
<div><span>=</span>Darlehensbetrag</div> <div><span>=</span>Darlehensbetrag</div>
<div x-text="units.currency.to(value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital)"></div> <div x-text="units.currency.to(value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital)"></div>
<span class="comment">Darlehensbeträge werden auf volle 1.000 Euro gerundet.</span>
</div> </div>
<div class="separator gray"></div> <div class="separator gray"></div>
<button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button> <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>

Write Preview
Loading…
Cancel
Save