Added labels to the map

.github/workflows/pull-request-audit.yml

@@ -27,10 +27,13 @@ jobs:
       - name: Install system dependencies
         run: |
           sudo apt-get update
-          sudo apt-get install nodejs npm
+          sudo apt-get install nodejs npm build-essential
 
       - name: Update npm
-        run: sudo npm install -g npm@latest
+        run: |
+          npm --version
+          npm install -g npm@latest
+          npm --version
 
       - name: Install the VUE.js frontend
         working-directory: catkin_ws/src/opentera-webrtc-teleop-frontend/teleop-vue

teleop-vue/.eslintrc.js

@@ -1,31 +1,22 @@
 module.exports = {
   root: true,
   env: {
-    node: true,
+    node: true
   },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    "@vue/prettier/@typescript-eslint"
   ],
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaVersion: 2020
   },
   ignorePatterns: ["/submodules/*"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "comma-dangle": [
-      "warn",
-      {
-        arrays: "always-multiline",
-        objects: "always-multiline",
-        imports: "always-multiline",
-        exports: "always-multiline",
-        functions: "never",
-      },
-    ],
-  },
+    "prettier/prettier": "off"
+  }
 };

teleop-vue/src/components/ActionButton/ActionButton.scss

@@ -11,7 +11,7 @@
   --hover-background-color: rgb(77, 255, 77);
 }
 
-.action-button:active {
+.action-button:active:enabled {
   transform: scale(0.98);
   box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
 }

teleop-vue/src/components/DefaultTemplate/DefaultTemplate.vue

@@ -30,15 +30,15 @@ import { NavigationBar } from "@/components/NavigationBar";
 export default {
   name: "default-template",
   components: {
-    NavigationBar
+    NavigationBar,
   },
   props: {
     brand: String,
     route: String,
     client: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     ...mapGetters(["router/getSubRoutes"]),
@@ -53,16 +53,16 @@ export default {
 
     dockingStatus() {
       return this.$store.state.localClient.openteraTeleop.dockingStatus;
-    }
+    },
   },
   watch: {
     dockingStatus() {
       this.$flashMessage.show({
         status: "info",
         title: this.dockingStatus,
-        message: ""
+        message: "",
       });
-    }
+    },
   },
   async beforeMount() {
     await this.$store.dispatch("localClient/start", this.client);
@@ -86,13 +86,18 @@ export default {
             "localClient/openteraTeleop/updateDockingStatus",
             parsedMsg.status
           );
+        } else if (parsedMsg.type === "labels") {
+          this.$store.commit(
+            "localClient/openteraTeleop/updateLabels",
+            parsedMsg.labels
+          );
         }
       }
     );
   },
   unmounted() {
     this.$store.dispatch("localClient/destroy");
-  }
+  },
 };
 </script>
 

teleop-vue/src/components/Dropdown/Dropdown.scss

@@ -7,13 +7,15 @@
   --select-text-color: white;
   --select-font-size: 0.8rem;
   --select-font-weight: 400;
+  --select-width: auto;
   font-size: 0.875rem;
   font-weight: 600;
   color: white;
 }
 
 .label {
-  padding: 0.5rem 0.1rem;
+  padding: 0.7rem 0.5rem 0.5rem 0.1rem;
+  white-space: nowrap;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
@@ -34,8 +36,15 @@
   border-color: var(--border-color);
   color: var(--select-text-color);
   background-color: var(--background-color);
+  width: var(--select-width);
 }
 
 .select:hover {
   background-color: var(--hover-background-color);
 }
+
+.select:disabled {
+  background-color: gray;
+  border-color: rgb(71, 71, 71);
+  cursor: auto;
+}

teleop-vue/src/components/Dropdown/Dropdown.vue

@@ -7,6 +7,7 @@
       v-bind:name="name"
       v-bind:id="name"
       v-on:change="onChange"
+      :disabled="disabled"
     >
       <option
         v-for="opt in options"
@@ -34,17 +35,32 @@ export default {
       type: Array,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
-      recent: null,
+      recent: "",
     };
   },
   methods: {
     onChange() {
       this.$emit("changed", { new: this.$refs.select.value, old: this.recent });
       this.recent = this.$refs.select.value;
     },
+    setValue(value) {
+      this.$refs.select.value = value;
+      this.$emit("changed", { new: this.$refs.select.value, old: this.recent });
+      this.recent = this.$refs.select.value;
+    },
+  },
+  computed: {
+    value() {
+      return this.$refs.select.value;
+    },
   },
 };
 </script>

teleop-vue/src/components/ExpandableMap/ExpandableMap.scss

@@ -85,51 +85,158 @@
   z-index: 1;
 }
 
-.action-buttons {
+.map-zone {
   position: absolute;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
   top: 0;
-  right: 0;
+  left: 0;
   margin: 0.5rem;
   z-index: 2;
 }
 
-.zoom-buttons {
+.nav-zone {
   position: absolute;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   top: 0;
-  left: 0;
+  right: 0;
   margin: 0.5rem;
   z-index: 2;
 }
 
-.map-view-select {
+.action-buttons {
+  top: 0;
+  right: 0;
+}
+
+.zoom-buttons {
   position: absolute;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   top: 0;
   left: 0;
-  margin: 0.65rem 1.5rem;
-  z-index: 2;
+}
+
+.map-view-select {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  top: 0.4rem;
+  left: 1.2rem;
   --background-color: rgb(149, 131, 90);
   --border-color: rgb(88, 78, 53);
   --hover-background-color: rgb(209, 184, 125);
 }
 
+.label-select {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  top: 0;
+  right: 2.3rem;
+  --select-width: 20rem;
+  --background-color: rgb(121, 32, 121);
+  --border-color: rgb(32, 8, 32);
+  --hover-background-color: rgb(145, 59, 145);
+}
+
+.flex-rows {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.label-navigation {
+  top: 2.8rem;
+  right: 0;
+}
+
+.label-navigation-next-row {
+  top: 2.3rem;
+  right: 0;
+}
+
+.flex-cols {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
 .reset-button {
   background-color: blue;
   border-color: darkblue;
   --hover-background-color: rgb(77, 77, 255);
 }
 
+.go-button {
+  background-color: rgb(121, 32, 121);
+  border-color: rgb(32, 8, 32);
+  --hover-background-color: rgb(145, 59, 145);
+}
+
+.label-button {
+  min-width: 2.3rem;
+  font-size: larger;
+}
+
 .zoom-button {
   background-color: rgb(149, 131, 90);
   border-color: rgb(88, 78, 53);
   --hover-background-color: rgb(209, 184, 125);
   font-size: larger;
 }
+
+.crosshair {
+  cursor: crosshair;
+}
+
+.popup {
+  --inner-width: 60%;
+  --inner-height: 50%;
+}
+
+.popup-content {
+  justify-content: left;
+  text-align: left;
+  width: 100%;
+}
+
+.popup-list {
+  list-style: none;
+  display: table;
+  width: 100%;
+}
+
+.popup-list-row {
+  display: table-row;
+  width: 100%;
+}
+
+.popup-list-cell {
+  display: table-cell;
+  padding: 0 1rem 0 0;
+  justify-content: left;
+  vertical-align: top;
+  width: 20%;
+}
+
+.popup-text-field {
+  width: 100%;
+  height: 100%;
+  text-align: left;
+}
+
+.popup-textarea {
+  width: 100%;
+  height: 8rem;
+  text-align: left;
+  resize: none;
+}