🚸 Show infocard on loading failure

src/components/history-list.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { history } from "../store";
+import { history, loadingFailed } from "../store";
 import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
 import InfoCard from "./info-card.vue";
-import { ClockIcon, AlarmClockOffIcon } from "lucide-vue-next";
+import { ClockIcon, AlarmClockOffIcon, CloudOffIcon } from "lucide-vue-next";
 
 const props = defineProps({
   date: {
@@ -26,16 +26,25 @@ const chars = {
 <template>
   <InfoCard
     v-show="typeof historyOfDate == 'undefined'"
+    v-if="!loadingFailed"
     :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
   />
   <InfoCard
     v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
+    v-if="!loadingFailed || historyOfDate"
     :icon="AlarmClockOffIcon"
     :title="$t('infoCard.titles.noHistory')"
     :text="$t('infoCard.texts.noHistory')"
   />
+  <InfoCard
+    class="card"
+    v-if="loadingFailed && !historyOfDate"
+    :icon="CloudOffIcon"
+    :title="$t('infoCard.titles.loadingFailed')"
+    :text="$t('infoCard.texts.loadingFailed')"
+  />
   <template v-for="event in historyOfDate" :key="event">
     <div
       class="change"

src/components/info-card.vue

@@ -37,6 +37,7 @@ defineProps({
   height: 50vh;
   max-width: 100%;
   z-index: 1;
+  user-select: none;
 }
 
 .content {
@@ -45,7 +46,7 @@ defineProps({
   align-items: center;
   justify-content: center;
   gap: 3px;
-  max-width: 400px;
+  max-width: 350px;
   padding: 30px;
   height: inherit;
 }

src/components/substitution-list.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { substitutions } from "../store";
+import { substitutions, loadingFailed } from "../store";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
 import InfoCard from "./info-card.vue";
-import { BellOffIcon, ClockIcon } from "lucide-vue-next";
+import { BellOffIcon, ClockIcon, CloudOffIcon } from "lucide-vue-next";
 
 const props = defineProps({
   date: {
@@ -19,6 +19,7 @@ const substitutionsForDate = computed(() => {
 <template>
   <InfoCard
     v-show="typeof substitutionsForDate == 'undefined'"
+    v-if="!loadingFailed"
     :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
@@ -28,10 +29,18 @@ const substitutionsForDate = computed(() => {
       typeof substitutionsForDate == 'object' &&
       substitutionsForDate.length == 0
     "
+    v-if="!loadingFailed || substitutionsForDate"
     :icon="BellOffIcon"
     :title="$t('infoCard.titles.noEntries')"
     :text="$t('infoCard.texts.noEntries')"
   />
+  <InfoCard
+    class="card"
+    v-if="loadingFailed && !substitutionsForDate"
+    :icon="CloudOffIcon"
+    :title="$t('infoCard.titles.loadingFailed')"
+    :text="$t('infoCard.texts.loadingFailed')"
+  />
   <template v-for="substitution in substitutionsForDate" :key="substitution">
     <div class="substitution" :style="getSubstitutionColor(substitution)">
       <span class="hour">{{ substitution.lesson }}</span>

src/strings.js

@@ -80,12 +80,15 @@ export const strings = {
     infoCard: {
       titles: {
         loading: "Loading data",
+        loadingFailed: "Loading failed",
         noEntries: "No Substitutions",
         noHistory: "No History",
       },
       texts: {
         loading: "The data for this day is still being loaded",
         loadingTimetable: "The timetable is still being loaded",
+        loadingFailed:
+          "The data could not be loaded. Plase check your internet connection!",
         noEntries: "There are no substitutions for this day yet",
         noHistory: "No substitutions for this day have changed yet",
       },
@@ -175,12 +178,15 @@ export const strings = {
     infoCard: {
       titles: {
         loading: "Läd noch",
+        loadingFailed: "Fehler",
         noEntries: "Keine Vertretungen",
         noHistory: "Noch keine Änderungen",
       },
       texts: {
         loading: "Die Daten für diesen Tag laden noch",
         loadingTimetable: "Der Stundenplan wird noch geladen",
+        loadingFailed:
+          "Die Daten konnten nicht geladen werden. Bitte überprüfe deine Internetverbindung!",
         noEntries: "Es gibt noch keine Vertretungen für diesen Tag",
         noHistory:
           "An den Vertretungen für diesen Tag wurde noch nichts geändert",

src/views/TimetableView.vue

@@ -1,10 +1,11 @@
 <script setup>
 import TimetableSetup from "../components/timetable-setup.vue";
-import { classList, classFilter, timetable } from "../store";
+import { classList, classFilter, timetable, loadingFailed } from "../store";
 import DayCarousel from "../components/day-carousel.vue";
 import TimetableList from "../components/timetable-list.vue";
 import InfoCard from "../components/info-card.vue";
 import { ClockIcon } from "lucide-vue-next";
+import { CloudOffIcon } from "lucide-vue-next";
 </script>
 
 <template>
@@ -19,10 +20,18 @@ import { ClockIcon } from "lucide-vue-next";
   >
     <InfoCard
       class="card"
+      v-if="!loadingFailed"
       :icon="ClockIcon"
       :title="$t('infoCard.titles.loading')"
       :text="$t('infoCard.texts.loadingTimetable')"
     />
+    <InfoCard
+      class="card"
+      v-else
+      :icon="CloudOffIcon"
+      :title="$t('infoCard.titles.loadingFailed')"
+      :text="$t('infoCard.texts.loadingFailed')"
+    />
   </div>
   <DayCarousel v-show="classFilter != 'none'" :element="TimetableList" />
 </template>