Skip to content

about page #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
michaelni678 wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

about page #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e258372
about route, added to footer/copyright too
michaelni678 Mar 15, 2024
e03fee0
about page information
michaelni678 Mar 15, 2024
300147d
icons
michaelni678 Mar 19, 2024
3cb183c
spacing and some text
michaelni678 Mar 22, 2024
da80a13
home icon
michaelni678 Mar 26, 2024
04ca1b0
dark mode support but no button to change yet
michaelni678 Mar 26, 2024
669fd51
darkmode button
michaelni678 Mar 26, 2024
bbccd6e
separated divs temporarily for major change
michaelni678 Mar 29, 2024
e953457
map working
michaelni678 Apr 11, 2024
478d2c7
purged unnecessary code
michaelni678 Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/Copyright.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@
An RCOS project
</b-link>
<div>
<b-link @click="resetAdvMode"
:class="[{'text-black': !isDarkMode}, {'text-gray': isDarkMode}]"
class="mx-3"
to="/about"
>
<small>About</small>
</b-link>
<b-link :class="[{'text-black': !isDarkMode}, {'text-gray': isDarkMode}]"
href="https://shuttletracker.app/swiftui/"
target="_blank">
Expand Down
132 changes: 68 additions & 64 deletions src/components/Tracker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,78 +11,78 @@
style="height: 75vh"
:class="{ 'h-100': fullscreen }"
></div>

<!-- Server Status, Fullscreen Button, and Routes Legend -->
<div class="position-absolute" :class="[{'fullscreen-sidebar': fullscreen}, {'vh-100': fullscreen}, {'server-status': !fullscreen}, {'p-2': fullscreen}]">
<!-- API status -->
<Status></Status>
<!-- fullscreen button -->
<b-badge v-if="showFullScreen && showFSIcon" v-b-tooltip.hover :title="FullscreenDesc" role="button"
variant="primary" class="mr-1"
@click="toggleFullscreen(!fullscreen)">
<BIconFullscreen v-if="!fullscreen"></BIconFullscreen>
<BIconFullscreenExit v-if="fullscreen"></BIconFullscreenExit>
{{ fullscreen ? "Exit" : "Enter" }} Full-Screen Mode
</b-badge>
<b-badge @click="centerMap" v-b-tooltip.hover :title="RecentermapDesc" role="button" variant="primary">
<BIconVinyl></BIconVinyl>
</b-badge>
<!-- Routes Legend -->
<div v-if="routes.length > 0">
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div v-for="(r, i) in routes" :key="i" class="d-flex align-items-center mx-2 my-1">
<span class="mr-1 d-inline-block route-legend-marker"
:style="[{'background-color': r.colorName}]"> </span> <span
class="text-white">{{ r.name }}</span>
<div v-if="!only_map">
<!-- Server Status, Fullscreen Button, and Routes Legend -->
<div class="position-absolute" :class="[{'fullscreen-sidebar': fullscreen}, {'vh-100': fullscreen}, {'server-status': !fullscreen}, {'p-2': fullscreen}]">
<!-- API status -->
<Status></Status>
<!-- fullscreen button -->
<b-badge v-if="showFullScreen && showFSIcon" v-b-tooltip.hover :title="FullscreenDesc" role="button"
variant="primary" class="mr-1"
@click="toggleFullscreen(!fullscreen)">
<BIconFullscreen v-if="!fullscreen"></BIconFullscreen>
<BIconFullscreenExit v-if="fullscreen"></BIconFullscreenExit>
{{ fullscreen ? "Exit" : "Enter" }} Full-Screen Mode
</b-badge>
<b-badge @click="centerMap" v-b-tooltip.hover :title="RecentermapDesc" role="button" variant="primary">
<BIconVinyl></BIconVinyl>
</b-badge>
<!-- Routes Legend -->
<div v-if="routes.length > 0">
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div v-for="(r, i) in routes" :key="i" class="d-flex align-items-center mx-2 my-1">
<span class="mr-1 d-inline-block route-legend-marker"
:style="[{'background-color': r.colorName}]"> </span> <span
class="text-white">{{ r.name }}</span>
</div>
</div>
</div>
</div>
<!-- Buses Legend -->
<div v-if="busTypes.length > 0" >
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div class="legend-container" style="padding-top: 5px;">
<div v-for="(bus, index) in busTypes" :key="index" class="d-flex align-items-center mx-2 my-1">
<div class="icon-container">
<span v-if="bus.color == 'mediumseagreen'" class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-success">
<span class="position-absolute icon-text"> {{ bus.icon }}</span>
</span>
<span v-else class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-danger">
<span class="position-absolute icon-text"> {{ bus.icon }}</span>
</span>
<!-- Buses Legend -->
<div v-if="busTypes.length > 0" >
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div class="legend-container" style="padding-top: 5px;">
<div v-for="(bus, index) in busTypes" :key="index" class="d-flex align-items-center mx-2 my-1">
<div class="icon-container">
<span v-if="bus.color == 'mediumseagreen'" class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-success">
<span class="position-absolute icon-text"> {{ bus.icon }}</span>
</span>
<span v-else class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-danger">
<span class="position-absolute icon-text"> {{ bus.icon }}</span>
</span>
</div>
<span class="text-white" style="position: relative;
margin-left: -8px;
padding-bottom: 5px;">{{ bus.name }}</span>
</div>
<span class="text-white" style="position: relative;
margin-left: -8px;
padding-bottom: 5px;">{{ bus.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard Historical Bus Trace Legend -->
<div v-if="(currentBuses.length > 0) && (trace_history)">
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div v-for="(b, i) in currentBuses" :key="i" class="d-flex align-items-center mx-2 my-1">
<span class="mr-1 d-inline-block route-legend-marker"
:style="[{'background-color': trailColors[i%trailColors.length]}]"> </span> <span
class="text-white">{{ b }}</span>
<!-- Dashboard Historical Bus Trace Legend -->
<div v-if="(currentBuses.length > 0) && (trace_history)">
<div class="rounded mt-1 d-inline-block"
:class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
<div v-for="(b, i) in currentBuses" :key="i" class="d-flex align-items-center mx-2 my-1">
<span class="mr-1 d-inline-block route-legend-marker"
:style="[{'background-color': trailColors[i%trailColors.length]}]"> </span> <span
class="text-white">{{ b }}</span>
</div>
</div>
</div>
</div>
<!-- Widgets -->
<div>
<Schedule v-if="fullscreen" class="mt-3"></Schedule>
</div>
<div>
<Fullscrn_qrcode v-if="fullscreen" class="mt-3"></Fullscrn_qrcode>
<!-- Widgets -->
<div>
<Schedule v-if="fullscreen" class="mt-3"></Schedule>
</div>
<div>
<Fullscrn_qrcode v-if="fullscreen" class="mt-3"></Fullscrn_qrcode>
</div>
</div>
</div>
</div>

<!-- Announcement Bar -->
<Announcement v-if="fullscreen"></Announcement>

<!-- Announcement Bar -->
<Announcement v-if="fullscreen"></Announcement>
</div>
</div>
</fullscreen>
</div>
Expand All @@ -104,7 +104,11 @@ Vue.use(VueFullscreen);
export default {
name: "Tracker",
props: {
trace_history: Boolean
trace_history: Boolean,
only_map: {
type: Boolean,
default: false,
},
},
components: {
Status,
Expand Down
6 changes: 6 additions & 0 deletions src/router/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
import PrivacyPolicy from "../views/PrivacyPolicy";
import PageNotFound from "../views/PageNotFound";
import Dashboard from "../views/Dashboard";
import About from "../views/About";

Vue.use(VueRouter)

Expand All @@ -27,6 +28,11 @@ const routes = [
path: '*',
name: 'PageNotFound',
component: PageNotFound
},
{
path: '/about',
name: 'About',
component: About
}
]

Expand Down
91 changes: 91 additions & 0 deletions src/views/About.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<template>
<div>
<div class="container">
<div class="row">
<div class="col" style="display: flex; justify-content: space-between; align-items: center;">
<Header></Header>
<div style="display: flex; align-items: center;">
<a href="https://shuttletracker.app" style="margin-right: 10px;">
<b-icon-house-fill class="mb-1" font-scale="1.25" :style="{ color: isDarkMode ? 'white' : 'black' }" />
</a>
<div style="margin-right: 10px;">
<b-icon-sun v-if="isDarkMode" @click="toLightMode" color="white" class="mb-1" font-scale="1.25" />
<b-icon-moon v-else @click="toDarkMode" class="mb-1" font-scale="1.25" />
</div>
<a href="https://github.com/wtg/Shuttle-Tracker-Web/tree/main">
<b-icon-github class="mb-1" font-scale="1.25" :style="{ color: isDarkMode ? 'white' : 'black' }" />
</a>
</div>
</div>
</div>
<div style="display: flex; justify-content: space-between;">
<div style="width: 40%; margin-left: 20px; margin-right: 20px;">
<div style="margin-top: 15vh;" :class="{'text-white': isDarkMode}">
<h1>Simplify Your <span style="color: red;">RPI</span></h1>
<h1>Campus Commute</h1>
</div>
<div style="width: 100%;">
<div style="width:150px; display:inline-block">
<a href="https://shuttletracker.app/swiftui/">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1636675200" alt="Download on the App Store" style="margin:6%;width:88%"/>
</a>
</div>
<div style="width:167px; display:inline-block;">
<a href="https://shuttletracker.app/android/">
<img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play"/>
</a>
</div>
</div>
</div>
<div style="width: 60%; margin-left: 20px; margin-right: 20px;">
<Tracker only_map=true />
</div>
</div>
<div class="row">
<div class="col" :class="{'text-white': isDarkMode}" style="max-width: 1140px;">
<h2>About</h2>
<p>
Welcome to Shuttle Tracker, your go-to destination for
real-time RPI shuttle tracking and navigation. Our platform
is designed to make your journey around campus simpler.
</p>
</div>
</div>
</div>
</div>
</template>

<script>
import Header from "../components/Header";
import {BIconGithub, BIconHouseFill, BIconSun, BIconMoon} from 'bootstrap-vue'
import mixin from "../mixins/mixins";
import Tracker from "../components/Tracker";

export default {
name: "About",
mixins: [mixin],
components: {
Header,
BIconGithub,
BIconHouseFill,
BIconSun,
BIconMoon,
Tracker
},
methods: {
toLightMode() {
this.$store.commit('setDarkMode', false);
},
toDarkMode() {
this.$store.commit('setDarkMode', true);
}
}
}
</script>

<style scoped>
img {
max-width: 100%;
height: auto;
}
</style>