From 110e7a0bb4586521c45d314cf9158bee4a56dc86 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Thu, 9 Mar 2023 16:32:50 +0000
Subject: [PATCH] Update dashboard to work better at smaller widths and general
 fixes

---
 .../website/bracket/BracketResolveButton.vue  |   5 +-
 .../website/dashboard/BracketImplications.vue |   2 +-
 .../website/dashboard/BroadcastEditor.vue     |  95 ++++++------
 .../website/dashboard/DashboardClock.vue      |   3 +-
 .../website/dashboard/MatchEditor.vue         | 137 +++++++++++-------
 .../dashboard/PreviewProgramDisplay.vue       |   2 +-
 .../website/dashboard/ScheduleEditor.vue      |   2 +-
 website/src/views/Dashboard.vue               |  42 ++++--
 8 files changed, 177 insertions(+), 111 deletions(-)

diff --git a/website/src/components/website/bracket/BracketResolveButton.vue b/website/src/components/website/bracket/BracketResolveButton.vue
index 730ee530..c5d53b93 100644
--- a/website/src/components/website/bracket/BracketResolveButton.vue
+++ b/website/src/components/website/bracket/BracketResolveButton.vue
@@ -16,7 +16,8 @@ export default {
     name: "BracketResolveButton",
     props: {
         bracket: Object,
-        verticalButton: Boolean
+        verticalButton: Boolean,
+        showButton: Boolean
     },
     components: { BButton },
     data: () => ({
@@ -25,7 +26,7 @@ export default {
     computed: {
         showResolveButton() {
             if (!isAuthenticated(this.$root)) return false;
-            return this.$root.auth?.user?.website_settings?.includes("Can edit any match");
+            return this.showButton || this.$root.auth?.user?.website_settings?.includes("Can edit any match");
         }
     },
     methods: {
diff --git a/website/src/components/website/dashboard/BracketImplications.vue b/website/src/components/website/dashboard/BracketImplications.vue
index 41ec8b9a..a63801cf 100644
--- a/website/src/components/website/dashboard/BracketImplications.vue
+++ b/website/src/components/website/dashboard/BracketImplications.vue
@@ -7,7 +7,7 @@
                 <BracketImplicationMatch class="flex-grow-1" :imp="imps.win" relation="Winner" :team="matchWinner" :link-to-detailed-match="linkToDetailedMatch"></BracketImplicationMatch>
                 <BracketImplicationMatch class="flex-grow-1" :imp="imps.lose" relation="Loser" :team="matchLoser" :link-to-detailed-match="linkToDetailedMatch"></BracketImplicationMatch>
                 <div class="button-holder" v-if="showResolveButton">
-                    <BracketResolveButton :bracket="imps.bracket" vertical-button />
+                    <BracketResolveButton :show-button="showResolveButton" :bracket="imps.bracket" vertical-button />
                 </div>
             </div>
         </div>
diff --git a/website/src/components/website/dashboard/BroadcastEditor.vue b/website/src/components/website/dashboard/BroadcastEditor.vue
index ba7bdd71..58393d36 100644
--- a/website/src/components/website/dashboard/BroadcastEditor.vue
+++ b/website/src/components/website/dashboard/BroadcastEditor.vue
@@ -1,53 +1,59 @@
 <template>
-    <div class="broadcast-editor d-flex">
-        <div class="group">
-            <div class="group-top">Flip Teams</div>
-            <div class="group-bottom">
-                <b-form-checkbox :checked="match.flip_teams" @change="(state) => toggleFlipTeams(state)"
-                                 button size="sm" :button-variant="match.flip_teams ? 'primary' : ''">
-                    Flip Teams
-                </b-form-checkbox>
+    <div class="broadcast-editor d-flex flex-wrap align-items-center justify-content-center">
+        <div class="area left-area">
+            <div class="group">
+                <div class="group-top">Flip Teams</div>
+                <div class="group-bottom">
+                    <b-form-checkbox :checked="match.flip_teams" @change="(state) => toggleFlipTeams(state)"
+                                     button size="sm" :button-variant="match.flip_teams ? 'primary' : ''">
+                        Flip Teams
+                    </b-form-checkbox>
+                </div>
             </div>
-        </div>
-        <div class="group map-attack">
-            <div class="group-top">Attacker Side</div>
-            <div class="group-bottom">
-                <b-button-group>
-                    <b-button size="sm" v-for="side in ['Left', 'Right', 'Both']" :key="side"
-                              :variant="broadcast.map_attack === side ? 'danger' : 'secondary'"
-                              @click="() => setAttack(side)">{{ side }}</b-button>
-                </b-button-group>
+            <div class="group map-attack">
+                <div class="group-top">Attacker Side</div>
+                <div class="group-bottom">
+                    <b-button-group>
+                        <b-button size="sm" v-for="side in ['Left', 'Right', 'Both']" :key="side"
+                                  :variant="broadcast.map_attack === side ? 'danger' : 'secondary'"
+                                  @click="() => setAttack(side)">{{ side }}</b-button>
+                    </b-button-group>
+                </div>
             </div>
-        </div>
-        <div class="group">
-            <div class="group-top">Player Cams</div>
-            <div class="group-bottom">
-                <b-form-checkbox :checked="broadcast.show_cams" @change="(state) => togglePlayerCams(state)"
-                                 button size="sm" :button-variant="broadcast.show_cams ? 'primary' : ''">
-                    Show Cams
-                </b-form-checkbox>
+            <div class="group">
+                <div class="group-top">Player Cams</div>
+                <div class="group-bottom">
+                    <b-form-checkbox :checked="broadcast.show_cams" @change="(state) => togglePlayerCams(state)"
+                                     button size="sm" :button-variant="broadcast.show_cams ? 'primary' : ''">
+                        Show Cams
+                    </b-form-checkbox>
+                </div>
             </div>
         </div>
         <div class="spacer flex-grow-1"></div>
-        <div class="group text-right">
-            <div class="group-top">Break Display</div>
-            <div class="group-bottom">
-                <div class="fake-btn-group">
-                    <BreakDisplayMultiModal :broadcast="broadcast" />
+        <div class="area right-area">
+            <div class="group text-right">
+                <div class="group-top">Break Display</div>
+                <div class="group-bottom">
+                    <div class="fake-btn-group">
+                        <BreakDisplayMultiModal :broadcast="broadcast"/>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="group text-right">
-            <div class="group-top">Observers</div>
-            <div class="group-bottom">
-                <ObserverSettingsModal :broadcast="broadcast" />
+            <div class="group text-right">
+                <div class="group-top">Observers</div>
+                <div class="group-bottom">
+                    <ObserverSettingsModal :broadcast="broadcast"/>
+                </div>
             </div>
-        </div>
-        <div class="group text-right">
-            <div class="group-top">Advertise</div>
-            <div class="group-bottom">
-                <b-form-checkbox :checked="broadcast.advertise" @change="(state) => advertiseBroadcast(state)"
-                                 button size="sm" :button-variant="broadcast.advertise ? 'primary' : ''">{{ broadcast.advertise ? 'Advertising' : 'Advertise' }}</b-form-checkbox>
+            <div class="group text-right">
+                <div class="group-top">Advertise</div>
+                <div class="group-bottom">
+                    <b-form-checkbox :checked="broadcast.advertise" @change="(state) => advertiseBroadcast(state)"
+                                     button size="sm" :button-variant="broadcast.advertise ? 'primary' : ''">
+                        {{ broadcast.advertise ? "Advertising" : "Advertise" }}
+                    </b-form-checkbox>
+                </div>
             </div>
         </div>
     </div>
@@ -115,8 +121,13 @@ export default {
 </script>
 
 <style scoped>
-    .broadcast-editor {
+    .area {
+        display: flex;
         gap: 1em;
+        margin-bottom: .5rem;
+    }
+    .right-area {
+        margin-left: auto;
     }
     .group-top {
         font-size: 0.9em;
diff --git a/website/src/components/website/dashboard/DashboardClock.vue b/website/src/components/website/dashboard/DashboardClock.vue
index c3f65f7a..77f05975 100644
--- a/website/src/components/website/dashboard/DashboardClock.vue
+++ b/website/src/components/website/dashboard/DashboardClock.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dashboard-clock bg-dark px-2 mx-1" @click="() => use12hr = !use12hr">
+    <div class="dashboard-clock bg-dark px-2" @click="() => use12hr = !use12hr">
         <div class="title">{{ title }}</div>
         <div class="clock">{{ text }}</div>
     </div>
@@ -51,6 +51,7 @@ export default {
 
         padding: 4px;
         height: 48px;
+        margin: 0.25rem;
     }
     .title {
         font-size: 0.9em;
diff --git a/website/src/components/website/dashboard/MatchEditor.vue b/website/src/components/website/dashboard/MatchEditor.vue
index 4fd89b41..90aa0046 100644
--- a/website/src/components/website/dashboard/MatchEditor.vue
+++ b/website/src/components/website/dashboard/MatchEditor.vue
@@ -36,54 +36,79 @@
                     <b-button v-if="hideMatchExtras" class="ml-2 top-button flex-shrink-0" variant="success" @click="() => sendMapDataChange()"><i class="fas fa-save fa-fw"></i> Save all</b-button>
                 </div>
             </div>
-            <table class="teams-maps table table-bordered table-sm table-dark mt-2 mb-0 opacity-changes"  :class="{'low-opacity': processing['map']}">
-                <tr class="map" v-for="(map, i) in maps" :key="i" :class="{'banned': banners[i], 'very-low-opacity': !map.dummy && !map._original_data_id}">
-                    <td class="form-stack number">
-                        <div class="form-top">#</div>
-                        <div class="form-button">
-                            <b-form-input type="number" class="map-number no-arrows" :min="1" :max="minMaps" v-model.number="mapNumbers[i]"></b-form-input>
-                        </div>
-                    </td>
-                    <td class="map form-stack" style="width: 100%;">
-                        <div class="form-top">
-                            Map
-                        </div>
-                        <div class="form-bottom">
-                            <b-form-select :options="getMapOptions(i)" v-if="mapChoices[i]" v-model="mapChoices[i]" />
-                            <b-form-select :options="getMapOptions(i)" v-else v-model="mapChoices[i]" />
-                        </div>
-                    </td>
-                    <td class="form-stack">
-                        <div class="form-top text-center">
-                            Map Score
-                        </div>
-                        <div class="form-bottom map-editors d-flex">
-                            <MapScoreEditor class="map-editor" v-model="score_1s[i]" @input="(val) => checkAutoWinner(i, val)" :team="teams[0]"></MapScoreEditor>
-                            <MapScoreEditor class="map-editor" v-model="score_2s[i]" @input="(val) => checkAutoWinner(i, val)" :team="teams[1]" :reverse="true"></MapScoreEditor>
-                        </div>
-                    </td>
-                    <td class="form-stack">
-                        <div class="form-top text-center">
-                            Draw
-                        </div>
-                        <div class="form-bottom d-flex">
-                            <b-form-checkbox button :button-variant="draws[i] ? 'primary' : 'light'" class="draw-checkbox" v-model="draws[i]">
-                                <i v-if="draws[i]" class="fas fa-check fa-fw"></i>
-                                <i v-else class="fas fa-fw fa-check hoverable"></i>
-                            </b-form-checkbox>
-                        </div>
-                    </td>
-                    <td class="form-stack number" v-if="!hideMatchExtras">
-                        <div class="form-top">Replay Code</div>
-                        <div class="form-button">
-                            <b-form-input type="text" v-model="replayCodes[i]"></b-form-input>
-                        </div>
-                    </td>
-                    <td><TeamPicker title="Banned by" :teams="teams" v-model="banners[i]"></TeamPicker></td>
-                    <td><TeamPicker title="Picked by" :class="{ 'very-low-opacity': banners[i] }" :teams="teams" v-model="pickers[i]"></TeamPicker></td>
-                    <td><TeamPicker title="Winner" :class="{ 'very-low-opacity': banners[i] }" :teams="teams" v-model="winners[i]"></TeamPicker></td>
-                </tr>
-            </table>
+            <div class="maps-table-wrapper">
+                <table class="teams-maps table table-bordered table-sm table-dark mt-2 mb-0 opacity-changes"
+                       :class="{'low-opacity': processing['map']}">
+                    <tr class="map" v-for="(map, i) in maps" :key="i"
+                        :class="{'banned': banners[i], 'very-low-opacity': !map.dummy && !map._original_data_id}">
+                        <td class="form-stack number">
+                            <div class="form-top d-flex">
+                                <div>#</div>
+                                <div class="flex-grow-1 text-right">
+                                    <i class="fas fa-pen" v-b-tooltip="'Edits an existing map record'" v-if="existingMapIDs[i]"></i>
+                                    <i class="fas fa-plus" v-b-tooltip="'Creates a new map record'" v-if="!existingMapIDs[i]"></i>
+                                </div>
+                            </div>
+                            <div class="form-button">
+                                <b-form-input type="number" class="map-number no-arrows" :min="1" :max="minMaps"
+                                              v-model.number="mapNumbers[i]"></b-form-input>
+                            </div>
+                        </td>
+                        <td class="map form-stack" style="width: 100%;">
+                            <div class="form-top">
+                                Map
+                            </div>
+                            <div class="form-bottom">
+                                <b-form-select :options="getMapOptions(i)" v-if="mapChoices[i]"
+                                               v-model="mapChoices[i]"/>
+                                <b-form-select :options="getMapOptions(i)" v-else v-model="mapChoices[i]"/>
+                            </div>
+                        </td>
+                        <td class="form-stack">
+                            <div class="form-top text-center">
+                                Map Score
+                            </div>
+                            <div class="form-bottom map-editors d-flex">
+                                <MapScoreEditor class="map-editor" v-model="score_1s[i]"
+                                                @input="(val) => checkAutoWinner(i, val)"
+                                                :team="teams[0]"></MapScoreEditor>
+                                <MapScoreEditor class="map-editor" v-model="score_2s[i]"
+                                                @input="(val) => checkAutoWinner(i, val)" :team="teams[1]"
+                                                :reverse="true"></MapScoreEditor>
+                            </div>
+                        </td>
+                        <td class="form-stack">
+                            <div class="form-top text-center">
+                                Draw
+                            </div>
+                            <div class="form-bottom d-flex">
+                                <b-form-checkbox button :button-variant="draws[i] ? 'primary' : 'light'"
+                                                 class="draw-checkbox" v-model="draws[i]">
+                                    <i v-if="draws[i]" class="fas fa-check fa-fw"></i>
+                                    <i v-else class="fas fa-fw fa-check hoverable"></i>
+                                </b-form-checkbox>
+                            </div>
+                        </td>
+                        <td class="form-stack number" v-if="!hideMatchExtras">
+                            <div class="form-top">Replay Code</div>
+                            <div class="form-button">
+                                <b-form-input type="text" v-model="replayCodes[i]"></b-form-input>
+                            </div>
+                        </td>
+                        <td>
+                            <TeamPicker title="Banned by" :teams="teams" v-model="banners[i]"></TeamPicker>
+                        </td>
+                        <td>
+                            <TeamPicker title="Picked by" :class="{ 'very-low-opacity': banners[i] }" :teams="teams"
+                                        v-model="pickers[i]"></TeamPicker>
+                        </td>
+                        <td>
+                            <TeamPicker title="Winner" :class="{ 'very-low-opacity': banners[i] }" :teams="teams"
+                                        v-model="winners[i]"></TeamPicker>
+                        </td>
+                    </tr>
+                </table>
+            </div>
         </b-form>
     </div>
 </template>
@@ -270,7 +295,7 @@ export default {
             const groups = {};
             let mapType = null;
 
-            console.log(this.broadcastData);
+            // console.log(this.broadcastData);
             if (this.broadcastData?.map_set) {
                 const maps = this.broadcastData?.map_set.split(",");
                 mapType = maps[mapIndex];
@@ -313,7 +338,7 @@ export default {
             }
         },
         setIfNew(key, index, value) {
-            if (this.previousAutoData?.[key]?.[index] === value) return; // console.log(`Not updating ${key}[${index}] because ${value} is the same as last set`);
+            if (this.previousAutoData?.[key]?.[index] === value) return console.log(`Not updating ${key}[${index}] because ${value} is the same as last set`);
             console.log(`Updating ${key}[${index}] to`, value);
             this.$set(this[key], index, value);
         },
@@ -328,8 +353,8 @@ export default {
             if (data.maps) {
                 data.maps.forEach((map, i) => {
                     const mapChoice = cleanID(map.map?.id || map.map?.[0]);
-                    this.setIfNew("mapChoices", i, mapChoice || null);
                     console.log("Map set", !!mapChoice, mapChoice, this.mapChoices[i], map);
+                    this.setIfNew("mapChoices", i, mapChoice || null);
                     this.setIfNew("draws", i, map.draw);
                     this.setIfNew("existingMapIDs", i, map.id);
                     this.setIfNew("winners", i, map.winner?.id || map.winner?.[0]);
@@ -412,6 +437,9 @@ export default {
 </script>
 
 <style scoped>
+    .maps-table-wrapper {
+        overflow-x: auto;
+    }
     .opacity-changes {
         opacity: 1;
         transition: opacity .3s ease;
@@ -453,6 +481,9 @@ export default {
     tr.map.banned {
         border-left-color: var(--danger)
     }
+    td.map {
+        min-width: 10em;
+    }
 
     .spacer {
         flex-grow: 1;
@@ -479,4 +510,8 @@ export default {
     .teams-scores >>> .custom-checkbox {
         font-size: 16px !important;
     }
+
+    .map .number .fas {
+        font-size: 0.8em;
+    }
 </style>
diff --git a/website/src/components/website/dashboard/PreviewProgramDisplay.vue b/website/src/components/website/dashboard/PreviewProgramDisplay.vue
index 0e2ee583..1d3536d5 100644
--- a/website/src/components/website/dashboard/PreviewProgramDisplay.vue
+++ b/website/src/components/website/dashboard/PreviewProgramDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="preview-program-display flex-center" v-if="producerPreviewScene">
+    <div class="preview-program-display flex-center mb-2" v-if="producerPreviewScene">
         <div class="display preview bg-dark px-2 mx-1">
             <div class="title">Preview</div>
             <div class="scene">{{ producerPreviewScene }}</div>
diff --git a/website/src/components/website/dashboard/ScheduleEditor.vue b/website/src/components/website/dashboard/ScheduleEditor.vue
index 9568d370..edcb106c 100644
--- a/website/src/components/website/dashboard/ScheduleEditor.vue
+++ b/website/src/components/website/dashboard/ScheduleEditor.vue
@@ -4,7 +4,7 @@
 
         <table class="table table-bordered table-sm table-dark mb-0">
             <tr>
-                <th>Match</th>
+                <th colspan="2">Match</th>
                 <th>Start time</th>
                 <th>Show on overlays</th>
                 <th>Live Match</th>
diff --git a/website/src/views/Dashboard.vue b/website/src/views/Dashboard.vue
index f24bf889..d29eaed3 100644
--- a/website/src/views/Dashboard.vue
+++ b/website/src/views/Dashboard.vue
@@ -1,20 +1,26 @@
 <template>
     <div class="container" v-if="user && user.name">
-        <h1>SLMN.GG Dashboard</h1>
-        <div class="client-broadcasts d-flex mb-2" v-if="client && client.broadcast">
-            <BroadcastSwitcher :broadcasts="client.broadcast" />
-            <router-link v-if="liveMatch" :to="url('detailed', liveMatch)">
-                <MatchThumbnail class="mini-thumbnail" :match="liveMatch" stripe-height="2px"/>
-            </router-link>
-            <div class="match-thumbnail-ghost default-thing mini-thumbnail" v-if="!liveMatch"></div>
+        <h1 class="text-md-left text-center">SLMN.GG Dashboard</h1>
+        <div class="client-broadcasts d-flex flex-wrap flex-column flex-md-row align-items-center" v-if="client && client.broadcast">
+            <div class="wrapper mb-2">
+                <BroadcastSwitcher :broadcasts="client.broadcast" />
+                <router-link v-if="liveMatch" :to="url('detailed', liveMatch)">
+                    <MatchThumbnail class="mini-thumbnail" :match="liveMatch" stripe-height="2px"/>
+                </router-link>
+                <div class="match-thumbnail-ghost default-thing mini-thumbnail" v-if="!liveMatch"></div>
+            </div>
             <div class="spacer flex-grow-1"></div>
-            <PreviewProgramDisplay :broadcast="broadcast" />
-            <div class="clocks d-flex">
-                <DashboardClock title="Local" />
-                <DashboardClock title="Broadcast" :timezone="broadcast.timezone || 'America/New_York'" />
+            <div class="wrapper">
+                <PreviewProgramDisplay :broadcast="broadcast"/>
+            </div>
+            <div class="wrapper mb-2">
+                <div class="clocks d-flex">
+                    <DashboardClock title="Local"/>
+                    <DashboardClock title="Broadcast" :timezone="broadcast.timezone || 'America/New_York'"/>
+                </div>
             </div>
         </div>
-        <div class="broadcast-editor mb-3" v-if="client && client.broadcast">
+        <div class="broadcast-editor mb-2" v-if="client && client.broadcast">
             <BroadcastEditor :client="client"/>
         </div>
         <DashboardModule title="Match Editor" icon-class="fas fa-pennant" class="broadcast-match-editor mb-2" v-if="liveMatch" start-opened>
@@ -205,4 +211,16 @@ export default {
     .bracket-viewer >>> .module-content:active::-webkit-scrollbar-thumb {
         background-color: #333;
     }
+
+
+    .clocks .dashboard-clock:first-child {
+        margin-left: 0;
+    }
+    .clocks .dashboard-clock:last-child {
+        margin-right: 0;
+    }
+
+    .wrapper {
+        display: flex;
+    }
 </style>