Use tzdb timezones library

availabili.tf/package-lock.json

@@ -11,6 +11,7 @@
         "@jamescoyle/vue-icon": "^0.1.2",
         "@mdi/js": "^7.4.47",
         "@programic/vue3-tooltip": "^1.0.0",
+        "@vvo/tzdb": "^6.152.0",
         "axios": "^1.7.7",
         "bootstrap-icons": "^1.11.3",
         "css.gg": "^2.1.4",
@@ -2121,6 +2122,12 @@
         }
       }
     },
+    "node_modules/@vvo/tzdb": {
+      "version": "6.152.0",
+      "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.152.0.tgz",
+      "integrity": "sha512-PSHIgDk6LjYTyAK7fPLZIliB1vSQg2OXxfkAkRJzUkwuR/Xp5FzmQNx9SmHVZhw/W/Y1x6TE6yO89PFPossswQ==",
+      "license": "MIT"
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",

availabili.tf/package.json

@@ -18,6 +18,7 @@
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
     "@programic/vue3-tooltip": "^1.0.0",
+    "@vvo/tzdb": "^6.152.0",
     "axios": "^1.7.7",
     "bootstrap-icons": "^1.11.3",
     "css.gg": "^2.1.4",

availabili.tf/src/views/TeamRegistrationView.vue

@@ -1,8 +1,19 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { useTeamsStore } from "../stores/teams";
-import timezones from "../assets/timezones.json";
+//import timezones from "../assets/timezones.json";
 import { useRouter } from "vue-router";
+import ComboBox from "../components/ComboBox.vue";
+import { getTimeZones, type TimeZone } from "@vvo/tzdb";
+import moment from "moment";
+
+const timezones = getTimeZones({
+
+});
+
+console.log(timezones.length);
+
+console.log(moment.tz.names());
 
 const teams = useTeamsStore();
 
@@ -10,10 +21,9 @@ const router = useRouter();
 
 const teamName = ref("");
 
-const timezone = ref(
+const timezone = ref<TimeZone>(timezones.find((tz) => tz.name === "America/New_York")!);
-  Intl.DateTimeFormat().resolvedOptions().timeZone ??
+
-    "Etc/UTC"
+const timezoneStr = ref("");
-);
 
 const minuteOffset = ref(0);
 
@@ -21,10 +31,8 @@ watch(minuteOffset, (newValue) => {
   minuteOffset.value = Math.min(Math.max(0, newValue), 59);
 });
 
-const webhook = ref("");
-
 function createTeam() {
-  teams.createTeam(teamName.value, timezone.value, minuteOffset.value)
+  teams.createTeam(teamName.value, timezone.value.name, minuteOffset.value)
     .then(() => {
       router.push("/");
     });
@@ -56,7 +64,7 @@ function createTeam() {
                 (view all timezones)
               </a>
             </h3>
-            <v-select :options="timezones" v-model="timezone" />
+            <v-select :options="timezones" label="name" v-model="timezone" />
           </div>
           <div class="form-group" id="minute-offset-group">
             <h3>Minute Offset</h3>
@@ -64,7 +72,7 @@ function createTeam() {
           </div>
         </div>
         <em class="aside">
-          Matches will be scheduled based on {{ timezone }} at
+          Matches will be scheduled based on {{ timezone.alternativeName }} at
           {{ minuteOffset }}
           <span v-if="minuteOffset == 1">
             minute