Add day override (#66), switch to UTDS header (#117)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "schedules",
-    "version": "2.3.1-edge.2",
+    "version": "2.3.1-edge.3",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",

src/components/NavigationBar.vue

@@ -9,7 +9,7 @@
                     </h1>
                 </router-link>
             </v-col>
-            <v-col align-self="center" cols="2" class="text-right">
+            <v-col align-self="center" cols="2" class="text-right header-icons">
                 <v-btn
                     href="https://form.typeform.com/to/g0MlHGXj"
                     target="_blank"
@@ -48,6 +48,14 @@ export default {
             mdiCommentMultipleOutline: mdiCommentMultipleOutline
         };
     },
+    created() {
+        if (this.$vuetify.breakpoint.mobile) {
+            document.documentElement.style.setProperty(
+                "--header-icons-margin-left",
+                "0px"
+            );
+        }
+    },
     mounted() {
         // Set theme
         const theme = localStorage.getItem("darkTheme");
@@ -80,6 +88,12 @@ export default {
 };
 </script>
 
+<style>
+:root {
+    --header-icons-margin-left: 8px;
+}
+</style>
+
 <style scoped>
 #navigation {
     padding: 30px 0;
@@ -94,6 +108,6 @@ export default {
 }
 
 #navigation .navigation-item {
-    margin-right: 8px;
+    margin-left: var(--header-icons-margin-left);
 }
 </style>

src/components/dialogs/ReleaseNotes.vue

@@ -1,42 +1,34 @@
 <template>
     <v-card class="mx-auto">
         <v-card-title class="mb-1">
-            <v-row align="center">
-                <v-col class="text-wrap--break">
-                    Release Notes
-                </v-col>
-                <v-col cols="2" class="text-right">
-                    <v-btn
-                        icon
-                        color="primary"
-                        href="https://github.com/hkamran80/schedules"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <v-icon v-text="mdiGithub" />
-                    </v-btn>
-                    <v-btn icon color="primary" @click="closeDialog">
-                        <v-icon v-text="mdiClose" />
-                    </v-btn>
-                </v-col>
-            </v-row>
+            Release Notes
+            <v-spacer />
+            <v-btn
+                icon
+                color="primary"
+                href="https://github.com/hkamran80/schedules"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <v-icon v-text="mdiGithub" />
+            </v-btn>
+            <v-btn icon color="primary" @click="closeDialog">
+                <v-icon v-text="mdiClose" />
+            </v-btn>
         </v-card-title>
-        <v-card-subtitle v-text="$appVersion" />
+        <v-card-subtitle v-text="version" />
         <v-card-text>
             <v-expansion-panels v-model="openPanels">
                 <v-expansion-panel
-                    v-for="(items, version) in releaseNotes"
-                    :key="version"
+                    v-for="release in releaseNotes"
+                    :key="release.version"
                 >
-                    <v-expansion-panel-header>
-                        {{ version }}
-                    </v-expansion-panel-header>
-                    <v-expansion-panel-content>
+                    <v-expansion-panel-header v-text="release.version" />
+                    <v-expansion-panel-content class="changelog">
                         <span
-                            v-for="rnItem of items"
-                            :key="rnItem"
-                            class="releasenotes-item"
-                            v-text="rnItem"
+                            v-for="change in release.changelog"
+                            :key="change"
+                            v-text="change"
                         />
                     </v-expansion-panel-content>
                 </v-expansion-panel>
@@ -46,14 +38,16 @@
 </template>
 
 <script>
-import releaseNotesJSON from "@/releaseNotes.json";
+import releaseNotesJson from "@/releaseNotes.json";
+import pkg from "../../../package.json";
 import { mdiClose, mdiGithub } from "@mdi/js";
 
 export default {
     name: "ReleaseNotes",
     data: function() {
         return {
             releaseNotes: {},
+            version: pkg.version,
             openPanels: 0,
             mdiClose: mdiClose,
             mdiGithub: mdiGithub
@@ -64,11 +58,10 @@ export default {
     },
     methods: {
         loadReleaseNotes: function() {
-            Object.keys(releaseNotesJSON)
+            this.releaseNotes = Object.entries(releaseNotesJson)
                 .reverse()
-                .forEach(versionCode => {
-                    this.releaseNotes[versionCode] =
-                        releaseNotesJSON[versionCode];
+                .map(release => {
+                    return { version: release[0], changelog: release[1] };
                 });
         },
         closeDialog: function() {
@@ -79,7 +72,7 @@ export default {
 </script>
 
 <style scoped>
-.releasenotes-item {
+.changelog span {
     display: block;
     margin-bottom: 5px;
 }

src/components/utds/UtdsHeader.vue

@@ -0,0 +1,50 @@
+<template>
+    <header class="pb-7">
+        <h2 v-text="title" v-if="!$slots.icons" />
+        <h3 v-text="subtitle" v-if="!$slots.icons" />
+
+        <v-row dense no-gutters align="center" v-if="$slots.icons">
+            <v-col>
+                <h2 v-text="title" />
+                <h3 v-text="subtitle" />
+            </v-col>
+            <v-col cols="3" class="text-right header-icons">
+                <slot name="icons" />
+            </v-col>
+        </v-row>
+    </header>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+    name: "UtdsHeader",
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        subtitle: String
+    },
+    created() {
+        if (this.$vuetify.breakpoint.mobile) {
+            document.documentElement.style.setProperty(
+                "--header-icons-margin-left",
+                "0px"
+            );
+        }
+    }
+});
+</script>
+
+<style>
+:root {
+    --header-icons-margin-left: 8px;
+}
+</style>
+
+<style scoped>
+div.header-icons * {
+    margin-left: var(--header-icons-margin-left);
+}
+</style>

src/helper-functions.js

@@ -1,3 +1,13 @@
+export const days = {
+    SUN: "Sunday",
+    MON: "Monday",
+    TUE: "Tuesday",
+    WED: "Wednesday",
+    THU: "Thursday",
+    FRI: "Friday",
+    SAT: "Saturday"
+};
+
 export function padNumber(number) {
     return Number(number < 10)
         ? "0" + Number(number).toString()
@@ -18,5 +28,24 @@ export function calculateTimeDifference(firstTime, secondTime) {
     let minutes = parseInt(seconds / 60);
     seconds = seconds % 60;
 
+    // Percentage remaining: (startTime / endTime) * 100)
+
     return [hours, minutes, seconds];
 }
+
+export function shortenedDayStringToLong(shortenedDay) {
+    return days[shortenedDay] || null;
+}
+
+export function getShortDay() {
+    return new Date()
+        .toLocaleDateString("en-us", { weekday: "short" })
+        .toUpperCase();
+}
+
+export function encodeHTML(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/"/g, "&quot;");
+}

src/main.js

@@ -6,19 +6,18 @@ import vuetify from "./plugins/vuetify";
 import VueNativeNotification from "vue-native-notification";
 import Toast from "vue-toastification";
 import "vue-toastification/dist/index.css";
+import pkg from "../package.json";
 
 // Sentry Tracking
 // import * as Sentry from "@sentry/vue";
 import { init } from "@sentry/vue";
 import { BrowserTracing } from "@sentry/tracing/dist/browser";
-const packageJson = require("../package.json");
 
 Vue.config.productionTip = false;
 
 // Vue Global Variables
 Vue.prototype.$developmentMode = process.env.NODE_ENV === "development";
 Vue.prototype.$edgeMode = process.env.VUE_APP_EDGE_MODE === "true";
-Vue.prototype.$appVersion = require("../package.json").version;
 
 Vue.use(VueNativeNotification, {
     requestOnNotify: true
@@ -35,7 +34,7 @@ if (!Vue.prototype.$developmentMode) {
         Vue,
         dsn: process.env.VUE_APP_SENTRY_DSN,
         integrations: [new BrowserTracing()],
-        release: `schedules@${packageJson.version}`,
+        release: `schedules@${pkg.version}`,
         environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
 
         // Set tracesSampleRate to 1.0 to capture 100%

src/releaseNotes.json

@@ -47,8 +47,9 @@
         "Fix the time remaining notifications naming",
         "Move notification settings to separate dialogs"
     ],
-    "2.3.1 (Edge-2)": [
+    "2.3.1 (Edge-3)": [
         "Change Umami domain to unisontech.org",
-        "Add source maps with Sentry for enhanced error logging"
+        "Add source maps with Sentry for enhanced error logging","Switch to the UTDS header",
+        "Add day override (issue #66)"
     ]
 }