timetrack-router/src/views/Boardview.vue

<template>
    <div class="row" id="board-view">
        <div class="col-4 col-board-inner">
            <h5>Todo</h5>
            <template v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
            </template>
        </div>
        <div class="col-4 col-board-inner">
            <h5>On hold</h5>
            <template v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
                <div class="card bg-gradient-secondary" v-if="tracker.status === 'onhold'">
                    <div class="card-body">
                        <div class="card-text">
                            <input type="text"
                                   v-model="tracker.number"
                                   class="form-control trackingNameField"
                                   @keydown="updateStorage()"/>

                            <div class="tracker-time-info">
                                <div v-if="tracker.tracking === true">
                                    <div class="text-danger font-weight-bolder float-end">
                                        <div class="spinner-grow spinner-grow-sm" role="status">
                                            <span class="sr-only">Tracking...</span>
                                        </div>
                                        Tracking
                                    </div>
                                </div>
                            </div>

                            <div v-if="tracker.tracking === true" class="tracker-time-info">
                                <span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
                                <span v-if="tracker.tracking === true">Gestartet: </span>
                                <br/>
                                <span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span>
                                <span v-if="tracker.tracking === true">Läuft seit: </span>
                            </div>

                            <div class="tracker-time-info">
                                <span class="float-end">{{ getTotalTime(tracker) }}</span>
                                <span class="current-tracker-info">Gesamt: </span>
                            </div>

                            <span class="float-end">{{ getTotalTimeToday(tracker) }}</span>
                            <span class="">Heute: </span>

                            <div class="row">
                                <div class="col-md-12" v-if="!tracker.tracking">
                                    <button type="button" class="btn btn-info tracker-action-button"
                                            @click="startTracking(tracker)">
                                        <i class="far fa-play-circle"></i>
                                    </button>
                                </div>

                                <div class="col-md-12" v-else>
                                    <button type="button" class="btn btn-danger tracker-action-button"
                                            @click="stopTracking(tracker)">
                                        <i class="far fa-stop-circle"></i>
                                    </button>
                                </div>

                                <div class="col-md-12">
                                    <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
                                            @click="archiveTracker(trackerIndex)" title="Archivieren">
                                        <i class="fas fa-archive"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="col-4">
            <h5>Work in progress</h5>
            <template v-for="(tracker, trackerIndex) in trackers" v-bind:key="trackerIndex">
                <div class="card bg-gradient-secondary" v-if="tracker.status === 'wip'">
                    <div class="card-body">
                        <div class="card-text">
                            <input type="text"
                                   v-model="tracker.number"
                                   class="form-control trackingNameField"
                                   @keydown="updateStorage()"/>

                            <div class="tracker-time-info">
                                <div v-if="tracker.tracking === true">
                                    <div class="text-danger font-weight-bolder float-end">
                                        <div class="spinner-grow spinner-grow-sm" role="status">
                                            <span class="sr-only">Tracking...</span>
                                        </div>
                                        Tracking
                                    </div>
                                </div>
                            </div>

                            <div v-if="tracker.tracking === true" class="tracker-time-info">
                                <span class="float-end">{{ getTrackingStartTime(tracker) }}</span>
                                <span v-if="tracker.tracking === true">Gestartet: </span>
                                <br/>
                                <span class="float-end">{{ currentTrackingRunningFor(tracker) }}</span>
                                <span v-if="tracker.tracking === true">Läuft seit: </span>
                            </div>

                            <div class="tracker-time-info">
                                <span class="float-end">{{ getTotalTime(tracker) }}</span>
                                <span class="current-tracker-info">Gesamt: </span>
                            </div>

                            <span class="float-end">{{ getTotalTimeToday(tracker) }}</span>
                            <span class="">Heute: </span>

                            <div class="row">
                                <div class="col-md-12" v-if="!tracker.tracking">
                                    <button type="button" class="btn btn-info tracker-action-button"
                                            @click="startTracking(tracker)">
                                        <i class="far fa-play-circle"></i>
                                    </button>
                                </div>

                                <div class="col-md-12" v-else>
                                    <button type="button" class="btn btn-danger tracker-action-button"
                                            @click="stopTracking(tracker)">
                                        <i class="far fa-stop-circle"></i>
                                    </button>
                                </div>

                                <div class="col-md-12">
                                    <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
                                            @click="archiveTracker(trackerIndex)" title="Archivieren">
                                        <i class="fas fa-archive"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: "Boardview"
}
</script>

<style scoped>

</style>