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>
|
||||||
|
|
||||||
<div class="col-12 col-lg-4 players-startgg-column">
|
<div class="col-12 col-lg-4 players-startgg-column">
|
||||||
<QCard
|
<div class="players-integrations-stack">
|
||||||
flat
|
<QCard
|
||||||
bordered
|
flat
|
||||||
class="q-pa-md"
|
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"
|
|
||||||
>
|
>
|
||||||
{{ tournamentsError }}
|
<div class="text-h6 q-mb-sm startgg-heading">
|
||||||
</div>
|
<svg
|
||||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
class="startgg-heading__icon"
|
||||||
<QBtn
|
viewBox="0 0 24 24"
|
||||||
flat
|
aria-hidden="true"
|
||||||
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">
|
<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" />
|
||||||
<QItem v-bind="scope.itemProps">
|
</svg>
|
||||||
<QItemSection>
|
<span>StartGG</span>
|
||||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
</div>
|
||||||
<QItemLabel caption>
|
<div class="text-caption q-mb-md">
|
||||||
{{ scope.opt.caption }}
|
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.
|
||||||
</QItemLabel>
|
</div>
|
||||||
</QItemSection>
|
<div class="row q-col-gutter-sm items-center">
|
||||||
</QItem>
|
<div class="col-auto">
|
||||||
</template>
|
<QBtn
|
||||||
</QSelect>
|
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>
|
||||||
<div
|
<div
|
||||||
v-if="canImportSelectedTournament"
|
v-if="tournamentsError"
|
||||||
class="col-auto"
|
class="text-negative q-mt-sm"
|
||||||
>
|
>
|
||||||
<QBtn
|
{{ tournamentsError }}
|
||||||
color="primary"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
icon="person_add"
|
|
||||||
aria-label="Import players"
|
|
||||||
@click="openSelectedTournamentImportDialog"
|
|
||||||
>
|
|
||||||
<QTooltip>Import players</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||||
</QCard>
|
<QBtn
|
||||||
</div>
|
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
|
||||||
<QCard
|
flat
|
||||||
flat
|
bordered
|
||||||
bordered
|
class="q-pa-md"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
{{ challongeTournamentsError }}
|
<div class="text-h6 q-mb-sm startgg-heading">
|
||||||
</div>
|
<img
|
||||||
<div class="row items-center q-mt-md startgg-tournament-row">
|
class="challonge-heading__icon"
|
||||||
<QBtn
|
src="https://challonge.com/favicon.ico"
|
||||||
flat
|
alt="Challonge"
|
||||||
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">
|
<span>Challonge</span>
|
||||||
<QItem v-bind="scope.itemProps">
|
</div>
|
||||||
<QItemSection>
|
<div class="text-caption q-mb-md">
|
||||||
<QItemLabel>{{ scope.opt.label }}</QItemLabel>
|
Connect with OAuth or paste your personal token to load your Challonge tournaments and import participants.
|
||||||
<QItemLabel caption>
|
</div>
|
||||||
{{ scope.opt.caption }}
|
<div class="row q-col-gutter-sm items-center">
|
||||||
</QItemLabel>
|
<div class="col-auto">
|
||||||
</QItemSection>
|
<QBtn
|
||||||
</QItem>
|
v-if="!hasChallongeTokenConfigured"
|
||||||
</template>
|
color="primary"
|
||||||
</QSelect>
|
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>
|
||||||
<div
|
<div
|
||||||
v-if="canImportSelectedChallongeTournament"
|
v-if="challongeTournamentsError"
|
||||||
class="col-auto"
|
class="text-negative q-mt-sm"
|
||||||
>
|
>
|
||||||
<QBtn
|
{{ challongeTournamentsError }}
|
||||||
color="primary"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
icon="person_add"
|
|
||||||
aria-label="Import players"
|
|
||||||
@click="openSelectedChallongeTournamentImportDialog"
|
|
||||||
>
|
|
||||||
<QTooltip>Import players</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row items-center q-mt-md startgg-tournament-row">
|
||||||
</QCard>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1404,6 +1409,12 @@ onBeforeUnmount(() => {
|
|||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.players-integrations-stack {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.players-dialog {
|
.players-dialog {
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
@@ -1423,6 +1434,12 @@ onBeforeUnmount(() => {
|
|||||||
fill: #2e75ba;
|
fill: #2e75ba;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.challonge-heading__icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.startgg-tournament-row {
|
.startgg-tournament-row {
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user