PLSTimer renamed PLS

- Added icon
  - Filled if data entered
  - Outline if no data entered
- Menu not working yet. (fix opening location of menu?)

frontend/src/components/PLSTimer.vue → frontend/src/components/PLS.vue

@@ -1,10 +1,26 @@
 <template>
   <div v-if="settings.enablePLS">
     <span v-if="loading">-</span>
-    <span v-else-if="matchedControllers.length > 0">
-      ( PLS: {{ sessionLength }} {{ statusSuffix }} )
+    <span v-else-if="matchedControllers.length > 0" class="text-grey" style="cursor: pointer">
+    {{ sessionLength }} {{ statusSuffix }}
     </span>
-    <span v-else>( PLS: NIL )</span>
+    <v-btn
+      icon
+      class="text-grey"
+      @click="showMenu = true"
+    >
+      <v-icon>{{ searchValue.length > 0 ? 'mdi-account' : 'mdi-account-outline' }}</v-icon>
+      <v-menu v-model="showMenu" :close-on-content-click="false">
+        <v-list class="text-grey">
+          <v-list-item @click="goOnPause">
+            <v-list-item-title>GO ON PAUSE</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="goOnPosition">
+            <v-list-item-title>GO ON POSITION</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-btn>
   </div>
 </template>
 
@@ -30,6 +46,18 @@ const statusSuffix = ref("")
 let intervalId: number | null = null
 let refreshIntervalId: number | null = null
 
+const showMenu = ref(false)
+
+function goOnPause() {
+  // Implement the logic for "Go on Pause" here
+  showMenu.value = false
+}
+
+function goOnPosition() {
+  // Implement the logic for "Go on Position" here
+  showMenu.value = false
+}
+
 // Function to fetch and filter controllers
 async function fetchSessionData() {
   if (!settings.enablePLS) {
@@ -226,4 +254,5 @@ watch([() => settings.position1, () => settings.position2], () => {
     updateSearchValue()
   }
 })
-</script>
+</script>
+

frontend/src/components/menu/MainToolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <v-btn class="text-grey" @click="showAboutDialog = true">About</v-btn>
-    <PLSTimer/>
+    <PLS/>
     <v-btn
         v-if="!fullscreen"
         type="icon"
@@ -38,7 +38,7 @@
 <script setup lang="ts">
 import Clock from "@/components/Clock.vue"
 import About from "@/components/About.vue"
-import PLSTimer from "@/components/PLSTimer.vue"
+import PLS from "@/components/PLS.vue"
 import { ref, onMounted } from "vue"
 
 const showAboutDialog = ref(false)