ADD: Utm Convert

FIX: Features data not saving and not loading

package-lock.json

@@ -29,6 +29,8 @@
                 "photoswipe": "^5.4.4",
                 "primeicons": "^7.0.0",
                 "primevue": "^4.2.4",
+                "usng.js": "^0.4.5",
+                "utm-latlng": "^1.0.8",
                 "v-mapbox": "^5.1.0",
                 "vue": "^3.4.34",
                 "vue-cookies": "^1.8.3",
@@ -4794,12 +4796,27 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/usng.js": {
+            "version": "0.4.5",
+            "resolved": "https://registry.npmjs.org/usng.js/-/usng.js-0.4.5.tgz",
+            "integrity": "sha512-JTJcFFDy/JqA5iiU8DqMOV5gJiL3ZdXH0hCKYaRMDbbredhFna5Ok4C1YDFU07mTGAgm+5FzHaaOzQnO/3BzWQ==",
+            "license": "MIT",
+            "bin": {
+                "usng-cli": "bin/cli.js"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "dev": true
         },
+        "node_modules/utm-latlng": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/utm-latlng/-/utm-latlng-1.0.8.tgz",
+            "integrity": "sha512-jQ5l1BNTzNgas7jXOIh0jU0m5PU5LtmjYvRiLwR4iymYYAhEhQ6N0MGCnLjv5iO958b9tLMMSmzdbIIhLtXqCg==",
+            "license": "MIT"
+        },
         "node_modules/v-mapbox": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/v-mapbox/-/v-mapbox-5.1.0.tgz",

package.json

@@ -29,6 +29,8 @@
         "photoswipe": "^5.4.4",
         "primeicons": "^7.0.0",
         "primevue": "^4.2.4",
+        "usng.js": "^0.4.5",
+        "utm-latlng": "^1.0.8",
         "v-mapbox": "^5.1.0",
         "vue": "^3.4.34",
         "vue-cookies": "^1.8.3",

src/utm.js

@@ -0,0 +1,78 @@
+// Converts UTM coordinates to latitude and longitude
+
+const a = 6378137.0; // WGS84 Major axis
+const eccSquared = 0.00669438; // WGS84 eccentricity squared
+const k0 = 0.9996; // Scale factor
+
+function UTMtoLatLon(UTMEasting, UTMNorthing, UTMZoneNumber, Hemisphere) {
+    const e1 = (1 - Math.sqrt(1 - eccSquared)) / (1 + Math.sqrt(1 - eccSquared));
+    let x = UTMEasting - 500000.0;
+    let y = UTMNorthing;
+
+    if (Hemisphere === 'S') {
+        y -= 10000000.0;
+    }
+
+    const LongOrigin = (UTMZoneNumber - 1) * 6 - 180 + 3;
+    const eccPrimeSquared = eccSquared / (1 - eccSquared);
+    const M = y / k0;
+    const mu = M / (a * (1 - eccSquared / 4 - (3 * eccSquared ** 2) / 64 - (5 * eccSquared ** 3) / 256));
+
+    let phi1Rad = mu + ((3 * e1) / 2 - (27 * e1 ** 3) / 32) * Math.sin(2 * mu) + ((21 * e1 ** 2) / 16 - (55 * e1 ** 4) / 32) * Math.sin(4 * mu) + ((151 * e1 ** 3) / 96) * Math.sin(6 * mu);
+
+    const N1 = a / Math.sqrt(1 - eccSquared * Math.sin(phi1Rad) ** 2);
+    const T1 = Math.tan(phi1Rad) ** 2;
+    const C1 = eccPrimeSquared * Math.cos(phi1Rad) ** 2;
+    const R1 = (a * (1 - eccSquared)) / Math.pow(1 - eccSquared * Math.sin(phi1Rad) ** 2, 1.5);
+    const D = x / (N1 * k0);
+
+    let lat = phi1Rad - ((N1 * Math.tan(phi1Rad)) / R1) * (D ** 2 / 2 - ((5 + 3 * T1 + 10 * C1 - 4 * C1 ** 2 - 9 * eccPrimeSquared) * D ** 4) / 24 + ((61 + 90 * T1 + 298 * C1 + 45 * T1 ** 2 - 252 * eccPrimeSquared - 3 * C1 ** 2) * D ** 6) / 720);
+    lat *= 180 / Math.PI;
+
+    let lon = (D - ((1 + 2 * T1 + C1) * D ** 3) / 6 + ((5 - 2 * C1 + 28 * T1 - 3 * C1 ** 2 + 8 * eccPrimeSquared + 24 * T1 ** 2) * D ** 5) / 120) / Math.cos(phi1Rad);
+    lon = LongOrigin + (lon * 180) / Math.PI;
+
+    return { latitude: lat, longitude: lon };
+}
+
+// Converts latitude and longitude to UTM coordinates
+function LatLontoUTM(lat, lon) {
+    const LatRad = (lat * Math.PI) / 180.0;
+    const LongRad = (lon * Math.PI) / 180.0;
+
+    const ZoneNumber = Math.floor((lon + 180) / 6) + 1;
+    const LongOrigin = (ZoneNumber - 1) * 6 - 180 + 3;
+    const LongOriginRad = (LongOrigin * Math.PI) / 180.0;
+
+    const eccPrimeSquared = eccSquared / (1 - eccSquared);
+    const N = a / Math.sqrt(1 - eccSquared * Math.sin(LatRad) ** 2);
+    const T = Math.tan(LatRad) ** 2;
+    const C = eccPrimeSquared * Math.cos(LatRad) ** 2;
+    const A = Math.cos(LatRad) * (LongRad - LongOriginRad);
+
+    const M =
+        a *
+        ((1 - eccSquared / 4 - (3 * eccSquared ** 2) / 64 - (5 * eccSquared ** 3) / 256) * LatRad -
+            ((3 * eccSquared) / 8 + (3 * eccSquared ** 2) / 32 + (45 * eccSquared ** 3) / 1024) * Math.sin(2 * LatRad) +
+            ((15 * eccSquared ** 2) / 256 + (45 * eccSquared ** 3) / 1024) * Math.sin(4 * LatRad) -
+            ((35 * eccSquared ** 3) / 3072) * Math.sin(6 * LatRad));
+
+    let UTMEasting = k0 * N * (A + ((1 - T + C) * A ** 3) / 6 + ((5 - 18 * T + T ** 2 + 72 * C - 58 * eccPrimeSquared) * A ** 5) / 120) + 500000.0;
+
+    let UTMNorthing = k0 * (M + N * Math.tan(LatRad) * (A ** 2 / 2 + ((5 - T + 9 * C + 4 * C ** 2) * A ** 4) / 24 + ((61 - 58 * T + T ** 2 + 600 * C - 330 * eccPrimeSquared) * A ** 6) / 720));
+
+    const Hemisphere = lat < 0 ? 'S' : 'N';
+    if (lat < 0) {
+        UTMNorthing += 10000000.0;
+    }
+
+    return {
+        easting: UTMEasting,
+        northing: UTMNorthing,
+        zoneNumber: ZoneNumber,
+        hemisphere: Hemisphere
+    };
+}
+
+// Exporting functions as a module
+export { UTMtoLatLon, LatLontoUTM };

src/views/pages/Belonging/CreateBelonging.vue

@@ -47,7 +47,6 @@ const route = useRoute();
 const router = useRouter();
 const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
 const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
-const mapRef = ref();
 
 const transactions = ref([]);
 const stockData = ref({});
@@ -118,6 +117,7 @@ onBeforeMount(async () => {
     if (route.name === 'edit-belonging') {
         editMode.value = true;
         belonging.value = await BelongingService.getBelonging(route.params.belongingId);
+        featuresValues.value = extractFeaturesValues(belonging.value.features);
         transactions.value = await TransactionService.getTransactionsByBelongingId(route.params.belongingId);
         stockData.value = await TransactionService.getStockByBelongingId(route.params.belongingId);
         mainImageUrlsWithData.value = fillImagesArray(belonging.value?.mainImageUrls || []);
@@ -126,6 +126,67 @@ onBeforeMount(async () => {
 });
 const showTransactionDialog = ref(false);
 
+import { UTMtoLatLon, LatLontoUTM } from '@/utm';
+
+const easting = ref();
+const northing = ref();
+const zone = ref();
+const lat = ref();
+const long = ref();
+
+const convertUTMtoLatLng = () => {
+    if (easting.value && northing.value && zone.value) {
+        try {
+            const result = UTMtoLatLon(
+                Number(easting.value),
+                Number(northing.value),
+                Number(zone.value),
+                'N' // Change to 'S' if in Southern Hemisphere
+            );
+            lat.value = result.latitude;
+            long.value = result.longitude;
+            console.log(lat.value, long.value);
+            searchLocation(lat.value, long.value);
+        } catch (error) {
+            console.error('Error converting UTM to Lat/Lng:', error);
+        }
+    }
+};
+
+// Watch nationalGeoCode to split and convert to Lat/Lng
+watch(
+    () => belonging.value.nationalGeoCode,
+    (newCode) => {
+        if (newCode && newCode.length === 15) {
+            easting.value = newCode.substring(0, 6); // First 6 digits for easting
+            northing.value = newCode.substring(6, 13); // Next 6 digits for northing
+            zone.value = newCode.substring(13, 15); // Last 2 digits for zone
+            // Convert to Lat/Lng after splitting
+            convertUTMtoLatLng();
+        }
+    }
+);
+
+const mapRef = ref();
+
+const searchLocation = (lat, lon) => {
+    if (mapRef.value) {
+        mapRef.value.searchByCoordinates(lat, lon);
+    }
+};
+
+watch(
+    () => belonging.value.category,
+    (newCategory) => {
+        if (editMode.value && newCategory) {
+            selectedCategory.value = categories.value.find((x) => x._id === newCategory);
+            if (selectedCategory.value) {
+                features.value = selectedCategory.value.features;
+            }
+        }
+    }
+);
+
 const fillImagesArray = (imageUrls) => {
     const images = [];
     for (let url of imageUrls) {
@@ -161,12 +222,36 @@ const handleSelectCategory = ($event) => {
     }
 };
 
+const extractFeatures = (featuresValues) => {
+    const features = [];
+
+    for (const [key, value] of Object.entries(featuresValues)) {
+        features.push({
+            definition: key,
+            value: value
+        });
+    }
+
+    return features;
+};
+
+const extractFeaturesValues = (features) => {
+    const featuresValues = {};
+
+    for (let feature of features) {
+        featuresValues[feature.definition] = feature.value;
+    }
+
+    return featuresValues;
+};
+
 const saveBelonging = async () => {
     let status = 'failed';
     console.log(belonging);
     if (belonging?.value._id?.trim()) {
         belonging.value.mainImageUrls = mainImageUrlsWithData.value.map((x) => x.url);
         belonging.value.documentUrls = documentUrlsWithData.value.map((x) => x.url);
+        belonging.value.features = extractFeatures(featuresValues.value);
         status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
     } else {
         status = await BelongingService.createBelonging(belonging.value);
@@ -181,23 +266,6 @@ const saveBelonging = async () => {
     await router.push('/belonging/list-belongings');
 };
 
-watch(
-    () => mapRef.value?.state.map,
-    (nv, ol) => {
-        if (ol) return;
-        setTimeout(() => {
-            mapRef.value?.state.map?.setMapType('standard-night');
-            if (mapRef.value?.state.mapType) mapRef.value.state.mapType = 'standard-night';
-        }, 2000);
-        setTimeout(() => {
-            mapRef.value?.search({
-                term: 'ولی عصر',
-                coords: [51.36281969540723, 35.69672648316882]
-            });
-        }, 3000);
-    }
-);
-
 const filters = ref({
     global: { value: null, matchMode: FilterMatchMode.CONTAINS },
     type: { value: null, matchMode: FilterMatchMode.EQUALS },
@@ -336,7 +404,7 @@ const formatDate = (dateString) => {
                 </div>
                 <div class="my-10">
                     <label class="text-lg"> موقعیت دارایی </label>
-                    <MapComponent v-model="belonging.location.coordinates" />
+                    <MapComponent ref="mapRef" v-model="belonging.location.coordinates" />
                     <!--                    <MapIrComponent />-->
                 </div>
 
@@ -447,6 +515,11 @@ const formatDate = (dateString) => {
                     <label class="text-lg"> برچسب ها </label>
                     <KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
                 </div>
+
+                <div class="my-8">
+                    <label class="text-lg"> شناسه ملی جغرافیایی </label>
+                    <InputText v-model="belonging.nationalGeoCode" class="w-full" placeholder="شناسه 14 رقمی سند" />
+                </div>
             </div>
         </div>
 

src/views/pages/Belonging/TransactionDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, watch, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { TransactionService } from '@/service/TransactionService';
 
@@ -11,6 +11,14 @@ const props = defineProps({
     belongingId: {
         type: String,
         required: true
+    },
+    editMode: {
+        type: Boolean,
+        default: false
+    },
+    transactionData: {
+        type: Object,
+        default: null
     }
 });
 
@@ -23,7 +31,8 @@ const transaction = reactive({
     status: 'pending',
     value: null,
     description: '',
-    date: new Date().toISOString()
+    date: new Date().toISOString(),
+    _id: null
 });
 
 const typeOptions = [
@@ -43,6 +52,43 @@ const errors = reactive({
     value: ''
 });
 
+// Watch for changes in editMode and transactionData
+watch(
+    () => props.transactionData,
+    (newValue) => {
+        if (newValue && props.editMode) {
+            // Load transaction data for editing
+            Object.assign(transaction, {
+                type: newValue.type || 'deposit',
+                status: newValue.status || 'pending',
+                value: newValue.value || null,
+                description: newValue.description || '',
+                date: newValue.date || new Date().toISOString(),
+                _id: newValue._id || null
+            });
+        }
+    },
+    { immediate: true }
+);
+
+// Reset form when dialog opens
+watch(
+    () => props.visible,
+    (isVisible) => {
+        if (isVisible && !props.editMode) {
+            // Reset form for create mode
+            Object.assign(transaction, {
+                type: 'deposit',
+                status: 'pending',
+                value: null,
+                description: '',
+                date: new Date().toISOString(),
+                _id: null
+            });
+        }
+    }
+);
+
 const validateForm = () => {
     let isValid = true;
 
@@ -78,9 +124,19 @@ const saveTransaction = async () => {
 
     try {
         transaction.belongingId = props.belongingId;
-        const result = await TransactionService.createTransaction(transaction);
+        let result;
+
+        if (props.editMode && transaction._id) {
+            // Update existing transaction
+            result = await TransactionService.updateTransaction(transaction._id, transaction);
+        } else {
+            // Create new transaction
+            result = await TransactionService.createTransaction(transaction);
+        }
+
         if (result === 'success') {
-            toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
+            const message = props.editMode ? 'تراکنش با موفقیت بروزرسانی شد' : 'تراکنش با موفقیت ثبت شد';
+            toast.add({ severity: 'success', summary: 'موفق', detail: message, life: 3000 });
             emit('saved');
             closeDialog();
         } else {
@@ -98,7 +154,7 @@ const closeDialog = () => {
 </script>
 
 <template>
-    <Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" header="افزایش یا کاهش موجودی" @update:visible="closeDialog">
+    <Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" :header="props.editMode ? 'ویرایش تراکنش' : 'افزایش یا کاهش موجودی'" @update:visible="closeDialog">
         <div class="p-fluid">
             <div class="field mb-4">
                 <label class="font-bold mb-2 block">نوع تراکنش</label>
@@ -127,7 +183,7 @@ const closeDialog = () => {
         <template #footer>
             <div class="flex justify-end gap-2">
                 <Button label="انصراف" icon="pi pi-times" class="p-button-text" @click="closeDialog" />
-                <Button label="ذخیره" icon="pi pi-check" @click="saveTransaction" />
+                <Button :label="props.editMode ? 'بروزرسانی' : 'ذخیره'" icon="pi pi-check" @click="saveTransaction" />
             </div>
         </template>
     </Dialog>

src/views/uikit/MapComponent.vue

@@ -40,21 +40,40 @@ const props = defineProps({
     modelValue: {
         type: Array,
         default: () => []
+    },
+    lon: {
+        type: Number
+    },
+    lat: {
+        type: Number
     }
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 // Map configuration
-const zoom = ref(13);
+const zoom = ref(12);
 const center = ref([31.3183, 48.6706]);
-const attribution = ref('© OpenStreetMap contributors');
+const attribution = ref('Nilgoon Team');
 const marker = ref([...props.modelValue]);
 const map = ref(null);
 
 // Search functionality
 const searchQuery = ref('');
 
+const searchByCoordinates = (lat, lon) => {
+    if (lat && lon) {
+        center.value = [parseFloat(lat), parseFloat(lon)];
+        zoom.value = 10;
+        marker.value = [parseFloat(lat), parseFloat(lon)];
+        emit('update:modelValue', marker.value);
+    }
+};
+
+defineExpose({
+    searchByCoordinates
+});
+
 const handleSearch = async () => {
     if (!searchQuery.value) return;