fix the linting errors for map component

Apps/FrontendSoftware/.vscode/settings.json

@@ -21,5 +21,11 @@
                 }
             }
         ]
-    }
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "eslint.validate": [
+        "javascript"
+    ]
 }

Apps/FrontendSoftware/package.json

@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "electron-icon-builder": "^1.0.2",
-    "eslint": "^7.20.0",
+    "eslint": "^7.21.0",
     "eslint-plugin-vue": "^7.6.0",
     "lighthouse": "^6.2.0",
     "vue-devtools": "^5.1.3",

Apps/FrontendSoftware/src/components/Map/MapComponents/RouteManager/Forms/EditCircumnavForm.vue

@@ -186,6 +186,7 @@ export default {
         this.highlight.removeColor();
         // Reset the editing circumnav
         this.$store.commit('setEditingCircumnav', null);
+
     },
     mounted() {
     // Set the values to be displayed on form based on current circumnav
@@ -276,19 +277,8 @@ export default {
             return true;
         },
         saveCircumnav() {
-            // Get the new circum created from grid
-            let newCircum = this.editingCircumnav;
-
-            // Set the orignal circumnavigation obj with updated vals
-            this.circumnavigation.startAngle = newCircum.startAngle;
-            this.circumnavigation.endAngle = newCircum.endAngle;
-            this.circumnavigation.numPhotos = newCircum.numPhotos;
-            this.circumnavigation.radius = newCircum.radius;
-            this.circumnavigation.isClockwise = newCircum.isClockwise;
-            this.circumnavigation.POICard = newCircum.POICard;
-            this.circumnavigation.POIPosition = newCircum.POIPosition;
-            this.circumnavigation.waypoints = newCircum.waypoints;
-
+            // update store to save editing circumnav
+            this.$store.commit('setEditingCircumnav', this.editingCircumnav);
             this.closeModal();
         },
         cancelCircumnav() {

Apps/FrontendSoftware/src/components/Map/MapComponents/RouteManager/Forms/EditSegmentForm.vue

@@ -193,12 +193,14 @@ export default {
         },
         saveSegment() {
             // Save the CM coordinates and angle into object
-            this.segment.xCmCoordinate = this.formValues.XCOORD;
-            this.segment.yCmCoordinate = this.formValues.YCOORD;
-            this.segment.roverAngle = this.formValues.ANGLE;
+            const segmentInfo = {
+                xCmCoordinate: this.formValues.XCOORD,
+                yCmCoordinate : this.formValues.YCOORD,
+                roverAngle :this.formValues.ANGLE
+            };
 
             // Make the PX version of coords are computed too
-            GridEventBus.$emit('COMPUTE_SEG_PX_COORDS', this.segment);
+            GridEventBus.$emit('COMPUTE_SEG_PX_COORDS', segmentInfo);
             this.closeModal();
         },
         cancelSegment() {

Apps/FrontendSoftware/src/components/Map/MapComponents/RouteManager/RouteEntry.vue

@@ -365,12 +365,10 @@ export default {
                 this.$refs.routeNameInput.value = this.route.routeName.replace(/\s/g,'');
             } else {
                 // remove space in the route name before saving
-                this.route.routeName=this.route.routeName.replace(/\s/g,''),
-                this.route.routeNameDisplay=this.routeNameDisplay.replace(/\s/g,'');
                 this.$refs.routeNameInput.value = this.route.routeName.replace(/\s/g,'');
                 // Model level now updates with new route name
                 this.routeList.renameRouteName(
-                    this.route.routeName,
+                    this.route.routeName.replace(/\s/g,''),
                     this.routeNameDisplay.replace(/\s/g,'')
                 );
             }

Apps/FrontendSoftware/src/components/POI/Components/Sidemodal.vue

@@ -133,7 +133,7 @@ export default {
     props: {
         POIListEl: HTMLDivElement,
         target: HTMLDivElement,
-        header: String,
+        header: String, 
         POICard: POICard,
         type: {
             validator: function (value) {
@@ -154,7 +154,7 @@ export default {
                 return this.POICard.getData().importanceLevel;
             },
             set(newImportance) {
-                this.POICard.importanceLevel = newImportance;
+                this.$store.commit('updatePOIImportanceLevel', {POI: this.POICardInfo, newImportance: newImportance});
             }
         },
     },
@@ -178,7 +178,7 @@ export default {
             this.rightTranslation = this.POIListEl.getBoundingClientRect().width;
         },
         setTopTranslation() {
-            this.topTranslation = this.target.getBoundingClientRect().top;
+            this.topTranslation = this.target.getBoundingClientRect().top-200; // offset
         },
         setImportanceLevel(level) {
             this.importanceLevel = level;

Apps/FrontendSoftware/src/components/POI/POIList/POIEdit.vue

@@ -391,7 +391,8 @@ export default {
                 modalHistory: false,
                 modalImportance: false,
                 modalDelete: false
-            }
+            },
+            POICardInfo:POICard
         };
     },
     computed: {
@@ -400,39 +401,39 @@ export default {
                 return this.POICard.getData().description;
             },
             set(newDescription) {
-                this.POICard.description = newDescription;
+                this.POICardInfo.description = newDescription;
             }
         },
         selectedCategory: {
             get() {
                 return this.POICard.getData().category;
             },
             set(newCategory) {
-                this.$store.commit('updatePOICategory', {POI: this.POICard, newCategory: newCategory});
+                this.$store.commit('updatePOICategory', {POI: this.POICardInfo, newCategory: newCategory});
             }
         },
         width: {
             get() {
                 return this.POICard.getData().width;
             },
             set(newWidth) {
-                this.POICard.width = newWidth;
+                this.POICardInfo.width = newWidth;
             }
         },
         height: {
             get() {
                 return this.POICard.getData().height;
             },
             set(newHeight) {
-                this.POICard.height = newHeight;
+                this.POICardInfo.height = newHeight;
             }
         },
         depth: {
             get() {
                 return this.POICard.getData().depth;
             },
             set(newDepth) {
-                this.POICard.depth = newDepth;
+                this.POICardInfo.depth = newDepth;
             }
         },
         categories: function() {

Apps/FrontendSoftware/src/components/POI/store.js

@@ -1,4 +1,4 @@
-import {testPOIList} from '@/components/POI/testPOIData.js';
+import { testPOIList } from '@/components/POI/testPOIData.js';
 
 export default {
     state: {
@@ -34,20 +34,24 @@ export default {
             state.POIList.deletePOI(POI);
         },
 
-        updatePOICategory(state, {POI, newCategory}) {
+        updatePOICategory(state, { POI, newCategory }) {
             state.POIList.updatePOICategory(POI, newCategory);
-        },     
+        },
+
+        updatePOIImportanceLevel(state, { POI, newImportance }) {
+            state.POIList.updatePOICategory(POI, newImportance);
+        },
 
-        updatePOIImageSelectedId(state, {id, image}) {
+        updatePOIImageSelectedId(state, { id, image }) {
             let obj = {
                 image: image,
                 id: id
             };
             state.POIImageSelected = obj;
         },
 
-        updateTagSelected(state, {tag, id}) {
-            state.TagSelected = {tag: tag, id: id};
+        updateTagSelected(state, { tag, id }) {
+            state.TagSelected = { tag: tag, id: id };
         }
     }
 };