Add Site Icons, Improve a11y

asymworks · Dec 2, 2020 · b48c475 · b48c475
1 parent bf1d894
commit b48c475
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 5 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="manifest" href="/site.webmanifest">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
@@ -202,7 +202,12 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { mapGetters, mapState } from 'vuex';
-import { addMonths, getDaysInMonth, getDate } from 'date-fns';
+import {
+  addMonths,
+  getDaysInMonth,
+  getDate,
+  isSameMonth,
+} from 'date-fns';
 import Decimal from 'decimal.js-light';
 import { Money } from '@jadetree/currency';
 import { budgetService } from '@/api';
@@ -246,6 +251,12 @@ export default class DashboardPage extends Vue {
   private userCurrency!: string;
   /* eslint-disable lines-between-class-members */
 
+  /** Current Display Date */
+  private displayDate: Date = new Date();
+
+  /** Display Update Timer */
+  private displayTimer: number | null = null;
+
   /** Current Outflows */
   get currentMonthOutflows(): Money {
     if (!this.currentMonthData) return new Money(0);
@@ -265,9 +276,8 @@ export default class DashboardPage extends Vue {
 
   /** Percent Time Elapsed */
   get percentElapsed(): Decimal {
-    const today = new Date();
-    return new Decimal(getDate(today))
-      .div(getDaysInMonth(today))
+    return new Decimal(getDate(this.displayDate))
+      .div(getDaysInMonth(this.displayDate))
       .mul(100)
       .toDecimalPlaces(1);
   }
@@ -298,9 +308,22 @@ export default class DashboardPage extends Vue {
       .toDecimalPlaces(1);
   }
 
+  /** Start a 1min timer to update dashboard */
+  mounted() {
+    this.displayTimer = setInterval(() => { this.updateDisplay(); }, 60000);
+  }
+
+  /** Clear Update Timer */
+  beforeDestroy() {
+    if (this.displayTimer !== null) {
+      clearInterval(this.displayTimer);
+      this.displayTimer = null;
+    }
+  }
+
   /** Get the Full Category Name */
   categoryName(categoryId: number): string {
-    const date = new Date();
+    const date = this.displayDate;
     const categories = this.findCategory(categoryId);
 
     if (!categories || categories.length === 0) return '';
@@ -337,5 +360,18 @@ export default class DashboardPage extends Vue {
       new Money(0, this.userCurrency),
     );
   }
+
+  /** Update the Dashboard Display */
+  updateDisplay() {
+    const nextDate = new Date();
+    if (!isSameMonth(this.displayDate, nextDate)) {
+      console.log('changedMonth');
+      // Reload budget data for the new current month
+      const { dispatch } = this.$store;
+      dispatch('budget/loadBudgetData');
+    }
+
+    this.displayDate = nextDate;
+  }
 }
 </script>
diff --git a/src/pages/SetupPage.vue b/src/pages/SetupPage.vue
@@ -31,6 +31,7 @@
               :help="!!defaults.name
                 ? 'This field has been set by your system administrator and cannot be changed'
                 : ''"
+              autocomplete="name"
               label="Your Name"
               labelPosition="float"
               name="name"
@@ -44,6 +45,7 @@
               :help="!!defaults.email
                 ? 'This field has been set by your system administrator and cannot be changed'
                 : ''"
+              autocomplete="username"
               label="Email Address"
               labelPosition="float"
               name="email"
@@ -55,6 +57,7 @@
           <div v-if="mode && mode === 'public'" class="sm:flex sm:space-x-4 justify-between">
             <formulate-input
               :class="['w-full']"
+              autocomplete="new-password"
               label="Password"
               labelPosition="float"
               name="password"
@@ -68,6 +71,7 @@
             />
             <formulate-input
               :class="['w-full']"
+              autocomplete="new-password"
               label="Confirm Password"
               labelPosition="float"
               name="password_confirm"

diff --git a/src/store/modules/budget.module.ts b/src/store/modules/budget.module.ts
@@ -381,6 +381,9 @@ const budgetModule: Module<BudgetState, RootState> = {
   mutations: {
     clear(state: BudgetState) {
       state.budgets = [];
+      state.currentBudget = null;
+      state.currentMonthData = null;
+      state.displayMonthData = null;
     },
     collapsedGroup(state, groupId: number) {
       if (!state.collapseGroups.includes(groupId)) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}