Some better API error handling on pages (#8)

Travigo · Aug 15, 2022 · 8345031 · 8345031
1 parent bf74e32
commit 8345031
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -70,7 +70,12 @@ export default {
           <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
             <router-link :to="{ path: '/' }">
               <div class="flex-shrink-0 text-white text-2xl tracking-wider">
-                <span class="text-unionjack-red">Brit</span><span class="text-unionjack-blue dark:text-blue-600">Bus</span>
+                <span class="text-unionjack-red">
+                  <span class="dark:text-red-400">Brit</span>
+                </span>
+                <span class="text-unionjack-blue">
+                  <span class="dark:text-blue-400">Bus</span>
+                </span>
                 <span v-if="this.isDev" class="text-xs font-semibold inline-block px-2 uppercase rounded text-red-600">
                   Dev
                 </span>

diff --git a/src/components/Alert.vue b/src/components/Alert.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="p-4 mb-4 text-sm" v-bind:class="typeClasses[type]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      default: 'info'
+    }
+  },
+  data () {
+    return {
+      typeClasses: {
+        'info': 'text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800',
+        'success': 'text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800',
+        'warning': 'text-yellow-700 bg-yellow-100 rounded-lg dark:bg-yellow-200 dark:text-yellow-800',
+        'error': 'text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/Journeys/View.vue b/src/views/Journeys/View.vue
@@ -1,4 +1,5 @@
 <template>
+  <Alert type="error" class="mt-4" v-if="error !== undefined">{{ error }}</Alert>
   <div v-if="loading">Loading...</div>
   <div v-else class="h-full">
     <Page-Title>
@@ -195,6 +196,7 @@
 import PageTitle from "@/components/PageTitle.vue"
 import Card from "@/components/Card.vue"
 import NavTabBar from "@/components/NavTabBar.vue"
+import Alert from "@/components/Alert.vue"
 import axios from "axios"
 import API from "@/API"
 import Pretty from "@/pretty"
@@ -206,7 +208,7 @@ export default {
       journeyPoints: null,
 
       loading: true,
-      error: null,
+      error: undefined,
 
       pretty: Pretty,
 
@@ -237,7 +239,8 @@ export default {
   components: {
     PageTitle,
     Card,
-    NavTabBar
+    NavTabBar,
+    Alert
   },
   methods: {
     mapLoaded(map) {

diff --git a/src/views/Operators/View.vue b/src/views/Operators/View.vue
@@ -1,7 +1,5 @@
 <template>
-  <div v-if="error">
-    {{ error }}
-  </div>
+  <Alert type="error" class="mt-4" v-if="error !== undefined">{{ error }}</Alert>
   <div v-if="loading">Loading...</div>
   <div v-else class="h-full">
     <PageTitle class="pb-0 md:pb-0 lg:pb-0">
@@ -28,6 +26,7 @@
 <script>
 import PageTitle from '@/components/PageTitle.vue'
 import Card from '@/components/Card.vue'
+import Alert from '@/components/Alert.vue'
 import NavTabBar from '@/components/NavTabBar.vue'
 import OperatorOverview from '@/components/Operators/Overview.vue'
 import OperatorServices from '@/components/Operators/Services.vue'
@@ -40,7 +39,7 @@ export default {
     return {
       operator: null,
       loading: true,
-      error: null,
+      error: undefined,
 
       defaultTab: 'overview',
       currentTab: null,
@@ -65,7 +64,8 @@ export default {
     Card,
     NavTabBar,
     OperatorOverview,
-    OperatorServices
+    OperatorServices,
+    Alert
   },
   methods: {
     changeTab(newTab) {

diff --git a/src/views/Operators/View_Group.vue b/src/views/Operators/View_Group.vue
@@ -1,4 +1,5 @@
 <template>
+  <Alert type="error" class="mt-4" v-if="error !== undefined">{{ error }}</Alert>
   <div v-if="loading">Loading...</div>
   <div v-else class="h-full">
     <PageTitle>
@@ -15,23 +16,22 @@
 <script>
 import PageTitle from '@/components/PageTitle.vue'
 import Card from '@/components/Card.vue'
+import Alert from '@/components/Alert.vue'
 import axios from 'axios'
 import API from '@/API'
 
-import { latLng } from 'leaflet';
-import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from '@vue-leaflet/vue-leaflet';
-
 export default {
   data () {
     return {
-      group: null,
+      group: undefined,
       loading: true,
-      error: null,
+      error: undefined,
     }
   },
   components: {
     PageTitle,
-    Card
+    Card,
+    Alert
   },
   methods: {
     getOperatorGroup() {

diff --git a/src/views/Stops/View.vue b/src/views/Stops/View.vue
@@ -1,4 +1,5 @@
 <template>
+  <Alert type="error" class="mt-4" v-if="error !== undefined">{{ error }}</Alert>
   <div v-if="loadingStop">Loading...</div>
   <div v-else class="h-full">
     <PageTitle>
@@ -102,6 +103,7 @@
 import PageTitle from '@/components/PageTitle.vue'
 import Card from '@/components/Card.vue'
 import ServiceIcon from '@/components/ServiceIcon.vue'
+import Alert from '@/components/Alert.vue'
 import axios from 'axios'
 import API from '@/API'
 import Pretty from '@/pretty'
@@ -117,7 +119,7 @@ export default {
       departures: null,
       loadingDepartures: true,
 
-      error: null,
+      error: undefined,
 
       zoom: 13,
       center: [0.1356, 52.2065],
@@ -130,6 +132,7 @@ export default {
     PageTitle,
     Card,
     ServiceIcon,
+    Alert,
   },
   methods: {
     getStop() {