feat: add create team dialog (WIP)

This commit is contained in:
Settel 2022-09-09 08:31:33 +02:00
parent e961797c7b
commit 79d56e801f
3 changed files with 107 additions and 3 deletions

View File

@ -0,0 +1,94 @@
<template>
<ModalDialog @close="closeModalDialog" :title="$t('create-team')">
<div class="create-team-dialog__description">{{ $t('description') }}</div>
<div class="create-team-dialog__form">
<label class="create-team-dialog__label">{{ $t('your-name') }}</label>
<input id="create-team-dialog-name" class="create-team-dialog__input" v-model="playerName" size="40"/>
<label class="create-team-dialog__label">{{ $t('team-name') }}</label>
<input class="create-team-dialog__input" v-model="teamName" size="40"/>
<label class="create-team-dialog__label">{{ $t('language') }}</label>
<select class="create-team-dialog__select" v-model="lang">
<option value="en">EN</option>
<option value="de">DE</option>
</select>
</div>
<template v-slot:footer>
<Button class="create-team-dialog__button" :border="true" @click="createTeam">{{ $t('create-team') }}</Button>
<Button class="create-team-dialog__button" :border="false" @click="closeModalDialog">{{ $t('cancel') }}</Button>
</template>
</ModalDialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useI18n from '@/composables/useI18n'
const emit = defineEmits(['close'])
const { $t, getLang } = useI18n({
'create-team': { en: 'Create Team', de: 'Team erstellen' },
'cancel': { en: 'Cancel', de: 'abbrechen' },
'description': { en: 'Create an account for you as a gamemaster and set team name.', de: 'Erstelle einen Useraccount für Dich als Gamemaster und setze den Teamnamen.' },
'your-name': { en: 'Your name', de: 'Dein Name' },
'team-name': { en: 'Team name', de: 'Teamname' },
'language': { en: 'Language', de: 'Sprache' },
'names-missing': { en: 'Please enter a user name and a team name.', de: 'Bitte wähle einen Benutzernamen und Teamnamen.' },
})
const closeModalDialog = () => { emit('close') }
const playerName = ref('')
const teamName = ref('')
const lang = ref(getLang())
const createTeam = () => {
if (playerName.value.length == 0 || teamName.value.length == 0) {
alert($t('names-missing'))
return
}
alert('not yet implemented')
}
onMounted(() => {
window.setTimeout(() => {
document.getElementById('create-team-dialog-name')?.focus()
}, 0)
})
</script>
<style lang="scss">
@import '~/assets/css/components';
.create-team-dialog {
&__description {
font-family: $font-secondary;
font-size: 18px;
}
&__form {
display: flex;
flex-direction: column;
margin: 32px 0;
}
&__label {
display: block;
margin: 16px 0 4px 0;
}
&__input {
border: 1px solid white;
background-color: $modal-dialog-background-color;
color: $modal-dialog-text-color;
border-radius: 4px;
}
&__select {
margin-right: auto;
}
&__button~&__button {
margin-left: 16px;
}
}
</style>

View File

@ -12,7 +12,8 @@ const defaultLang: Lang = browserLang === 'de' ? 'de' : 'en'
let lang: Lang = defaultLang
export interface useI18n {
setLang(lang: string): void
setLang(lang: Lang): void
getLang(): Lang
$t(key: string): string
}
@ -21,6 +22,9 @@ export default (map: i18nMap): useI18n => {
setLang: (_lang: Lang): void => {
lang = _lang
},
getLang: (): Lang => {
return lang
},
$t: (key: string): string => {
const t = map[key]
if (!t) {

View File

@ -8,23 +8,25 @@
</div>
<div class="page-index__separator" />
<div class="page-index__create-team">
<Button disabled>{{ $t('create-team') }}</Button>
<Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
</div>
<div class="page-index__space" />
</div>
<div class="page-index__copyright-notice">
v{{ config.version }}, © 2021-2022, Settel
</div>
<CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
</div>
</template>
<script setup lang="ts">
import { useRuntimeConfig, navigateTo } from '#app'
import { ref } from 'vue'
import useAuth from '@/composables/useAuth'
import useI18n from '@/composables/useI18n'
const { $t } = useI18n({
'create-team': { en: 'Create Team', de: 'Team erstellen' },
'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
})
const config = useRuntimeConfig()
@ -35,6 +37,10 @@ try {
} catch (e) {
// nop
}
const showCreateTeamDialog = ref(false)
const createTeam = () => { showCreateTeamDialog.value = true }
const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
</script>
<style lang="scss">