Baip 143 (#50)

FE/package.json

@@ -26,7 +26,7 @@
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
     "husky": "^4.3.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.1",
     "lint-staged": "^10.4.0",
     "lodash": "^4.17.21",
     "next": "^12.1.6",
@@ -38,19 +38,19 @@
     "vue-loader": "^17.0.0",
     "vue-notification": "^1.3.20",
     "vue-router": "^3.4.3",
-    "vue2-leaflet": "^2.5.2",
+    "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",
     "vuetify": "^2.3.10",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^5.0.5",
+    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.5",
     "@vue/cli-plugin-router": "^5.0.5",
     "@vue/cli-plugin-unit-jest": "^5.0.5",
     "@vue/cli-plugin-vuex": "^5.0.5",
     "@vue/cli-service": "^5.0.5",
-    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
@@ -85,13 +85,5 @@
     "cli-service": {
       "eslint": "$eslint"
     }
-  },
-  "overrides": {
-    "eslint-loader": {
-      "eslint": "$eslint"
-    },
-    "eslint-plugin-vue": {
-      "eslint": "$eslint"
-    }
   }
 }

FE/src/code/helpers/positionHelpers.js

@@ -1,12 +1,14 @@
 export function getLatLong(position) {
-  let latLong = position.replaceAll(/[^0-9-.,]/g, "");
-  latLong = latLong.split(",");
+  const latLong = position.split(",");
   if (latLong[0] && latLong[1]) {
     return { latitude: Number(latLong[0]), longitude: Number(latLong[1]) };
   }
   if (!latLong[1] && latLong[0]) {
     return { latitude: Number(latLong[0]), longitude: 0 };
   }
+  if (!latLong[0] && latLong[1]) {
+    return { latitude: 0, longitude: Number(latLong[1]) };
+  }
   return { latitude: 0, longitude: 0 };
 }
 
@@ -18,6 +20,9 @@ export function getPositionValue(station) {
   if (latitude && !longitude) {
     return `${latitude}, 0`;
   }
+  if (!latitude && longitude) {
+    return `0, ${longitude}`;
+  }
   return `${0}, ${0}`;
 }
 

FE/src/code/helpers/validations.js

@@ -14,3 +14,25 @@ extend("station_not_equal", {
   },
   message: i18n.tc("validations.station_not_equal"),
 });
+
+extend("coordinates_validation", {
+  validate: (value) => {
+    const coordinates = value.split(/\s?,\s?/g);
+
+    if (coordinates.length !== 2) {
+      return false;
+    }
+
+    const trimmedCoordinates = coordinates.map((coord) => coord.trim());
+    const isValidCoordinate = (coord) => {
+      const floatCoord = parseFloat(coord);
+      return !Number.isNaN(floatCoord);
+    };
+
+    return (
+      trimmedCoordinates.every(isValidCoordinate) &&
+      !trimmedCoordinates.some((coord) => coord === "")
+    );
+  },
+  message: i18n.tc("validations.coordinates_incorrect_format"),
+});

FE/src/components/DashboardCard.vue

@@ -135,9 +135,11 @@ import { RoleEnum } from "../code/enums/roleEnums";
 export default {
   name: "DashCard",
   props: {
+    // eslint-disable-next-line vue/require-default-prop
     car: {
       type: Object,
     },
+    // eslint-disable-next-line vue/require-default-prop
     cars: {
       type: Array,
     },

FE/src/components/Editation/EditCarModal.vue

@@ -18,7 +18,6 @@
             :label="$t('cars.hwId')"
             :value="car.hwId"
             @input="$emit('update:car', { ...car, hwId: $event })"
-            @keydown="justNumber"
           />
         </v-col>
         <v-col cols="12" md="6">
@@ -35,7 +34,7 @@
             :label="$t('cars.carAdminPhone')"
             :value="car.carAdminPhone"
             @input="$emit('update:car', { ...car, carAdminPhone: $event })"
-            @keydown="justNumber"
+            @keypress="justNumber"
           />
         </v-col>
         <v-col cols="12" md="6">
@@ -87,7 +86,7 @@ import { OrderState } from "../../code/enums/orderEnums";
 import { justNumber } from "../../code/helpers/positionHelpers";
 
 export default {
-  name: "EditStationModal",
+  name: "EditCarModal",
   components: {
     ValidationProvider,
   },

FE/src/components/Editation/EditRouteModal.vue

@@ -25,13 +25,6 @@
         <v-col cols="12" md="12">
           <v-row>
             <v-col cols="12" md="6">
-              <!-- <v-color-picker
-                v-if="hover"
-                v-model="color"
-                elevation="0"
-                hide-inputs
-                hide-mode-switch
-              /> -->
               <v-col cols="6" md="8">
                 <v-btn justify="center" @click="isHidden = !isHidden">
                   {{ $t("routes.coordinates") }}
@@ -87,7 +80,7 @@
                       :value="positionValue(stop)"
                       hide-details
                       @input="handleChangeStopVal(index, getLatLong($event))"
-                      @keydown="justNumber"
+                      @keypress="justNumber"
                     >
                       <template #append>
                         <v-tooltip top>

FE/src/components/Editation/EditStationModal.vue

@@ -3,7 +3,7 @@
     <v-container>
       <v-row>
         <v-col cols="12" md="12">
-          <ValidationProvider v-slot="{ errors }" rules="required" :name="$t('general.name')">
+          <ValidationProvider v-slot="{ errors }" rules="required">
             <v-text-field
               :label="$t('general.name')"
               required
@@ -13,23 +13,16 @@
             />
           </ValidationProvider>
         </v-col>
-
         <v-col cols="12" md="12">
-          <v-text-field
-            :label="$t('stations.position')"
-            :value="positionValue"
-            @input="$emit('update:station', { ...station, ...getLatLong($event) })"
-            @keydown="justNumber"
-          >
-            <!-- <template v-slot:prepend>
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <v-icon small v-on="on">mdi-information-outline</v-icon>
-                </template>
-                <span>49.836409, 18.233729 nebo 49.8369683N, 18.2297383E </span>
-              </v-tooltip>
-            </template> -->
-          </v-text-field>
+          <ValidationProvider v-slot="{ errors }" rules="coordinates_validation">
+            <v-text-field
+              :label="$t('stations.position')"
+              :value="positionValue"
+              :error-messages="errors"
+              @input="$emit('update:station', { ...station, ...getLatLong($event) })"
+              @keypress="justNumber"
+            />
+          </ValidationProvider>
         </v-col>
       </v-row>
     </v-container>
@@ -45,6 +38,7 @@ export default {
   components: {
     ValidationProvider,
   },
+
   props: {
     station: {
       type: Object,
@@ -56,7 +50,6 @@ export default {
       return getPositionValue(this.station);
     },
   },
-
   methods: {
     getLatLong,
     justNumber,

FE/src/components/Map.vue

@@ -4,6 +4,7 @@
       ref="map"
       :center="center"
       :zoom="zoom"
+      :options="{ attributionControl: false }"
       class="map__container"
       @update:center="centerUpdated"
       @update:zoom="zoomUpdated"
@@ -55,9 +56,11 @@
           :lat-lngs="route.stops"
           @click="$emit('route-clicked', route)"
         >
-          <!-- <l-tooltip>{{ route.name }}</l-tooltip> -->
         </l-polyline>
       </template>
+      <v-btn class="recenter-button mr-2" fab depressed tile @click="recenterMap">
+        <v-icon color="primary">mdi-crosshairs-gps</v-icon>
+      </v-btn>
     </l-map>
   </div>
 </template>
@@ -88,7 +91,7 @@ export default {
   },
   data: () => ({
     zoom: 15,
-    center: latLng(49.8401525, 18.2302432),
+    center: undefined,
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     selectedCar: null,
     stationIcon: icon({
@@ -131,8 +134,6 @@ export default {
     },
   },
   async mounted() {
-    // const { longitude, latitude } = this.getFirstStation;
-
     try {
       const settings = JSON.parse(localStorage.getItem("mapSettings"));
       if (settings) {
@@ -143,12 +144,14 @@ export default {
     } catch (e) {
       console.error(e);
     }
-    this.stations = await stationApi.getStations();
-    this.routes = await routeApi.getRoutes(true);
-    this.center = latLng(
-      this.stations[0].latitude ?? 47.09713,
-      this.stations[0].longitude ?? 37.54337
-    );
+
+    try {
+      this.stations = await stationApi.getStations();
+      this.routes = await routeApi.getRoutes(true);
+      this.center = latLng(this.stations[0].latitude, this.stations[0].longitude);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
   },
 
   methods: {
@@ -166,6 +169,9 @@ export default {
       this.setLocalSettings({ zoom });
       this.zoom = zoom;
     },
+    recenterMap() {
+      this.center = latLng(this.stations[0].latitude, this.stations[0].longitude);
+    },
     setLocalSettings(settings) {
       const oldSettings = JSON.parse(localStorage.getItem("mapSettings"));
       localStorage.setItem(
@@ -229,5 +235,17 @@ export default {
       background-position: center !important;
     }
   }
+  .recenter-button {
+    position: absolute;
+    top: 80px;
+    left: 12px;
+    z-index: 999;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-color: #e7e7e7;
+  }
 }
 </style>

FE/src/components/TeleopCard.vue

@@ -159,7 +159,6 @@ import { GetterNames } from "../store/enums/vuexEnums";
 export default {
   name: "CarCard",
   props: {
-    // eslint-disable-next-line vue/require-default-prop
     car: {
       type: Object,
     },

FE/src/plugins/i18n/translations.js

@@ -28,7 +28,7 @@ const translations = {
       companyName: "Jméno společnosti",
       underTest: "Testovací",
       hwId: "Hardware id",
-      carAdminPhone: "Admin telefon",
+      carAdminPhone: "Telefon admina",
       carName: "Jméno auta",
     },
     settings: {
@@ -55,6 +55,16 @@ const translations = {
       editCar: "Editace auta",
       somethingWrong: "Něco se nepodařilo",
     },
+    confirmations: {
+      stationTitle: "Opravdu chcete smazat stanici",
+      stationDescription: "Opravdu chcete trvale smazat tuto stanici? Tuto akci nelze vrátit zpět",
+      routeTitle: "Opravdu chcete smazat trasu",
+      routeDescription: "Opravdu chcete trvale smazat tuto trasu? Tuto akci nelze vrátit zpět",
+      carTitle: "Opravdu chcete smazat auto",
+      carDescription: "Opravdu chcete trvale smazat toto auto? Tuto akci nelze vrátit zpět",
+      yes: "Ano",
+      no: "Ne",
+    },
     stations: {
       latitude: "Zeměpisná šířka",
       longitude: "Zeměpisná délka",
@@ -103,9 +113,9 @@ const translations = {
       count: "Počet objednávek",
       new: "Nová objednávka",
       none: "Žádná objednávka",
-      to: "Do",
+      to: "Do stanice",
       in: "v",
-      asap: "Co nejdříve",
+      asap: "co nejdříve",
     },
     notifications: {
       order: {
@@ -165,6 +175,8 @@ const translations = {
     },
     validations: {
       required: "Toto pole je povinné",
+      coordinates_incorrect_format:
+        "Toto pole je ve špatném formátu, požadovaný formát je zeměpisná šířka,zeměpisná délka",
       station_not_equal: "Stanice 'z' nemůže být stejná jako 'do'",
     },
   },
@@ -225,6 +237,19 @@ const translations = {
       editCar: "Edit car",
       somethingWrong: "Something went wrong",
     },
+    confirmations: {
+      stationTitle: "Are you sure to delete station",
+      stationDescription:
+        "Do you really want to permanently delete this station? This action cannot be undone",
+      routeTitle: "Are you sure to delete route",
+      routeDescription:
+        "Do you really want to permanently delete this route? This action cannot be undone",
+      carTitle: "Are you sure to delete car",
+      carDescription:
+        "Do you really want to permanently delete this route? This action cannot be undone",
+      yes: "Yes",
+      no: "No",
+    },
     stations: {
       latitude: "Latitude",
       longitude: "Longitude",
@@ -335,6 +360,8 @@ const translations = {
     },
     validations: {
       required: "This field is required",
+      coordinates_incorrect_format:
+        "Input is in incorrect format, it should be in format: latitude,longitude ",
       station_not_equal: "Station from can't be same as station to",
     },
   },