feat:#72 add footer and commit id injection

.gitignore

@@ -5,3 +5,4 @@ workspace.xml
 **/.idea/
 .sass-cache/
 /services/pb_data/
+.env

charts/ci-build-deploy.yml

@@ -17,6 +17,7 @@
       docker build --pull \
       -t $IMAGE_TAG \
       -f $DOCKERFILE \
+      --build-arg COMMIT_HASH=$CI_COMMIT_SHORT_SHA \
       --target $BUILD_TARGET \
       $BUILD_PATH
     - docker push "$IMAGE_TAG"

docker-compose.yml

@@ -43,6 +43,8 @@ services:
       dockerfile: Dockerfile
       context: ./frontend
       target: prod
+      args:
+        - COMMIT_HASH=${COMMIT_HASH}
     # open port 8000
     ports:
       - "8000:8000"

frontend/Dockerfile

@@ -17,17 +17,25 @@
 # build stage
 FROM docker.io/node:lts-alpine AS build
 
+ARG COMMIT_HASH
+ENV COMMIT_HASH=$COMMIT_HASH
+
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 COPY / ./
+RUN echo "COMMIT_HASH=$COMMIT_HASH" >> .env.commit
 RUN npm run build
 
 # development stage
 FROM docker.io/node:lts-alpine AS dev
 
+ARG COMMIT_HASH
+ENV COMMIT_HASH=$COMMIT_HASH
+
 WORKDIR /app
 COPY package*.json ./
+RUN echo "COMMIT_HASH=$COMMIT_HASH" >> .env.commit
 RUN npm install
 COPY . ./
 

frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss

@@ -664,7 +664,7 @@ $contrastMessageTextColor: $contrastButtonTextColor !default;
 $contrastMessageIconColor: $contrastButtonTextColor !default;
 
 //overlays
-$overlayContentBorder: 0 none !default;
+$overlayContentBorder: 0px solid $shade300 !default;
 $overlayContentBg: $panelContentBg !default;
 $overlayContainerShadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
 

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;

frontend/vite.config.ts

@@ -23,9 +23,18 @@ import terser from "@rollup/plugin-terser";
 import generateSitemap from "vite-ssg-sitemap";
 import vueDevTools from "vite-plugin-vue-devtools";
 import { ViteSSGOptions } from "vite-ssg";
+import fs from "fs";
 
 const hostname = "https://cal.htwk-leipzig.de";
 
+// fallback
+let commitHash = "unknown"
+if (fs.existsSync('.env.commit')) {
+  const env = fs.readFileSync('.env.commit', 'utf-8')
+  const match = env.match(/COMMIT_HASH=(.+)/)
+  if (match) commitHash = match[1]
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), resolve(), terser(), vueDevTools()],
@@ -45,6 +54,9 @@ export default defineConfig({
       ".scss",
     ],
   },
+  define: {
+    __COMMIT_HASH__: JSON.stringify(commitHash),
+  },
   ssgOptions: <ViteSSGOptions>{
     script: "async",
     formatting: "minify",