Skip to content

Commit

Permalink
feat: No funciona el boton de ubicacion
Browse files Browse the repository at this point in the history
  • Loading branch information
@christopher-qc
christopher-qc committed Aug 8, 2024
1 parent 84ce4af commit 31b669e
Show file tree
Hide file tree
Showing 2 changed files with 247 additions and 191 deletions.
250 changes: 146 additions & 104 deletions src/components/order/new-address.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
v-model="newAddress.department"
@input="selectDepartment"
>
<div>
</div>
<span v-if="$v.newAddress.department.$invalid">El {{countryLabels.department}} es requerido
<div></div>
<span v-if="$v.newAddress.department.$invalid"
>El {{ countryLabels.department }} es requerido
<v-progress-circular
v-if="isToogleDp"
indeterminate
Expand All @@ -41,16 +41,18 @@
@input="selectProvince"
v-model="newAddress.province"
>
<div class="divSpinner">
<span v-if="$v.newAddress.province.$invalid">La {{countryLabels.province}} es requerida</span>
<v-progress-circular
v-if="isTooglePr"
indeterminate
color="deep-orange"
:width="2"
:size="15"
></v-progress-circular>
</div>
<div class="divSpinner">
<span v-if="$v.newAddress.province.$invalid"
>La {{ countryLabels.province }} es requerida</span
>
<v-progress-circular
v-if="isTooglePr"
indeterminate
color="deep-orange"
:width="2"
:size="15"
></v-progress-circular>
</div>
</app-select>
<app-select
item-text="name"
Expand All @@ -63,24 +65,28 @@
v-model="newAddress.district"
@input="selectDistrict"
>
<div class="divSpinner">
<span v-if="$v.newAddress.district.$invalid">El {{countryLabels.district}} es requerido</span>
<v-progress-circular
v-if="isTooglePs"
indeterminate
color="deep-orange"
:width="2"
:size="15"
></v-progress-circular>
</div>
<div class="divSpinner">
<span v-if="$v.newAddress.district.$invalid"
>El {{ countryLabels.district }} es requerido</span
>
<v-progress-circular
v-if="isTooglePs"
indeterminate
color="deep-orange"
:width="2"
:size="15"
></v-progress-circular>
</div>
</app-select>
<app-input
data-cy="direccion"
placeholder="Dirección"
class="mx-2 my-1 address-field field"
v-model="newAddress.addressLine1"
>
<span v-if="$v.newAddress.addressLine1.$invalid">La dirección es requerida</span>
<span v-if="$v.newAddress.addressLine1.$invalid"
>La dirección es requerida</span
>
</app-input>
<app-input
data-cy="apto"
Expand All @@ -98,16 +104,19 @@
v-model="newAddress.addressLine2"
>
</app-input>
<div class="mx-2 my-1 button-field field" v-if="flagMap">
<div class="mx-2 my-1 button-field field">
<a href="#" class="btn" @click.prevent="getMap()">Ubicar en el Mapa</a>
</div>
<div class="map mx-2 my-1 map-field" v-if="showMap">
<map-component
:zoom="16"
:markers="[{location: {lat: newAddress.latitude, lng: newAddress.longitude},}]"
:location="{lat: newAddress.latitude, lng: newAddress.longitude}"
:center="{lat: newAddress.latitude, lng: newAddress.longitude}"/>
</div>
:markers="[
{ location: { lat: newAddress.latitude, lng: newAddress.longitude } },
]"
:location="{ lat: newAddress.latitude, lng: newAddress.longitude }"
:center="{ lat: newAddress.latitude, lng: newAddress.longitude }"
/>
</div>
</form>
</template>
<script>
Expand All @@ -128,30 +137,58 @@ function flagMap() {
}
function getMap() {
if (this.newAddress.department !== null &&
if (
this.newAddress.department !== null &&
this.newAddress.province !== null &&
this.newAddress.district) {
this.newAddress.district
) {
this.googleSearch();
} else {
this.showNotification(
'Debe seleccionar el Departamento, Provincia y Distrito.',
'warning',
null,
false,
2000,
);
}
}
function googleSearch() {
const geocoder = new google.maps.Geocoder();
const departmentName = this.departments.filter(d => d.id === this.newAddress.department);
const provinceName = this.provinces.filter(p => p.id === this.newAddress.province);
const disctrictName = this.districts.filter(d => d.id === this.newAddress.district);
geocoder.geocode({ address: `${departmentName[0].name} ${provinceName[0].name} ${disctrictName[0].name} ${this.newAddress.addressLine1}` }, (results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const lat = results[0].geometry.location.lat();
const lng = results[0].geometry.location.lng();
this.newAddress.latitude = lat;
this.newAddress.longitude = lng;
this.showMap = true;
this.setCustomerAddress();
} else {
console.error('Request failed.');
}
});
const departmentName = this.departments.filter(
d => d.id === this.newAddress.department,
);
const provinceName = this.provinces.filter(
p => p.id === this.newAddress.province,
);
const disctrictName = this.districts.filter(
d => d.id === this.newAddress.district,
);
geocoder.geocode(
{
address: `${departmentName[0].name} ${provinceName[0].name} ${disctrictName[0].name} ${this.newAddress.addressLine1}`,
},
(results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const lat = results[0].geometry.location.lat();
const lng = results[0].geometry.location.lng();
this.newAddress.latitude = lat;
this.newAddress.longitude = lng;
this.showMap = true;
this.setCustomerAddress();
} else {
this.showNotification(
'No se encontro esa ubicación en el mapa.',
'error',
null,
false,
4000,
);
console.error('Request failed.');
}
},
);
}
function selectDepartment(provinceId) {
Expand Down Expand Up @@ -195,7 +232,13 @@ async function calculateShippingCost(locationId, location) {
if (error.data.message === 'PRICE_NOT_CONFIGURATION') {
this.$store.dispatch('setShippingCostError', true);
this.$store.dispatch('setNoShippingCost');
this.showNotification('No es posible hacer envios a ese destino.', 'error', null, false, 8000);
this.showNotification(
'No es posible hacer envios a ese destino.',
'error',
null,
false,
8000,
);
}
}
}
Expand Down Expand Up @@ -322,80 +365,79 @@ export default {
<style lang="scss" scoped>
.divSpinner {
margin: 2px;
justify-content: space-between;
justify-content: space-between;
}
.v-progress-circular {
float: right;
float: right;
}
.new-address-form {
align-items: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.new-address-form {
align-items: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.field {
height: 68px;
}
.field {
height: 68px;
}
.name-field,
.department-field {
flex: 1 1 40%;
.name-field,
.department-field {
flex: 1 1 40%;
@media (max-width: 925px) {
flex: 1 1 100%;
}
@media (max-width: 925px) {
flex: 1 1 100%;
}
}
.district-field,
.province-field {
flex: 1 1 40%;
}
.district-field,
.province-field {
flex: 1 1 40%;
}
.address-field {
flex: 1 1 60%;
}
.address-field {
flex: 1 1 60%;
}
.number-field {
flex: 1 1 20%;
.number-field {
flex: 1 1 20%;
@media (max-width: 925px) {
flex: 1 1 100%;
}
@media (max-width: 925px) {
flex: 1 1 100%;
}
}
.reference-field {
flex: 1 1 60%;
@media (max-width: 925px) {
flex: 1 1 100%;
}
.reference-field {
flex: 1 1 60%;
@media (max-width: 925px) {
flex: 1 1 100%;
}
}
.button-field {
flex: 1 1 20%;
.button-field{
flex: 1 1 20%;
@media (max-width: 925px) {
flex: 1 1 100%;
}
}
.map-field{
@media (max-width: 925px) {
flex: 1 1 100%;
}
}
.btn{
display: flex;
justify-content: center;
align-items: center;
font-family: "Avenir Next Medium";
font-size: 12px;
height: 46.8px;
outline: none;
border: 1px solid rgb(227, 5, 23);
border-radius: 7px;
color: rgb(227, 5, 23);
text-decoration: none;
}
.map-field {
flex: 1 1 100%;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Avenir Next Medium';
font-size: 12px;
height: 46.8px;
outline: none;
border: 1px solid rgb(227, 5, 23);
border-radius: 7px;
color: rgb(227, 5, 23);
text-decoration: none;
}
</style>
Loading

0 comments on commit 31b669e

Please sign in to comment.