jeobeardy
/
JBear2
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP CreatePage with BoardView implementation

This commit is contained in:
Baer 2024-08-25 22:23:37 +02:00
parent efd8ac2ab9
commit d2a0551ddd
13 changed files with 197 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/webapp/src/assets/scss/customized_bootstrap.scss
View File

@ -46,6 +46,7 @@ $body-secondary-bg: $light-accented;
$dropdown-link-hover-bg: $dark-accented; $dropdown-link-hover-bg: $dark-accented;
$modal-fade-transform: scale(.75); $modal-fade-transform: scale(.75);
$breadcrumb-divider: quote(">");
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";

25
src/main/webapp/src/components/blocks/BoardEntryView.vue Normal file
View File

@ -0,0 +1,25 @@
<script setup lang="ts">
import type { BoardEntry } from '@/models/board/BoardEntry';
const props = defineProps<{
boardEntry: BoardEntry,
}>();
</script>
<template>
<div class="mx-3 h-100 d-flex flex-column">
<div class="row">
<div class="col text-center p-3">
<h2>
{{ boardEntry.name }}
</h2>
</div>
</div>
<div class="row h-100">
<div class="col">
Entry
</div>
</div>
</div>
</template>

19
src/main/webapp/src/components/blocks/BoardView.vue
View File

@ -20,10 +20,12 @@ function boardEntrySelected(cIndex: number, bEIndex: number){
emit("boardEntrySelected", cIndex, bEIndex); emit("boardEntrySelected", cIndex, bEIndex);
} }
</script> </script>
<template> <template>
<div class="mx-3 h-100"> <div class="mx-3 h-100 d-flex flex-column">
<div class="row"> <div class="row">
<div class="col text-center p-3"> <div class="col text-center p-3">
<h2> <h2>
@ -33,17 +35,22 @@ function boardEntrySelected(cIndex: number, bEIndex: number){
</div> </div>
<div class="row h-100"> <div class="row h-100">
<template v-for="(category, categoryIndex) in props.board.categories " :key="category.name"> <template v-for="(category, categoryIndex) in props.board.categories " :key="category.name">
<div class="col"> <div class="col pb-2">
<div class="d-flex flex-column g-1 h-100"> <div class="d-flex flex-column h-100">
<button class="flex-fill board-card-max-height card bg-primary w-100" @click="categorySelected(categoryIndex)"> <button class="flex-fill board-card-max-height card bg-primary w-100 my-1" @click="categorySelected(categoryIndex)" :title="board.categories[categoryIndex].description">
<div class="card-body d-flex align-items-center justify-content-center"> <div class="card-body d-flex align-items-center justify-content-center">
{{ category.name }} {{ category.name }}
</div> </div>
</button> </button>
<template v-for=" (boardEntry, boardEntryIndex) in category.boardEntries " :key="boardEntry.name"> <template v-for=" (boardEntry, boardEntryIndex) in category.boardEntries " :key="boardEntry.name">
<button class="flex-fill board-card-max-height card bg-body-secondary w-100" @click="boardEntrySelected(categoryIndex, boardEntryIndex)"> <button class="flex-fill board-card-max-height card bg-body-secondary w-100 my-1" @click="boardEntrySelected(categoryIndex, boardEntryIndex)">
<div class="card-body d-flex align-items-center justify-content-center"> <div class="card-body d-flex align-items-center justify-content-center">
{{ boardEntry.name }} <template v-if="board.pointsAreTitle">
{{ boardEntry.points }}
</template>
<template v-else>
{{ boardEntry.name }}
</template>
</div> </div>
</button> </button>
</template> </template>

20
src/main/webapp/src/components/blocks/CreatePanel.vue
View File

@ -36,13 +36,19 @@ function editBoardEntry(cIndex: number, bEIndex: number){
<EditCategoryPanel v-model="board" :categoryIndex="props.categoryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex === null" @editBoard="editBoard" @editBoardEntry="editBoardEntry"/> <EditCategoryPanel v-model="board" :categoryIndex="props.categoryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex === null" @editBoard="editBoard" @editBoardEntry="editBoardEntry"/>
<EditBoardEntryPanel v-model="board" :categoryIndex="props.categoryIndex" :boardEntryIndex="props.boardEntryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex !== null" @editCategory="editCategory" @editBoard="editBoard" /> <EditBoardEntryPanel v-model="board" :categoryIndex="props.categoryIndex" :boardEntryIndex="props.boardEntryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex !== null" @editCategory="editCategory" @editBoard="editBoard" />
</div> </div>
<div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3"> <div class="border-top border-2 border-primary p-2">
<button class="btn btn-primary"> <div class="d-flex align-items-center">
Save <div class="flex-grow-1 me-1">
</button> <button class="btn btn-primary w-100">
<button class="btn btn-danger"> Save
Abort and Exit </button>
</button> </div>
<div class="flex-grow-1 ms-1">
<button class="btn btn-danger w-100">
Exit
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

171
src/main/webapp/src/components/blocks/EditBoardEntryPanel.vue
View File

@ -1,129 +1,114 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Board } from '@/models/board/Board'; import type { Board } from '@/models/board/Board';
import { Category } from '@/models/board/Category'; import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { VueDraggable } from 'vue-draggable-plus';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { BoardEntry } from '@/models/board/BoardEntry';
import { Answer } from '@/models/board/Answer';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits<{
categorySelected: [index: number],
}>()
const board = defineModel<Board>( { required: true } ); const board = defineModel<Board>( { required: true } );
const newCategoryName = ref( '' ); const props = defineProps<{
function addCategory() { categoryIndex: number,
if( board.value.categories.length >= 12 ) { boardEntryIndex: number,
}>();
const emit = defineEmits<{
editBoard: [],
editCategory: [categoryIndex: number],
}>()
const boardEntry = computed( () => {
return board.value.categories[props.categoryIndex].boardEntries[props.boardEntryIndex];
})
const newBoardEntryName = ref( '' );
function addBoardEntry() {
if( board.value.categories[props.categoryIndex].boardEntries.length >= 10 ) {
return; return;
} }
const newCategory = new Category( newCategoryName.value, '', board.value ); const answer = new Answer('', undefined);
board.value.categories.push( newCategory ); const newBoardEntry = new BoardEntry( newBoardEntryName.value, 0, board.value.categories[props.categoryIndex], answer, [] );
board.value.categories[props.categoryIndex].boardEntries.push( newBoardEntry );
} }
function deleteCategory( index: number ) { function deleteBoardEntry( index: number ) {
board.value.categories.splice( index, 1 ); board.value.categories[props.categoryIndex].boardEntries.splice( index, 1 );
} }
function moveCategoryUp( index: number ) { function moveBoardEntryUp( index: number ) {
if( index === 0 || board.value.categories.length <= 1 ) { if( index === 0 || board.value.categories[props.categoryIndex].boardEntries.length <= 1 ) {
return; return;
} }
const tmp = board.value.categories[index]; const tmp = board.value.categories[props.categoryIndex].boardEntries[index];
board.value.categories[index] = board.value.categories[index - 1]; board.value.categories[props.categoryIndex].boardEntries[index] = board.value.categories[props.categoryIndex].boardEntries[index - 1];
board.value.categories[index - 1] = tmp; board.value.categories[props.categoryIndex].boardEntries[index - 1] = tmp;
} }
function moveCategoryDown( index: number ) { function moveBoardEntryDown( index: number ) {
if( index === board.value.categories.length - 1 || board.value.categories.length <= 1 ) { if( index === board.value.categories[props.categoryIndex].boardEntries.length - 1 || board.value.categories[props.categoryIndex].boardEntries.length <= 1 ) {
return; return;
} }
const tmp = board.value.categories[index]; const tmp = board.value.categories[props.categoryIndex].boardEntries[index];
board.value.categories[index] = board.value.categories[index + 1]; board.value.categories[props.categoryIndex].boardEntries[index] = board.value.categories[props.categoryIndex].boardEntries[index + 1];
board.value.categories[index + 1] = tmp; board.value.categories[props.categoryIndex].boardEntries[index + 1] = tmp;
} }
function openCategory( index: number ) { function openBoard() {
emit("categorySelected", index); emit("editBoard");
}
function openCategory(categoryIndex: number) {
emit("editCategory", categoryIndex);
} }
</script> </script>
<template> <template>
<div class="d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div class="flex-grow-1 overflow-y-auto p-2"> <div class="flex-grow-1 px-2">
<div class="row me-0"> <div class="row">
<div class="col"> <div class="col">
<h2 class="border-bottom border-3 border-primary">{{ t( "board.infos" ) }}</h2> <div class="d-flex align-items-center mb-2 overflow-x-auto pb-2">
<label for="board-name">{{ t( 'board.name' ) }}</label> <button class="btn btn-sm btn-outline-primary" :title="t('board.category.back')" @click="openCategory(props.categoryIndex)">
<input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )"> <FontAwesomeIcon :icon="['fas', 'angle-left']"/>
</div>
</div>
<div class="row me-0 mt-3">
<div class="col">
<h4>{{ t( "board.category.label", 2 ) }}</h4>
<template v-if=" board.categories.length === 0 ">
{{ t( "board.category.label", 0 ) }}
</template>
<template v-else>
<VueDraggable v-model="board.categories" item-key="id" :animation="150" ghost-class="draggable-ghost"
tag="ul" class="list-group" handle=".drag-handle">
<template v-for="( category, categoryIndex) of board.categories" :key="category.id">
<li class="list-group-item bg-body-secondary p-0">
<div class="d-flex justify-content-between w-100">
<div class="flex-grow-1 d-flex align-items-center g-3 justify-content-start">
<div
class="drag-handle h-100 d-flex justify-content-center align-items-center cursor-move border-end border-1 bg-primary bg-opacity-10">
<FontAwesomeIcon :icon="['fas', 'grip-lines']" class="px-2" />
</div>
<input type="text" :id="`category-name-${categoryIndex}`" v-model="category.name"
class="form-control rounded-0 h-100">
</div>
<div class="d-flex">
<button class="btn btn-primary rounded-0" @click="openCategory( categoryIndex )">
<FontAwesomeIcon :icon="['fas', 'edit']" size="sm" />
</button>
<div class="d-flex flex-column justify-content-center align-items-center h-100" role="group"
aria-label="Vertical button group">
<button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryUp( categoryIndex )"
:disabled="categoryIndex === 0">
<FontAwesomeIcon :icon="['fas', 'angle-up']" size="xs" />
</button>
<button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryDown( categoryIndex )"
:disabled="categoryIndex === board.categories.length - 1">
<FontAwesomeIcon :icon="['fas', 'angle-down']" size="xs" />
</button>
</div>
<button class="btn btn-danger rounded-start-0 rounded-0"
:class="[{ 'rounded-bottom-end': categoryIndex === board.categories.length - 1 }, { 'rounded-top-end': categoryIndex === 0 }]"
@click="deleteCategory( categoryIndex )">
<FontAwesomeIcon :icon="['fas', 'trash']" size="sm" />
</button>
</div>
</div>
</li>
</template>
</VueDraggable>
</template>
<label class="mt-2" for="new-category-name">{{ t( "board.category.add" ) }}</label>
<div class="input-group mb-3">
<input type="text" id="new-category-name" class="form-control" v-model="newCategoryName"
:placeholder="t( 'board.category.name' )" @keyup.enter="addCategory">
<button class="btn btn-primary" @click="addCategory">
<FontAwesomeIcon :icon="['fas', 'plus']" />
</button> </button>
<nav class="flex-grow-1 ms-2" aria-label="breadcrumb">
<ol class="breadcrumb mb-0 flex-nowrap">
<li class="breadcrumb-item text-truncate">
<a href="#" @click="openBoard">
{{ board.name }}
</a>
</li>
<li class="breadcrumb-item text-truncate">
<a href="#" @click="openCategory( props.categoryIndex )">
{{ board.categories[props.categoryIndex].name }}
</a>
</li>
<li class="breadcrumb-item active text-truncate" aria-current="page">
{{ boardEntry.name }}
</li>
</ol>
</nav>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row">
<div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3"> <div class="col">
<button class="btn btn-primary"> <div class="d-flex border-bottom border-3 border-primary align-items-center mb-2">
Save <h2 class="flex-grow-1 ms-2">{{ t( "board.boardentry.infos" ) }}</h2>
</button> </div>
<button class="btn btn-danger"> <label for="category-name">{{ t( 'board.boardentry.name' ) }}</label>
Abort and Exit <input type="text" id="category-name" class="form-control mb-2" v-model="boardEntry.name" :placeholder="t( 'board.boardentry.name' )">
</button> <label for="board-entry-points">{{ t( 'board.boardentry.points' ) }}</label>
<input type="text" id="board-entry-points" class="form-control" v-model="boardEntry.points" :placeholder="t( 'board.boardentry.points' )">
</div>
</div>
<div class="row mt-3">
<div class="col">
Questions
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

18
src/main/webapp/src/components/blocks/EditBoardPanel.vue
View File

@ -52,15 +52,19 @@ function openCategory( index: number ) {
<template> <template>
<div class="d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div class="flex-grow-1 overflow-y-auto p-2"> <div class="flex-grow-1 p-2">
<div class="row me-0"> <div class="row">
<div class="col"> <div class="col">
<h2 class="border-bottom border-3 border-primary">{{ t( "board.infos" ) }}</h2> <h2 class="border-bottom border-3 border-primary">{{ t( "board.infos" ) }}</h2>
<label for="board-name">{{ t( 'board.name' ) }}</label> <label for="board-name">{{ t( 'board.name' ) }}</label>
<input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )"> <input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )">
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="points-for-title" v-model="board.pointsAreTitle">
<label for="points-for-title" class="form-check-label">{{ t( 'board.options.pointsForTitle' ) }}</label>
</div>
</div> </div>
</div> </div>
<div class="row me-0 mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<h4>{{ t( "board.category.label", 2 ) }}</h4> <h4>{{ t( "board.category.label", 2 ) }}</h4>
<template v-if=" board.categories.length === 0 "> <template v-if=" board.categories.length === 0 ">
@ -117,14 +121,6 @@ function openCategory( index: number ) {
</div> </div>
</div> </div>
</div> </div>
<div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
<button class="btn btn-primary">
Save
</button>
<button class="btn btn-danger">
Abort and Exit
</button>
</div>
</div> </div>
</template> </template>

52
src/main/webapp/src/components/blocks/EditCategoryPanel.vue
View File

@ -16,22 +16,23 @@ const props = defineProps<{
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
boardEntrySelected: [categoryIndex: number, boardEntryIndex: number], editBoardEntry: [categoryIndex: number, boardEntryIndex: number],
editBoard: [],
}>() }>()
const newBoardEntryName = ref( '' ); const newBoardEntryName = ref( '' );
function addBoardEntry() { function addBoardEntry() {
if( board.value.categories.length >= 12 ) { if( board.value.categories[props.categoryIndex].boardEntries.length >= 10 ) {
return; return;
} }
const answer = new Answer('', undefined); const answer = new Answer('', undefined);
const newBoardEntry = new BoardEntry( newBoardEntryName.value, board.value.categories[props.categoryIndex], answer, [] ); const newBoardEntry = new BoardEntry( newBoardEntryName.value, 0, board.value.categories[props.categoryIndex], answer, [] );
board.value.categories[props.categoryIndex].boardEntries.push( newBoardEntry ); board.value.categories[props.categoryIndex].boardEntries.push( newBoardEntry );
} }
function deleteCategory( index: number ) { function deleteBoardEntry( index: number ) {
board.value.categories.splice( index, 1 ); board.value.categories[props.categoryIndex].boardEntries.splice( index, 1 );
} }
function moveBoardEntryUp( index: number ) { function moveBoardEntryUp( index: number ) {
@ -53,25 +54,38 @@ function moveBoardEntryDown( index: number ) {
} }
function openBoardEntry( index: number ) { function openBoardEntry( index: number ) {
emit("boardEntrySelected", props.categoryIndex, index); emit("editBoardEntry", props.categoryIndex, index);
}
function openBoard() {
emit("editBoard");
} }
</script> </script>
<template> <template>
<div class="d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div class="flex-grow-1 overflow-y-auto p-2"> <div class="flex-grow-1 p-2">
<div class="row me-0"> <div class="row">
<div class="col"> <div class="col">
<h2 class="border-bottom border-3 border-primary">{{ t( "board.category.infos" ) }}</h2> <div class="d-flex border-bottom border-3 border-primary align-items-center mb-2">
<label for="board-name">{{ t( 'board.category.name' ) }}</label> <button class="btn btn-sm btn-outline-primary mb-1" :title="t('board.category.back')" @click="openBoard">
<input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )"> <FontAwesomeIcon :icon="['fas', 'angle-left']"/>
</button>
<h2 class="flex-grow-1 ms-2">{{ t( "board.category.infos" ) }}</h2>
</div>
<label for="category-name">{{ t( 'board.category.name' ) }}</label>
<input type="text" id="category-name" class="form-control mb-2" v-model="board.categories[props.categoryIndex].name" :placeholder="t( 'board.category.name' )">
<label for="category-description">{{ t( 'board.category.description' ) }}</label>
<textarea id="category-description" class="form-control" v-model="board.categories[props.categoryIndex].description" :placeholder="t( 'board.category.description' )">
</textarea>
</div> </div>
</div> </div>
<div class="row me-0 mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<h4>{{ t( "board.boardentry.label", 2 ) }}</h4> <h4>{{ t( "board.boardentry.label", 2 ) }}</h4>
<template v-if=" board.categories[props.categoryIndex].boardEntries.length === 0 "> <template v-if=" board.categories[props.categoryIndex].boardEntries.length === 0 ">
{{ t( "board.boardentry.label", 0 ) }} <p>
{{ t( "board.boardentry.label", 0 ) }}
</p>
</template> </template>
<template v-else> <template v-else>
<VueDraggable v-model="board.categories[props.categoryIndex].boardEntries" item-key="id" :animation="150" ghost-class="draggable-ghost" <VueDraggable v-model="board.categories[props.categoryIndex].boardEntries" item-key="id" :animation="150" ghost-class="draggable-ghost"
@ -103,8 +117,8 @@ function openBoardEntry( index: number ) {
</button> </button>
</div> </div>
<button class="btn btn-danger rounded-start-0 rounded-0" <button class="btn btn-danger rounded-start-0 rounded-0"
:class="[{ 'rounded-bottom-end': categoryIndex === board.categories[props.categoryIndex].boardEntries.length - 1 }, { 'rounded-top-end': categoryIndex === 0 }]" :class="[{ 'rounded-bottom-end': boardEntryIndex === board.categories[props.categoryIndex].boardEntries.length - 1 }, { 'rounded-top-end': boardEntryIndex === 0 }]"
@click="deleteCategory( categoryIndex )"> @click="deleteBoardEntry( boardEntryIndex )">
<FontAwesomeIcon :icon="['fas', 'trash']" size="sm" /> <FontAwesomeIcon :icon="['fas', 'trash']" size="sm" />
</button> </button>
</div> </div>
@ -124,14 +138,6 @@ function openBoardEntry( index: number ) {
</div> </div>
</div> </div>
</div> </div>
<div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
<button class="btn btn-primary">
Save
</button>
<button class="btn btn-danger">
Abort and Exit
</button>
</div>
</div> </div>
</template> </template>

13
src/main/webapp/src/components/pages/CreatePage.vue
View File

@ -9,6 +9,9 @@ import type NavBar from '@/components/blocks/NavBar.vue';
import BoardView from '@/components/blocks/BoardView.vue'; import BoardView from '@/components/blocks/BoardView.vue';
import CreatePanel from '@/components/blocks/CreatePanel.vue'; import CreatePanel from '@/components/blocks/CreatePanel.vue';
import { Category } from '@/models/board/Category'; import { Category } from '@/models/board/Category';
import BoardEntryView from '../blocks/BoardEntryView.vue';
import { BoardEntry } from '@/models/board/BoardEntry';
import { Answer } from '@/models/board/Answer';
const { t } = useI18n(); const { t } = useI18n();
@ -22,6 +25,9 @@ const restHeight = computed( () => {
const board = ref<Board>(new Board("New Board")); const board = ref<Board>(new Board("New Board"));
const board1 = ref<Board>(new Board("New Board", [new Category("Test1", "", board.value as Board),new Category("Test2", "", board.value as Board)])); const board1 = ref<Board>(new Board("New Board", [new Category("Test1", "", board.value as Board),new Category("Test2", "", board.value as Board)]));
const answer = new Answer('', undefined);
const newBoardEntry = new BoardEntry( "Test Entry 1", 0, board1.value.categories[0] as Category, answer, [] );
board1.value.categories[0].boardEntries.push( newBoardEntry );
const categoryIndex = ref<number | null>(null); const categoryIndex = ref<number | null>(null);
const boardEntryIndex = ref<number | null>(null); const boardEntryIndex = ref<number | null>(null);
@ -45,10 +51,11 @@ function showBoard(){
<template> <template>
<div :style="restHeight"> <div :style="restHeight">
<div class="row h-100"> <div class="row h-100">
<div class="col-9 overflow-y-auto pe-0"> <div class="col-9 pe-0">
<BoardView :board="(board1 as Board)" /> <BoardEntryView v-if="categoryIndex !== null && boardEntryIndex !== null" :boardEntry="(board1.categories[categoryIndex].boardEntries[boardEntryIndex] as BoardEntry)" />
<BoardView v-else :board="(board1 as Board)" @categorySelected="showCategory" @boardEntrySelected="showBoardEntry" />
</div> </div>
<div class="col-3 px-0 h-100 overflow-auto border-start border-3 border-primary"> <div class="col-3 ps-0 h-100 overflow-auto border-start border-2 border-primary">
<CreatePanel v-model="(board1 as Board)" :categoryIndex="categoryIndex" :boardEntryIndex="boardEntryIndex" @editBoard="showBoard" @editCategory="showCategory" @editBoardEntry="showBoardEntry"/> <CreatePanel v-model="(board1 as Board)" :categoryIndex="categoryIndex" :boardEntryIndex="boardEntryIndex" @editBoard="showBoard" @editCategory="showCategory" @editBoardEntry="showBoardEntry"/>
</div> </div>
</div> </div>

19
src/main/webapp/src/locales/en.json
View File

@ -69,13 +69,26 @@
"textCode": "Wanna create a board and host a game yourself?" "textCode": "Wanna create a board and host a game yourself?"
}, },
"board": { "board": {
"label": "Board",
"name": "Board Name", "name": "Board Name",
"infos": "Board Infos", "infos": "Board Infos",
"options": {
"pointsForTitle": "Show points amount instead of entry name"
},
"category": { "category": {
"infos": "Category Infos",
"label": "No Category | Category | Categories | {count} Categories", "label": "No Category | Category | Categories | {count} Categories",
"name": "Category name", "name": "Category Name",
"description": "Category description", "description": "Category Description",
"add": "Add Category" "add": "Add Category",
"back": "Back to Board"
},
"boardentry": {
"infos":"Entry Infos",
"points": "Point | Points | {count} Points",
"label": "No Entries | Entry | Entries | {count} Entries",
"add": "Add Entry",
"name": "Entry Name"
} }
}, },
"theme": { "theme": {

3
src/main/webapp/src/main.ts
View File

@ -9,7 +9,7 @@ import '@/assets/scss/customized_bootstrap.scss';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from '@fortawesome/fontawesome-svg-core';
import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe, faPlus, faTrash, faGripLines, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons'; import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe, faPlus, faTrash, faGripLines, faAngleUp, faAngleDown, faAngleLeft } from '@fortawesome/free-solid-svg-icons';
import enMessages from './locales/en.json'; import enMessages from './locales/en.json';
import deMessages from './locales/de.json'; import deMessages from './locales/de.json';
@ -38,6 +38,7 @@ library.add(
faGripLines, faGripLines,
faAngleUp, faAngleUp,
faAngleDown, faAngleDown,
faAngleLeft,
) )
const app = createApp( App ); const app = createApp( App );

1
src/main/webapp/src/models/board/Board.ts
View File

@ -5,6 +5,7 @@ export class Board{
constructor( constructor(
public name: string, public name: string,
public categories: Array<Category> = [], public categories: Array<Category> = [],
public pointsAreTitle: boolean = false,
public owner: User | undefined = undefined, public owner: User | undefined = undefined,
private id: number | undefined = undefined, private id: number | undefined = undefined,
){} ){}

1
src/main/webapp/src/models/board/BoardEntry.ts
View File

@ -5,6 +5,7 @@ import type { Question } from './Question';
export class BoardEntry{ export class BoardEntry{
constructor( constructor(
public name: string, public name: string,
public points: number,
public category: Category, public category: Category,
public answer: Answer, public answer: Answer,
public questions: Array<Question>, public questions: Array<Question>,

2
src/main/webapp/vite.config.ts
View File

@ -18,5 +18,5 @@ export default defineConfig({
build:{ build:{
outDir: '../resources/static', outDir: '../resources/static',
emptyOutDir: true, emptyOutDir: true,
} },
}); });