integrated #355

Applied the fixes from the Maplibre migration added a editorconfig file for more consistent lints migrated from swagger-codegen's types to openapi-typescript added the vite-plugin-rewrite-all dependency, as a workaround for vitejs/vite#2415 This will be solved if vitejs/vite#2634 is merged migrated 1f050e8 stopped eslint from fixing .js files due to a suspeced infinite loop updated some of our js-dependencys to the newest version. No changes required adapted the webclient for the new version of our API docs migrated vite to v4.x fixed bug of v-for and v-if not being separated fixed how the DetailsView and the feedbackButton are coupled added an alt tag for a thumb-building fixed thumb-building preview not having the correct path set our npm type to module to prevent import errors renmoved unneeded defineExpose import rebase of d2b2a1d rebase 5e2f141 rebase 31f34b4 rebase of 61b8cd3 rebase of 2c1a33a updated swagger codegen Fixed defineExpose being used twice press `/` to focus the search bar (#270)* press / to focus the search bar removed legacy file Try to fix the share menu not opening on Safari (#269) migrated to the new docs style Remove API lang cookie (#259)* Remove checking the cookie in the server * Fix language determination in the webclient * Remove cookie from API documentationCo-authored-by: Frank Elsinga <[email protected]> Darkmode lang/theme selector (#256)* Switched the disabled lang/theme selector color to whiteCo-authored-by: octycs <[email protected]> Separated Coordinate Handling (#243)* seperated coordinates and other data from each other * improved how entries are formattedCo-authored-by: octycs <[email protected]> Fixed the room feedback not being correctly interpreted by GitHub mapbox migrated the vue3 webclient to nav.tum.de Link to the calendar (#221)* implemented a link to the calendarCo-authored-by: octycs <[email protected]> Changed user location dot color to #3070B3 (#233)Co-authored-by: ge78fug <[email protected]> added the outdatedBrowser detection hacked together the linking between the feedbackbutton and the interactive map fixed issues preventing the feedback modal to open properly improved the typing in the interactive map changed the localStorage access key for storing feedback-coordinates to be more in line with the other usage `feedback-token` fixed some of the feedback related functionality in other parts of our app merged all feedback related functionality into its own component set mapboxgl and swaggerui to be manually chunked set mapboxgl to be manually chunked seperated swagger-ui-dist from the api view for inital page loads fixed vite not correctly routing /api/ fixed details not correctly registering navigation events fixed roomfinder maps not being loaded correctly replaced existance checks via a && a.b with a?.b replaced v-on:click with @click fixed interactive maps button not being correctly highlighted fixed loading icon not disapearing misteriously on the details screen inlined a bracket into the translation fiede how referencing between the map componentand the DetailsView.vue worked added rsync as an docker dependency added a script, which builds the needed files for our deployment increased the cache duration of the assets folder moved everything that can be cached into the assets folder clairified the theme selector modived the nginx config for the adapted deployment inital draft of the updated docs fixed bug, where early returning after redirection lead to invalid content being shown moved files around for uniformer layout inlined loadMap() fixed a translation not working due to a typo fixed the map not working due to wrong paths fixed other typing issues fixed wrong usage of the translation api migrated the details view to the composition API added v-if check for sources being present extracted the feedbackbutton into its own component moved confirmLocationPicker and other related functionality to he interactive map fixed the details routing unified the Showcase naming to Slideshow fixed bug in copyCurrentLink method declartion extracted the roomfinder into a seperate component sources extracted the sources into a seperate component extracted the InfoSection into its own component extracted the (currently unused) featured section into an own component extracted the building overview and the room overview into its own component fixed typing issues in the auto-generated typing stubs split the interactive map into its own component added the type keyword to an type-only import switched from a home-grown reset function to a buildin function for the details store migrated the error.msg to an pinia store, for accessing the erroer it in the useFetch method fixed import of mapboxgl in the interactive-map migrated usages of `==` to `===` unified the translation formatting previously, the existance of a leading newline and a trailing space was possible removed scoped stylesheets, as it was noticed, that they cause weird styling issues removed an v-if statement without any effect in vue3, this v-for statement is apparently illegal and needs a wrapper inlined some functions from autocomplete.ts, as they were only used in the searchbar added active to the acitve toggler in the settings at the bottom moved the the scss components to their respective owners moved our noscript warning to our index.html moved the seachbar to its own component fixed, that the design of the language toggler was different to currently deployed fixed the SearchView.vue not being rendered correctly fixed issue of some translation blocks having a trailing whitespace reverted change to change copied in the calller and instead changed this state in the called method fixed the success not being correctly indicaded in copyCurrentLink() fixed places, where translation was incorrectly used refactored the details-state to live in pinia fixed setDescription and setTitle being used in the new waypreviously, this was done via the global variable "navigatum" refactored the sharebutton into its own component reconfigured the dockerfile for the new build system moved our logo to the assets folder to enable automatic inlining moved removeLocalStorage,setLocalStorageWithExpiry,getLocalStorageWithExpiry to utils/storage added configuration option to explicitly tell vite, that we are a spa added the ability to view our about pages configured environment options and api proxying removed the preconnect statements and explicit theming changed the internal name of the details api, to not confuse people between GET and get fixed an import bug in the search view made the language selection persistent made the openapi.yaml server from the actual host, instead of github fixed origin check to allow local-remote development added typing to the fetch options. added the credentials handling seen in #198 fixed faulty inlinging of more() and less() unified the language and theme selectors in their own components added swagger codegen for typescript types fixed our localisation by migrating to unplugin-vue-i18n changed the i18n options to what we want fixed another path issue with paths not being found renamed router-link to RouterLink, as this is recomended moved the main template to app.vue fixed an issue with locale templates in html partialy migrated about, details and search migrated the main view to vue3 moved interactive-map.ts to typescript moved scss to the index.html for faster time to design removed legacy code.js removed unused components from the template migrated feedback to ts converted modules to ts modules changed how comments in our scss work reodered the package.json added i18n migrated the apiview to vue3 fixed an pathing issue moved our utils to a comon directory moved all styles to be consistently below the html changed all paths to the assets to @asset removed unnessesry app prefix fromatting re-enabled some imports from the previous dockerifle removed old build system scss move vueI18n removed polyfills temporarily to focus on making the app work moved views 1:1 into single file components moves added our old routing config moved the 404 and api view to a SFC moved more files to different directories moved some files to a new directory added the basic vue3 template
TUM-Dev · Mar 26, 2023 · 5d16a76 · 5d16a76
1 parent 4e00f08
commit 5d16a76
Show file tree

Hide file tree

Showing 110 changed files with 6,612 additions and 6,692 deletions.
diff --git a/.github/workflows/_docker-build.yml b/.github/workflows/_docker-build.yml
@@ -30,7 +30,7 @@ jobs:
       tags: ${{ steps.meta.outputs.tags }}
     steps:
       - uses: actions/checkout@v3
-
+      - run: cp openapi.yaml data/output
       - name: Log in to the Container registry
         uses: docker/login-action@v2
         with:

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -59,8 +59,7 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-[email protected].
+reported to the community leaders responsible for enforcement at [email protected].
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

diff --git a/map/README.md b/map/README.md
@@ -57,7 +57,7 @@ docker run --rm -it -v $(pwd)/map:/data -p 7770:80 maptiler/tileserver-gl
 ### Edit the style
 
 For editing the style we use [Maputnik](https://github.com/maputnik/editor).
-It is a web-based editor for Mapbox styles.
+It is a web-based editor for Maplibre styles.
 You can use it to edit the style and see the changes live.
 
 Sadly, it is not fully compatible with tileserver-gl.

diff --git a/resources/scripts/regen.sh b/resources/scripts/regen.sh
@@ -6,6 +6,7 @@ echo "regenerating the data for /data"
 (
 cd ./data || exit
 python compile.py
+rsync ../openapi.yaml output/openapi.yaml
 )
 
 
@@ -30,8 +31,7 @@ python init_db.py
 echo "regenerating the data for /webclient"
 (
 cd ./webclient || exit
-rm -fr cdn
-mkdir cdn
+mkdir -p cdn
 rsync -r --exclude '*.yaml' ../data/sources/img/ cdn/
 cp -r ../data/external/results/maps/roomfinder/* cdn/maps/roomfinder
 )

diff --git a/webclient/.dockerignore b/webclient/.dockerignore
@@ -1,2 +1,4 @@
-**/node_modules
-**/build
+node_modules/*
+dist/*
+cdn/*
+.vscode/*
diff --git a/webclient/.editorconfig b/webclient/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+max_line_length = 120
+indent_size = 2
+indent_style = space
diff --git a/webclient/.eslintrc.cjs b/webclient/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};
diff --git a/webclient/.gitignore b/webclient/.gitignore
@@ -1,5 +1,30 @@
-build
-cdn
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 package-lock.json
-yarn.lock
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/cdn/
diff --git a/webclient/.vscode/extensions.json b/webclient/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/webclient/Dockerfile b/webclient/Dockerfile
@@ -1,17 +1,15 @@
 FROM node:latest as build-stage
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
-COPY config.js config.js
-COPY gulpfile.js gulpfile.js
-COPY src src
-RUN node_modules/gulp/bin/gulp.js --gulpfile ./gulpfile.js release && rm -fr ./build/tmp
+RUN npm install &&  \
+    apt-get update &&  \
+    apt-get install rsync -y
 
-# compress data (only using gzip, because brotli on ngnix is a royal pain)
-RUN gzip --force --keep --recursive ./build
+COPY . .
+RUN sh build.sh
 
 FROM nginx:latest as production-stage
 COPY nginx.conf /etc/nginx/nginx.conf
 RUN mkdir /app && apt update && apt upgrade -y
-COPY --from=build-stage /app/build /app
+COPY --from=build-stage /dist /app
 EXPOSE 80
diff --git a/webclient/README.md b/webclient/README.md
@@ -9,129 +9,109 @@ This folder contains the JavaScript based webclient for NavigaTUM.
 For getting started, there are some system dependencys which you will need.
 Please follow the [system dependencys docs](/resources/documentation/Dependencys.md) before trying to run this part of our project.
 
-### Images and maps
+### Recommended IDE Setup
 
-The frontend uses images and maps from the data, that are intended to be served
-statically via a CDN and not provided by the API.
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+Most modern IDEs (like PyCharm) should work as well and have a Plugin.
 
-For a local environment, create a `cdn/` subdirectory in `weblclient/` and copy the relevant files
-into it:
+## Dependencies
 
-```bash
-mkdir cdn
-rsync -r --exclude '*.yaml' ../data/sources/img/ cdn/
-mkdir -p cdn/maps/roomfinder
-cp -r ../data/external/results/maps/roomfinder/* cdn/maps/roomfinder/
-```
+### Prerequisites
 
-### Building
+For getting started, there are some system dependencys which you will need.
+Please follow the [system dependencys docs](/resources/documentation/Dependencys.md) before trying to run this part of our project.
 
-Install all npm packages:
+### Installing Dependency's
 
 ```bash
 npm install
 ```
 
-And run Gulp to build the client. The build files will be written to `build/`.
-
-```bash
-# Run development build
-gulp
-# or run release build (will not work locally, because it uses a
-# different configuration and no hash based navigation)
-gulp release
+## Run
+
+Ensure that _NavigaTUM-server_ is running in the background:
+
+- either via following the [guide to local development](../server/README.md), or
+- via [docker](https://docs.docker.com/)  
+   _docker isolates the network, but we want these two containers to communicate to each other without being as brittle as IPs._  
+   _Naming the `navigatum-mieli-search` container `search` makes us able to connect to it via <`http://search:7700`> from the server_
+  ```bash
+  docker network create navigatum-net
+  docker run -it --rm -p 7700:7700 --name search --network navigatum-net ghcr.io/tum-dev/navigatum-mieli-search:main
+  docker run -it --rm -p 8080:8080 --network navigatum-net -e MIELI_SEARCH_ADDR=search ghcr.io/tum-dev/navigatum-server:main
+  ```
+
+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
+npm run dev
 ```
 
-### Testing
+### Type-Check, Compile and Minify for Production
 
-If you do a development build you can use a simple webserver to test the build.
-
-Ensure that _NavigaTUM-server_ is running in the background. By default, the webclient will connect to the server on `http://localhost:8080`.
-If you want to connect to the public API instead, change `api_prefix` in `config.js` to `https://nav.tum.de/api/` and rebuild.
+```sh
+npm run build
+```
 
-Now run:
+### Linting with [ESLint](https://eslint.org/)
 
-```bash
-python -m http.server
+```sh
+npm run lint
 ```
 
-and open <http://localhost:8000/build/index-view-main-light-de.html> in your browser.
+### Update the API's type definitions
 
-Note that local builds served this way do not support the language and theme setting.
-You can choose a different base HTML instead.
+```sh
+npx openapi-typescript openapi.yaml --output webclient/src/codegen/api.ts --export-type --immutable-types 
+```
 
 ## Build files & Serving release build
 
-Gulp creates a lot of index HTML files in the build process.
-Each of those files are similar but differ in some aspects.
-If you serve the release build with a webserver (such as Apache or Nginx) you need
-to select the correct files based on the request URL and headers.
+We create a lot of index HTML files in the build process.
+Each of those files are similar but differ in some aspects.  
+If you serve the release build with a webserver (such as Nginx) you need to select the correct files based on the request URL and headers.
 
 ```plain
-index-view-<view>-<theme>-<lang>.html
-            ↑      ↑       ↑
-            │      │       └── The page language. Either "de" or "en" at the
-            │      │           moment. It should be selected based on the
-            │      │           "lang" Cookie or else the "Accept-Language" header.
-            │      └── The page theme. Either "light" or "dark" at the moment.
-            │          It should be selected based on the "theme" Cookie and is
-            │          "light" by default.
-            └── The first loaded view (see architecture below). It does technically
-                not matter which view is selected here, but this allows to efficiently
-                preload resources and optimize the order of resources during initial
-                pageload.
+<theme>-<lang>.html
+   ↑       ↑
+   │       └── The page language. Either "de" or "en" at the moment.
+   │           It should be selected based on the "lang" Cookie or else the "Accept-Language" header.
+   └── The page theme. Either "light" or "dark" at the moment.
+       It should be selected based on the "theme" Cookie ("light" by default).
 ```
 
-When running locally on a development build you can use the language and theme of
-your choice as well as any view.
+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). Values are `light` and `dark`.
 
 ## Architecture
 
-The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/). The CSS framework is [Spectre.css](https://picturepan2.github.io/spectre/). It is made up of a core codebase, _views_ and _modules_:
-
-- The core codebase provides the routing functionality, as well as helper functions (e.g. to retrieve data). All of this is bundles in the `navigatum` object in JS.
-- _Views_ (taking over the terminology from vue-router) are the pages displayed in NavigaTUM.
-- _Modules_ provide extra functionality that is not critical or used by multiple views (e.g. the interactive map).
+The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/).  
+For state management we use [pinia](https://pinia.vuejs.org/) and our CSS framework is [Spectre.css](https://picturepan2.github.io/spectre/).
 
-### Directory structure
+### Directory structure (only the important parts)
 
-```bash
+```plain
 webclient
-├── build/    # 🠔 Build files will be written here
+├── public/         # 🠔 Static assets such as icons, which cannot get inlined
 ├── src/
-│   ├── assets/  # 🠔 Static assets such as icons
-│   ├── md/      # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
-│   ├── modules/
-│   │   ├── autocomplete.js     # 🠔 Autocompletion for search
-│   │   └── interactive-map.js  # 🠔 Interactive map based on Mapbox
-│   ├── views/  # 🠔 See below
-│   ├── core.js             # 🠔 Core JS code (and JS entrypoint)
-│   ├── feedback.js         # 🠔 JS for the feedback form (separated from the rest of
-│   │                       #    the code to work even when the core JS fails).
-│   ├── history-states.js   # 🠔 Preseve state on back-/forward navigation
-│   ├── i18n.yaml           # 🠔 Translation strings for the core code
-│   ├── index.html          # 🠔 index.html template
-│   ├── init-call.js        # 🠔 Special helper-script for init on page-load
-│   ├── legacy.js           # 🠔 Special helper-script to automatically include some
-│   │                       #    polyfills for older browsers.
-│   ├── main.scss           # 🠔 Sass CSS code for all non-view parts
-│   ├── spectre-all.scss    # 🠔 Include-script for Spectre.CSS
-│   └── variables.scss      # 🠔 Sass CSS variable definitions (also defines themes)
-├── config.js     # 🠔 Build configuration
-├── gulpfile.js   # 🠔 Gulp configuration
-└── package.json  # 🠔 Node package definition and dependencies
-```
-
-'Views' (pages) are located in `src/views` where each view has its own subdirectory called `view-<name>`:
-
-```bash
-view-example
-├── i18n-example.yaml  # 🠔 Translation strings for each language
-├── view-example.inc   # 🠔 The HTML Template of the view
-├── view-example.js    # 🠔 The JS Sources of the view
-└── view-example.scss  # 🠔 The Sass CSS Sources of the view
+│   ├── codegen/    # 🠔 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
+│   │   └── logo.svg            # 🠔 Our Logo
+│   ├── components/ # 🠔 Vue components, which are used in views.
+│   ├── views/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── router.ts   # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── App.vue     # 🠔 Main view
+│   └── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated Views/Components are loaded
+├── vite.config.ts  # 🠔 Build configuration
+├── gulpfile.js     # 🠔 Gulp configuration
+└── package.json    # 🠔 Node package definition and dependencies
 ```
 
-Note that new views are automatically included in the build, but new JS files
-in the `src/` directory are not. If you add a new JS file there you need to include
-it in `gulpfile.js`.
+Note that new views are automatically included in the build, but they are not routed.  
+To add a new view, you need to add a new route in `src/router.ts`.
diff --git a/webclient/build.sh b/webclient/build.sh
@@ -0,0 +1,27 @@
+#!/usr/bin/env sh
+
+set -e # fail on first error
+
+mkdir -p ../dist
+rm -fr ../dist
+
+for LANG in en de
+do
+  for THEME in light dark
+  do
+    # make sure we are really only building the right theme and language
+    sed -i "s/\$theme: .*/\$theme: \"${THEME}\";/" src/assets/variables.scss
+    sed -i "s/locale: .*/locale: \"${LANG}\",/" src/main.ts
+    sed -i "/fallbackLocale: .*/d" src/main.ts
+    sed -i "s/messages: .*/messages: { ${LANG} },/" src/main.ts
+
+    echo "Building ${LANG}-${THEME}"
+    npm run build-only
+    mv dist/index.html dist/${LANG}-${THEME}.html
+    rsync -r dist/* ../dist
+  done
+done
+
+
+# compress data (only using gzip, because brotli on ngnix is a royal pain)
+gzip --force --keep --recursive ../dist
diff --git a/webclient/config.js b/webclient/config.js
diff --git a/webclient/env.d.ts b/webclient/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/webclient/env/.env b/webclient/env/.env
@@ -0,0 +1 @@
+VITE_APP_URL=http://localhost:8000