🚸 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>