feat:#72 add footer and commit id injection

frontend/src/App.vue

@@ -18,6 +18,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
+import Footer from "./components/Footer.vue";
 import { RouteRecordName, RouterView, useRoute, useRouter } from "vue-router";
 import { useHead, useServerHead, useServerSeoMeta } from "@unhead/vue";
 import CalendarPreview from "./components/CalendarPreview.vue";
@@ -27,6 +28,7 @@ import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
 
+// Pages to be disabled for the calendar preview
 const disabledPages = [
   "room-finder",
   "faq",
@@ -116,6 +118,8 @@ if (!import.meta.env.SSR) window.addEventListener("resize", updateMobile);
       </div>
     </transition>
   </RouterView>
+  <!-- show footer with development information -->
+  <Footer />
   <!-- show CalendarPreview but only on specific router views -->
   <CalendarPreview v-if="isDisabled(route.name)" />
 

frontend/src/components/CalendarPreview.vue

@@ -80,7 +80,7 @@ const columns = computed(() => [
   </Dialog>
   <SpeedDial
     v-if="previewOn && !dialogVisible"
-    :style="{ position: 'fixed', bottom: '2rem', left: '2rem' }"
+    :style="{ position: 'fixed', bottom: '3rem', left: '2rem' }"
   >
     <template #button>
       <Button

frontend/src/components/Footer.vue

@@ -0,0 +1,92 @@
+<!--
+Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import OverlayPanel from "primevue/overlaypanel";
+const { t } = useI18n({ useScope: "global" });
+
+const commit = computed(() => ([
+  {
+    name: t("footer.commitInfo.components.frontend"),
+    value: __COMMIT_HASH__,
+  },
+  //{
+  //  name: t("footer.commitInfo.components.backend"),
+  //  value: import.meta.env.BACKEND_COMMIT_HASH || "unknown",
+  //},
+]));
+
+const commitOverlay = ref<OverlayPanel | null>(null);
+</script>
+
+<template>
+  <Menubar class="footer-bar justify-content-between flex-wrap">
+    <template #start>
+      <div class="flex align-items-stretch justify-content-center">
+        <Button 
+          severity="primary"
+          class="p-button-text p-button-sm"
+          icon="pi pi-fw pi-hashtag"
+          v-tooltip="t('footer.commitInfo.tooltip')"
+          @click="commitOverlay?.toggle($event)"
+          >
+        </Button>
+        <OverlayPanel class="overlay-panel" ref="commitOverlay" :showCloseIcon="true" :dismissable="true">
+          <div class="flex flex-column w-25rem">
+            <b>{{ t('footer.commitInfo.title') }}</b>
+            <p>{{ t('footer.commitInfo.description') }}</p>
+            <DataTable
+              id="commit-table"
+              :value="commit"
+              :paginator="false"
+              :rows="commit.length"
+              class="w-full"
+            >
+              <Column field="name" :header="t('footer.commitInfo.component')" />
+              <Column field="value" :header="t('footer.commitInfo.hash')" />
+            </DataTable>
+          </div>
+        </OverlayPanel>
+      </div>
+    </template>
+  </Menubar>
+</template>
+
+<style scoped>
+.footer-bar {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+.footer-bar > * {
+  pointer-events: auto;
+}
+
+.overlay-panel {
+  background: yellow;
+}
+</style>

frontend/src/i18n/translations/de.json

@@ -272,5 +272,17 @@
     },
     "notFound": "Nicht gefunden, wonach du suchst?",
     "contact": "Kontakt aufnehmen"
+  },
+  "footer": {
+    "commitInfo": {
+      "tooltip": "Version",
+      "title": "Version",
+      "description": "Zeigt die Commit-ID der verwendeten Frontend-Version des HTWKalenders an. Für Debbugger und Entwickler.",
+      "hash": "Commit-Hash",
+      "component": "Komponente",
+      "components":{
+        "frontend": "Frontend"
+      }
+    }
   }
 }

frontend/src/i18n/translations/en.json

@@ -272,5 +272,17 @@
     },
     "notFound": "Not finding what you're looking for?",
     "contact": "Get in touch"
+  },
+  "footer": {
+    "commitInfo": {
+      "tooltip": "application version",
+      "title": "application version",
+      "description": "Shows the commit id of the deployed frontend version of the HTWKalender. For debuggers and developers.",
+      "hash": "commit hash",
+      "component": "component",
+      "components":{
+        "frontend": "frontend"
+      }
+    }
   }
 }

frontend/src/main.ts

@@ -54,6 +54,8 @@ import ProgressSpinner from "primevue/progressspinner";
 import Checkbox from "primevue/checkbox";
 import Skeleton from "primevue/skeleton";
 import Calendar from "primevue/calendar";
+import OverlayPanel from "primevue/overlaypanel";
+import Tooltip from "primevue/tooltip";
 import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { Router } from "vue-router";
@@ -144,6 +146,8 @@ export const createApp = ViteSSG(
     app.component("Checkbox", Checkbox);
     app.component("Skeleton", Skeleton);
     app.component("Calendar", Calendar);
+    app.component("OverlayPanel", OverlayPanel);
+    app.directive("tooltip", Tooltip);
   },
 );
 

frontend/src/vite-env.d.ts

@@ -15,3 +15,6 @@
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 /// <reference types="vite/client" />
+
+// __COMMIT_HASH__ is replaced by the commit hash at build time
+declare const __COMMIT_HASH__: string;