Move roster builder button to member list

availabili.tf/src/components/SchedulePlayerList.vue

@@ -1,25 +1,77 @@
 <script setup lang="ts">
 import { useScheduleStore } from "../stores/schedule";
 import SchedulePlayerListItem from "./SchedulePlayerListItem.vue";
+import { useRouter } from "vue-router";
+import { computed } from "vue";
 
 const scheduleStore = useScheduleStore();
+
+const router = useRouter();
+
+const selectedTimeTz = computed(() =>
+  props.selectedTime.clone().tz(scheduleStore.team?.tzTimezone));
+
+const isTeamTzLocal = computed(() => {
+  return selectedTimeTz.value.utcOffset() == props.selectedTime.utcOffset();
+});
+
+const props = defineProps({
+  selectedTime: Object
+});
+
+function scheduleRoster() {
+  router.push({
+    name: "roster-builder",
+    params: {
+      teamId: scheduleStore.team.id,
+      startTime: props.selectedTime.unix(),
+    }
+  });
+}
 </script>
 
 <template>
   <div class="schedule-player-list">
     <h3>{{ scheduleStore.team?.teamName }}</h3>
-    <SchedulePlayerListItem
+    <div>
-      v-for="record in scheduleStore.playerAvailability"
+      <SchedulePlayerListItem
-      :player="record"
+        v-for="record in scheduleStore.playerAvailability"
-    />
+        :player="record"
+      />
+    </div>
+    <h4>
+      <template v-if="selectedTime">
+        <div>
+          {{ selectedTime.format("L LT z") }}
+        </div>
+        <div v-if="!isTeamTzLocal">
+          {{ selectedTimeTz.format("L LT z") }}
+        </div>
+      </template>
+    </h4>
+    <button @click="scheduleRoster" v-if="selectedTime">
+      Schedule for {{ selectedTime.format("L LT") }}
+    </button>
   </div>
 </template>
 
 <style scoped>
-h3 {
+h3, h4 {
   font-weight: 700;
 }
 
+h4, h4 > div {
+  font-weight: 700;
+  font-size: 10pt;
+  min-height: 1em;
+}
+
+.schedule-player-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
 .player:hover {
   background-color: var(--mantle);
 }

availabili.tf/src/views/ScheduleView.vue

@@ -54,16 +54,6 @@ function copyPreviousWeek() {
     });
 }
 
-function scheduleRoster() {
-  router.push({
-    name: "roster-builder",
-    params: {
-      teamId: selectedTeam.value.id,
-      startTime: selectedTime.value.unix(),
-    }
-  });
-}
-
 onMounted(() => {
   teamsStore.fetchTeams()
     .then((teamsList) => {
@@ -74,7 +64,6 @@ onMounted(() => {
       if (queryTeam) {
         selectedTeam.value = queryTeam;
         schedule.team = queryTeam;
-        schedule.fetchTeamSchedule();
       } else {
         selectedTeam.value = options.value[0];
       }
@@ -141,9 +130,6 @@ onMounted(() => {
             <button @click="copyPreviousWeek">
               Copy previous week
             </button>
-            <button @click="scheduleRoster" v-if="selectedTime">
-              Schedule for {{ selectedTime.format("L LT") }}
-            </button>
             <button class="accent" @click="isEditing = true">
               <i class="bi bi-pencil-fill"></i>
             </button>
@@ -155,7 +141,9 @@ onMounted(() => {
       You currently are not in any team to schedule for.
     </div>
     <div class="player-list">
-      <SchedulePlayerList />
+      <SchedulePlayerList
+        :selected-time="selectedTime"
+      />
     </div>
   </main>
 </template>
@@ -163,7 +151,6 @@ onMounted(() => {
 <style scoped>
 main {
   flex-direction: row;
-  gap: 8px;
   display: flex;
   justify-content: space-evenly;
 }
@@ -233,4 +220,12 @@ button.right.radio.selected {
   width: auto;
   min-width: 11em;
 }
+
+.schedule-view-container {
+  flex-basis: 75%;
+}
+
+.player-list {
+  flex-basis: 25%;
+}
 </style>