timetrack-router/src/views/TrackersDetail.vue

<template>
    <div>
        <h5><i class="fas fa-clock"></i> Tracker</h5>
    </div>
    <div class="row">
        <div class="col-md-6" v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
            <h6>{{ tracker.number }}</h6>

            <div class="form-group">
                <input type="text" class="form-control" v-model="tracker.description"
                       @keydown="$store.commit('updateTrackers')"
                       placeholder="Beschreibung"/>
            </div>

            <span v-if="getTotalTime(tracker) > 0">
                Gesamtzeit: {{ getTotalTime(tracker) }}
            </span>
            <br>
            <div class="row">
                <div class="col">
                    <button class="btn btn-info tracker-action-button"
                            @click="showCustomBookingForTracker(tracker)"
                            title="Manuelle Buchung">
                        <i class="fas fa-user-edit"></i>
                    </button>
                </div>
                <div class="col">
                    <button class="btn btn-warning tracker-action-button"
                            @click="archiveTracker(trackerIndex)" title="Archivieren">
                        <i class="fas fa-archive"></i>
                    </button>
                </div>
                <div class="col" v-if="tracker.history.length > 0">
                    <button class="btn btn-info tracker-action-button"
                            @click="showHistoryForTracker(tracker)" title="History">
                        <i class="fas fa-history"></i>
                    </button>
                </div>
                <div class="col">
                    <button class="btn btn-danger tracker-action-button"
                            @click="deleteTracker(trackerIndex)" title="Löschen">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <div class="col" v-if="$store.state.settings.trackerSystemUrl">
                    <a v-if="isTrackerNumber(tracker.number)"
                       :href="$store.state.settings.trackerSystemUrl + tracker.number.replace('#', '')"
                       target="_blank" class="btn btn-dark tracker-action-button" title="Tracker">
                        <i class="fas fa-external-link-square-alt"></i>
                    </a>
                </div>
            </div>
            <br/>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import { Offcanvas } from "bootstrap";
import iziToast from "izitoast";

export default {
    name: "TrackersDetail",
    methods: {
        isTrackerNumber(number) {
            return number.indexOf('#') >= 0;
        },
        getTotalTime(tracker, raw = false) {
            let totalTime = 0;

            if (tracker.history.length > 0) {
                tracker.history.forEach(function (historyEntry) {
                    totalTime += Math.round(historyEntry.minutes);
                });
            }

            if (tracker.tracking) {
                totalTime += Math.round(moment.duration(moment().diff(tracker.trackingStarted)).as('minutes'));
            }

            if (raw) {
                return totalTime;
            } else {
                return this.timeWithPostFix(totalTime);
            }
        },
        timeWithPostFix(time) {
            let postFix = ' Minute';

            if (time >= 480 && this.$store.state.settings.showPT) {
                postFix = ' PT';
                time = (time / 480).toFixed(1);
            } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
                postFix = ' Stunde';
                time = (time / 60).toFixed(2);
            }

            let plural = '';

            if (((time > 1 || time <= 0) || this.$store.state.settings.dontShowMinutes) && postFix !== ' PT') {
                plural = 'n'
            }

            return time + postFix + plural;
        },
        getTotalTimeToday(tracker) {
            let totalTime = 0;

            if (tracker.history.length > 0) {
                tracker.history.forEach(function (historyEntry) {
                    if (moment(historyEntry.trackingStarted).format("MMM Do YY") === moment().format("MMM Do YY")) {
                        totalTime += Math.round(historyEntry.minutes);
                    }
                });
            }

            if (tracker.tracking) {
                totalTime += Math.round(moment.duration(moment().diff(tracker.trackingStarted)).as('minutes'));
            }

            return this.timeWithPostFix(totalTime);
        },
        reactivateTracker(index) {
            this.$store.commit('reactivateTracker', index);
            this.$store.commit('saveTrackers');
        },
        showHistoryForTracker(tracker) {
            this.$store.commit('selectTracker', tracker);
            setTimeout(() => {
                let historyCanvas = new Offcanvas(document.getElementById('historyCancas'));
                historyCanvas.toggle();
            }, 50);
        },
        showCustomBookingForTracker(tracker) {
            this.$store.commit('selectTracker', tracker);
            this.$forceUpdate();

            setTimeout(() => {
                let customBookingCanvas = new Offcanvas(document.getElementById('customBookingCanvas'));
                customBookingCanvas.toggle();
            }, 50);
        },
        deleteTracker(index) {
            this.$store.commit('deleteTracker', index);
            iziToast.succes({
                title: 'Tracker '+this.$store.state.trashed.name+' gelöscht.'
            });
        }
    }
}
</script>

<style scoped>
.tracker-action-button {
    margin-top: 10px;
    padding: 1px 5px 1px 5px;
    width: 100%;
}

</style>