Skip to content

Commit

Permalink
Schedule rework to custom table
Browse files Browse the repository at this point in the history 
Probably missed some stuff that could nicely migrate out,
but this is nice for now.

Related to Issue #43
  • Loading branch information
@BobChao87
BobChao87 committed Oct 19, 2021
1 parent 0457f35 commit db23759
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 105 deletions.
170 changes: 73 additions & 97 deletions components/marathon/schedule/List.vue
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,109 @@
<template>
<div>
<div class="schedule-container">
<ElementTable class="schedule-container">
<!-- Ad -->
<AdsByGoogle ad-slot="5905320802" ad-format="" class="is-advertisement" />
<!-- Header -->
<span class="notification is-header expandable" />
<span class="notification is-header time">
<ElementTableCell is-header class="expandable" />
<ElementTableCell is-header class="time">
{{ $t('marathon.schedule.table.time') }}
</span>
<span class="notification is-header runners">
</ElementTableCell>
<ElementTableCell is-header class="runners">
{{ $t('marathon.schedule.table.runner') }}
</span>
<span class="notification is-header game">
</ElementTableCell>
<ElementTableCell is-header class="game">
{{ $t('marathon.schedule.table.game') }}
</span>
<span class="notification is-header category">
</ElementTableCell>
<ElementTableCell is-header class="category">
{{ $t('marathon.schedule.table.category') }}
</span>
<span class="notification is-header type">
</ElementTableCell>
<ElementTableCell is-header class="type">
{{ $t('marathon.schedule.table.type') }}
</span>
<span class="notification is-header console">
</ElementTableCell>
<ElementTableCell is-header class="console">
{{ $t('marathon.schedule.table.console') }}
</span>
<span class="notification is-header estimate">
</ElementTableCell>
<ElementTableCell is-header class="estimate">
{{ $t('marathon.schedule.table.estimate') }}
</span>
<span class="notification is-header setup">
</ElementTableCell>
<ElementTableCell is-header class="setup">
{{ $t('marathon.schedule.table.setup') }}
</span>
</ElementTableCell>
<!-- Main Schedule Loop -->
<template v-if="runs">
<template v-for="(run, index) in runs">
<!-- XXX @click.native will stop working in Vue v3+ (Vue Router v4+), but @click should start working -->

<!-- Ad -->
<ClientOnly :key="'wrapper-advertisement' + index">
<AdsByGoogle v-if="advertisementIndices.includes(index)" :key="'advertisement' + index" ad-slot="5905320802" ad-format="" class="is-advertisement" />
<div v-show="shouldShowDay(index) && index !== 0" :key="'not-advertisement' + index" class="is-spacer" />
</ClientOnly>
<div v-show="shouldShowDay(index)" :key="'day' + index" class="day notification is-info">

<ElementTableCell v-show="shouldShowDay(index)" :key="'day' + index" class="day is-info" column-start="1" column-end="-1">
{{ $d(new Date(run.date), 'longDate') }}
</div>
<span :id="getId(run)" :key="'expandable' + index" class="notification is-expandable expandable" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :id="getId(run)" :key="'expandable' + index" class="is-expandable expandable" :class="getRowParity(index, run)" @click.native="expand(run)">
<FontAwesomeIcon :icon="[ 'fas', expanded.has(run.id) ? 'caret-down' : 'caret-right' ]" />
</span>
<span :id="'run-' + run.id" :key="'time' + index" class="notification is-expandable time" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :id="'run-' + run.id" :key="'time' + index" class="is-expandable time" :class="getRowParity(index, run)" @click.native="expand(run)">
{{ $d(new Date(run.date), 'shortTime') }}
</span>
<span v-if="run.setupBlock" :key="'setupText' + index" class="notification is-expandable setup-text" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell
v-if="run.setupBlock"
:key="'setupText' + index"
class="is-expandable setup-text"
:class="getRowParity(index, run)"
column-end="span 2"
@click.native="expand(run)"
>
{{ (run.setupBlockText || $t('marathon.schedule.setupBlock')) }}
</span>
</ElementTableCell>
<template v-else>
<span :key="'runners' + index" class="notification is-expandable runners" :class="getRowParity(index, run)" @click="expand(run)">
<ElementTableCell :key="'runners' + index" class="is-expandable runners" :class="getRowParity(index, run)" @click.native="expand(run)">
<p v-for="runner in run.runners" :key="'runners' + index + 'runner' + runner.id">
{{ runner.username }}
</p>
</span>
<span :key="'game' + index" class="notification is-expandable game" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>
<ElementTableCell :key="'game' + index" class="is-expandable game" :class="getRowParity(index, run)" @click.native="expand(run)">
{{ run.gameName }}
</span>
</ElementTableCell>
</template>
<span :key="'category' + index" class="notification is-expandable category" :class="getRowParity(index, run)" @click="expand(run)">

<ElementTableCell :key="'category' + index" class="is-expandable category" :class="getRowParity(index, run)" @click.native="expand(run)">
{{ run.categoryName }}
</span>
<span :key="'type' + index" class="notification is-expandable type" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :key="'type' + index" class="is-expandable type" :class="getRowParity(index, run)" @click.native="expand(run)">
{{ $t(`marathon.schedule.type.${run.type}`) }}
</span>
<span :key="'console' + index" class="notification is-expandable console" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :key="'console' + index" class="is-expandable console" :class="getRowParity(index, run)" @click.native="expand(run)">
<span>
{{ run.console }}
</span>
<sup v-if="run.emulated">
{{ $t('global.emu') }}
</sup>
</span>
<span :key="'estimate' + index" class="notification is-expandable estimate" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :key="'estimate' + index" class="is-expandable estimate" :class="getRowParity(index, run)" @click.native="expand(run)">
<ElementTemporalDuration :duration="run.estimate" />
</span>
<span :key="'setup' + index" class="notification is-expandable setup" :class="getRowParity(index, run)" @click="expand(run)">
</ElementTableCell>

<ElementTableCell :key="'setup' + index" class="is-expandable setup" :class="getRowParity(index, run)" @click.native="expand(run)">
<ElementTemporalDuration :duration="run.setupTime" />
</span>
<div v-if="expanded.has(run.id)" :key="'expanded' + index" class="expanded-run">
<MarathonScheduleRun :run="run" :class="getRowParity(index, run)" />
</div>
</ElementTableCell>

<ElementTableDetail v-if="expanded.has(run.id)" :key="'expanded' + index" class="expanded-run" :class="getRowParity(index, run)">
<MarathonScheduleRun :run="run" />
</ElementTableDetail>
</template>
</template>
</div>
</ElementTable>
<div class="is-centered">
<WidgetLoading :while="[ schedule ]" />
</div>
Expand All @@ -107,18 +126,21 @@ export default Vue.extend({
default: '',
},
},
data() {
return {
expanded: new Set<number>(),
interval: undefined as NodeJS.Timeout|undefined,
};
},
async fetch(): Promise<void> {
await Promise.allSettled([
this.getSchedule(this.marathonId),
this.getScheduleTicker(this.marathonId),
]);
},
computed: {
schedule(): Schedule|undefined {
return (this.$store.state.api.schedule as ScheduleState).schedules[this.marathonId];
Expand All @@ -145,24 +167,28 @@ export default Vue.extend({
return advertisementIndices;
},
},
watch: {
runHash(): void {
// The `false` makes it so we only expand Current/Next
// If we don't do this, the ID hashes self-collapse sometimes
this.expandRunHash(false);
},
},
mounted(): void {
this.interval = setInterval(() => {
this.getScheduleTicker(this.marathonId);
}, 60_000);
this.expandRunHash();
},
destroyed(): void {
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
expand(run?: ScheduleLine|number): void {
if (!run) {
Expand Down Expand Up @@ -203,9 +229,10 @@ export default Vue.extend({
return undefined;
}
},
getRowParity(index: number, run: ScheduleLine): { 'is-dark': boolean, 'is-primary': boolean } {
getRowParity(index: number, run: ScheduleLine): { 'is-primary': boolean, 'is-even': boolean, 'is-odd': boolean } {
return {
'is-dark': index % 2 === 1,
'is-even': index % 2 === 0,
'is-odd': index % 2 === 1,
'is-primary': run.id === this.tickers?.current?.id,
};
},
Expand All @@ -230,27 +257,14 @@ export default Vue.extend({

<style lang="scss" scoped>
.schedule-container {
width: 100%;
max-width: 100%;
overflow-x: auto;
display: grid;
grid-template-columns: repeat(9, auto);
grid-auto-rows: auto;
> *:not(.expanded-run) {
// A lot of the notification styling is undesirable in this context
padding: calc(var(--spacing) / 2);
margin-block-end: 0;
border-radius: 0;
}
> .is-expandable {
cursor: pointer;
}
> .day {
// Span from start to finish
grid-column: 1 / -1;
font-weight: bold;
text-align: center;
}
Expand All @@ -259,44 +273,6 @@ export default Vue.extend({
width: 10px;
}
> .setup-text {
grid-column: 3 / 5;
}
> .expanded-run {
// Span from start to finish
grid-column: 1 / -1;
// Needed to allow the proper placement of the before and after
position: relative;
padding-inline-start: var(--spacing);
padding-block: calc(var(--spacing) / 2);
// Provides the strokes for the L connecting the entry to the detail
&::before {
content: '';
position: absolute;
inset-block-start: var(--spacing);
inset-inline-start: calc(var(--spacing) / 2);
width: calc(var(--spacing) / 2);
height: 2px;
background-color: #666;
}
&::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(var(--spacing) / 2);
height: var(--spacing);
width: 2px;
background-color: #666;
}
}
> .is-header {
font-weight: bold;
}
> .is-spacer {
// Span from start to finish
grid-column: 1 / -1;
Expand Down
9 changes: 1 addition & 8 deletions components/marathon/schedule/Run.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="notification run-detail-container">
<div class="run-detail-container">
<div class="header">
<h4 class="title is-4">
{{ run.setupBlock ? (run.setupBlockText || $t('marathon.schedule.setupBlock')) : run.gameName }}
Expand Down Expand Up @@ -79,7 +79,6 @@ export default Vue.extend({
grid-template-columns: auto 1fr;
grid-auto-rows: auto;
gap: calc(var(--spacing) / 2);
padding: var(--spacing);
> .header {
grid-column: 1 / -1;
Expand All @@ -104,12 +103,6 @@ export default Vue.extend({
overflow-x: auto;
}
}
@media (max-width: 1023px) {
.run-detail-container {
padding: calc(var(--spacing) / 2);
}
}
</style>

<!-- Temporary language info to avoid having the i18n string -->
Expand Down

0 comments on commit db23759

Please sign in to comment.