feat: beginning work on managing campaigns

This commit is contained in:
Lucien Cartier-Tilet 2024-02-10 18:30:47 +01:00
parent 0dccf7e86e
commit 0da40ebf42
4 changed files with 86 additions and 2 deletions

View File

@ -12,5 +12,5 @@ module.exports = {
parserOptions: {
ecmaVersion: 'latest',
},
ignorePatterns: ['node_modules/', '**/node_modules/'],
ignorePatterns: ['pocketbase/'],
};

View File

@ -1,6 +1,28 @@
<template>Bonjour {{ pbStore.username }}&nbsp;!</template>
<template>
<div class="h3">Bonjour {{ pbStore.auth.username }}&nbsp;!</div>
<div class="campagnes flex-col-center gap-2rem">
<h1>Campagnes</h1>
<RouterLink :to="{ name: 'new-campaign' }" class="button">Créer une campagne</RouterLink>
<ul v-if="campaigns.length > 0">
<li v-for="campaign in campaigns" :key="campaign.id">{{ campaign }}</li>
</ul>
<div v-else>Pas de campagnes pour linstant</div>
</div>
</template>
<script setup="" lang="ts">
import { usePocketbaseStore } from '@/stores/pocketbase';
import { type RecordModel } from 'pocketbase';
import { onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
const pbStore = usePocketbaseStore();
const campaigns = ref<RecordModel[]>([]);
onMounted(() => {
pbStore.campaign.listCampaigns().subscribe({
next: (result) => (campaigns.value = result),
});
});
</script>

View File

@ -13,6 +13,11 @@ const router = createRouter({
name: 'account',
component: () => import('@/views/AccountView.vue'),
},
{
path: '/new-campaign',
name: 'new-campaign',
component: () => import('@/views/CreateCampaignView.vue'),
},
],
});

View File

@ -0,0 +1,57 @@
<template>
<h1>Création dune campagne</h1>
<div class="h3 card" v-if="campaign.name">
{{ campaign.name }}
</div>
<form @submit.prevent="createCampaign" class="flex-col gap-2rem card">
<label for="campaign-name" class="flex-col gap-1rem">Nom de la nouvelle campagne</label>
<input
name="campaign-name"
type="text"
v-model="campaign.name"
placeholder="Nom de la nouvelle campagne" />
<div class="buttons gap-1rem">
<RouterLink :to="{ name: 'home' }" class="button faded">Annuler</RouterLink>
<button type="submit">Envoyer</button>
</div>
</form>
</template>
<script setup lang="ts">
import router from '@/router';
import { usePocketbaseStore, type NewCampaign } from '@/stores/pocketbase';
import { type RecordModel } from 'pocketbase';
import { onMounted, ref } from 'vue';
const pbStore = usePocketbaseStore();
const simpleUsers = ref<RecordModel[]>([]);
const campaign = ref<NewCampaign>({
name: null,
game_master: pbStore.auth.userId,
players: null,
});
const createCampaign = () => {
pbStore.campaign.createCampaign(campaign.value).subscribe({
next: () => {
router.push({ name: 'home' });
router.go(0);
},
});
};
onMounted(() => {
pbStore.users.simpleUserList().subscribe({
next: (result) => (simpleUsers.value = result),
error: (err) => console.error('Failed to create campaign:', err),
});
});
</script>
<style scoped lang="less">
form {
min-width: 90%;
}
</style>