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

@@ -1,28 +1,34 @@
 .span {
-  display: inline-block;
+  position: relative;
+  display: flex;
+  flex-direction: inherit;
+  flex-wrap: nowrap;
   text-align: left;
   --background-color: darkgrey;
   --hover-background-color: grey;
   --border-color: grey;
   --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;
+  position: relative;
+  padding: 0.7rem 0.5rem 0.5rem 0.1rem;
+  white-space: nowrap;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
-  color: inherit;
   transition: all 0.2s ease-in-out;
 }
 
 .select {
-  padding: 0.5rem 0;
+  position: relative;
+  padding: 0.5rem 0.1rem;
   font-size: var(--select-font-size);
   font-weight: var(--select-font-weight);
   cursor: pointer;
@@ -34,8 +40,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/DropdownMenu/DropdownMenu.scss

@@ -0,0 +1,40 @@
+.div {
+  display: inline-block;
+  transition: all 1s ease-in-out;
+  --padding-top: 0;
+}
+
+.toggle-button {
+  position: relative;
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  padding: 0.5rem;
+  width: fit-content;
+  height: fit-content;
+}
+
+.left {
+  margin-right: auto;
+}
+
+.right {
+  margin-left: auto;
+}
+
+.icon {
+  font-size: larger;
+  font-weight: 600;
+  width: 1rem;
+  color: inherit;
+  padding: 0.4rem;
+}
+
+.inner {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  transition: all 1s ease-in-out;
+  padding-top: var(--padding-top);
+}

teleop-vue/src/components/DropdownMenu/DropdownMenu.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="div"
+    @mouseenter="mouseEnter"
+    @mouseleave="mouseLeave"
+    @mousemove="clearTimer"
+  >
+    <button
+      class="toggle-button"
+      :class="align"
+      :style="{ color: color, 'text-align': align }"
+      @click="togglePinned"
+    >
+      <span v-if="align === 'right'">{{ label }}</span>
+      <span v-show="!hidden && hoverShown && !pinnedShown" class="icon"
+        >&#x1F4CC;</span
+      >
+      <span v-show="!hidden && pinnedShown" class="icon">&#x1431;</span>
+      <span v-show="hidden" class="icon">&#x142F;</span
+      ><span v-if="align === 'left'">{{ label }}</span></button
+    ><br />
+    <div v-show="!hidden" class="inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dropdown-menu",
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    color: {
+      type: String,
+      required: false,
+      default: "#FFF",
+    },
+    align: {
+      type: String,
+      required: false,
+      default: "left",
+    },
+    hoverTimeout: {
+      type: Number,
+      required: false,
+      default: 400,
+    },
+  },
+  data() {
+    return {
+      pinnedShown: false,
+      hoverShown: false,
+      timer: null,
+    };
+  },
+  computed: {
+    hidden() {
+      return !this.pinnedShown && !this.hoverShown;
+    },
+  },
+  methods: {
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+    },
+    resetTimer(timeout) {
+      this.clearTimer();
+      this.timer = setTimeout(this.timerTimeout, timeout, timeout);
+    },
+    mouseEnter() {
+      this.hoverShown = true;
+      this.clearTimer();
+    },
+    timerTimeout(timeout) {
+      const a = document.querySelector("#div:hover");
+      if (a === null) {
+        this.hoverShown = false;
+      } else {
+        this.timer = setTimeout(this.timerTimeout, timeout, timeout);
+      }
+    },
+    mouseLeave(event) {
+      // Needed to fix a bug on Firefox where hovering above a <select> dropdown menu triggers the mouseleave event
+      if (event.relatedTarget === null) {
+        event.stopPropagation();
+        this.resetTimer(2 * this.hoverTimeout);
+      } else {
+        this.resetTimer(this.hoverTimeout);
+      }
+    },
+    togglePinned() {
+      this.pinnedShown = !this.pinnedShown;
+      this.clearTimer();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./DropdownMenu.scss";
+</style>

teleop-vue/src/components/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue";