Areya
/
alpakas-theme
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add form calc

master
Gustavo Luigi 2022-07-11 23:05:20 +02:00
parent 8a41cb03ff
commit 269a2cd434
1 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
content/pages/buchen.blade.php
View File

@ -53,18 +53,17 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Erwachsene mit Alpaka</td> <td>Erwachsene</td>
<td>20 €</td> <td>10 €</td>
</tr> </tr>
<tr> <tr>
<td>Kinder mit Alpaka</td> <td>Kinder</td>
<td>15 €</td>
</tr>
<tr>
<td>Jede Person ohne Alpaka</td>
<td>5 €</td> <td>5 €</td>
</tr> </tr>
<tr>
<td>Alpaka</td>
<td>10 €</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -124,6 +123,7 @@
<label for="anzahlkinder" class="form-label">Anzahl Kinder</label> <label for="anzahlkinder" class="form-label">Anzahl Kinder</label>
<select class="form-select" aria-label="Default select example" id="anzahlkinder"> <select class="form-select" aria-label="Default select example" id="anzahlkinder">
<option selected disabled>Anzahl Kinder</option> <option selected disabled>Anzahl Kinder</option>
<option value="0">0</option>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
<option value="3">3</option> <option value="3">3</option>
@ -153,39 +153,20 @@
</div> </div>
<br> <br>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<h5>Kosten</h5> <h5>Kosten</h5>
<table class="table"> <table class="table" style="display: none;">
<thead> <thead>
<tr> <tr>
<th scope="col">Anzahl</th> <th scope="col">Anzahl</th>
<th scope="col">Beschreibung</th> <th scope="col">Beschreibung</th>
<th scope="col">Kosten</th> <th scope="col">Kosten</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="extract">
<tr> </tbody>
<td>1X</td> </table>
<td>Kinder</td> <p class="fw-light fst-italic" style="font-size:13px;">Geld wird nach Bestätigung per Überweisung oder Bar vor der Tour bezahlt.</p>
<td>3456€</td> <input type="hidden" name="kosten" id="kosten">
</tr>
<tr>
<td>2X</td>
<td>Erwachsene</td>
<td>345€</td>
</tr>
<tr>
<td>4X</td>
<td>Erwachsene</td>
<td>28€</td>
</tr>
<tr class="fw-bolder">
<td>Gesammt:</td>
<td></td>
<td>28€</td>
</tr>
</tbody>
</table>
<p class="fw-light fst-italic" style="font-size:13px;">Geld wird nach Bestätigung per Überweisung oder Bar vor der Tour bezahlt.</p>
</div> </div>
<button type="submit" class="btn btn-ci btn-lg d-block mt-5"> <button type="submit" class="btn btn-ci btn-lg d-block mt-5">
<svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg> <svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg>
@ -214,4 +195,48 @@
</section> </section>
@stop @stop
@section('scripts') @section('scripts')
<script>
let priceReserveAnzahlErwachsene = 10;
let priceReserveAnzahlKinder = 5;
let priceReserveAnzahlAlpakas = 10;
function addExtractRow(count, total){
$('#extract').append(`
<tr>
<td>${count}x</td>
<td>Anzahl Alpakas</td>
<td>${total} €</td>
</tr>
`);
}
function addExtractTotalRow(value){
$('#extract').append(`
<tr class="fw-bolder">
<td>Gesammt:</td>
<td></td>
<td>${value} €</td>
</tr>
`);
}
$('#anzahlerwachsene').change(function(){ showPrices(); });
$('#anzahlkinder').change(function(){ showPrices(); });
$('#anzahlalpakas').change(function(){ showPrices(); });
function showPrices(){
$('#extract').html(``);
let countReserveAnzahlErwachsene = $('#anzahlerwachsene').val() != null?$('#anzahlerwachsene').val():0;
let totalReserveAnzahlErwachsene = countReserveAnzahlErwachsene*priceReserveAnzahlErwachsene;
let countReserveAnzahlKinder = $('#anzahlkinder').val() != null?$('#anzahlkinder').val():0;
let totalReserveAnzahlKinder = countReserveAnzahlKinder*priceReserveAnzahlKinder;
let countReserveAnzahlAlpakas = $('#anzahlalpakas').val() != null?$('#anzahlalpakas').val():0;
let totalReserveAnzahlAlpakas = countReserveAnzahlAlpakas*priceReserveAnzahlAlpakas;
if(totalReserveAnzahlErwachsene > 0) addExtractRow(countReserveAnzahlErwachsene, totalReserveAnzahlErwachsene);
if(totalReserveAnzahlKinder > 0) addExtractRow(countReserveAnzahlKinder, totalReserveAnzahlKinder);
if(totalReserveAnzahlAlpakas > 0) addExtractRow(countReserveAnzahlAlpakas, totalReserveAnzahlAlpakas);
let totalPrice = totalReserveAnzahlErwachsene+totalReserveAnzahlKinder+totalReserveAnzahlAlpakas;
if(countReserveAnzahlErwachsene != 0 || countReserveAnzahlKinder != 0 || countReserveAnzahlAlpakas != 0) {
addExtractTotalRow(totalPrice);
$('#kosten').val(totalPrice);
$('#extract').parent().show();
}else $('#extract').parent().hide();
}
</script>
@stop @stop