[refactoring] Move game event view to its own vue component

Author: g3force

src/components/AutonomousControl.vue

@@ -1,35 +1,26 @@
 <template>
     <div id="container">
-        <ManualControl class="game-controller-view"/>
-        <TeamOverview class="game-controller-view"/>
-        <Events class="game-controller-view"/>
-        <div class="game-controller-view">
-            <h2>Game Events</h2>
-            <div class="game-events">
-                <CurrentEvents/>
-                <hr>
-                <EventProposals/>
-            </div>
-        </div>
+        <ManualControl/>
+        <TeamOverview/>
+        <Events/>
+        <GameEvents/>
     </div>
 </template>
 
 <script>
     import TeamOverview from "./team/TeamOverview";
     import ControlTeam from "./manual-control/ManualControlTeam";
     import Events from "./events/Events";
-    import EventProposals from "./events/EventProposals";
-    import CurrentEvents from "./events/CurrentEvents";
     import Settings from "./settings/Settings";
     import ManualControl from "./manual-control/ManualControl";
+    import GameEvents from "./game-events/GameEvents";
 
     export default {
         name: "AutonomousControl",
         components: {
+            GameEvents,
             ManualControl,
             Settings,
-            CurrentEvents,
-            EventProposals,
             Events,
             ControlTeam,
             TeamOverview,
@@ -49,10 +40,4 @@
         flex-grow: 1;
     }
 
-    .game-events {
-        text-align: left;
-        overflow-y: auto;
-        max-height: 85vh;
-    }
-
 </style>

src/components/events/Events.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="game-controller-view">
         <h2>Game Protocol</h2>
         <EventTable :current-page="currentPage" :per-page="perPage" :events="events"/>
         <div class="event-controls-container">

src/components/events/CurrentEvents.vue renamed to src/components/game-events/CurrentEvents.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="game-controller-view">
+        <h2>Game Events</h2>
+        <div class="game-events">
+            <CurrentEvents/>
+            <hr>
+            <EventProposals/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import CurrentEvents from "./CurrentEvents";
+    import EventProposals from "./EventProposals";
+
+    export default {
+        name: "GameEvents",
+        components: {
+            EventProposals,
+            CurrentEvents
+        }
+    }
+</script>
+
+<style scoped>
+
+    .game-events {
+        text-align: left;
+        overflow-y: auto;
+        max-height: 85vh;
+    }
+
+</style>

src/components/events/EventProposals.vue renamed to src/components/game-events/EventProposals.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="game-controller-view">
         <h2>Manual Control</h2>
         <table>
             <tr>

src/components/game-events/GameEvents.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="game-controller-view">
         <h2>Team Overview</h2>
         <table>
             <tr>