Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ラウンド毎にタブ分けする #29

Merged
merged 3 commits into from
Jun 14, 2020
Merged

ラウンド毎にタブ分けする #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36623a9
Added a tab for each round to the ranking page.
jagrament Jun 13, 2020
5ecc079
Ranking: Change the number of tabs to depend on the value of tourname…
jagrament Jun 13, 2020
3b18d7d
Added a tab for each round to the challenges page.
jagrament Jun 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 113 additions & 87 deletions pages/challenges.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,99 +3,119 @@
<v-container>
<v-card v-if="challenges">
<v-card-title>
Season {{ this.tournament.season }} Round {{ this.tournament.round }} の対戦一覧
Season {{ this.tournament.season }} の対戦一覧
<v-spacer />
<v-text-field v-model="search" append-icon="mdi-magnify" label="検索" sigle-line />
</v-card-title>
<v-data-table
:headers="headers"
:items="getChallengesByRound(this.tournament.round)"
:search="search"
:loading="loading"
:disable-pagination="true"
:hide-default-footer="true"
sort-by="ChallengerRank"
class="elevation-1 ranking-table"
<v-tabs
v-model="activeRound"
grow
>
<template v-slot:top>
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-card-title>
<span class="headline">対戦データの編集</span>
</v-card-title>
<v-card-subtitle>
<span>{{ getStreamTitle }}</span>
</v-card-subtitle>
<v-tab
v-for="round in rounds"
:key="round"
>
Round {{ round }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="activeRound">
<v-tab-item
v-for="round in rounds"
:key="round"
>
<v-data-table
:headers="headers"
:items="getChallengesByRound(round)"
:search="search"
:loading="loading"
:disable-pagination="true"
:hide-default-footer="true"
sort-by="ChallengerRank"
class="elevation-1 ranking-table"
>
<template v-slot:top>
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-card-title>
<span class="headline">対戦データの編集</span>
</v-card-title>
<v-card-subtitle>
<span>{{ getStreamTitle }}</span>
</v-card-subtitle>

<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-datetime-picker label="開始日時" v-model="editedItem.Date">
<template v-slot:dateIcon>
<v-icon>mdi-calendar</v-icon>
</template>
<template v-slot:timeIcon>
<v-icon>mdi-clock</v-icon>
</template>
</v-datetime-picker>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.ChallengerScore"
:label="'挑戦者スコア（'+editedItem.Challenger+'）'"
:rules="[rules.score]"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.DefenderScore"
:label="'防衛者スコア（'+editedItem.Defender+'）'"
:rules="[rules.score]"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.Streamer"
label="配信者"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.StreamURL"
label="配信URL"
:rules="[rules.url]"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-datetime-picker label="開始日時" v-model="editedItem.Date">
<template v-slot:dateIcon>
<v-icon>mdi-calendar</v-icon>
</template>
<template v-slot:timeIcon>
<v-icon>mdi-clock</v-icon>
</template>
</v-datetime-picker>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.ChallengerScore"
:label="'挑戦者スコア（'+editedItem.Challenger+'）'"
:rules="[rules.score]"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.DefenderScore"
:label="'防衛者スコア（'+editedItem.Defender+'）'"
:rules="[rules.score]"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.Streamer"
label="配信者"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="editedItem.StreamURL"
label="配信URL"
:rules="[rules.url]"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close">キャンセル</v-btn>
<v-btn class="primary" color="darken-1" text @click="update">更新</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<template v-slot:item.Date="{ value }">{{ value ? value.toLocaleString('ja-JP') : "" }}</template>
<template v-slot:item.Division="{ value }">{{ getDivisionStr(value) }}</template>
<template v-slot:item.StreamURL="{ item }">
<v-tooltip top v-if="item.Streamer && item.StreamURL">
<template v-slot:activator="{ on }">
<v-btn icon :href="item.StreamURL" target="_blank" v-on="on">
<v-icon>mdi-youtube</v-icon>
</v-btn>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close">キャンセル</v-btn>
<v-btn class="primary" color="darken-1" text @click="update">更新</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<span>配信者: {{ item.Streamer }}</span>
</v-tooltip>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="copyTitle(item)">mdi-content-copy</v-icon>
<v-icon small @click="editItem(item)">mdi-pencil</v-icon>
</template>
</v-data-table>
<template v-slot:item.Date="{ value }">{{ value ? value.toLocaleString('ja-JP') : "" }}</template>
<template v-slot:item.Division="{ value }">{{ getDivisionStr(value) }}</template>
<template v-slot:item.StreamURL="{ item }">
<v-tooltip top v-if="item.Streamer && item.StreamURL">
<template v-slot:activator="{ on }">
<v-btn icon :href="item.StreamURL" target="_blank" v-on="on">
<v-icon>mdi-youtube</v-icon>
</v-btn>
</template>
<span>配信者: {{ item.Streamer }}</span>
</v-tooltip>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="copyTitle(item)">mdi-content-copy</v-icon>
<v-icon small @click="editItem(item)">mdi-pencil</v-icon>
</template>
</v-data-table>
</v-tab-item>
</v-tabs-items>


<v-snackbar v-model="snackbar" :bottom="true" :timeout="3000">
<span>配信タイトルをコピーしました</span>
<v-icon>mdi-checkbox-marked-circle-outline</v-icon>
Expand All @@ -107,9 +127,11 @@

<script>
import { mapActions, mapState, mapGetters } from "vuex";

export default {
data() {
return {
activeRound: 0,
loading: true,
dialog: false,
snackbar: false,
Expand Down Expand Up @@ -159,13 +181,17 @@ export default {
getStreamTitle: function() {
const challenge = this.editedItem;
return this.createTitle(challenge);
}
},
rounds() {
return this.tournament.round
},
},
async fetch({ store }) {
await store.dispatch("tournament/getLatestTournament");
},
async mounted() {
await this.getChallenges({ season: this.tournament.season });
this.activeRound = this.rounds - 1
this.loading = false;
},
methods: {
Expand Down
47 changes: 35 additions & 12 deletions pages/ranking.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<v-container>
<v-card v-if="ranking">
<v-card-title>
Season {{ season }} Round {{ round }} のランキング
Season {{ season }} のランキング
<v-spacer />
<v-text-field
v-model="search"
Expand All @@ -16,17 +16,35 @@
sigle-line
/>
</v-card-title>
<v-data-table
:headers="headers"
:items="ranking[round]"
:search="search"
:loading="loading"
:disable-pagination=true
:hide-default-footer=true
sort-by="rank"
class="elevation-1"
<v-tabs
v-model="activeRound"
grow
>
</v-data-table>
<v-tab
v-for="round in rounds"
:key="round"
>
Round {{ round }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="activeRound">
<v-tab-item
v-for="round in rounds"
:key="round"
>
<v-data-table
:headers="headers"
:items="ranking[round]"
:search="search"
:loading="loading"
:disable-pagination=true
:hide-default-footer=true
sort-by="rank"
class="elevation-1"
>
</v-data-table>
</v-tab-item>
</v-tabs-items>
</v-card>
</v-container>
</v-layout>
Expand All @@ -37,23 +55,28 @@ import { mapActions, mapState } from 'vuex'
export default {
data() {
return {
activeRound: 0,
loading: true,
search: "",
headers: [
{ text: 'Rank', value: 'rank' },
{ text: 'Team', value: 'name' },
],
season: 5,
round: 1,
}
},
computed: {
...mapState({
ranking: state => state.ranking.ranking,
tournament: state => state.tournament
}),
rounds() {
return this.tournament.round
},
},
async mounted () {
await this.getRanking({season : this.season});
this.activeRound = this.rounds - 1
this.loading = false;
},
methods: {
Expand Down