availabili.tf/package-lock.json

@@ -11,7 +11,6 @@
         "@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",
@@ -2122,12 +2121,6 @@
         }
       }
     },
-    "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,7 +18,6 @@
     "@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/App.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
 import { useAuthStore } from "./stores/auth";
-import ProfileDropdown from "./components/ProfileDropdown.vue";
 
 const baseUrl = window.location.origin;
 
@@ -12,41 +11,26 @@ const authStore = useAuthStore();
   <header>
     <div class="wrapper">
       <nav>
-        <h1>
+        <h1>availabili.tf</h1>
-          <RouterLink class="header-link" to="/">availabili.tf</RouterLink>
+        <RouterLink to="/">Home</RouterLink>
-        </h1>
+        <RouterLink to="/schedule">Schedule</RouterLink>
-        <div class="nav-links">
+        <div v-if="authStore.isLoggedIn">
-          <a
+          Welcome {{ authStore.username }}
-            class="button"
-            href="https://github.com/HumanoidSandvichDispenser/availabili.tf"
-            v-tooltip="'View on GitHub'"
-          >
-            <button class="icon">
-              <i class="bi bi-github" />
-            </button>
-          </a>
-          <ProfileDropdown v-if="authStore.isLoggedIn" />
-          <!--button v-if="authStore.isLoggedIn" class="profile-button">
-            Welcome {{ authStore.username }}
-          </button-->
-          <form
-            v-else
-            action="https://steamcommunity.com/openid/login"
-            method="get"
-          >
-            <input type="hidden" name="openid.identity"
-                   value="http://specs.openid.net/auth/2.0/identifier_select" />
-            <input type="hidden" name="openid.claimed_id"
-                   value="http://specs.openid.net/auth/2.0/identifier_select" />
-            <input type="hidden" name="openid.ns" value="http://specs.openid.net/auth/2.0" />
-            <input type="hidden" name="openid.mode" value="checkid_setup" />
-            <input type="hidden" name="openid.return_to" :value="baseUrl + '/login'" />
-            <!--button type="submit">Log in through Steam</button-->
-            <button type="submit" class="sign-in-button">
-              <img src="https://community.fastly.steamstatic.com/public/images/signinthroughsteam/sits_01.png" />
-            </button>
-          </form>
         </div>
+        <form
+          v-else
+          action="https://steamcommunity.com/openid/login"
+          method="get"
+        >
+          <input type="hidden" name="openid.identity"
+                 value="http://specs.openid.net/auth/2.0/identifier_select" />
+          <input type="hidden" name="openid.claimed_id"
+                 value="http://specs.openid.net/auth/2.0/identifier_select" />
+          <input type="hidden" name="openid.ns" value="http://specs.openid.net/auth/2.0" />
+          <input type="hidden" name="openid.mode" value="checkid_setup" />
+          <input type="hidden" name="openid.return_to" :value="baseUrl + '/login'" />
+          <button type="submit">Log in through Steam</button>
+        </form>
       </nav>
     </div>
   </header>
@@ -62,10 +46,6 @@ header {
   max-height: 100vh;
 }
 
-a.header-link {
-  font-weight: 800;
-}
-
 .logo {
   display: block;
   margin: 0 auto 2rem;
@@ -73,36 +53,28 @@ a.header-link {
 
 nav {
   display: flex;
+  gap: 8px;
   width: 100%;
+  font-size: 12px;
   text-align: center;
   margin: 0;
   align-items: center;
-  justify-content: space-between;
-}
-
-nav .nav-links {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  font-size: 11pt;
-  gap: 1rem;
-}
-
-button.profile-button {
-  background-color: transparent;
 }
 
 nav a.router-link-exact-active {
-  color: var(--text);
+  color: var(--crust);
+  background-color: var(--accent);
 }
 
 nav a {
+  padding: 0.5rem 1rem;
   color: var(--subtext-0);
   border-radius: 8px;
 }
 
 nav a:hover {
-  background-color: transparent;
+  color: var(--accent);
+  background-color: var(--accent-transparent);
 }
 
 nav > h1 {
@@ -110,12 +82,6 @@ nav > h1 {
   margin-right: 1rem;
 }
 
-button.sign-in-button {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
 @media (min-width: 1024px) {
   header {
     display: flex;
@@ -136,6 +102,7 @@ button.sign-in-button {
 
   nav {
     text-align: left;
+    margin-left: -1rem;
     font-size: 1rem;
 
     padding: 1rem 0;

availabili.tf/src/assets/main.css

@@ -271,7 +271,7 @@ hr {
   /*box-shadow: 0 0 4px var(--text);*/
 }
 
-[role="menu"], [role="listbox"] {
+[role="menu"] {
   background-color: var(--base);
   border: 1px solid var(--overlay-0);
   border-radius: 4px;
@@ -279,16 +279,6 @@ hr {
   min-width: 8rem;
 }
 
-[role="listbox"] [role="option"] {
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
-[role="listbox"] [role="option"][data-highlighted] {
-  background-color: var(--surface-0);
-  padding: 4px 10px;
-}
-
 [role="menu"] button {
   background-color: var(--base);
   width: 100%;
@@ -307,6 +297,17 @@ hr {
 [role="menu"] button > i.bi.margin {
   margin-right: 0.5em;
 }
+/*
+div[role="menu"] div[role="menuitem"]:first-child button {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+div[role="menu"] div[role="menuitem"]:last-child button {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+*/
 
 [role="menu"] button:hover {
   background-color: var(--surface-0);

availabili.tf/src/components/ComboBox.vue

@@ -1,53 +1,91 @@
-<script setup lang="ts" generic="T extends AcceptableValue">
+<script setup lang="ts">
-import { defineModel, defineProps, ref } from "vue";
+import { computed, defineModel, defineProps, ref } from "vue";
-import {
-  ComboboxContent,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxRoot,
-  ComboboxPortal,
-  ComboboxTrigger,
-  ComboboxAnchor,
-  ComboboxViewport,
-} from "radix-vue";
-import type { AcceptableValue } from "node_modules/radix-vue/dist/shared/types";
 
-const selectedValue = defineModel<T>();
+const model = defineModel();
+
+const props = defineProps({
+  options: Array<String>,
+  isDisabled: Boolean,
+});
 
 const isOpen = ref(false);
+const selectedOption = computed(() => props.options[model.value]);
 
-withDefaults(defineProps<{
+function selectOption(index) {
-  values: T[];
+  model.value = index;
-  //mapper? (value: T): string;
+  isOpen.value = false;
-  //keyMapper? (value: T): string;
+}
-  display: string;
-  keyField: string;
-}>(), {
-  //mapper: (value: T) => value.toString(),
-});
 </script>
 
 <template>
-  <ComboboxRoot
+  <div :class="{ 'dropdown-container': true, 'is-open': isOpen }">
-    v-model="selectedValue"
+    <button @click="isOpen = !isOpen" :disabled="isDisabled">
-    v-model:open="isOpen"
+      {{ selectedOption }}
-    defaultOpen
+      <i class="bi bi-caret-down-fill"></i>
-  >
+    </button>
-    <ComboboxAnchor>
+    <ul class="dropdown" v-if="isOpen" @blur="isOpen = false">
-      <ComboboxInput />
+      <li v-for="(option, i) in options" :key="i" @click="selectOption(i)">
-      <ComboboxTrigger>
+        <button :class="{ 'is-selected': i == model }">
-        hi
+          {{ option }}
-      </ComboboxTrigger>
+        </button>
-    </ComboboxAnchor>
+      </li>
-
+    </ul>
-    <ComboboxPortal>
+  </div>
-      <ComboboxContent position="popper">
-        <ComboboxViewport>
-        </ComboboxViewport>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
 </template>
 
 <style scoped>
+.dropdown-container {
+  display: inline-block;
+  border-radius: 8px;
+}
+
+.dropdown-container button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  text-align: left;
+  font-weight: 700;
+  font-size: 16px;
+  padding: 4px;
+  transition-duration: 200ms;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.dropdown-container button:hover {
+  background-color: var(--crust);
+}
+
+.dropdown-container.is-open ul.dropdown {
+  box-shadow: 1px 1px 8px var(--shadow);
+}
+
+ul.dropdown {
+  display: block;
+  background-color: var(--base);
+  position: absolute;
+  margin-top: 8px;
+  padding: 0;
+  z-index: 2;
+  border-radius: 8px;
+  overflow: none;
+}
+
+ul.dropdown > li {
+  list-style-type: none;
+}
+
+.dropdown li > button {
+  padding: 8px 16px;
+  font-weight: 500;
+  font-size: 14px;
+  border-radius: 0;
+}
+
+.dropdown li > button.is-selected {
+  background-color: var(--accent-transparent);
+  color: var(--accent);
+}
 </style>

availabili.tf/src/components/LogsTfIntegrationForm.vue

@@ -27,8 +27,8 @@ function disableIntegration() {
 </script>
 
 <template>
-  <h2>logs.tf Auto-Tracking</h2>
+  <h2>logs.tf Integration</h2>
-  <p>Automatically fetch and track match history from logs.tf.</p>
+  <p>Automatically track match history from logs.tf.</p>
   <div v-if="model">
     <div class="form-group margin">
       <h3>logs.tf API key (optional)</h3>

availabili.tf/src/components/PlayerCard.vue

@@ -5,12 +5,11 @@ import { useRosterStore } from "../stores/roster";
 
 const rosterStore = useRosterStore();
 
-const props = withDefaults(defineProps<{
+const props = defineProps({
-  roleTitle: string,
+  roleTitle: String,
-  player: PlayerTeamRoleFlat | undefined,
+  player: Object as PropType<PlayerTeamRoleFlat>,
-  isRoster: boolean,
+  isRoster: Boolean,
-}>(), {
+  isRinger: Boolean,
-  isRoster: false,
 });
 
 const isSelected = computed(() => {
@@ -18,9 +17,11 @@ const isSelected = computed(() => {
     return rosterStore.selectedRole == props.roleTitle;
   }
 
-  const selectedPlayers = rosterStore.selectedPlayers;
+  if (props.isRinger) {
+    return rosterStore.selectedPlayers[props.roleTitle]?.playtime == -1;
+  }
 
-  return selectedPlayers[props.roleTitle]?.steamId == props.player?.steamId;
+  return Object.values(rosterStore.selectedPlayers).includes(props.player);
 });
 
 function onClick() {
@@ -35,13 +36,25 @@ function onClick() {
     if (isSelected.value) {
       rosterStore.selectPlayerForRole(undefined, props.roleTitle);
     } else {
-      rosterStore.selectPlayerForRole(props.player, props.roleTitle);
+      if (props.isRinger) {
+        const ringerPlayer: PlayerTeamRoleFlat = {
+          steamId: "0",
+          name: "Ringer",
+          role: props.roleTitle ?? "",
+          isMain: false,
+          availability: 1,
+          playtime: -1,
+        };
+        rosterStore.selectPlayerForRole(ringerPlayer, props.roleTitle);
+      } else {
+        rosterStore.selectPlayerForRole(props.player, props.roleTitle);
+      }
     }
   }
 };
 
 const playtime = computed(() => {
-  let hours = props.player?.playtime ?? 0 / 3600;
+  let hours = props.player?.playtime / 3600 ?? 0;
   return hours.toFixed(1);
 });
 </script>
@@ -49,7 +62,7 @@ const playtime = computed(() => {
 <template>
   <button :class="{
     'player-card': true,
-    'no-player': !player,
+    'no-player': !player && !isRinger,
     'selected': isSelected,
     'can-be-available': player?.availability == 1
   }" @click="onClick">
@@ -66,12 +79,21 @@ const playtime = computed(() => {
               (alternate)
             </span>
           </span>
-          <span v-if="Number(playtime) > 0">
+          <span v-if="playtime > 0">
             {{ playtime }} hours
           </span>
         </div>
       </span>
     </div>
+    <div v-else-if="isRinger" class="role-info">
+      <span>
+        <h4 class="player-name">Ringer</h4>
+        <div class="subtitle">
+          <span>{{ rosterStore.roleNames[roleTitle] }}</span>
+          <!--span>nobody likes to play {{ roleTitle }}</span-->
+        </div>
+      </span>
+    </div>
     <div v-else class="role-info">
       <span>
         {{ rosterStore.roleNames[roleTitle] }}

availabili.tf/src/components/PlayerTeamCard.vue

@@ -131,14 +131,9 @@ const rightIndicator = computed(() => {
             :availability="player.availability[1]"
           />
         </div>
-        <a
+        <h3>
-          class="player-name"
+          {{ player.username }}
-          :href="`https://steamcommunity.com/profiles/${player.steamId}`"
+        </h3>
-        >
-          <h3>
-            {{ player.username }}
-          </h3>
-        </a>
         <svg-icon
           v-if="player.isTeamLeader"
           :class="[
@@ -261,14 +256,6 @@ const rightIndicator = computed(() => {
   background-color: var(--green);
 }
 
-a.player-name {
-  color: unset;
-}
-
-a.player-name:hover {
-  background-color: unset;
-}
-
 .flex-middle {
   display: flex;
   gap: 8px;

availabili.tf/src/components/ProfileDropdown.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { useAuthStore } from "@/stores/auth";
-import {
-  DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-} from "radix-vue";
-import { RouterLink } from "vue-router";
-
-const authStore = useAuthStore();
-
-function logout() {
-  authStore.logout();
-}
-</script>
-
-<template>
-  <DropdownMenuRoot>
-    <DropdownMenuTrigger className="profile-button">
-      {{ authStore.username }}
-      <i class="bi bi-chevron-down" />
-    </DropdownMenuTrigger>
-    <DropdownMenuPortal>
-      <DropdownMenuContent className="shadow">
-        <DropdownMenuItem>
-          <RouterLink class="button" :to="{ 'name': 'user-settings' }">
-            <button>
-              <i class="bi bi-gear margin" />
-              Settings
-            </button>
-          </RouterLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <RouterLink class="button" to="/teams">
-            <button>
-              <i class="bi bi-people margin" />
-              Teams
-            </button>
-          </RouterLink>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <button class="destructive" @click="logout">
-            <i class="bi bi-box-arrow-right margin" />
-            Log out
-          </button>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
-  </DropdownMenuRoot>
-</template>
-
-<style scoped>
-.profile-button {
-  background-color: transparent;
-  font-size: inherit;
-}
-
-.profile-button:hover {
-  background-color: var(--surface-0);
-}
-</style>

availabili.tf/src/main.ts

@@ -6,7 +6,6 @@ import { createPinia } from "pinia";
 import VueSelect from "vue-select";
 import { TooltipDirective } from "vue3-tooltip";
 import "vue3-tooltip/tooltip.css";
-import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 import App from "./App.vue";
 import router from "./router";

availabili.tf/src/router/index.ts

@@ -11,7 +11,6 @@ import TeamSettingsView from "@/views/TeamSettingsView.vue";
 import TeamSettingsGeneralView from "@/views/TeamSettings/GeneralView.vue";
 import TeamSettingsIntegrationsView from "@/views/TeamSettings/IntegrationsView.vue";
 import TeamSettingsInvitesView from "@/views/TeamSettings/InvitesView.vue";
-import UserSettingsView from "@/views/UserSettingsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -73,11 +72,6 @@ const router = createRouter({
         },
       ],
     },
-    {
-      path: "/settings",
-      name: "user-settings",
-      component: UserSettingsView,
-    },
   ]
 });
 

availabili.tf/src/stores/auth.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useClientStore } from "./client";
-import { useRouter, type LocationQuery } from "vue-router";
+import type { LocationQuery } from "vue-router";
 
 export const useAuthStore = defineStore("auth", () => {
   const clientStore = useClientStore();
@@ -13,8 +13,6 @@ export const useAuthStore = defineStore("auth", () => {
   const isRegistering = ref(false);
   const hasCheckedAuth = ref(false);
 
-  const router = useRouter();
-
   async function getUser() {
     hasCheckedAuth.value = true;
     return clientStore.call(
@@ -50,16 +48,8 @@ export const useAuthStore = defineStore("auth", () => {
       });
   }
 
-  async function logout() {
+  async function setUsername(username: string) {
-    return client.default.deleteApiLogin()
+    return client.default.setUsername({ username });
-      .then(() => router.push("/"));
-  }
-
-  async function setUsername(name: string) {
-    return client.default.setUsername({ username: name })
-      .then((response) => {
-        username.value = response.username;
-      });
   }
 
   return {
@@ -70,7 +60,6 @@ export const useAuthStore = defineStore("auth", () => {
     isRegistering,
     getUser,
     login,
-    logout,
     setUsername,
   }
 });

availabili.tf/src/stores/roster.ts

@@ -16,7 +16,7 @@ export const useRosterStore = defineStore("roster", () => {
 
   // TODO: move roster state to a composable
 
-  const neededRoles  = ref([
+  const neededRoles: Reactive<Array<String>> = reactive([
     "PocketScout",
     "FlankScout",
     "PocketSoldier",
@@ -95,7 +95,7 @@ export const useRosterStore = defineStore("roster", () => {
     "Spy": "Spy",
   });
 
-  function selectPlayerForRole(player: PlayerTeamRoleFlat | undefined, role: string) {
+  function selectPlayerForRole(player: PlayerTeamRoleFlat, role: string) {
     if (player && player.steamId) {
       const existingRole = Object.keys(selectedPlayers).find((selectedRole) => {
         return selectedPlayers[selectedRole]?.steamId == player.steamId &&

availabili.tf/src/views/RosterBuilderView.vue

@@ -79,10 +79,13 @@ onMounted(async () => {
         <span v-if="!hasAvailablePlayers && rosterStore.selectedRole">
           No players are currently available for this role.
         </span>
-        <h3 v-if="hasAlternates">Alternates</h3>
+        <h3 v-if="hasAvailablePlayers">Alternates</h3>
         <PlayerCard v-for="player in rosterStore.alternateRoles"
                     :player="player"
                     :role-title="player.role" />
+        <PlayerCard v-if="rosterStore.selectedRole"
+                    is-ringer
+                    :role-title="rosterStore.selectedRole" />
         <div class="action-buttons">
           <button class="accent" @click="closeSelection">
             <i class="bi bi-check" />

availabili.tf/src/views/RosterBuilderViewDragDrop.vue

@@ -27,24 +27,18 @@ const hasAvailablePlayers = computed(() => {
       </div>
       <div class="column">
         <h3 v-if="hasAvailablePlayers">Available</h3>
-        <PlayerCard
+        <PlayerCard v-for="player in rosterStore.definitelyAvailableAll"
-          v-for="player in rosterStore.definitelyAvailable"
+                    :player="player"
-          :player="player"
+                    :role-title="player.role" />
-          :role-title="player.role"
-          :is-roster="false"
-        />
         <span v-if="!hasAvailablePlayers">
           No players are currently available for this role.
         </span>
       </div>
       <div class="column">
         <h3 v-if="hasAvailablePlayers">Available if needed</h3>
-        <PlayerCard
+        <PlayerCard v-for="player in rosterStore.canBeAvailableAll"
-          v-for="player in rosterStore.canBeAvailable"
+                    :player="player"
-          :player="player"
+                    :role-title="player.role" />
-          :role-title="player.role"
-          :is-roster="false"
-        />
       </div>
     </div>
   </main>

availabili.tf/src/views/TeamRegistrationView.vue

@@ -1,19 +1,8 @@
 <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();
 
@@ -21,9 +10,10 @@ const router = useRouter();
 
 const teamName = ref("");
 
-const timezone = ref<TimeZone>(timezones.find((tz) => tz.name === "America/New_York")!);
+const timezone = ref(
-
+  Intl.DateTimeFormat().resolvedOptions().timeZone ??
-const timezoneStr = ref("");
+    "Etc/UTC"
+);
 
 const minuteOffset = ref(0);
 
@@ -31,8 +21,10 @@ watch(minuteOffset, (newValue) => {
   minuteOffset.value = Math.min(Math.max(0, newValue), 59);
 });
 
+const webhook = ref("");
+
 function createTeam() {
-  teams.createTeam(teamName.value, timezone.value.name, minuteOffset.value)
+  teams.createTeam(teamName.value, timezone.value, minuteOffset.value)
     .then(() => {
       router.push("/");
     });
@@ -64,7 +56,7 @@ function createTeam() {
                 (view all timezones)
               </a>
             </h3>
-            <v-select :options="timezones" label="name" v-model="timezone" />
+            <v-select :options="timezones" v-model="timezone" />
           </div>
           <div class="form-group" id="minute-offset-group">
             <h3>Minute Offset</h3>
@@ -72,7 +64,7 @@ function createTeam() {
           </div>
         </div>
         <em class="aside">
-          Matches will be scheduled based on {{ timezone.alternativeName }} at
+          Matches will be scheduled based on {{ timezone }} at
           {{ minuteOffset }}
           <span v-if="minuteOffset == 1">
             minute

availabili.tf/src/views/TeamSettings/IntegrationsView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import DiscordIntegrationForm from "@/components/DiscordIntegrationForm.vue";
 import IntegrationDetails from "@/components/IntegrationDetails.vue";
-import LoaderContainer from "@/components/LoaderContainer.vue";
 import LogsTfIntegrationForm from "@/components/LogsTfIntegrationForm.vue";
 import { useTeamDetails } from "@/composables/team-details";
 import { useTeamsStore } from "@/stores/teams";
@@ -12,33 +11,20 @@ const teamsStore = useTeamsStore();
 const integrationsStore = useIntegrationsStore();
 const { teamId } = useTeamDetails();
 
-const isLoading = ref(false);
-
 //function createIntegration() {
 //  integrationsStore.createIntegration(teamId.value, "discord");
 //}
 
 onMounted(() => {
-  isLoading.value = true;
   teamsStore.fetchTeam(teamId.value)
-    .then(() => {
+    .then(() => integrationsStore.getIntegrations(teamId.value));
-      integrationsStore.getIntegrations(teamId.value)
-        .then(() => {
-          isLoading.value = false;
-        });
-    });
 });
 </script>
 
 <template>
   <div class="team-integrations">
-    <div v-if="isLoading">
+    <DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />
-      <LoaderContainer />
+    <LogsTfIntegrationForm v-model="integrationsStore.logsTfIntegration" />
-    </div>
-    <template v-else>
-      <DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />
-      <LogsTfIntegrationForm v-model="integrationsStore.logsTfIntegration" />
-    </template>
   </div>
 </template>
 

availabili.tf/src/views/UserSettingsView.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { useAuthStore } from "@/stores/auth";
-import { onMounted, ref } from "vue";
-
-const displayName = ref("");
-
-const authStore = useAuthStore();
-
-function save() {
-  authStore.setUsername(displayName.value);
-}
-
-onMounted(() => {
-  displayName.value = authStore.username;
-});
-</script>
-
-<template>
-  <main>
-    <div class="user-settings-container">
-      <h1>User Settings</h1>
-      <div class="form-group margin">
-        <h3>
-          Display Name
-        </h3>
-        <input v-model="displayName" />
-      </div>
-      <div class="form-group margin">
-        <div class="action-buttons">
-          <button class="accent" @click="save">Save</button>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-.user-settings-container {
-  align-items: center;
-  max-width: 500px;
-  margin: auto;
-}
-</style>

backend-flask/events.py

@@ -292,9 +292,6 @@ def update_event(player: Player, event_id: int, json: UpdateEventJson, **_):
         else:
             player_event.role = None
 
-    event.name = json.name
-    event.description = json.description
-
     db.session.commit()
 
     event.update_discord_message()

backend-flask/models/event.py

@@ -23,7 +23,7 @@ class Event(app_db.BaseModel):
     name: Mapped[str] = mapped_column(String(255), nullable=False)
     start_time: Mapped[datetime] = mapped_column(UtcDateTime, nullable=False)
 
-    description: Mapped[str | None] = mapped_column(Text, nullable=True)
+    description: Mapped[str] = mapped_column(Text, nullable=True)
     created_at: Mapped[datetime] = mapped_column(TIMESTAMP, server_default=func.now())
     discord_message_id: Mapped[int | None] = mapped_column(BigInteger, nullable=True)