Apply TypeScript rules for Vue code; use official nuxt/eslint package

components/GenerateMap.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -7,16 +7,21 @@ import MapSidebar from "@/components/GenerateMap/MapSidebar.vue";
 import MapNavigation from "@/components/GenerateMap/MapNavigation.vue";
 import MapCanvas from "@/components/GenerateMap/MapCanvas.vue";
 
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+import type {
+  AvailableMapStyles,
+  FormData,
+  UpdateMapParams,
+} from "@/types/types";
+
 const { t } = useI18n();
 
-const props = defineProps({
-  availableMapStyles: Array,
-  mapboxAccessToken: String,
-  mapLatitude: Number,
-  mapLongitude: Number,
-  mapZoom: Number,
-});
+const props = defineProps<{
+  availableMapStyles: AvailableMapStyles;
+  mapboxAccessToken: string;
+  mapLatitude: number;
+  mapLongitude: number;
+  mapZoom: number;
+}>();
 
 const router = useRouter();
 
@@ -30,40 +35,41 @@ const selectedZoom = ref(props.mapZoom);
 const showModal = ref(false);
 
 const emit = defineEmits(["updateMapParams", "handleMapRequest"]);
-const updateMapParams = (updateObj) => {
-  let { param, value } = updateObj;
+const updateMapParams = (updateObj: UpdateMapParams) => {
+  const { param } = updateObj;
+  let { value } = updateObj;
 
   if (typeof value === "number") {
     value = parseFloat(value.toFixed(6));
   }
 
   if (param === "OsmEnabled") {
-    osmEnabled.value = value;
+    osmEnabled.value = value as boolean;
   } else if (param === "AccessToken") {
-    localMapboxAccessToken.value = value;
+    localMapboxAccessToken.value = value as string;
   } else {
     switch (param) {
       case "Bounds":
-        selectedBounds.value = value;
+        selectedBounds.value = value as string;
         break;
       case "Latitude":
-        selectedLatitude.value = value;
+        selectedLatitude.value = value as number;
         break;
       case "Longitude":
-        selectedLongitude.value = value;
+        selectedLongitude.value = value as number;
         break;
       case "Style":
-        selectedStyle.value = value;
+        selectedStyle.value = value as string;
         osmEnabled.value = false;
         emit("updateMapParams", { param: "OsmEnabled", value: false });
         break;
       case "Zoom":
-        selectedZoom.value = value;
+        selectedZoom.value = value as number;
         break;
     }
   }
 };
-const handleFormSubmit = (formData) => {
+const handleFormSubmit = (formData: FormData) => {
   emit("handleMapRequest", formData);
   showModal.value = true;
   setTimeout(() => {
@@ -78,15 +84,16 @@ const handleFormSubmit = (formData) => {
       :available-map-styles="props.availableMapStyles"
       :map-bounds="selectedBounds"
       :map-style="selectedStyle"
+      :mapbox-access-token="localMapboxAccessToken"
       :osm-enabled="osmEnabled"
-      @formSubmitted="handleFormSubmit"
-      @updateMapParams="updateMapParams"
+      @form-submitted="handleFormSubmit"
+      @update-map-params="updateMapParams"
     />
     <MapNavigation
       :map-latitude="selectedLatitude"
       :map-longitude="selectedLongitude"
       :map-zoom="selectedZoom"
-      @updateMapParams="updateMapParams"
+      @update-map-params="updateMapParams"
     />
     <MapCanvas
       :mapbox-access-token="localMapboxAccessToken"
@@ -95,11 +102,11 @@ const handleFormSubmit = (formData) => {
       :map-style="selectedStyle"
       :map-zoom="selectedZoom"
       :osm-enabled="osmEnabled"
-      @updateMapParams="updateMapParams"
+      @update-map-params="updateMapParams"
     />
     <div v-if="showModal" class="overlay"></div>
     <div v-if="showModal" class="modal">
-      {{ $t("offlineMapRequestSubmitted") }}!
+      {{ t("offlineMapRequestSubmitted") }}!
     </div>
   </div>
 </template>

components/GenerateMap/MapCanvas.vue

@@ -1,35 +1,60 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 import { useI18n } from "vue-i18n";
 
 import mapboxgl from "mapbox-gl";
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
+// @ts-expect-error; no types available
 import DrawRectangle from "mapbox-gl-draw-rectangle-mode";
 
 import "mapbox-gl/dist/mapbox-gl.css";
 import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 
+import type { DrawEvent, Coordinate, LonLat } from "@/types/types";
+
 const { t } = useI18n();
 
 const props = defineProps({
-  mapboxAccessToken: String,
-  mapLatitude: Number,
-  mapLongitude: Number,
-  mapStyle: String,
-  mapZoom: Number,
-  osmEnabled: Boolean,
+  mapboxAccessToken: {
+    type: String,
+    default: "",
+  },
+  mapLatitude: {
+    type: Number,
+    default: -15,
+  },
+  mapLongitude: {
+    type: Number,
+    default: 0,
+  },
+  mapStyle: {
+    type: String,
+    default: "mapbox://styles/mapbox/satellite-streets-v12",
+  },
+  mapZoom: {
+    type: Number,
+    default: 2.5,
+  },
+  osmEnabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const map = ref(null);
+const map = ref();
 const mapLoaded = ref(false);
-const draw = ref(null);
+const draw = ref();
 const selectedLatitude = ref(props.mapLatitude);
 const selectedLongitude = ref(props.mapLongitude);
 const selectedZoom = ref(props.mapZoom);
 
 const emit = defineEmits(["updateMapParams"]);
 
 onMounted(() => {
+  if (!props.mapboxAccessToken) {
+    console.error("Mapbox access token is required to render the map.");
+    return;
+  }
   mapboxgl.accessToken = props.mapboxAccessToken;
 
   map.value = new mapboxgl.Map({
@@ -66,9 +91,9 @@ onMounted(() => {
       }
     });
 
-    map.value.on("draw.create", (e) => {
+    map.value.on("draw.create", (e: DrawEvent) => {
       const bbox = e.features[0].geometry.coordinates[0];
-      const bounds = bbox.map((coord) => {
+      const bounds = bbox.map((coord: LonLat) => {
         return {
           lat: coord[1],
           lng: coord[0],
@@ -120,7 +145,7 @@ onMounted(() => {
   });
 });
 
-const getWSENstring = (bounds) => {
+const getWSENstring = (bounds: Coordinate[]) => {
   if (bounds.length === 0) {
     return t("noCoordinatesProvided");
   }
@@ -130,7 +155,7 @@ const getWSENstring = (bounds) => {
   let minLng = bounds[0].lng;
   let maxLng = bounds[0].lng;
 
-  bounds.forEach((coord) => {
+  bounds.forEach((coord: Coordinate) => {
     if (coord.lat < minLat) minLat = coord.lat;
     if (coord.lat > maxLat) maxLat = coord.lat;
     if (coord.lng < minLng) minLng = coord.lng;
@@ -199,8 +224,8 @@ const removeOSMLayers = () => {
   }
 };
 
-const setMapStyle = (newVal) => {
-  if (map.value) {
+const setMapStyle = (newVal: string) => {
+  if (map.value && props.mapboxAccessToken) {
     mapboxgl.accessToken = props.mapboxAccessToken;
     map.value.setStyle(newVal);
   }
@@ -224,8 +249,8 @@ watch(
 );
 watch(
   () => props.mapStyle,
-  (newVal) => {
-    setMapStyle(newVal);
+  (newVal?: string) => {
+    if (newVal) setMapStyle(newVal);
   },
 );
 watch(

components/GenerateMap/MapNavigation.vue

@@ -1,16 +1,24 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import VueSlider from "vue-3-slider-component";
 
 const props = defineProps({
-  mapLatitude: Number,
-  mapLongitude: Number,
-  mapZoom: Number,
+  mapLatitude: {
+    type: Number,
+    default: -15,
+  },
+  mapLongitude: {
+    type: Number,
+    default: 0,
+  },
+  mapZoom: {
+    type: Number,
+    default: 2.5,
+  },
 });
 
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 const { t } = useI18n();
 
 const emit = defineEmits(["updateMapParams"]);
@@ -63,11 +71,11 @@ watch(
 <template>
   <div class="map-navigation">
     <h2 class="text-xl font-bold text-gray-800 mb-2">
-      {{ $t("mapControls") }}
+      {{ t("mapControls") }}
     </h2>
     <div class="form-group">
       <label
-        >{{ $t("zoomLevel") }} (0 - 16)
+        >{{ t("zoomLevel") }} (0 - 16)
         <span class="text-red-600">*</span></label
       >
       <vue-slider
@@ -78,30 +86,30 @@ watch(
         :tooltip="'always'"
         :height="6"
         class="slider"
-      ></vue-slider>
+      />
     </div>
 
     <div class="form-group flex">
       <div class="flex-grow mr-2">
-        <label for="centerLat">{{ $t("centerLat") }}</label>
+        <label for="centerLat">{{ t("centerLat") }}</label>
         <input
-          type="number"
-          step="0.000001"
           id="selectedLatitude"
           v-model.number="form.selectedLatitude"
+          type="number"
+          step="0.000001"
           required
           :min="-90"
           :max="90"
           class="input-field"
         />
       </div>
       <div class="flex-grow">
-        <label for="centerLng">{{ $t("centerLong") }}</label>
+        <label for="centerLng">{{ t("centerLong") }}</label>
         <input
-          type="number"
-          step="0.000001"
           id="selectedLongitude"
           v-model.number="form.selectedLongitude"
+          type="number"
+          step="0.000001"
           required
           :min="-180"
           :max="180"