Allow the user to assign additional cards after the ordering step

- Helptexts are not properly implemented yet
- Empty additional slots are not supported yet
This commit is contained in:
2020-08-23 19:05:50 +02:00
parent 9a855dbf7c
commit 15043de56a
3 changed files with 103 additions and 41 deletions

View File

@ -19,14 +19,17 @@
<path d="M20 0V20L0 10Z" fill="#2b8856" />
</svg>
</div>
<template v-for="elem in solution">
<template v-for="(elem, row) in solution">
<div class="row">
<div class="card" v-bind:class="{incorrect: incorrects[elem.main_idx]}">
{{ solution_main_text(elem) }}
<svg width=20 height=20 v-if="!order_correct" v-on:click="remove_solution(elem)">
<div v-for="(idx, column) in elem.idx" class="card" v-bind:class="{incorrect: column == store.section && incorrects[row]}">
{{ solution_text(elem, column) }}
<svg width=20 height=20 v-if="column == store.section && !solution_correct" v-on:click="remove_solution(row)">
<path d="M2 2L18 18M18 2L2 18" stroke="#f00" stroke-width="2px" />
</svg>
</div>
<svg v-if="elem.idx.length == store.section && store.selected != null" v-on:click="add_card_to(row)" class="plus" width="20" height="20">
<path d="M8 0H12V8H20V12H12V20H8V12H0V8H8Z" fill="#2b8856" />
</svg>
</div>
<div class="arrow" v-bind:style="{visibility: arrows_visible ? 'visible' : 'hidden'}">
<svg width="20" height="20" v-on:click="insert_after(elem)">
@ -36,8 +39,9 @@
</template>
</div>
<div class="description">
<div class="helptext" v-if="!all_inserted || order_revealed">{{ helptext }}</div>
<button v-if="all_inserted && !order_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
<div class="helptext" v-if="!all_inserted || solution_revealed">{{ helptext }}</div>
<button v-if="all_inserted && !solution_revealed" v-on:click="reveal_order">Reihenfolge prüfen</button>
<button v-if="solution_correct" v-on:click="open_next_column">Weiter</button>
</div>
<div class="close_button" v-on:click="is_open = false">
<svg width="30" height="30">