[feature] Add buttons to switch between main and field view

Author: g3force

src/App.vue

@@ -8,17 +8,20 @@
         <router-view></router-view>
 
         <ControlFlowBar id="match-controls"/>
+        <SwitchWindowBar/>
     </div>
 </template>
 
 <script>
     import MatchSettingsBar from "./components/control/MatchSettingsBar";
     import GameStateBar from './components/GameStateBar.vue'
     import ControlFlowBar from "./components/control/ControlFlowBar";
+    import SwitchWindowBar from "./components/control/SwitchWindowBar";
 
     export default {
         name: 'app',
         components: {
+            SwitchWindowBar,
             MatchSettingsBar,
             GameStateBar,
             ControlFlowBar,

src/components/AutonomousControl.vue renamed to src/components/Main.vue

@@ -14,7 +14,7 @@
     import GameEventsView from "./game-events/GameEventsView";
 
     export default {
-        name: "AutonomousControl",
+        name: "Main",
         components: {
             ManualControlView,
             TeamOverviewView,

src/components/control/SwitchWindowBar.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="switch-window-bar">
+        <b-button @click="$router.push('/')">Main</b-button>
+        <b-button @click="$router.push('/field')">Field</b-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "SwitchWindowBar"
+    }
+</script>
+
+<style scoped>
+
+    .switch-window-bar {
+        position: fixed;
+        bottom: 0;
+        text-align: left;
+        display: flex;
+        justify-content: left;
+    }
+
+</style>

src/main.js

@@ -38,8 +38,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 import VueNativeSock from 'vue-native-websocket'
 
 import './assets/css/style.css'
-import AutonomousControl from "./components/AutonomousControl";
-import ManualControlView from "./components/manual-control/ManualControlView";
+import Main from "./components/Main";
 import Field from "./components/Field";
 
 Vue.use(TimestampFormatter);
@@ -92,10 +91,8 @@ Vue.use(VueNativeSock, wsAddress, {
 });
 
 const routes = [
-    {path: '/autonomous', component: AutonomousControl},
     {path: '/field', component: Field},
-    {path: '/manual', component: ManualControlView},
-    {path: '/', component: AutonomousControl},
+    {path: '/', component: Main},
 ];
 const router = new VueRouter({
     routes