Add confirmation for challenge flag

Author: g3force

src/router.ts

@@ -1,6 +1,7 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import ControlButtons from './views/ControlButtons.vue'
 import ChangeKeeper from './views/ChangeKeeper.vue'
+import ConfirmChallengeFlag from './views/ConfirmChallengeFlag.vue'
 
 const router = createRouter({
     history: createWebHistory(),
@@ -15,6 +16,11 @@ const router = createRouter({
             name: 'ChangeKeeper',
             component: ChangeKeeper
         },
+        {
+            path: '/confirm-challenge-flag',
+            name: 'ConfirmChallengeFlag',
+            component: ConfirmChallengeFlag
+        },
     ]
 })
 

src/views/ConfirmChallengeFlag.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {inject, ref} from 'vue';
+import {RemoteControlToController_Request} from '../proto/ssl_gc_rcon_remotecontrol';
+import {ApiController} from '../services/ApiController';
+import router from '../router';
+
+const api = inject<ApiController>('api')
+
+const requestChallengeFlag = () => {
+  api?.Send({
+    msg: {
+      $case: 'request',
+      request: RemoteControlToController_Request.CHALLENGE_FLAG
+    }
+  })
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="num-pad">
+    <button
+      class="button red"
+      @click="router.push('/')"
+    >
+      Cancel
+    </button>
+    <button
+      class="button green"
+      @click="requestChallengeFlag"
+    >
+      Confirm
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.num-pad {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1em 1em;
+  padding: 1em;
+  height: 100%;
+  box-sizing: border-box;
+}
+</style>

src/views/ControlButtons.vue

@@ -23,12 +23,7 @@ const emergencyStopRequested = computed(() => state.value.activeRequests.include
 const timeoutRequested = computed(() => state.value.activeRequests.includes(RemoteControlRequestType.TIMEOUT))
 const robotSubstitutionRequested = computed(() => state.value.activeRequests.includes(RemoteControlRequestType.ROBOT_SUBSTITUTION))
 
-const requestChallengeFlag = () => api?.Send({
-  msg: {
-    $case: 'request',
-    request: RemoteControlToController_Request.CHALLENGE_FLAG
-  }
-})
+const requestChallengeFlag = () => router.push('/confirm-challenge-flag')
 const requestEmergencyStop = (request: boolean) => api?.Send({
   msg: {
     $case: 'requestEmergencyStop',