TUM-Dev · CommanderStorm · Mar 7, 2024 · Dec 9, 2023 · Dec 10, 2023 · Dec 10, 2023
diff --git a/webclient/.eslintrc.cjs b/webclient/.eslintrc.cjs
@@ -36,12 +36,7 @@ module.exports = {
       "error",
       ["script-setup", "composition"], // "script-setup", "composition", "composition-vue2", or "options"
     ],
-    "vue/multi-word-component-names": [
-      "error",
-      {
-        ignores: ["[...slug]", "api", "index", "search", "[id]", "[name]"],
-      },
-    ],
+    "vue/multi-word-component-names": "off",
     "vue/component-name-in-template-casing": ["error", "PascalCase", { registeredComponentsOnly: false }],
     "vue/custom-event-name-casing": ["error", "camelCase"],
     "vue/define-macros-order": "error",
@@ -71,7 +66,7 @@ module.exports = {
     "vue/prefer-separate-static-class": "error",
     "vue/require-macro-variable-name": "error",
     "vue/require-typed-ref": "error",
-    "vue/static-class-names-order": "error", // we may want to disable this rule if it does not work well with tailwind
+    "vue/static-class-names-order": "off",
     "vue/v-for-delimiter-style": "error",
     "vue/no-constant-condition": "error",
   },

diff --git a/webclient/README.md b/webclient/README.md
@@ -29,7 +29,11 @@ pnpm install
 
 ## Run
 
-Ensure that _NavigaTUM-server_ is running in the background:
+Ensure that _NavigaTUM-server_ is running in the background.
+By default, the webclient will connect to the server on `https://nav.tum.de`.  
+If you want to connect to a local version instead, change `VITE_APP_URL` in [`env/.env`](./env/.env) to `http://localhost:3003`.
+
+To get a local server running, please:
 
 - either via following the [guide to local development](../server/README.md), or
 - via [docker](https://docs.docker.com/)  
@@ -42,9 +46,6 @@ Ensure that _NavigaTUM-server_ is running in the background:
   docker run -it --rm -p 8080:8080 --network navigatum-net -e MIELI_SEARCH_ADDR=search ghcr.io/tum-dev/navigatum-server:main /bin/navigatum-main-api
   ```
 
-By default, the webclient will connect to the server on `http://localhost:8080`.  
-If you want to connect to the public API instead, change `VITE_APP_URL` in [`env/.env`](./env/.env) to `https://nav.tum.de`.
-
 ```sh
 pnpm run dev
 ```
@@ -87,7 +88,7 @@ If you serve the release build with a webserver (such as Nginx) you need to sele
 
 The language-selector is working in development and this differentialtion is only happening in the build.  
 For the theme we can not do so for some reason (If you know of a better way, hit us up).  
-To test a different theme, you can change `$theme` [here](./src/assets/variables.scss) and `theme='...'` [here](./index.html). Values are `light` and `dark`.
+To test a different theme, you can change `theme='...'` [here](./index.html). Values are `light` and `dark`.
 
 ## Architecture
 
@@ -104,9 +105,7 @@ webclient
 │   ├── api_types/  # 🠔 code generated via openapi.yaml for typechecking reasons
 │   ├── assets/     # 🠔 Static assets such as icons
 │   │   ├── md/                 # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
-│   │   ├── variables.scss      # 🠔 Include-script for Spectre.CSS
 │   │   ├── main.scss           # 🠔 Sass CSS code for all non-view parts
-│   │   ├── spectre-all.scss    # 🠔 Include-script for Spectre.CSS
 │   │   └── logos               # 🠔 The Logos used by the app
 │   ├── components/ # 🠔 Vue components, which are used in views.
 │   ├── pages/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.

diff --git a/webclient/build.sh b/webclient/build.sh
@@ -5,18 +5,8 @@ set -e # fail on first error
 mkdir -p ../dist
 rm -fr ../dist
 
-for THEME in light dark
-do
-  # make sure we are really only building the right theme
-  sed -i "s/\$theme: .*/\$theme: \"${THEME}\";/" src/assets/variables.scss
-  sed -i "s/<html class=\"[^\"]*\"/<html class=\"${THEME}\"/" index.html
-
-  echo "Building ${THEME}"
-  npm run build-only
-  mv dist/index.html dist/${THEME}.html
-  rsync -r dist/* ../dist
-done
-
+npm run build
+rsync -r dist/* ../dist
 
 # compress data (only using gzip, because brotli on ngnix is a royal pain)
 gzip --force --keep --recursive ../dist
diff --git a/webclient/cypress.d.ts b/webclient/cypress.d.ts
@@ -1,8 +1,20 @@
-import type { mount } from "cypress/vue";
+import type { Router } from "vue-router";
+import type { Component } from "vue";
+import type { VueTestUtils } from "cypress/vue";
+import { ComponentPublicInstance } from "vue";
+
+type Options = Pick<typeof VueTestUtils, "config">["config"] & { router?: Router };
+export type OptionsParam = Options | Record<string, never>;
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: mount;
+      mount<Props extends NonNullable<unknown>>(
+        component: Component,
+        options?: OptionsParam,
+      ): Cypress.Chainable<{
+        wrapper: VueWrapper<ComponentPublicInstance<Props>>;
+        component: VueWrapper<ComponentPublicInstance<Props>>["vm"];
+      }>;
     }
   }
 }
diff --git a/webclient/cypress/e2e/feedback.cy.ts b/webclient/cypress/e2e/feedback.cy.ts
@@ -2,33 +2,45 @@ describe("Check if opening the feedback form works from every subview", () => {
   it("main page", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });
     cy.visit("http://localhost:3000/");
-    cy.contains("Standorte");
+    cy.contains("Sites");
 
-    cy.get('[data-cy="main-footer"]').scrollIntoView();
-    checkFeedbackForm('[data-cy="open-feedback-footer"]');
+    cy.get("footer").scrollIntoView();
+    cy.contains("Send Feedback").should("not.exist");
+    cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
+    cy.get("footer").contains("Feedback").click({ scrollBehavior: false });
+    cy.contains("Send Feedback").should("exist");
   });
   it("search page", () => {
     cy.intercept("GET", "/api/search?q=fsmb&limit_buildings=10&limit_rooms=30&limit_all=30&lang=de", {
       fixture: "search/fsmb.long.de.json",
     });
     cy.visit("http://localhost:3000/search?q=fsmb");
 
-    checkFeedbackForm('[data-cy="open-feedback-search"]');
+    cy.contains("Send Feedback").should("not.exist");
+    cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
+    cy.get("footer").contains("Feedback").click();
+    cy.contains("Send Feedback").should("exist");
   });
   it("details page (general feedback)", () => {
     cy.intercept("GET", "/api/get/mi?lang=de", { fixture: "get/mi.de.json" });
     cy.visit("http://localhost:3000/view/mi");
     cy.get('[data-cy="open-feedback-details"]').should("exist", { timeout: 10_000 }); // wait for the site to be interactive
 
-    checkFeedbackForm('[data-cy="open-feedback-details"]');
+    cy.contains("Send Feedback").should("not.exist");
+    cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
+    cy.get("footer").contains("Feedback").click();
+    cy.contains("Send Feedback").should("exist");
   });
-});
+  it("details page (general feedback)", () => {
+    cy.intercept("GET", "/api/get/mi?lang=de", { fixture: "get/mi.de.json" });
+    cy.visit("http://localhost:3000/view/mi");
+    cy.get('[data-cy="open-feedback-details"]').should("exist", { timeout: 10_000 }); // wait for the site to be interactive
 
-function checkFeedbackForm(selector_which_should_open_the_modal: string) {
-  cy.get('[data-cy="feedback-modal"]').should("not.exist");
-  cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
-  cy.get(selector_which_should_open_the_modal).click({ scrollBehavior: false });
-  cy.get('[data-cy="feedback-modal"]').should("exist");
-}
+    cy.contains("Send Feedback").should("not.exist");
+    cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
+    cy.get('[data-cy="open-feedback-details"]').click({ scrollBehavior: false });
+    cy.contains("Send Feedback").should("exist");
+  });
+});
 
 export {};
diff --git a/webclient/cypress/e2e/frontpage.cy.ts b/webclient/cypress/e2e/frontpage.cy.ts
@@ -9,7 +9,7 @@ describe("Check if navigating from the frontpage works as expected", () => {
   it("navigating to an initally hidden entry", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });
     cy.visit("http://localhost:3000/");
-    cy.contains("mehr").click();
+    cy.contains("more").click();
     cy.intercept("GET", "/api/get/garching-interims?lang=de", { fixture: "get/garching-interims.de.json" });
     cy.contains("Interims").click();
     cy.url().should("include", "/site/");

diff --git a/webclient/cypress/e2e/search.cy.ts b/webclient/cypress/e2e/search.cy.ts
@@ -25,7 +25,7 @@ describe("Check if the search page works as expected", () => {
     cy.get("input").clear();
     cy.get("input").type("fsmpic{enter}");
     cy.url().should("include", "/search?q=fsmpic");
-    cy.contains("5502.U1.234M");
+    cy.contains("5101.EG.257");
 
     //go back
     cy.go(-1);

diff --git a/webclient/cypress/support/component-index.html b/webclient/cypress/support/component-index.html
@@ -1,14 +1,13 @@
 <!doctype html>
-<html>
+<html class="scroll-smooth">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
     <link rel="stylesheet" href="./src/assets/main.scss" />
-    <link rel="stylesheet" href="./src/assets/spectre-all.scss" />
   </head>
-  <body>
+  <body class="relative">
     <div data-cy-root></div>
     <script type="module" src="/src/main.ts" defer></script>
   </body>

diff --git a/webclient/cypress/support/component.ts b/webclient/cypress/support/component.ts
@@ -2,7 +2,10 @@ import { createPinia } from "pinia"; // or Vuex
 import { createI18n } from "vue-i18n";
 import { mount } from "cypress/vue";
 import { createMemoryHistory, createRouter } from "vue-router";
+import type { Router } from "vue-router";
+import type { Component } from "vue";
 import { routes } from "../../src/router";
+import type { OptionsParam } from "../../cypress";
 
 // We recommend that you pull this out
 // into a constants file that you share with
@@ -16,7 +19,7 @@ const i18nOptions = {
   warnHtmlMessage: true,
 };
 
-Cypress.Commands.add("mount", (component, options = {}) => {
+Cypress.Commands.add("mount", (component: Component, options: OptionsParam = {}) => {
   options.global = options.global || {};
   options.global.plugins = options.global.plugins || [];
   options.global.plugins = options.global.plugins || [];
@@ -32,11 +35,15 @@ Cypress.Commands.add("mount", (component, options = {}) => {
   }
 
   // Add router plugin
-  options.global.plugins.push({
-    install(app) {
-      app.use(options.router);
-    },
-  });
+  if (options.router !== undefined) {
+    options.global.plugins.push({
+      install(app) {
+        app.use(options.router as Router);
+      },
+    });
+  }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   return mount(component, options);
 });
diff --git a/webclient/env/.env.production b/webclient/env/.env.production
@@ -1 +1 @@
-VITE_APP_URL=
+VITE_APP_URL=https://nav.tum.de
diff --git a/webclient/index.html b/webclient/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="light" lang="de" prefix="og: https://ogp.me/ns#">
+<html class="scroll-smooth" lang="de" prefix="og: https://ogp.me/ns#">
   <head>
     <script type="application/ld+json">
       {
@@ -34,7 +34,7 @@
       name="description"
       content="Finde Räume, Gebäude und andere Orte an der TUM mit Exzellenz. Eine moderne Alternative zum RoomFinder, entwickelt von Studierenden."
     />
-    <meta name="author" content="@octycs and @CommanderStorm" />
+    <meta name="author" content="OpenSource @ TUM e.V. partnering with TUM IT Management" />
     <meta name="copyright" content="GNU General Public License v3.0. Images may be licensed differently." />
     <meta name="robots" content="index, follow" />
     <meta name="rating" content="safe for kids" />
@@ -55,31 +55,26 @@
     <meta property="og:site_name" content="NavigaTUM" />
 
     <link rel="stylesheet" href="./src/assets/main.scss" />
-    <link rel="stylesheet" href="./src/assets/spectre-all.scss" />
 
     <link rel="icon" href="/favicon.ico" />
     <link rel="canonical" href="https://nav.tum.de" />
     <title>NavigaTUM</title>
     <!-- Title  isupdated by JS later during pageload -->
   </head>
-  <body>
+  <body class="relative">
     <noscript>
-      <div id="content-header" class="container grid-lg">
-        <div class="columns">
-          <div class="column col-lg-11 col-mx-auto">
-            <div class="toast toast-error">
-              JavaScript is required to use this application, as our main functionality (search bar, map) depends on
-              this.<br />
-              We do not think that there is a graceful fallback or any option for progressive enhancement, but are
-              planning on adding ServerSideRendering in the future.<br />
-              Please enable JavaScript in your browser.
-            </div>
-          </div>
+      <div class="mx-auto mt-16 max-w-3xl">
+        <div class="bg-red-300 rounded-sm p-1.5 text-red-950">
+          JavaScript is required to use this application, as our main functionality (search bar, map) depends on
+          this.<br />
+          We do not think that there is a graceful fallback or any option for progressive enhancement, but are planning
+          on adding ServerSideRendering in the future.<br />
+          Please enable JavaScript in your browser.
         </div>
       </div>
     </noscript>
     <!-- BEGIN of Vue.js template code -->
-    <div id="app"></div>
+    <div id="app" class="bg-zinc-50"></div>
     <!-- END of Vue.js template code -->
 
     <script type="module" src="/src/main.ts" defer></script>

diff --git a/webclient/nginx.conf b/webclient/nginx.conf
@@ -19,14 +19,6 @@ http {
   # Do not show the version of nginx running on the server
   server_tokens off;
 
-  # theme detection
-  map $cookie_theme $THEME {
-    default "light";
-
-    "dark" "dark";
-    "light" "light";
-  }
-
   # we allow other sites to fetch from us as we don't have any login/.. functionality => no cookies
   add_header 'Access-Control-Allow-Origin' '*' always;
   add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
@@ -78,20 +70,21 @@ http {
     }
 
     location / {
-      add_header Cache-Control no-cache; # disable caching, as we do not want to have theme/language related issues
+      expires 1h;
+      add_header Cache-Control "public";
       # we allow other sites to fetch from us as we don't have any login/.. functionality => no cookies
       add_header 'Access-Control-Allow-Origin' '*' always;
-      add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
-      expires 360s; # 360s=5min
-      try_files /$THEME.html /404.html;
+      add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always
+      expires 1h;
+      try_files /index.html /404.html;
     }
     location = /api {
-      add_header Cache-Control no-cache; # disable caching, as we do not want to have theme/language related issues
+      add_header Cache-Control "public";
       # we allow other sites to fetch from us as we don't have any login/.. functionality => no cookies
       add_header 'Access-Control-Allow-Origin' '*' always;
       add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
-      expires 360s; # 360s=5min
-      try_files /$THEME.html /404.html;
+      expires 1h;
+      try_files /index.html /404.html;
     }
 
     location /assets/ {