Gustavo Luigi 2022-09-01 14:37:35 +02:00
parent fe0980d45a
commit 9aef0568c7
1 changed files with 50 additions and 67 deletions

View File

@ -68,42 +68,23 @@
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Adresse</label> <label for="exampleInputPassword1" class="form-label">Adresse</label>
<input type="text" class="form-control fieldLocation" id="field_location" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1"> <input type="text" class="form-control fieldLocation" id="field_location" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
<div id="address-components" style="display: none;">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="basic-addon3">Street Number</span> <span class="input-group-text" id="basic-addon3">Street Number</span>
<input type="text" class="form-control" id="street-number" readonly> <input type="text" class="form-control" id="street-number" disabled>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="basic-addon3">Route</span> <span class="input-group-text" id="basic-addon3">Route</span>
<input type="text" class="form-control" id="route" readonly> <input type="text" class="form-control" id="route" disabled>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="basic-addon3">Sublocality Level 1</span> <span class="input-group-text" id="basic-addon3">Locality</span>
<input type="text" class="form-control" id="sublocality-level-1" readonly> <input type="text" class="form-control" id="locality" disabled>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="basic-addon3">Locality</span> <span class="input-group-text" id="basic-addon3">Postal Code</span>
<input type="text" class="form-control" id="locality" readonly> <input type="text" class="form-control" id="postal-code" disabled>
</div> </div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Administrative Area Level 3</span>
<input type="text" class="form-control" id="administrative-area-level-3" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Administrative Area Level 2</span>
<input type="text" class="form-control" id="administrative-area-level-2" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Administrative Area Level 1</span>
<input type="text" class="form-control" id="administrative-area-level-1" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Country</span>
<input type="text" class="form-control" id="country" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Postal Code</span>
<input type="text" class="form-control" id="postal-code" readonly>
</div> </div>
</div> </div>
<div class="mb-3 form-check mb-4"> <div class="mb-3 form-check mb-4">
@ -169,26 +150,26 @@
<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script> <script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
<script> <script>
function clearAddressFields() { function clearAddressFields() {
$('#address-components').hide();
$('#street-number').val(''); $('#street-number').val('');
$('#street-number').prop('disabled', true);
$('#route').val(''); $('#route').val('');
$('#sublocality-level-1').val(''); $('#locality').val('');
$('#street-number').val(''); $('#postal-code').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
} }
function getAddressFiedlValue(addressComponents, $field){ function getAddressFiedlValue(addressComponents, $field){
let field = addressComponents.find(obj => obj.types.indexOf($field) > -1); let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
return field != undefined?field.long_name:''; return field != undefined?field.long_name:'';
} }
function initialize() { function initialize() {
clearAddressFields();
let input = document.getElementById('field_location'); let input = document.getElementById('field_location');
let options = { componentRestrictions: {country: "de"} }; let options = {
types: ['address'],
componentRestrictions: { country: "de" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options); var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener("place_changed", () => { autocomplete.addListener("place_changed", () => {
clearAddressFields();
const place = autocomplete.getPlace(); const place = autocomplete.getPlace();
if (!place.geometry) return; if (!place.geometry) return;
var componentMap = { var componentMap = {
@ -200,17 +181,31 @@
route: 'route', route: 'route',
street_number : 'street_number', street_number : 'street_number',
}; };
$('#address-components').show();
let addressComponents = autocomplete.getPlace().address_components; let addressComponents = autocomplete.getPlace().address_components;
console.log(addressComponents); let streetNumber = getAddressFiedlValue(addressComponents, 'street_number');
$('#street-number').val(getAddressFiedlValue(addressComponents, 'street_number')); if(streetNumber == '') {
$('#route').val(getAddressFiedlValue(addressComponents, 'route')); $('#street-number').prop('disabled', false);
$('#sublocality-level-1').val(getAddressFiedlValue(addressComponents, 'sublocality_level_1')); $('#street-number').focus();
$('#locality').val(getAddressFiedlValue(addressComponents, 'locality')); }
$('#administrative-area-level-3').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_3')); else {
$('#administrative-area-level-2').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_2')); $('#street-number').prop('disabled', true);
$('#administrative-area-level-1').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_1')); $('#street-number').val(streetNumber);
$('#country').val(getAddressFiedlValue(addressComponents, 'country')); }
$('#postal-code').val(getAddressFiedlValue(addressComponents, 'postal_code')); let country = getAddressFiedlValue(addressComponents, 'country');
let route = getAddressFiedlValue(addressComponents, 'route');
$('#route').val(route);
let locality = getAddressFiedlValue(addressComponents, 'locality');
$('#locality').val(locality);
let postalCode = getAddressFiedlValue(addressComponents, 'postal_code');
$('#postal-code').val(postalCode);
$('#street-number').blur(function(){
if($('#street-number').val() == '') $('#street-number').focus();
else{
$('#street-number').prop('disabled', true);
$('#field_location').val(route+' '+$('#street-number').val()+', '+locality+', '+country);
}
});
}); });
} }


@ -227,18 +222,6 @@
utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}", utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
}); });
$(window).on('load', function(){ $(window).on('load', function(){
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
let ids = objProducts.map(obj => obj.id);
$.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
response.contents.forEach(function(item){
$('#list-products').append(`<tr>
<td>
<img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
</td>
<td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
</tr>`);
});
});
$('#anfrage').submit(function(){ $('#anfrage').submit(function(){
objProducts = []; objProducts = [];
updateProductsInLocalStorage(); updateProductsInLocalStorage();