TV Panel Scaffold

README.md

@@ -49,6 +49,7 @@ More project documentation can be found on the [Repository Wiki](https://github.
 12. Run `npm install`
 13. Build the frontend using `npx vue-cli-service build --mode development`
     - _Note: if you are working on the frontend, you may instead use `npx vue-cli-service build --mode development --watch` in another terminal to continuously watch for changes and rebuild._
+    - _Note 2: if you are running the newest version of macOS and see an error involving 64-bit support, try using node version 10.16.3._
 14. Go back up to the project root directory and build Shuttle Tracker by running `go build -o shuttletracker ./cmd/shuttletracker`
 15. Start the app by running `./shuttletracker`
 16. Add yourself as an administrator by using `./shuttletracker admins --add RCS_ID`, replacing `RCS_ID` with your RCS ID. See the "Administrators" section below for more information.

api/api.go

@@ -122,6 +122,9 @@ func New(cfg Config, ms shuttletracker.ModelService, msg shuttletracker.MessageS
 		})
 	})
 
+	// TV panel display 
+	r.Get("/tvpanel", api.IndexHandler)
+
 	// Fusion
 	r.Mount("/fusion", api.fm.router(cli.casauth))
 

frontend/package.json

@@ -16,8 +16,10 @@
     "@types/leaflet-routing-machine": "^3.2.1",
     "@types/webpack-env": "^1.13.9",
     "ajv": "^6.5.4",
+    "axios": "^0.19.0",
     "buefy": "^0.7.2",
     "bulma": "^0.7.2",
+    "http": "0.0.0",
     "leaflet": "^1.3.4",
     "leaflet-rotatedmarker": "^0.2.0",
     "leaflet-routing-machine": "^3.2.12",

frontend/src/App.vue

@@ -5,23 +5,18 @@
         <router-view id="router-view"></router-view>
       </keep-alive>
     </div>
-    <tab-bar></tab-bar>   
   </div>
 </template>
 
 
 <script lang="ts">
 import Vue from 'vue';
-import TabBar from '@/components/tabBar.vue';
 import UserLocationService from '@/structures/userlocation.service';
 
 UserLocationService.getInstance();
 
 export default Vue.extend({
   name: 'app',
-  components: {
-    TabBar,
-  },
 });
 </script>
 <style lang="scss">

frontend/src/components/Public.vue

@@ -14,6 +14,7 @@
     </span>
     <bus-button id="busbutton" v-on:bus-click="busClicked()" v-if="busButtonActive" />
     <eta-message v-bind:eta-info="currentETAInfo" v-bind:show="shouldShowETAMessage"></eta-message>
+    <tab-bar></tab-bar>
   </div>
 </template>
 
@@ -36,6 +37,7 @@ import UserLocationService from '@/structures/userlocation.service';
 import BusButton from '@/components/busbutton.vue';
 import AdminMessageUpdate from '@/structures/adminMessageUpdate';
 import ETAMessage from '@/components/etaMessage.vue';
+import TabBar from './tabBar.vue';
 
 const UserSVG = require('@/assets/user.svg') as string;
 
@@ -360,6 +362,7 @@ export default Vue.extend({
     messagebox,
     BusButton,
     etaMessage: ETAMessage,
+    tabBar: TabBar,
   },
 });
 </script>

frontend/src/components/adminmessage.vue

@@ -32,7 +32,7 @@ export default Vue.extend({
   overflow-y: auto;
   position: relative;
   z-index: 0;
-  bottom: 0px;
+  bottom: 40px;
   left: 0;
   right: 0;
   padding: 10px 30px 10px 15px; /* leave some space for the close button */

frontend/src/components/tabBar.vue

@@ -84,4 +84,9 @@ li {
   border-top: 1px solid $primary;
   color: $primary;
 }
+github-link {
+  position: absolute;
+  height: 65%;
+  width: 65%;
+}
 </style>

frontend/src/components/tvpanel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Header />
+    <Map />
+    <div id="right-panel">
+      <TimeDisplay />
+      <ETAs />
+      <News />
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import Vue from 'vue';
+import Map from './tvpanel/Map.vue';
+import Header from './tvpanel/Header.vue';
+import News from './tvpanel/News.vue';
+import ETAs from './tvpanel/ETAs.vue';
+import TimeDisplay from './tvpanel/TimeDisplay.vue';
+import Fusion from '@/fusion';
+import messagebox from './adminmessage.vue';
+import AdminMessageUpdate from '../structures/adminMessageUpdate';
+import UserLocationService from '../structures/userlocation.service';
+import { Stop, StopSVG } from '../structures/stop';
+import ETA from '../structures/eta';
+import Route from '../structures/route';
+export default Vue.extend({
+  name: 'tvpanel',
+  data() {
+    return{
+      fusion: new Fusion(),
+    } as {
+      fusion: Fusion;
+    };
+  },
+  mounted() {
+    this.fusion.start();
+  },
+  components: {
+    Map,
+    Header,
+    News,
+    ETAs,
+    TimeDisplay,
+  },
+});
+</script>
+
+<style lang='scss'>
+
+#view-wrapper {
+  height: 100%;
+}
+
+#right-panel {
+  position: absolute;
+  right: 0px;
+  height: 100%;
+  width: 25%;
+}
+
+</style>

frontend/src/components/tvpanel/ETAs.vue

@@ -0,0 +1,127 @@
+<template>
+  <div id="etas">
+    <div id="title">ETAs</div>
+      <div id="upcoming">
+        <ul id="queue">
+          <li>West Shuttle - XX:XX</li>
+          <li>East Shuttle - XX:XX</li>
+          <li>East Shuttle - XX:XX</li>
+          <li>West Shuttle - XX:XX</li>
+        </ul>
+      </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+// This component is the ETAs component for the tv panel
+import Vue from 'vue';
+import ETA from '@/structures/eta';
+import axios from 'axios';
+
+export default Vue.extend({
+  props: ['etaInfo', 'show'],
+  data() {
+     return {
+        etas: [],
+     };
+  },
+  computed: {
+    message(): string | null {
+      if (this.etaInfo === null) {
+          return null;
+      }
+      const now = new Date();
+
+      let newMessage = `${this.etaInfo.route.name} shuttle arriving at ${this.etaInfo.stop.name}`;
+      // more than 1 min 30 sec?
+      if (this.etaInfo.eta.eta.getTime() - now.getTime() > 1.5 * 60 * 1000 && !this.etaInfo.eta.arriving) {
+        newMessage += ` in ${relativeTime(now, this.etaInfo.eta.eta)}`;
+      }
+      if (newMessage.substring(newMessage.length - 1) !== '.') {
+        newMessage += '.';
+      }
+
+      return newMessage;
+    },
+  },
+  methods: {
+    changeTextColor() {
+      /* Change the color of the text depending on if the
+        display is for the East or West shuttle */
+      const liElems = document.getElementsByTagName('li');
+      for (let i = 0; i < liElems.length; i++) {
+        const etaText = liElems[i].innerHTML;
+        const subStr = etaText.substring(0, 4);
+        liElems[i].style.fontWeight = 'bold';
+        if (subStr === 'West') {
+          liElems[i].style.color = '#0080FF';
+        }
+        if (subStr === 'East') {
+          liElems[i].style.color = '#71922b';
+        }
+      }
+    },
+    retrieveEtaData() {
+      axios.get('https://shuttles.rpi.edu/eta', {
+              headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': 'application/json',
+                'mode': 'no-cors',
+              },
+              })
+      .then((res) => console.log(res.data));
+
+   },
+  },
+  // Allow this function to be called on page load
+  mounted() {
+    this.changeTextColor();
+    this.retrieveEtaData();
+  },
+});
+
+function relativeTime(from: Date, to: Date): string {
+  const minuteMs = 60 * 1000;
+  const elapsed = to.getTime() - from.getTime();
+
+  // cap display at thirty min
+  if (elapsed < minuteMs * 30) {
+    return `${Math.round(elapsed / minuteMs)} minutes`;
+  }
+
+  return 'a while';
+}
+
+</script>
+
+<style lang="scss" scoped>
+  #etas {
+    height: 45%;
+    width: 100%;
+    text-align: center;
+    border-top: 3px solid #F8F8F8;
+    position: relative;
+    top: 10%;
+  }
+  #title {
+    margin-top: 20px;
+    font-size: 50px;
+    display: inline-block;
+    border-bottom: 2px solid #4c4c4c;
+  }
+  li {
+  border: 1px solid rgb(228, 228, 228);
+  border-radius: 3px;
+  font-size: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+// West color = #0080FF
+// Weekend late night color = #9b59b6
+// East inclement weather color = #ff9900
+// West inclement weather color = #FF0
+// East color = #96C03A
+
+
+</style>