Show regions for location on popup

src/components/LDeviceLocationPopup.vue

@@ -35,6 +35,10 @@
         </li>
       </ul>
     </div>
+    <div v-if="regions.length" class="regions">
+      {{ $t("Regions:") }}
+      {{ regions.join(", ") }}
+    </div>
   </LPopup>
 </template>
 
@@ -56,6 +60,11 @@
     margin-right: 20px;
   }
 }
+.regions {
+  border-top: 1px solid var(--color-separator);
+  margin-top: 15px;
+  padding-top: 15px;
+}
 </style>
 
 <script>
@@ -123,6 +132,10 @@ export default {
       type: Number,
       default: null,
     },
+    regions: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     /**

src/locales/de.json

@@ -29,5 +29,6 @@
   "Location": "Standort",
   "Address": "Adresse",
   "Battery": "Akku",
-  "Speed": "Geschwindigkeit"
+  "Speed": "Geschwindigkeit",
+  "Regions:": "Regionen:"
 }

src/locales/en.json

@@ -29,5 +29,6 @@
   "Location": "Location",
   "Address": "Address",
   "Battery": "Battery",
-  "Speed": "Speed"
+  "Speed": "Speed",
+  "Regions:": "Regions:"
 }

src/locales/es.json

@@ -29,5 +29,6 @@
   "Location": "Ubicación",
   "Address": "Dirección",
   "Battery": "Bateria",
-  "Speed": "Velocidad"
+  "Speed": "Velocidad",
+  "Regions:": "Regiones:"
 }

src/styles/_base.scss

@@ -9,6 +9,7 @@
   --color-background: #fff;
   --color-primary: #3f51b5;
   --color-primary-text: #fff;
+  --color-separator: #ddd;
   --drop-shadow: drop-shadow(0 10px 10px rgb(0, 0, 0, 0.2));
   --dropdown-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23333%22%20fill-opacity%3D%221%22%20stroke%3D%22none%22%20d%3D%22M0%2C0%20L0%2C0%20L1%2C0%20L1%2C6%20L7%2C6%20L7%2C7%20L0%2C7%20z%22%20transform%3D%22rotate(-45%205%200)%22%20%2F%3E%3C%2Fsvg%3E");
   --pin-width: 32px;

src/views/Map.vue

@@ -50,6 +50,7 @@
           :alt="l.alt"
           :battery="l.batt"
           :speed="l.vel"
+          :regions="l.inregions"
         />
       </LMarker>
     </template>
@@ -87,6 +88,7 @@
               :alt="l.alt"
               :battery="l.batt"
               :speed="l.vel"
+              :regions="l.inregions"
             ></LDeviceLocationPopup>
           </LCircleMarker>
         </template>