🚸 Add text if there is no entry for selected day

- Overlay if substitutions / history view is still loading
- Overlay if no substitution exists for current day
- Overlay if no history exists for current day

src/components/substitution-list.vue

@@ -2,6 +2,9 @@
 import { substitutions } from "../store";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
+import InfoCard from "./info-card.vue";
+import BellOffIcon from "./icons/bell-off-icon.vue";
+import ClockIconBig from "./icons/clock-icon-big.vue";
 
 const props = defineProps({
   date: {
@@ -15,6 +18,21 @@ const substitutionsForDate = computed(() => {
 </script>
 
 <template>
+  <InfoCard
+    v-show="typeof substitutionsForDate == 'undefined'"
+    :icon="ClockIconBig"
+    :title="$t('infoCard.titles.loading')"
+    :text="$t('infoCard.texts.loading')"
+  />
+  <InfoCard
+    v-show="
+      typeof substitutionsForDate == 'object' &&
+      substitutionsForDate.length == 0
+    "
+    :icon="BellOffIcon"
+    :title="$t('infoCard.titles.noEntries')"
+    :text="$t('infoCard.texts.noEntries')"
+  />
   <template v-for="substitution in substitutionsForDate" :key="substitution">
     <div class="substitution" :style="getSubstitutionColor(substitution)">
       <span class="hour">{{ substitution.lesson }}</span>