Merge branch 'migrate-alex' into 'master'

add: selected popup directory type See merge request jcruzbaasworkspace/enruta/webeta!13
2024-05-11 01:51:12 +00:00
parent b5aa41f6e4 3eb6ffa139
commit bde532f6c8
6 changed files with 187 additions and 31 deletions
--- a/src/components/CustomPopup.vue
+++ b/src/components/CustomPopup.vue
@@ -0,0 +1,93 @@
+<script setup>
+    const props = defineProps({
+        options: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        },
+        style: {
+            type: Object,
+            required: false
+        },
+        selectedColor: {
+            type: String,
+            required: false
+        }
+    })
+
+
+    defineEmits(['change-value', 'close-popup'])
+</script>
+
+<template>
+        <div 
+            class="background-popup"
+            @click="$emit('close-popup')"
+        >
+        </div>
+        <div 
+            class="content-popup"
+            :style="style"
+        >
+            <div 
+                v-for="option in options"
+                class="box-btn" 
+                :style="{
+                    backgroundColor: (value.value === option.value) ? (selectedColor) ? selectedColor : 'primary' : ''
+                }"
+                @click="$emit('change-value', option)"
+            >{{ option.label }}</div>
+        </div>
+</template>
+
+
+<style scoped>
+    .background-popup {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #c6b9b9;
+        opacity: 0.2;
+    }
+
+    .content-popup {
+        position: fixed;
+        right: 180px;
+        top: 180px;
+        z-index: 2000;
+        width: 200px;
+        background-color: #FFF;
+        opacity: 1;
+        border-radius: 13px;
+        padding: 20px 32px;
+        display: flex;
+        flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .box-btn {
+        padding: 8px 16px;
+        margin-bottom: 8px;
+        background-color: rgb(234, 241, 241);
+        border-radius: 5px;
+        font-size: 0.8rem;
+        font-weight: 700;
+    }
+
+    @media (max-width: 568px) {
+        .content-popup {
+            top: 200px;
+            right: 20px;
+        }
+    }
+</style>
--- a/src/components/FormLoadModal.vue
+++ b/src/components/FormLoadModal.vue
@@ -79,7 +79,6 @@
        formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
        //origin_formatted_address
        if(loadStore.currentLoad){
-            console.log(loadStore.currentLoad);
            formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -131,7 +130,6 @@

        watch([originCoords, destinationCoords], async() => {
            if(originCoords.value && destinationCoords.value) {
-                // console.log('Se llama api direcciones ')
                polylines.value = await getDirections(originCoords.value, destinationCoords.value);
            }
        })
@@ -406,7 +404,7 @@
                                v-model:field="formLoad.dateDownload"
                            />
                            <Custominput
-                                label="Peso de la carga*"
+                                label="Peso de la carga en Kg*"
                                type="number"
                                :filled="false"
                                name="weight"
@@ -423,7 +421,7 @@
                                />
                            </div>
                            <Custominput
-                                label="Precio"
+                                label="Precio en MXN"
                                type="Number"
                                :filled="false"
                                name="price"
@@ -451,8 +449,8 @@
                            <h2>Dirección de origen</h2>

                            <div class="form-check my-4" v-if="loadingLocations === false">
-                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationLoad">
-                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
+                                <label class="form-check-label custom-label" for="directoryOrigin">
                                    Usar locaciones registradas 
                                </label>
                            </div>
@@ -521,8 +519,8 @@
                        <div class="form-section">
                            <h2>Dirección de destino</h2>
                            <div class="form-check my-4" v-if="loadingLocations === false">
-                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationDownload">
-                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
+                                <label class="form-check-label custom-label" for="directoryDestination">
                                    Usar locaciones registradas 
                                </label>
                            </div>
--- a/src/composables/useDirectionRender.js
+++ b/src/composables/useDirectionRender.js
@@ -7,31 +7,39 @@ export default function useDirectionsRender() {

    const originCoords = ref(null);
    const destinationCoords = ref(null);
-    // const polylines = ref([]);
+
+    // const geocodeAddress = async (address) => {
+    //   try {
+    //       const response = await fetch(
+    //         `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+    //           address
+    //         )}&key=${mapKey}`
+    //       );
+    //       const data = await response.json();
+    //       const location = data.results[0].geometry.location;
+    //       return location;
+    //   } catch (error) {
+    //     return null;
+    //   }
+    // };
+
    const geocodeAddress = async (address) => {
-      // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
-      // const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API
      try {
-          const response = await fetch(
-            `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
-              address
-            )}&key=${mapKey}`
-          );
-          const data = await response.json();
-          const location = data.results[0].geometry.location;
-          return location;
+        const geocoder = new google.maps.Geocoder();
+        console.log(address)
+        const data = await geocoder.geocode({ address: address });
+        const latitude = data.results[0].geometry.location.lat();
+        const longitude = data.results[0].geometry.location.lng();
+        return {lng: longitude, lat: latitude};
      } catch (error) {
+        console.log('Error location', error);
        return null;
      }
    };

    const getDirections = async (originCoords, destinationCoords) => {
-      // const originLatLng = `${originCoords.lat},${originCoords.lng}`;
-      // const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
      try {
        const directionsService = new google.maps.DirectionsService();
-        // const origin = google.maps.LatLng(originCoords.lat, originCoords.lng)
-        // const destination = google.maps.LatLng(destinationCoords.lat, destinationCoords.lng)
        const request = {
            origin: {lat: Number.parseFloat(originCoords.lat), lng: Number.parseFloat(originCoords.lng)},
            destination:  {lat: Number.parseFloat(destinationCoords.lat), lng: Number.parseFloat(destinationCoords.lng)},
--- a/src/services/auth.js
+++ b/src/services/auth.js
@@ -9,7 +9,6 @@ export const login = async(body) => {
        console.log('auth: ', data);
        if(data.accessToken !== null){
            if(data.user.job_role !== 'driver'){
-                //TODO: Guardar token y datos del usuario
                return {
                    msg: 'success',
                    data
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -6,6 +6,7 @@
    import CreateLocationModal from '../components/CreateLocationModal.vue';
    import CardLocation from '../components/CardLocation.vue';
    import Pagination from '../components/Pagination.vue';
+import CustomPopup from '../components/CustomPopup.vue';

    const companyStore = useCompanyStore();

@@ -14,6 +15,9 @@
    const query = ref('');
    const locationCurrent = ref(null);
    const openModal = ref(false);
+    // const typeDirection = ref(null)
+    const typeDirection = ref({value: 'both', label: 'Ambas'})
+    const openPopup = ref(false);

    onMounted(() => {
        getInitData();
@@ -94,9 +98,36 @@
        locationCurrent.value = null;
    }

+    const selectedType = (type) => {
+        console.log(type)
+        typeDirection.value = type
+        openPopup.value = false
+    }
+
+    const optionsFilter = [
+        {value: 'both',label: 'Ambas'},
+        {value: 'load',label: 'Carga'},
+        {value: 'download',label: 'Descarga'}
+    ]
+
+    const closePopup = () => {
+        openPopup.value = false
+    }
+
 </script>

 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup 
+            :options="optionsFilter" 
+            :value="typeDirection" 
+            @change-value="selectedType"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+        />
+    </div>
    <div>
        <CreateLocationModal 
            v-if="openModal === true"
@@ -108,6 +139,13 @@
            <div class="box-search">
                <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
            </div>
+            <div class="box-directory"
+                @click="openPopup = true"
+            >
+                <span class="clear-sm" v-if="typeDirection === null">Directorio</span>
+                <span class="clear-sm" v-else>{{typeDirection.label}}</span>
+                <i class="fa-solid fa-filter"></i>
+            </div>
            <button 
                class="btn btn-danger bg-dark" type="button" @click="clearFilter">
                <i class="fa-solid fa-arrow-rotate-right"></i>
@@ -149,21 +187,41 @@
        gap: 1rem;
        margin: 1.5rem 0px;
    }
+    .box-filter-location {
+        background-color: white;
+    }

-    // .spiner-box {
-    //     display: flex;
-    //     justify-content: center;
-    //     height: calc(100vh - 400px)
-    // }
+    .section-h4 {
+        font-size: 1rem;
+    }
+
+    .box-custom {
+        background-color: red!important;
+        width: 100px;
+    }
+
+    .box-directory {
+        padding: 12px 8px;
+        background-color: #FFF;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: row;
+        border: 1px rgb(186, 175, 175) solid;
+        gap: 1rem;
+        align-items: center;
+        cursor: pointer;
+    }

    .box-search {
-        width: 60%;
+        // width: 50%;
+        flex: 1;
    }
    .custom-search {
        width: 100%;
        padding: 12px 20px;
    }

+
    @media (max-width: 1024px) {
        .box-search {
            width: 60%;
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -55,7 +55,7 @@
            }


-            console.log(load.value.load_status);
+            console.log(load.value);
            switch (load.value.load_status) {
                case 'Loading':
                    isLoadActive.value = true;