From 84d59a44e6bd30a014c687d37874b6d378459c5f Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felixtj.dietrich@tum.de>
Date: Sun, 15 Sep 2024 00:14:39 +0200
Subject: [PATCH] Add Umami analytics (#88)

---
 webapp/Dockerfile                           | 20 ++++++++---
 webapp/angular.json                         |  6 ++++
 webapp/src/app/analytics.service.ts         | 38 +++++++++++++++++++++
 webapp/src/app/app.config.ts                | 12 +++++--
 webapp/src/environments/environment.prod.ts |  9 +++++
 webapp/src/environments/environment.ts      |  8 ++++-
 6 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/app/analytics.service.ts
 create mode 100644 webapp/src/environments/environment.prod.ts

diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index 1c53ebc3..bfdd714b 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -13,10 +13,22 @@ RUN cat .env
 RUN COOLIFY_URL_VALUE=$(grep '^COOLIFY_URL=' .env | cut -d '=' -f2) && \
     sed -i "s|\$COOLIFY_URL|$COOLIFY_URL_VALUE|g" .env
 
-# Set serverUrl in environment.ts
-RUN APPLICATION_SERVER_URL=$(grep '^APPLICATION_SERVER_URL=' .env | cut -d '=' -f2) && \
-    echo "Replacing serverUrl in environment.ts with: $APPLICATION_SERVER_URL" && \
-    sed -i "s|serverUrl: '[^']*'|serverUrl: '$APPLICATION_SERVER_URL'|g" src/environments/environment.ts
+# Export environment variables from .env
+# This assumes that .env contains lines like VARIABLE=value
+# and does not contain spaces around the '='
+RUN export $(grep -v '^#' .env | xargs) && \
+    echo "Generating environment.prod.ts" && \
+    cat > src/environments/environment.prod.ts <<EOF
+export const environment = {
+  serverUrl: '${APPLICATION_SERVER_URL}',
+  umami: {
+    enabled: '${UMAMI_ENABLED}',
+    scriptUrl: '${UMAMI_SCRIPT_URL}',
+    websiteId: '${UMAMI_WEBSITE_ID}',
+    domains: '${UMAMI_DOMAINS}'
+  }
+};
+EOF
 
 RUN npm install
 RUN npm run build
diff --git a/webapp/angular.json b/webapp/angular.json
index ee6da47f..57a14b27 100644
--- a/webapp/angular.json
+++ b/webapp/angular.json
@@ -60,6 +60,12 @@
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "budgets": [
                 {
                   "type": "initial",
diff --git a/webapp/src/app/analytics.service.ts b/webapp/src/app/analytics.service.ts
new file mode 100644
index 00000000..b74d050e
--- /dev/null
+++ b/webapp/src/app/analytics.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyticsService {
+  private scriptLoaded = false;
+
+  initialize(): void {
+    if (environment.umami.enabled) {
+      this.loadUmamiScript();
+    }
+  }
+
+  private loadUmamiScript(): void {
+    if (this.scriptLoaded) {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.defer = true;
+    script.src = environment.umami.scriptUrl;
+    script.setAttribute('data-website-id', environment.umami.websiteId);
+    script.setAttribute('data-domains', environment.umami.domains);
+
+    script.onload = () => {
+      console.log('Umami analytics script loaded successfully.');
+    };
+
+    script.onerror = () => {
+      console.error('Failed to load Umami analytics script.');
+    };
+
+    document.head.appendChild(script);
+    this.scriptLoaded = true;
+  }
+}
diff --git a/webapp/src/app/app.config.ts b/webapp/src/app/app.config.ts
index cc2a747b..a0e8b341 100644
--- a/webapp/src/app/app.config.ts
+++ b/webapp/src/app/app.config.ts
@@ -1,4 +1,4 @@
-import { ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
@@ -7,6 +7,13 @@ import { LucideAngularModule, Home, Sun, Moon, Hammer } from 'lucide-angular';
 import { environment } from 'environments/environment';
 import { BASE_PATH } from 'app/core/modules/openapi';
 import { routes } from 'app/app.routes';
+import { AnalyticsService } from './analytics.service';
+
+function initializeAnalytics(analyticsService: AnalyticsService): () => void {
+  return () => {
+    analyticsService.initialize();
+  };
+}
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -16,6 +23,7 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withInterceptorsFromDi()),
     provideAnimationsAsync(),
     importProvidersFrom(LucideAngularModule.pick({ Home, Sun, Moon, Hammer })),
-    { provide: BASE_PATH, useValue: environment.serverUrl }
+    { provide: BASE_PATH, useValue: environment.serverUrl },
+    { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] }
   ]
 };
diff --git a/webapp/src/environments/environment.prod.ts b/webapp/src/environments/environment.prod.ts
new file mode 100644
index 00000000..c2df2793
--- /dev/null
+++ b/webapp/src/environments/environment.prod.ts
@@ -0,0 +1,9 @@
+export const environment = {
+  serverUrl: 'http://localhost:8080',
+  umami: {
+    enabled: false,
+    scriptUrl: '',
+    websiteId: '',
+    domains: ''
+  }
+};
diff --git a/webapp/src/environments/environment.ts b/webapp/src/environments/environment.ts
index c150e65b..c2df2793 100644
--- a/webapp/src/environments/environment.ts
+++ b/webapp/src/environments/environment.ts
@@ -1,3 +1,9 @@
 export const environment = {
-  serverUrl: 'http://localhost:8080'
+  serverUrl: 'http://localhost:8080',
+  umami: {
+    enabled: false,
+    scriptUrl: '',
+    websiteId: '',
+    domains: ''
+  }
 };