From 0f0f29fcee1e53705cdfd26cad2a1ae9bd1fd0f1 Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Wed, 3 Jun 2020 20:28:48 +0100
Subject: [PATCH] Show regions for location on popup

---
 src/components/LDeviceLocationPopup.vue | 13 +++++++++++++
 src/locales/de.json                     |  3 ++-
 src/locales/en.json                     |  3 ++-
 src/locales/es.json                     |  3 ++-
 src/styles/_base.scss                   |  1 +
 src/views/Map.vue                       |  2 ++
 6 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/LDeviceLocationPopup.vue b/src/components/LDeviceLocationPopup.vue
index 4071769..a1e96fd 100644
--- a/src/components/LDeviceLocationPopup.vue
+++ b/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: {
     /**
diff --git a/src/locales/de.json b/src/locales/de.json
index 199a9be..4669439 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -29,5 +29,6 @@
   "Location": "Standort",
   "Address": "Adresse",
   "Battery": "Akku",
-  "Speed": "Geschwindigkeit"
+  "Speed": "Geschwindigkeit",
+  "Regions:": "Regionen:"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 7c020d2..3e5fd2f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -29,5 +29,6 @@
   "Location": "Location",
   "Address": "Address",
   "Battery": "Battery",
-  "Speed": "Speed"
+  "Speed": "Speed",
+  "Regions:": "Regions:"
 }
diff --git a/src/locales/es.json b/src/locales/es.json
index efa345c..0d6322f 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -29,5 +29,6 @@
   "Location": "Ubicación",
   "Address": "Dirección",
   "Battery": "Bateria",
-  "Speed": "Velocidad"
+  "Speed": "Velocidad",
+  "Regions:": "Regiones:"
 }
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 9630e4e..0a04372 100644
--- a/src/styles/_base.scss
+++ b/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;
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 00a89db..f163d71 100644
--- a/src/views/Map.vue
+++ b/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>