🚸 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/history-list.vue

@@ -3,6 +3,9 @@ import { history } from "../store";
 import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
+import InfoCard from "./info-card.vue";
+import ClockIconBig from "./icons/clock-icon-big.vue";
+import ClockOffIcon from "./icons/clock-off-icon.vue";
 
 const props = defineProps({
   date: {
@@ -22,45 +25,55 @@ const chars = {
 </script>
 
 <template>
-  <div class="history">
-    <template v-for="event in historyOfDate" :key="event">
-      <div
-        class="change"
-        :style="`background-color: var(--substitution-background-${event.type}`"
-      >
-        <span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
-        <div class="infos">
-          <!-- If the entry is a change show which values changed -->
-          <span class="text" v-if="event.type == 'change'">
-            <template v-for="(change, key) in event.change" :key="key">
-              <p>
-                {{ key }}:&nbsp;
-                <s>{{ change.before }}</s>
-                &nbsp;{{ change.after }}
-              </p>
-            </template>
+  <InfoCard
+    v-show="typeof historyOfDate == 'undefined'"
+    :icon="ClockIconBig"
+    :title="$t('infoCard.titles.loading')"
+    :text="$t('infoCard.texts.loading')"
+  />
+  <InfoCard
+    v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
+    :icon="ClockOffIcon"
+    :title="$t('infoCard.titles.noHistory')"
+    :text="$t('infoCard.texts.noHistory')"
+  />
+  <template v-for="event in historyOfDate" :key="event">
+    <div
+      class="change"
+      :style="`background-color: var(--substitution-background-${event.type}`"
+    >
+      <span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
+      <div class="infos">
+        <!-- If the entry is a change show which values changed -->
+        <span class="text" v-if="event.type == 'change'">
+          <template v-for="(change, key) in event.change" :key="key">
+            <p>
+              {{ key }}:&nbsp;
+              <s>{{ change.before }}</s>
+              &nbsp;{{ change.after }}
+            </p>
+          </template>
+        </span>
+        <!-- If the entry is an addition or deletion generate a text -->
+        <span class="text" v-else
+          >{{
+            $t(getSubstitutionText(event.change), {
+              subject: event.change.change.subject,
+              class: event.change.class.join(", "),
+              teacher: event.change.teacher,
+              new_teacher: event.change.change.teacher,
+              room: event.change.change.room,
+            })
+          }}<span class="notes" v-if="event.change.notes">
+            {{ $t("timetable.notes") }} {{ event.change.notes }}
           </span>
-          <!-- If the entry is an addition or deletion generate a text -->
-          <span class="text" v-else
-            >{{
-              $t(getSubstitutionText(event.change), {
-                subject: event.change.change.subject,
-                class: event.change.class.join(", "),
-                teacher: event.change.teacher,
-                new_teacher: event.change.change.teacher,
-                room: event.change.change.room,
-              })
-            }}<span class="notes" v-if="event.change.notes">
-              {{ $t("timetable.notes") }} {{ event.change.notes }}
-            </span>
-          </span>
-          <span class="notes">
-            {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
-          </span>
-        </div>
+        </span>
+        <span class="notes">
+          {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
+        </span>
       </div>
-    </template>
-  </div>
+    </div>
+  </template>
 </template>
 
 <style scoped>

src/components/icons/bell-off-icon.vue

@@ -0,0 +1,22 @@
+<!-- From https://github.com/feathericons/feather -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-bell-off"
+  >
+    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+    <path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
+    <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
+    <path d="M18 8a6 6 0 0 0-9.33-5"></path>
+    <line x1="1" y1="1" x2="23" y2="23"></line>
+  </svg>
+</template>

src/components/icons/clock-icon-big.vue

@@ -0,0 +1,19 @@
+<!-- From https://github.com/feathericons/feather -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-clock"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <polyline points="12 6 12 12 16 14"></polyline>
+  </svg>
+</template>

src/components/icons/clock-off-icon.vue

@@ -0,0 +1,24 @@
+<!-- From https://github.com/lucide-icons/lucide -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M6.87 6.87a8 8 0 1 0 11.26 11.26"></path>
+    <path
+      d="M19.9 14.25A7.44 7.44 0 0 0 20 13a8 8 0 0 0-8-8 7.44 7.44 0 0 0-1.25.1"
+    ></path>
+    <path d="m22 6-3-3"></path>
+    <path d="m6 19-2 2"></path>
+    <path d="m2 2 20 20"></path>
+    <path d="M4 4 2 6"></path>
+  </svg>
+</template>

src/components/info-card.vue

@@ -0,0 +1,73 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="info-card">
+    <div class="content">
+      <component :is="icon" class="icon" />
+      <span class="title">{{ $t(title) }}</span>
+      <span class="description">{{ $t(text) }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.info-card {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  margin-top: 50px;
+  width: max-content;
+  height: 50vh;
+  max-width: 100%;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  max-width: 400px;
+  padding: 30px;
+  height: inherit;
+}
+
+.icon {
+  width: 100px;
+  height: 100px;
+  stroke-width: 1px;
+  padding-bottom: 15px;
+}
+
+span {
+  word-wrap: normal;
+  text-align: center;
+}
+
+span.title {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+span.description {
+  font-weight: 300;
+}
+</style>

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>

src/strings.js

@@ -76,6 +76,18 @@ export const strings = {
         },
       },
     },
+    infoCard: {
+      titles: {
+        loading: "Loading data",
+        noEntries: "No Substitutions",
+        noHistory: "No History",
+      },
+      texts: {
+        loading: "The data for this day is still being loaded",
+        noEntries: "There are no substitutions for this day yet",
+        noHistory: "No substitutions for this day have changed yet",
+      },
+    },
   },
   de: {
     title: {
@@ -155,5 +167,18 @@ export const strings = {
         },
       },
     },
+    infoCard: {
+      titles: {
+        loading: "Läd noch",
+        noEntries: "Keine Vertretungen",
+        noHistory: "Noch keine Änderungen",
+      },
+      texts: {
+        loading: "Die Daten für diesen Tag laden noch",
+        noEntries: "Es gibt noch keine Vertretungen für diesen Tag",
+        noHistory:
+          "An den Vertretungen für diesen Tag wurde noch nichts geändert",
+      },
+    },
   },
 };