add phone and adress libs
parent
768d184949
commit
47bdb8f45c
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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,24 +166,82 @@
|
|||
</div>
|
||||
@stop
|
||||
@section('scripts')
|
||||
<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
|
||||
<script>
|
||||
$(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>`);
|
||||
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);
|
||||
$.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(){
|
||||
objProducts = [];
|
||||
updateProductsInLocalStorage();
|
||||
});
|
||||
});
|
||||
$('#anfrage').submit(function(){
|
||||
objProducts = [];
|
||||
updateProductsInLocalStorage();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@stop
|
||||
|
|
|
|||
Loading…
Reference in New Issue