Areya
/
areya-energy
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add phone and adress libs

master
Gustavo Luigi 2022-09-01 12:14:05 +02:00
parent 768d184949
commit 47bdb8f45c
6 changed files with 127 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/libs/intl-tel-input/css/intlTelInput.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/libs/intl-tel-input/images/flags.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
assets/libs/intl-tel-input/images/flags@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

8
assets/libs/intl-tel-input/js/intlTelInput.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/libs/intl-tel-input/js/utils.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

103
content/pages/checkout.blade.php
View File

@ -1,4 +1,8 @@
@layout('content.master')
@section('head')
<link rel="stylesheet" href="{{storage('assets/libs/intl-tel-input/css/intlTelInput.min.css')}}">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQj1N9Mj-OzOiUjt5QUDRkcDonXz4O85A&v=3.exp&sensor=false&libraries=places"></script>
@stop
@section('content')
<div class="container">
@if(session()->has('success'))
@ -59,11 +63,48 @@
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Telefon</label>
<input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
<input type="text" class="form-control" name="telefon" id="ctelefon" aria-describedby="emailHelp" placeholder="0941467233">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Adresse</label>
<input type="text" class="form-control" 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 class="input-group">
<span class="input-group-text" id="basic-addon3">Street Number</span>
<input type="text" class="form-control" id="street-number" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Route</span>
<input type="text" class="form-control" id="route" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Sublocality Level 1</span>
<input type="text" class="form-control" id="sublocality-level-1" readonly>
</div>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">Locality</span>
<input type="text" class="form-control" id="locality" readonly>
</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 class="mb-3 form-check mb-4">
<input type="checkbox" class="form-check-input" id="exampleCheck1" required>
@ -125,7 +166,65 @@
</div>
@stop
@section('scripts')
<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
<script>
function clearAddressFields() {
$('#street-number').val('');
$('#route').val('');
$('#sublocality-level-1').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
$('#street-number').val('');
}
function getAddressFiedlValue(addressComponents, $field){
let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
return field != undefined?field.long_name:'';
}
function initialize() {
clearAddressFields();
var input = document.getElementById('field_location');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) return;
var componentMap = {
country: 'country',
locality: 'locality',
administrative_area_level_1 : 'administrative_area_level_1',
administrative_area_level_2 : 'administrative_area_level_2',
postal_code: 'postal_code',
route: 'route',
street_number : 'street_number',
};
let addressComponents = autocomplete.getPlace().address_components;
console.log(addressComponents);
$('#street-number').val(getAddressFiedlValue(addressComponents, 'street_number'));
$('#route').val(getAddressFiedlValue(addressComponents, 'route'));
$('#sublocality-level-1').val(getAddressFiedlValue(addressComponents, 'locality'));
$('#locality').val(getAddressFiedlValue(addressComponents, 'street_number'));
$('#administrative-area-level-3').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_3'));
$('#administrative-area-level-2').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_2'));
$('#administrative-area-level-1').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_1'));
$('#country').val(getAddressFiedlValue(addressComponents, 'country'));
$('#postal-code').val(getAddressFiedlValue(addressComponents, 'postal_code'));
});
}

$(window).on('load', google.maps.event, initialize);

let input = document.querySelector("#ctelefon");
let iti = window.intlTelInput(input, {
initialCountry: "de", geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
let countryCode = (resp && resp.country)?resp.country:"us";
callback(countryCode);
});
},
utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
});
$(window).on('load', function(){
if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
let ids = objProducts.map(obj => obj.id);