You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.5 KiB
75 lines
3.5 KiB
4 years ago
|
<template>
|
||
|
|
<div class="modal modal-fullscreen fade"
|
||
|
|
v-if="selectedTracker"
|
||
|
|
id="trackerTasksModal"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="showTrackerTasksModal"
|
||
|
|
aria-hidden="true">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title"><i class="fas fa-clock"></i> Tasks für {{ selectedTracker.number }}</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="newTaskInput" class="form-control"
|
||
|
|
v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/>
|
||
|
|
</div>
|
||
|
|
<ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0">
|
||
|
|
<template v-for="(task, taskIndex) in selectedTracker.tasks">
|
||
|
|
<li class="list-group-item" v-if="!task.done">
|
||
|
|
<span class="float-end">
|
||
|
|
<a href="javascript:">
|
||
|
|
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
<a href="javascript:" @click="toggleTask(task)">
|
||
|
|
<i class="far fa-square"></i>
|
||
|
|
</a> {{ task.name }}
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="float-end">
|
||
|
|
{{ task.percentDone }}% erledigt
|
||
|
|
</div>
|
||
|
|
<input type="range"
|
||
|
|
class="range range-success range-tasks"
|
||
|
|
min="0"
|
||
|
|
max="100"
|
||
|
|
step="5"
|
||
|
|
v-model="task.percentDone"
|
||
|
|
@change="checkForCompletionOfTask(task)">
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</ul>
|
||
|
|
<br/>
|
||
|
|
<ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0">
|
||
|
|
<template v-for="(task, taskIndex) in selectedTracker.tasks">
|
||
|
|
<li class="list-group-item" v-if="task.done">
|
||
|
|
<span class="float-end">
|
||
|
|
<a href="javascript:">
|
||
|
|
<i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
<a href="javascript:" @click="toggleTask(task)">
|
||
|
|
<i class="far fa-check-square"></i>
|
||
|
|
</a> <span class="finished-task">{{ task.name }}</span>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "TasksForTracker"
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|