add: tracking load & clean code save load

src/views/LoadsPublishedView.vue

@@ -1,14 +1,13 @@
 <script setup>
     import { onMounted, ref, watch } from 'vue';
-    import { useCompanyStore } from '../stores/company';
     import Spiner from '../components/ui/Spiner.vue';
     import CardLoad from '../components/CardLoad.vue';
     import AttachmentsModal from '../components/AttachmentsModal.vue';
     import { useLoadsStore } from '../stores/loads';
     import FormLoadModal from '../components/FormLoadModal.vue';
 import ProposalsModal from '../components/ProposalsModal.vue';
+import CardEmpty from '../components/CardEmpty.vue';
 
-    const companyStore = useCompanyStore();
     const loadStore = useLoadsStore();
     const loading = ref(false);
     const query = ref('');
@@ -92,12 +91,15 @@ import ProposalsModal from '../components/ProposalsModal.vue';
                 ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
             </div>
             <Spiner v-if="loading"/>
-            <CardLoad 
-                v-else
-                v-for="load in loadStore.loads"
-                :key="load._id"
-                :load="load" 
-            />
+            <div v-else>
+                <CardLoad 
+                    v-if="loadStore.loads.length > 0"
+                    v-for="load in loadStore.loads"
+                    :key="load._id"
+                    :load="load" 
+                />
+                <CardEmpty v-else text="No hay cargas agregadas"/>
+            </div>
         </div>
     </div>
 </template>

src/views/TrackingLoadView.vue

@@ -0,0 +1,128 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useLoadsStore } from '../stores/loads';
+    import { useRoute } 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 } from 'vue3-google-map';
+import CardEmpty from '../components/CardEmpty.vue';
+
+    const isLoading = ref(true);
+    const loadStore = useLoadsStore();
+    const { geocodeAddress } = useDirectionsRender()
+    const route = useRoute();
+    const load = ref(null);
+    const zoom = ref(6);
+    const heightMap = ref(768);
+    const vehicleLastLocation = ref(null);
+    const originCoords = ref(null);
+    const destinationCoords = ref(null);
+    const isLoadActive = ref(false);
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+        initData();
+    });
+
+    const initData = async() => {
+        isLoading.value = true;
+        const filter = "?shipment_code[$in]=" + route.params['code'];
+        const resp = await loadStore.getLoad(filter);
+        if(resp.total > 0) {
+            load.value = resp.data[0];
+            originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
+            destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
+            if(load.value.vehicle) {
+                vehicleLastLocation.value = {
+                    lat: parseFloat(load.value.vehicle.last_location_lat),
+                    lng: parseFloat(load.value.vehicle.last_location_lng)
+                }
+            }
+
+            switch (load.value.load_status) {
+                case 'Loading':
+                    isLoadActive.value = true;
+                    break;
+                case 'Transit':
+                    isLoadActive.value = true;
+                    break;
+                case 'Downloading':
+                    isLoadActive.value = true;
+                    break;
+            
+                default:
+                    isLoadActive.value = false;
+                    break;
+            }
+
+        }
+        isLoading.value = false;
+    }
+
+    const handleResize = () => {
+        windowWidth.value = window.innerWidth
+        if(windowWidth.value <= 1024){
+            zoom.value = 4
+            heightMap.value = 420;
+        } else {
+            zoom.value = 6;
+            heightMap.value = 768;
+        }
+    }
+</script>
+
+<template>
+    <Spiner v-if="isLoading"/>
+    <div v-else>
+        <div v-if="load">
+            <CardLoad :load="load" :read-only="true"/>
+            <GoogleMap
+                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                    :center="{lat:19.432600, lng:-99.133209}"
+                    :zoom="zoom" 
+                    :min-zoom="2"
+                    :max-zoom="12"
+                    :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'}" />
+                    <CustomMarker
+                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
+                        :options="{position: vehicleLastLocation}"
+                        :clickable="false"
+                        :draggable="false"
+                        >
+                        <div style="text-align: center">
+                            <!-- <img src="/images/freeTruck.png" width="25" height="25" /> -->
+                            <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
+                        </div>
+                    </CustomMarker>
+                    <!-- <Polyline :options="{
+                        path: polyline,
+                        // geodesic: true,
+                        strokeColor: '#FF0000',
+                        strokeOpacity: 1.0,
+                        strokeWeight: 2
+                    }" /> -->
+                </GoogleMap>
+        </div>
+        <CardEmpty text="No hay información disponible"/>
+    </div>
+</template>
+
+<style scoped>
+
+</style>