Skip to content

Commit

Permalink
Update dashboard to work better at smaller widths and general fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@slmnio
slmnio committed Mar 9, 2023
1 parent 48d2b4c commit 110e7a0
Show file tree
Hide file tree
Showing 8 changed files with 177 additions and 111 deletions.
5 changes: 3 additions & 2 deletions website/src/components/website/bracket/BracketResolveButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ export default {
name: "BracketResolveButton",
props: {
bracket: Object,
verticalButton: Boolean
verticalButton: Boolean,
showButton: Boolean
},
components: { BButton },
data: () => ({
Expand All @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/website/dashboard/BracketImplications.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
95 changes: 53 additions & 42 deletions website/src/components/website/dashboard/BroadcastEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion website/src/components/website/dashboard/DashboardClock.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -51,6 +51,7 @@ export default {
padding: 4px;
height: 48px;
margin: 0.25rem;
}
.title {
font-size: 0.9em;
Expand Down
137 changes: 86 additions & 51 deletions website/src/components/website/dashboard/MatchEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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);
},
Expand All @@ -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]);
Expand Down Expand Up @@ -412,6 +437,9 @@ export default {
</script>
<style scoped>
.maps-table-wrapper {
overflow-x: auto;
}
.opacity-changes {
opacity: 1;
transition: opacity .3s ease;
Expand Down Expand Up @@ -453,6 +481,9 @@ export default {
tr.map.banned {
border-left-color: var(--danger)
}
td.map {
min-width: 10em;
}
.spacer {
flex-grow: 1;
Expand All @@ -479,4 +510,8 @@ export default {
.teams-scores >>> .custom-checkbox {
font-size: 16px !important;
}
.map .number .fas {
font-size: 0.8em;
}
</style>
2 changes: 1 addition & 1 deletion website/src/components/website/dashboard/PreviewProgramDisplay.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/website/dashboard/ScheduleEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 110e7a0

Please sign in to comment.