More WIP code
This commit is contained in:
parent
fcbdfd038f
commit
40f2750f4f
@ -194,7 +194,8 @@
|
||||
v-if="selected_game"
|
||||
:game="selected_game"
|
||||
@cancel="edit_game = false"
|
||||
@save-game="updateGame"
|
||||
@add-game="addGame"
|
||||
@update-game="updateGame"
|
||||
/>
|
||||
</q-dialog>
|
||||
</template>
|
||||
@ -231,10 +232,18 @@ function editGame(game: BingoGame) {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function updateGame(game: BingoGame) {
|
||||
async function addGame(game: BingoGame) {
|
||||
loading.value = true;
|
||||
|
||||
await localGames.updateGame(game);
|
||||
await localGames.addGame(game);
|
||||
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function updateGame(old_game: BingoGame, game: BingoGame) {
|
||||
loading.value = true;
|
||||
|
||||
await localGames.updateGame(old_game, game);
|
||||
|
||||
edit_game.value = false;
|
||||
|
||||
|
||||
@ -1,153 +1,273 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-tree
|
||||
:nodes="nodes"
|
||||
node-key="label"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:header-goal="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="openEditGoalDialog(prop.node)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-btn
|
||||
v-if="prop.node.goal?.description?.length"
|
||||
icon="help_outline"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
@click="openInfoDialog(prop.node.goal.description)"
|
||||
></q-btn>
|
||||
<q-badge
|
||||
outline
|
||||
v-for="tag in prop.node.goal.tags"
|
||||
:key="tag"
|
||||
:color="getColorForString(tag)"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">{{ tag }}</div>
|
||||
</q-badge>
|
||||
<!-- TODO: Can't seem to work with flexbox to an extent that makes me happy... -->
|
||||
|
||||
<q-card class="column" style="width: 100%; min-width: 700px; height: 80vh;">
|
||||
<div class="col-2">
|
||||
<q-card-section class="row justify-evenly q-gutter-md">
|
||||
<q-input
|
||||
class="col-5"
|
||||
v-model="game_id"
|
||||
square
|
||||
filled
|
||||
autogrow
|
||||
maxlength="50"
|
||||
label="Game ID"
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-5"
|
||||
v-model="game_name"
|
||||
square
|
||||
filled
|
||||
autogrow
|
||||
maxlength="100"
|
||||
label="Game Name"
|
||||
type="text"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="row justify-evenly q-gutter-md">
|
||||
<q-input
|
||||
class="col-5"
|
||||
v-model="short_description"
|
||||
square
|
||||
filled
|
||||
maxlength="200"
|
||||
label="Short Description"
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<div class="col-5 row justify-center self-center">
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="edit"
|
||||
color="orange"
|
||||
label="Description"
|
||||
outline
|
||||
@click="description_dialog = true"
|
||||
></q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<div class="col-9 q-pt-sm">
|
||||
<q-card-section class="full-height">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="full-height"
|
||||
>
|
||||
<div class="column full-height">
|
||||
<div class="col-1">
|
||||
<q-card-section class=" q-pa-sm">
|
||||
<span class="text-h4">Goal Editor</span>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<div class="col-11">
|
||||
<q-separator></q-separator>
|
||||
|
||||
<q-scroll-area class="full-height">
|
||||
<q-tree
|
||||
:nodes="nodes"
|
||||
node-key="label"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:header-goal="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="openEditGoalDialog(prop.node)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-btn
|
||||
v-if="prop.node.goal?.description?.length"
|
||||
icon="help_outline"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
@click="openInfoDialog(prop.node.goal.description)"
|
||||
></q-btn>
|
||||
<q-badge
|
||||
outline
|
||||
v-for="tag in prop.node.goal.tags"
|
||||
:key="tag"
|
||||
:color="getColorForString(tag)"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">{{ tag }}</div>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:header-goal-list="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="event => openEditGoalListDialog(prop.node, event)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-badge
|
||||
outline
|
||||
color="orange"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">Goal List</div>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:header-category="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="event => openEditCategoryDialog(prop.node, event)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-badge
|
||||
outline
|
||||
color="blue"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">Category</div>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Goal -->
|
||||
<template v-slot:header-add-goal="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Goal"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="openEditGoalDialog(prop.node)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Goal List -->
|
||||
<template v-slot:header-add-goal-list="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Goal List"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="event => openEditGoalListDialog(prop.node, event)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Category -->
|
||||
<template v-slot:header-add-category="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Category"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="event => openEditCategoryDialog(prop.node, event)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<template v-slot:header-goal-list="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="event => openEditGoalListDialog(prop.node, event)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-badge
|
||||
outline
|
||||
color="orange"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">Goal List</div>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
<div class="col-1">
|
||||
<q-card-actions class="full-height items-end">
|
||||
<q-space/>
|
||||
|
||||
<template v-slot:header-category="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
icon="edit"
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
color="orange"
|
||||
@click="event => openEditCategoryDialog(prop.node, event)"
|
||||
/>
|
||||
<div>{{ prop.node.item?.name || prop.node.label }}</div>
|
||||
<q-badge
|
||||
outline
|
||||
color="blue"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<div class="text-weight-bold q-my-xs">Category</div>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Goal -->
|
||||
<template v-slot:header-add-goal="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Goal"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="openEditGoalDialog(prop.node)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Goal List -->
|
||||
<template v-slot:header-add-goal-list="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Goal List"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="event => openEditGoalListDialog(prop.node, event)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Category -->
|
||||
<template v-slot:header-add-category="prop">
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
outline
|
||||
icon="add"
|
||||
label="Category"
|
||||
color="light-blue"
|
||||
size="sm"
|
||||
@click="event => openEditCategoryDialog(prop.node, event)"
|
||||
></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions>
|
||||
<q-space/>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="red"
|
||||
icon="cancel"
|
||||
label="Cancel"
|
||||
:loading="loading"
|
||||
@click="cancel"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
color="green"
|
||||
icon="save"
|
||||
label="Save"
|
||||
:loading="loading"
|
||||
@click="saveGame"
|
||||
/>
|
||||
</q-card-actions>
|
||||
<q-btn
|
||||
flat
|
||||
color="red"
|
||||
icon="cancel"
|
||||
label="Cancel"
|
||||
:loading="loading"
|
||||
@click="cancel"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
color="green"
|
||||
icon="save"
|
||||
label="Save"
|
||||
:loading="loading"
|
||||
@click="saveGame"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="info_dialog">
|
||||
<q-dialog
|
||||
v-model="description_dialog"
|
||||
style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;"
|
||||
>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="full-width"
|
||||
>
|
||||
<q-card-section class="full-height">
|
||||
<q-input
|
||||
v-model="game_description"
|
||||
class="full-height"
|
||||
square
|
||||
filled
|
||||
counter
|
||||
autogrow
|
||||
maxlength="500"
|
||||
label="Description"
|
||||
type="text"
|
||||
>
|
||||
</q-input>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
flat
|
||||
color="red"
|
||||
icon="cancel"
|
||||
label="Preview"
|
||||
:loading="loading"
|
||||
@click="openInfoDialog(game_description)"
|
||||
/>
|
||||
|
||||
<q-space/>
|
||||
|
||||
<q-btn
|
||||
flat
|
||||
color="red"
|
||||
icon="cancel"
|
||||
label="Save"
|
||||
:loading="loading"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="info_dialog" style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
@ -193,23 +313,34 @@ import {
|
||||
} from '@/js/lib/Util.ts';
|
||||
|
||||
import BingoCategory from '@/js/lib/BingoCategory.ts';
|
||||
import type BingoGame from '@/js/lib/BingoGame.ts';
|
||||
import BingoGame from '@/js/lib/BingoGame.ts';
|
||||
import BingoGoal from '@/js/lib/BingoGoal.ts';
|
||||
import BingoGoalList from '@/js/lib/BingoGoalList.ts';
|
||||
import Parser from '@/js/lib/Parser.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
game: BingoGame;
|
||||
game?: BingoGame;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits([
|
||||
'cancel',
|
||||
'saveGame'
|
||||
'addGame',
|
||||
'updateGame'
|
||||
]);
|
||||
|
||||
const game = ref(Parser.getCopy(props.game));
|
||||
const game = ref(
|
||||
props.game
|
||||
? Parser.getCopy(props.game)
|
||||
: new BingoGame('new-game', 'New Game', 'A short description', 'A long description')
|
||||
);
|
||||
game.value.is_local = true;
|
||||
|
||||
const game_id = ref(game.value.id);
|
||||
const game_name = ref(game.value.name);
|
||||
const short_description = ref(game.value.short_description);
|
||||
const game_description = ref(game.value.description);
|
||||
const description_dialog = ref(false);
|
||||
|
||||
const expanded = ref<Node[]>([]);
|
||||
|
||||
const loading = ref(false);
|
||||
@ -223,7 +354,19 @@ function cancel() {
|
||||
function saveGame() {
|
||||
loading.value = true;
|
||||
|
||||
emit('saveGame', game.value);
|
||||
// Updating game
|
||||
if (props.game) {
|
||||
game.value.id = game_id.value;
|
||||
game.value.name = game_name.value;
|
||||
game.value.short_description = short_description.value;
|
||||
game.value.description = game_description.value;
|
||||
|
||||
emit('updateGame', props.game, game.value);
|
||||
}
|
||||
// Adding game
|
||||
else {
|
||||
emit('addGame', game.value);
|
||||
}
|
||||
}
|
||||
|
||||
/* Info Dialog */
|
||||
|
||||
@ -78,16 +78,16 @@ export const useLocalGamesStore = defineStore('localGames', () => {
|
||||
await saveGames();
|
||||
}
|
||||
|
||||
async function updateGame(game: BingoGame) {
|
||||
if (!hasGame(game.id)) {
|
||||
console.error(`Failed to update game with ID ${ game.id } because it doesn't exist`);
|
||||
async function updateGame(old_game: BingoGame, game: BingoGame) {
|
||||
if (!hasGame(old_game.id)) {
|
||||
console.error(`Failed to update game with ID ${ old_game.id } because it doesn't exist`);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
console.info(`--- Updating game with ID '${ game.id }' ...`);
|
||||
console.info(`--- Updating game with ID '${ old_game.id }' ...`);
|
||||
|
||||
const index = games.value.findIndex(g => g.id === game.id);
|
||||
const index = games.value.findIndex(g => g.id === old_game.id);
|
||||
|
||||
games.value[index] = game;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user