ui: jump to latest version 2 of vue and vuetify

ui/.devcontainer/devcontainer.json

@@ -12,6 +12,9 @@
 			"VARIANT": "18-bullseye"
 		}
 	},
+	"containerEnv": {
+		"TZ": "Europe/Berlin"
+	},
 	// Configure tool-specific properties.
 	"customizations": {
 		// Configure properties specific to VS Code.

ui/package.json

@@ -10,30 +10,30 @@
   "devDependencies": {
     "@types/color": "^3.0.3",
     "@types/luxon": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-pwa": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
-    "axios": "^0.27.2",
+    "axios": "^1.6.0",
     "color": "^4.2.3",
     "core-js": "^3.8.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.52.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^9.18.0",
     "luxon": "^3.0.3",
     "register-service-worker": "^1.7.2",
-    "sass": "~1.32.0",
+    "sass": "~1.69.5",
-    "sass-loader": "^10.0.0",
+    "sass-loader": "^13.3.2",
-    "typescript": "~4.5.5",
+    "typescript": "~5.2.2",
-    "vue": "^2.6.14",
+    "vue": "^2.7.15",
     "vue-class-component": "^7.2.3",
     "vue-cli-plugin-vuetify": "^2.5.5",
     "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "^2.6.14",
-    "vuetify": "^2.6.0",
+    "vuetify": "^2.7.1",
     "vuetify-loader": "^1.7.0"
   }
 }

ui/src/components/TickerBar.vue

@@ -31,7 +31,7 @@ export default class TickerBar extends Vue {
 
   private get footer_color(): Color {
     // try getting from vuetify theme
-    let color = this.$vuetify.theme.themes.light[this.color];
+    const color = this.$vuetify.theme.themes.light[this.color];
 
     if (typeof color === "string") {
       return Color(color);

ui/src/components/calendar/CalendarCarousel.vue

@@ -57,7 +57,7 @@ export default class CalendarCarousel extends Vue {
               events: calendars[i],
             });
           }
-        }
+        },
       );
     });
 
@@ -70,7 +70,7 @@ export default class CalendarCarousel extends Vue {
       "calendar/config",
       (data) => {
         this.speed = data.speed;
-      }
+      },
     );
   }
 
@@ -99,7 +99,7 @@ export default class CalendarCarousel extends Vue {
   }
 
   private get calendars(): CalendarModel[] {
-    let arr = [];
+    const arr = [];
 
     for (const json_data of this.data) {
       arr.push(new CalendarModel(json_data));
@@ -131,4 +131,4 @@ export default class CalendarCarousel extends Vue {
     }
   }
 }
-</style>
+</style>

ui/src/components/calendar/EventItem.vue

@@ -49,7 +49,7 @@ export default class EventItem extends Vue {
     );
 
     // decide which duration units to include
-    let units: (keyof DurationLikeObject)[] = ["hours"];
+    const units: (keyof DurationLikeObject)[] = ["hours"];
 
     if (this.event.duration.as("days") >= 1) {
       // include days if duration is at least one day