add: share load

2024-10-21 21:31:27 -06:00
parent 6dae5d9574
commit c8bbcdaad2
7 changed files with 193 additions and 16 deletions
--- a/src/views/ShareLoadView.vue
+++ b/src/views/ShareLoadView.vue
@@ -0,0 +1,134 @@
+<script setup>
+    import { onMounted, ref, computed } from 'vue';
+    import { useRoute, RouterLink } from 'vue-router';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardLoad from '../components/CardLoad.vue';
+    import useDirectionsRender from '../composables/useDirectionRender';
+    import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
+    import CardEmpty from '../components/CardEmpty.vue';
+    import useTrackingLoad from '../composables/useTrackingLoad';
+    import { useI18n } from 'vue-i18n';
+    import MakeProposalModal from '../components/MakeProposalModal.vue';
+
+    const mapKey = import.meta.env.VITE_MAP_KEY;
+
+    const { getDirections } = useDirectionsRender()
+    const { getLoadTracking, load, loading } = useTrackingLoad();
+    const route = useRoute();
+    const zoom = ref(6);
+    const heightMap = ref(768);
+    const originCoords = ref(null);
+    const destinationCoords = ref(null);
+    const polylines = ref([]);
+    const windowWidth = ref(window.innerWidth);
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+        initData();
+    });
+
+    const { t } = useI18n();
+    const initData = async() => {
+        const id = route.params['code'];
+        await getLoadTracking(id)
+        if(load.value !== null) {
+            // console.log(load.value);
+            const origin = load.value?.origin;
+            const destination = load.value?.destination;
+            if(origin && destination) {
+                originCoords.value = {lat: Number.parseFloat(origin.lat), lng: Number.parseFloat(origin.lng)};
+                destinationCoords.value = {lat: Number.parseFloat(destination.lat), lng: Number.parseFloat(destination.lng)};
+
+                polylines.value = await getDirections(originCoords.value, destinationCoords.value);
+
+            }
+
+        }
+    }
+
+    const handleResize = () => {
+        windowWidth.value = window.innerWidth
+        if(windowWidth.value <= 1024){
+            zoom.value = 4
+            heightMap.value = 420;
+        } else {
+            zoom.value = 6;
+            heightMap.value = 768;
+        }
+    }
+
+    const hasSession = computed(() => (localStorage.getItem('access') && localStorage.getItem('id')))
+
+    const handleResetCurrentLoad = () => {
+    }
+
+    const removeLoadOfList = (load) => {
+    }
+
+</script>
+
+<template>
+    <MakeProposalModal
+        v-if="load" 
+        :load="load"
+        @reset-load="handleResetCurrentLoad"
+        @remove-load="removeLoadOfList"
+    />
+    <h2 class="title text-center mt-5">Realizar oferta</h2>
+    <div
+        v-if="!hasSession" 
+        class="alert alert-info text-dark mt-3 mb-2"
+    >
+        Para realizar oferta es necesario que inicies sesión en Etaviaporte
+        <RouterLink 
+            class="btn btn-dark ms-4"
+            target="_blank"
+            :to="{name: 'login'}"
+        >
+            Iniciar sesión
+        </RouterLink>
+    </div>
+    <Spiner v-if="loading"/>
+    <div v-else>
+        <div v-if="load">
+            <CardLoad :load="load" :read-only="true" :tracking="false" :share="true"/>
+            <br/>
+            <GoogleMap
+                    :api-key="mapKey"
+                    :center="{lat:19.432600, lng:-99.133209}"
+                    :zoom="zoom" 
+                    :min-zoom="2"
+                    :max-zoom="20"
+                    :style="{width: 100 + '%', height: heightMap + 'px'}"
+                    :options="{
+                        zoomControl: true,
+                        mapTypeControl: true,
+                        scaleControl: true,
+                        streetViewControl: true,
+                        rotateControl: true,
+                        fullscreenControl: true
+                    }"
+                > 
+                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
+                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <Polyline 
+                        v-if="polylines"
+                        :options="{
+                            path: polylines,
+                            // geodesic: true,
+                            strokeColor: '#2D90BB',
+                            strokeOpacity: 0.7,
+                            strokeWeight: 5,
+                            clickable: true,
+                            fillColor: '#75ad3e',
+                        }" 
+                    />
+                </GoogleMap>
+        </div>
+        <CardEmpty v-else :text="t('loads.noInfo')"/>
+    </div>
+</template>