Update frontend

Dockerfile

@@ -19,7 +19,7 @@ RUN [ "npm", "run", "build" ]
 
 ##########################################################################################
 
-FROM node:10 AS frontend-builder
+FROM node:20 AS frontend-builder
 
 # Create app directory
 WORKDIR /tmp/

frontend/.eslintrc.js

@@ -14,6 +14,8 @@ module.exports = {
     rules: {
         indent: ['error', 4],
         semi: ['error', 'always'],
+        'vue/multi-word-component-names': 'off',
+        'vue/no-reserved-component-names': 'off',
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
     }

frontend/package.json

@@ -9,39 +9,37 @@
   },
   "dependencies": {
     "@caohenghu/vue-colorpicker": "^1.2.4",
-    "@gruppe-adler/navbar-component": "^1.1.0",
+    "@gruppe-adler/navbar-component": "^1.2.0",
     "fast-deep-equal": "^3.1.3",
     "lozad": "^1.16.0",
-    "marked": "^2.0.3",
-    "vue": "^2.6.12",
-    "vue-class-component": "^7.2.6",
+    "marked": "^9.1.0",
+    "vue": "^2.6.14",
+    "vue-class-component": "^7.2.3",
     "vue-gtag": "^1.16.1",
     "vue-meta": "^2.4.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
-    "@types/lozad": "^1.9.0",
-    "@types/marked": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "@vue/cli-plugin-eslint": "^4.5.8",
-    "@vue/cli-plugin-pwa": "^4.5.8",
-    "@vue/cli-plugin-router": "^4.5.8",
-    "@vue/cli-plugin-typescript": "^4.5.8",
-    "@vue/cli-service": "^4.5.8",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^7.13.0",
-    "eslint-plugin-import": "^2.22.1",
+    "@types/lozad": "^1.16.2",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-pwa": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.1.0",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
-    "typescript": "~3.8.3",
-    "vue-template-compiler": "^2.6.12",
-    "webpack-assets-manifest": "^4.0.0"
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.2.0",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "typescript": "~4.5.5",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-assets-manifest": "^5.1.0"
   }
 }

frontend/src/components/Markdown.vue

@@ -4,9 +4,9 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
-import marked from 'marked';
+import { marked, Renderer } from 'marked';
 
-const renderer = new marked.Renderer();
+const renderer = new Renderer();
 
 renderer.link = function (href, title, text) {
     let external = false;

frontend/src/components/TheNavbar.vue

@@ -13,6 +13,8 @@ import { GradNavbar, GradPathChangedEvent } from '@gruppe-adler/navbar-component
 
 customElements.define('grad-navbar', GradNavbar);
 
+let lastPath = '';
+
 @Component
 export default class TheNavbarVue extends Vue {
     private pageYOffset = 0; // for hiding nav bar when scrolling
@@ -27,7 +29,8 @@ export default class TheNavbarVue extends Vue {
     }
 
     private onPathChanged (event: GradPathChangedEvent) {
-        if (event.gradPath !== this.$route.path) {
+        if (event.gradPath !== lastPath && event.gradPath !== this.$route.path) {
+            lastPath = event.gradPath;
             this.$router.push(event.gradPath);
         }
 

frontend/src/components/Tooltip.vue

@@ -18,6 +18,8 @@ export default class TooltipVue extends Vue {
      * @author DerZade
      */
     @Watch('shown')
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     private fixClipping () {
         if (!this.shown) return;
 

frontend/src/services/color.ts

@@ -1,4 +1,3 @@
-
 const canvas = document.createElement('canvas');
 const canvasCtx = canvas.getContext('2d');
 

frontend/src/services/page.ts

@@ -65,9 +65,10 @@ export async function createContainer (c: Container): Promise<Container> {
     }
     await Promise.all(promises);
 
-    delete c.id;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...body } = c;
 
-    const newContainer = await fetchJSON<Container>(`${API_URL}/container`, { method: 'POST', body: JSON.stringify(c), headers: { 'Content-Type': 'application/json' } });
+    const newContainer = await fetchJSON<Container>(`${API_URL}/container`, { method: 'POST', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' } });
 
     return newContainer;
 }