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