timetrack-router/src/views/TasksForTracker.vue

<template>
    <div class="offcanvas offcanvas-end"
         id="trackerTasksCanvas"
         tabindex="-1"
         role="dialog"
         v-if="$store.state.selectedTracker"
         aria-labelledby="showTrackerCanvasCanvas"
         aria-hidden="true">
        <div class="offcanvas-header">
            <h5><i class="fas fa-clock"></i> Tasks für {{ $store.state.selectedTracker.number }}</h5>
        </div>
        <div class="offcanvas-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="$store.state.selectedTracker.tasks && $store.state.selectedTracker.tasks.length > 0">
                <template v-for="(task, taskIndex) in $store.state.selectedTracker.tasks" v-bind:key="taskIndex">
                    <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="$store.state.selectedTracker.tasks && $store.state.selectedTracker.tasks.length > 0">
                <template v-for="(task, taskIndex) in $store.state.selectedTracker.tasks" v-bind:key="taskIndex">
                    <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>
</template>

<script>
import moment from "moment";

export default {
    name: "TasksForTracker",
    data() {
        return {
            newTaskInput: ''
        }
    },
    methods: {
        deleteTask(taskIndex) {
            this.$store.state.selectedTracker.tasks.splice(taskIndex, 1)
            this.$store.commit('saveTrackers');
        },
        addTask() {
            if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') {
                return false;
            }

            if (!this.$store.state.selectedTracker.tasks) {
                this.$store.state.selectedTracker.tasks = [];
            }

            this.$store.state.selectedTracker.tasks.pushToBeginning({
                name: this.newTaskInput,
                done: false,
                created: moment(),
                percentDone: 0,
                finished: null
            });

            this.newTaskInput = '';
            this.$store.commit('saveTrackers');
        },
        toggleTask(task) {
            task.done = !task.done;

            if (task.done) {
                task.finished = moment();
                task.percentDone = 100;
            } else {
                task.finished = null;
                task.percentDone = 0;
            }

            this.$store.commit('saveTrackers');
        },
        checkForCompletionOfTask(task) {
            task.done = task.percentDone === 100;
            this.$forceUpdate();
            this.$store.commit('saveTrackers');
        },
    }
}
</script>

<style scoped>

</style>