Merge branch 'BristolSTA:develop' into relaxed-performance-option

.github/pull_request_template.md

@@ -0,0 +1,24 @@
+## PR Steps
+
+These steps are to ensure you correctly make a PR. _Please delete them before submitting the PR!_
+
+1. Test and lint your code locally with `yarn pr` before opening a PR to save yourself time!
+2. For almost all development, you should be targeting `develop` rather than `main`. Only releases target `main`!
+3. Give your PR a descriptive name, and prefix that name with one of the following options:
+   - `fix:` for bug fixes
+   - `feat:` for new features
+   - `repo:` for repository fixes
+   - `deps:` for dependency updates
+   - If your PR does more than one of the above, focus on the primary purpose of your PR. E.g. if you have fixed small bugs in the process of implementing a feature, use `feat:`
+4. Tag your PR! It makes it easier to know what's going on at a glance
+5. Assign yourself to make clear you're working on it
+
+## Description
+
+A clear and concise description of the changes this PR makes.
+
+## PR Links
+
+- [Example](https://www.example.com)
+
+- Resolves # (issue)

assets/styles/app.scss

@@ -1,16 +1,17 @@
-@import './_tiptap';
-@import './_swal';
-@import './_table';
-@import './_datepicker';
-@import './_misc';
+@use 'sass:string';
+@use '_tiptap';
+@use '_swal';
+@use '_table';
+@use '_datepicker';
+@use '_misc';
 @import '@fortawesome/fontawesome-svg-core/styles.css';
 
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
+    @return string.slice($string, 1, $index - 1) + $replace +
       str-replace(
-        str-slice($string, $index + str-length($search)),
+        string.slice($string, $index + string.length($search)),
         $search,
         $replace
       );
@@ -63,7 +64,7 @@
     }
     .btn-#{$color}:hover:not(.disabled):not([disabled]) {
       $hov-color: 'bg-sta-#{$color}-dark';
-      @if (str-index($color, '-light')) {
+      @if (string.index($color, '-light')) {
         $new-col: str-replace($color, '-light', '');
         $hov-color: 'bg-sta-#{$new-col}-dark';
       }

classes/Ticket.ts

@@ -54,10 +54,9 @@ export default class {
     return ticket;
   }
 
-  static dataFromQRCode(rawQRCode: string) {
+  static dataFromQRCode(rawValue: string) {
     try {
-      const result = JSON.parse(atob(rawQRCode));
-
+      const result = JSON.parse(atob(rawValue));
       return {
         bookingReference: result[0],
         ticketId: result[1]

components/layout/LayoutMaintenanceBanner.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    v-if="siteMessage && !maintenanceBannerDismissed"
+    class="antialiased bg-sta-gray-light"
+  >
+    <div class="h-2" :class="[typeConfig.accentBar]" />
+    <div class="flex gap-2 p-2 items-start justify-center text-white min-h-24">
+      <div>
+        <!-- Icon Slot -->
+        <font-awesome-icon
+          id="maintenanceBannerIcon"
+          class="rounded text-h2 p-2"
+          :class="[typeConfig.iconColour]"
+          :icon="typeConfig.icon"
+        />
+      </div>
+      <div class="max-w-6xl min-w-2/3 xl:min-w-1/2">
+        <!-- Main Information Slot -->
+        <h3 class="text-h3 md:text-h2">{{ typeConfig.titleText }}</h3>
+        <p class="pb-2 md:text-lg">
+          {{ siteMessage.message }}
+        </p>
+        <div class="pb-2">
+          <strong>{{ isOngoing ? 'Started On' : 'Starting On' }}: </strong>
+          <span>{{
+            dateFormatLocale(siteMessage.eventStart, {
+              weekday: 'long',
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric',
+              timeZoneName: 'short'
+            })
+          }}</span>
+        </div>
+        <div class="pb-2">
+          <span v-if="!siteMessage.indefiniteOverride">
+            <strong>Expected Duration:</strong>
+            {{
+              humanizeDuration(siteMessage.eventDuration * 60 * 1000, {
+                units: ['d', 'h', 'm']
+              })
+            }}
+          </span>
+          <span v-else> <strong>Duration: </strong>Ongoing</span>
+        </div>
+      </div>
+      <div>
+        <!-- Icon Slot -->
+        <UiStaButton
+          id="maintenanceBannerDismiss"
+          class="text-h2 -my-2 hover:text-sta-rouge-dark"
+          :class="['hover:' + typeConfig.iconColour]"
+          icon="circle-xmark"
+          :disabled="preventDismiss"
+          @click="dismissBanner"
+        />
+      </div>
+    </div>
+    <div class="h-2" :class="[typeConfig.accentBar]" />
+  </div>
+</template>
+
+<script>
+import cookie from 'js-cookie';
+import { UpcomingSiteMessagesDocument } from '~/graphql/codegen/operations';
+import humanizeDuration from 'humanize-duration';
+import { DateTime } from 'luxon';
+
+const typeMap = {
+  upcomingMaintenance: {
+    accentBar: 'bg-sta-orange-dark',
+    iconColour: 'text-sta-orange-dark',
+    icon: 'triangle-exclamation',
+    titleText: 'Upcoming Maintenance'
+  },
+  ongoingMaintenance: {
+    accentBar: 'bg-sta-rouge-dark',
+    iconColour: 'text-sta-rouge-dark',
+    icon: 'circle-exclamation',
+    titleText: 'Ongoing Maintenance'
+  },
+  upcomingInformation: {
+    accentBar: 'bg-sta-orange-dark',
+    iconColour: 'text-sta-orange-dark',
+    icon: 'circle-info',
+    titleText: 'Important Future Information'
+  },
+  ongoingInformation: {
+    accentBar: 'bg-sta-orange-dark',
+    iconColour: 'text-sta-orange-dark',
+    icon: 'circle-info',
+    titleText: 'Important Information'
+  },
+  upcomingAlert: {
+    accentBar: 'bg-sta-rouge-dark',
+    iconColour: 'text-sta-rouge-dark',
+    icon: 'circle-exclamation',
+    titleText: 'Urgent Future Alert'
+  },
+  ongoingAlert: {
+    accentBar: 'bg-sta-rouge-dark',
+    iconColour: 'text-sta-rouge-dark',
+    icon: 'circle-exclamation',
+    titleText: 'Urgent Alert'
+  }
+};
+
+export default {
+  name: 'LayoutMaintenanceBanner',
+  data() {
+    return {
+      maintenanceBannerDismissed: false,
+      preventDismiss: false,
+      siteMessage: null,
+      dismissedIds: [],
+      typeMap: typeMap
+    };
+  },
+  computed: {
+    isOngoing() {
+      return this.siteMessage.eventStart < DateTime.now().toISO();
+    },
+    typeConfig() {
+      // Combine type and if its ongoing (e.g. ongoingMaintenance, upcomingAlert)
+      return typeMap[
+        `${this.isOngoing ? 'ongoing' : 'upcoming'}${this.siteMessage.type.charAt(0)}${this.siteMessage.type.slice(1).toLowerCase()}`
+      ];
+    }
+  },
+  mounted() {
+    // Need to store the alert's id in the cookie to check if it's been superceded
+    this.dismissedIds = cookie.get('maintenanceBannerDismissed')
+      ? cookie.get('maintenanceBannerDismissed').split(',')
+      : [];
+    this.loadSiteMessageData();
+  },
+  methods: {
+    async loadSiteMessageData() {
+      const { data } = await this.$apollo.query({
+        query: UpcomingSiteMessagesDocument,
+        variables: {
+          now: new Date()
+        }
+      });
+
+      const siteMessages = data.siteMessages;
+      if (siteMessages) {
+        this.siteMessage = siteMessages.edges
+          .map((edge) => edge.node)
+          .filter((node) => {
+            return (
+              node.toDisplay && !this.dismissedIds.includes(String(node.id))
+            );
+          })[0];
+
+        if (this.siteMessage && this.siteMessage.dismissalPolicy === 'BANNED') {
+          this.preventDismiss = true;
+        }
+      }
+    },
+    dismissBanner() {
+      this.maintenanceBannerDismissed = true;
+      const dismissalTime = this.siteMessage.eventEnd - Date.now();
+
+      // If a cookie has already been sent, append the new id to the list, otherwise create the cookie
+      if (this.dismissedIds) {
+        this.dismissedIds.push(this.siteMessage.id);
+        cookie.set('maintenanceBannerDismissed', this.dismissedIds.join(','), {
+          expires: dismissalTime
+        });
+      } else {
+        cookie.set('maintenanceBannerDismissed', this.siteMessage.id, {
+          expires: dismissalTime
+        });
+      }
+    },
+    humanizeDuration
+  }
+};
+</script>