mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
feat(players): stack Challonge card below StartGG and add logo icon
This commit is contained in:
Pandipipas
@@ -886,227 +886,232 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4 players-startgg-column">
|
||||
<QCard
|
||||
flat
|
||||
bordered
|
||||
class="q-pa-md"
|
||||
>
|
||||
<div class="text-h6 q-mb-sm startgg-heading">
|
||||
<svg
|
||||
class="startgg-heading__icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 0A5.999 5.999 0 00.002 6v5.252a.75.75 0 00.75.748H5.25a.748.748 0 00.75-.747V6.749C6 6.334 6.336 6 6.748 6h16.497a.748.748 0 00.749-.748V.749A.743.743 0 0023.247 0zm12.75 12a.748.748 0 00-.75.75v4.5a.748.748 0 01-.747.748H.753a.754.754 0 00-.75.751v4.5a.75.75 0 00.75.751H18a5.999 5.999 0 005.999-6v-5.25a.75.75 0 00-.75-.75z" />
|
||||
</svg>
|
||||
<span>StartGG</span>
|
||||
</div>
|
||||
<div class="text-caption q-mb-md">
|
||||
Connect via OAuth (recommended) or paste your personal token to load tournaments you created or administrate. If you see "Client authentication failed", verify your config uses the Client ID/Secret from a start.gg OAuth App.
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
v-if="!hasStartGGTokenConfigured"
|
||||
color="primary"
|
||||
icon="login"
|
||||
label="Connect with start.gg"
|
||||
:loading="oauthLoading"
|
||||
@click="connectWithStartGGOAuth"
|
||||
/>
|
||||
<QBtn
|
||||
v-else
|
||||
outline
|
||||
color="positive"
|
||||
icon="check_circle"
|
||||
label="Connected"
|
||||
class="startgg-connected-btn"
|
||||
@click="openManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
outline
|
||||
color="white"
|
||||
icon="vpn_key"
|
||||
label="Use personal API"
|
||||
@click="openManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="tournamentsError"
|
||||
class="text-negative q-mt-sm"
|
||||
<div class="players-integrations-stack">
|
||||
<QCard
|
||||
flat
|
||||
bordered
|
||||
class="q-pa-md"
|
||||
>
|
||||
{{ tournamentsError }}
|
||||
</div>
|
||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
text-color="white"
|
||||
icon="sync"
|
||||
class="startgg-refresh-btn"
|
||||
:loading="loadingTournaments"
|
||||
@click="loadRecentTournaments"
|
||||
/>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="selectedTournamentSlug"
|
||||
v-model:input-value="tournamentInput"
|
||||
:options="filteredTournamentOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
clearable
|
||||
dense
|
||||
label="Tournament"
|
||||
class="players-underlined-field"
|
||||
@filter="filterTournaments"
|
||||
<div class="text-h6 q-mb-sm startgg-heading">
|
||||
<svg
|
||||
class="startgg-heading__icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt.caption }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</QSelect>
|
||||
<path d="M6 0A5.999 5.999 0 00.002 6v5.252a.75.75 0 00.75.748H5.25a.748.748 0 00.75-.747V6.749C6 6.334 6.336 6 6.748 6h16.497a.748.748 0 00.749-.748V.749A.743.743 0 0023.247 0zm12.75 12a.748.748 0 00-.75.75v4.5a.748.748 0 01-.747.748H.753a.754.754 0 00-.75.751v4.5a.75.75 0 00.75.751H18a5.999 5.999 0 005.999-6v-5.25a.75.75 0 00-.75-.75z" />
|
||||
</svg>
|
||||
<span>StartGG</span>
|
||||
</div>
|
||||
<div class="text-caption q-mb-md">
|
||||
Connect via OAuth (recommended) or paste your personal token to load tournaments you created or administrate. If you see "Client authentication failed", verify your config uses the Client ID/Secret from a start.gg OAuth App.
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
v-if="!hasStartGGTokenConfigured"
|
||||
color="primary"
|
||||
icon="login"
|
||||
label="Connect with start.gg"
|
||||
:loading="oauthLoading"
|
||||
@click="connectWithStartGGOAuth"
|
||||
/>
|
||||
<QBtn
|
||||
v-else
|
||||
outline
|
||||
color="positive"
|
||||
icon="check_circle"
|
||||
label="Connected"
|
||||
class="startgg-connected-btn"
|
||||
@click="openManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
outline
|
||||
color="white"
|
||||
icon="vpn_key"
|
||||
label="Use personal API"
|
||||
@click="openManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="canImportSelectedTournament"
|
||||
class="col-auto"
|
||||
v-if="tournamentsError"
|
||||
class="text-negative q-mt-sm"
|
||||
>
|
||||
<QBtn
|
||||
color="primary"
|
||||
unelevated
|
||||
round
|
||||
icon="person_add"
|
||||
aria-label="Import players"
|
||||
@click="openSelectedTournamentImportDialog"
|
||||
>
|
||||
<QTooltip>Import players</QTooltip>
|
||||
</QBtn>
|
||||
{{ tournamentsError }}
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
</div>
|
||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
text-color="white"
|
||||
icon="sync"
|
||||
class="startgg-refresh-btn"
|
||||
:loading="loadingTournaments"
|
||||
@click="loadRecentTournaments"
|
||||
/>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="selectedTournamentSlug"
|
||||
v-model:input-value="tournamentInput"
|
||||
:options="filteredTournamentOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
clearable
|
||||
dense
|
||||
label="Tournament"
|
||||
class="players-underlined-field"
|
||||
@filter="filterTournaments"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt.caption }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</QSelect>
|
||||
</div>
|
||||
<div
|
||||
v-if="canImportSelectedTournament"
|
||||
class="col-auto"
|
||||
>
|
||||
<QBtn
|
||||
color="primary"
|
||||
unelevated
|
||||
round
|
||||
icon="person_add"
|
||||
aria-label="Import players"
|
||||
@click="openSelectedTournamentImportDialog"
|
||||
>
|
||||
<QTooltip>Import players</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
|
||||
<div class="col-12 col-lg-4 players-startgg-column">
|
||||
<QCard
|
||||
flat
|
||||
bordered
|
||||
class="q-pa-md"
|
||||
>
|
||||
<div class="text-h6 q-mb-sm startgg-heading">
|
||||
<span>Challonge</span>
|
||||
</div>
|
||||
<div class="text-caption q-mb-md">
|
||||
Connect with OAuth or paste your personal token to load your Challonge tournaments and import participants.
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
v-if="!hasChallongeTokenConfigured"
|
||||
color="primary"
|
||||
icon="login"
|
||||
label="Connect with Challonge"
|
||||
:loading="challongeOauthLoading"
|
||||
@click="connectWithChallongeOAuth"
|
||||
/>
|
||||
<QBtn
|
||||
v-else
|
||||
outline
|
||||
:color="hasValidatedChallongeToken ? 'positive' : 'warning'"
|
||||
icon="check_circle"
|
||||
:label="challongeConnectionLabel"
|
||||
@click="openChallongeManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
outline
|
||||
color="white"
|
||||
icon="vpn_key"
|
||||
label="Use personal API"
|
||||
@click="openChallongeManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="challongeTournamentsError"
|
||||
class="text-negative q-mt-sm"
|
||||
<QCard
|
||||
flat
|
||||
bordered
|
||||
class="q-pa-md"
|
||||
>
|
||||
{{ challongeTournamentsError }}
|
||||
</div>
|
||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
text-color="white"
|
||||
icon="sync"
|
||||
class="startgg-refresh-btn"
|
||||
:loading="challongeLoadingTournaments"
|
||||
@click="loadChallongeRecentTournaments"
|
||||
/>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="selectedChallongeTournamentSlug"
|
||||
v-model:input-value="challongeTournamentInput"
|
||||
:options="filteredChallongeTournamentOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
clearable
|
||||
dense
|
||||
label="Tournament"
|
||||
class="players-underlined-field"
|
||||
@filter="filterChallongeTournaments"
|
||||
<div class="text-h6 q-mb-sm startgg-heading">
|
||||
<img
|
||||
class="challonge-heading__icon"
|
||||
src="https://challonge.com/favicon.ico"
|
||||
alt="Challonge"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt.caption }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</QSelect>
|
||||
<span>Challonge</span>
|
||||
</div>
|
||||
<div class="text-caption q-mb-md">
|
||||
Connect with OAuth or paste your personal token to load your Challonge tournaments and import participants.
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm items-center">
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
v-if="!hasChallongeTokenConfigured"
|
||||
color="primary"
|
||||
icon="login"
|
||||
label="Connect with Challonge"
|
||||
:loading="challongeOauthLoading"
|
||||
@click="connectWithChallongeOAuth"
|
||||
/>
|
||||
<QBtn
|
||||
v-else
|
||||
outline
|
||||
:color="hasValidatedChallongeToken ? 'positive' : 'warning'"
|
||||
icon="check_circle"
|
||||
:label="challongeConnectionLabel"
|
||||
@click="openChallongeManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<QBtn
|
||||
outline
|
||||
color="white"
|
||||
icon="vpn_key"
|
||||
label="Use personal API"
|
||||
@click="openChallongeManualTokenDialog"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="canImportSelectedChallongeTournament"
|
||||
class="col-auto"
|
||||
v-if="challongeTournamentsError"
|
||||
class="text-negative q-mt-sm"
|
||||
>
|
||||
<QBtn
|
||||
color="primary"
|
||||
unelevated
|
||||
round
|
||||
icon="person_add"
|
||||
aria-label="Import players"
|
||||
@click="openSelectedChallongeTournamentImportDialog"
|
||||
>
|
||||
<QTooltip>Import players</QTooltip>
|
||||
</QBtn>
|
||||
{{ challongeTournamentsError }}
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||
<QBtn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
text-color="white"
|
||||
icon="sync"
|
||||
class="startgg-refresh-btn"
|
||||
:loading="challongeLoadingTournaments"
|
||||
@click="loadChallongeRecentTournaments"
|
||||
/>
|
||||
<div class="col">
|
||||
<QSelect
|
||||
v-model="selectedChallongeTournamentSlug"
|
||||
v-model:input-value="challongeTournamentInput"
|
||||
:options="filteredChallongeTournamentOptions"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0"
|
||||
clearable
|
||||
dense
|
||||
label="Tournament"
|
||||
class="players-underlined-field"
|
||||
@filter="filterChallongeTournaments"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ scope.opt.caption }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</QSelect>
|
||||
</div>
|
||||
<div
|
||||
v-if="canImportSelectedChallongeTournament"
|
||||
class="col-auto"
|
||||
>
|
||||
<QBtn
|
||||
color="primary"
|
||||
unelevated
|
||||
round
|
||||
icon="person_add"
|
||||
aria-label="Import players"
|
||||
@click="openSelectedChallongeTournamentImportDialog"
|
||||
>
|
||||
<QTooltip>Import players</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1404,6 +1409,12 @@ onBeforeUnmount(() => {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.players-integrations-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.players-dialog {
|
||||
min-width: 320px;
|
||||
@@ -1423,6 +1434,12 @@ onBeforeUnmount(() => {
|
||||
fill: #2e75ba;
|
||||
}
|
||||
|
||||
.challonge-heading__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.startgg-tournament-row {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user