timetrack-router/src/views/Archive.vue

<template>
    <div class="modal modal-fullscreen fade" id="showArchivedTrackersModal" tabindex="-1" role="dialog"
         aria-labelledby="showArchivedTrackersModalLabel"
         aria-hidden="true">
        <div class="modal-dialog showArchivedTrackersModalDialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-archive"></i> Archivierte Tracker</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6"></div>
                        <div class="col-sm-6">
                            <i class="fas fa-search"></i>
                            <input @keydown="$forceUpdate()" type="text" class="form-control search-field float-right" v-model="searchQuery" placeholder="Suche..">
                        </div>
                        <template v-for="(tracker, trackerIndex) in $store.state.archive" v-bind:key="trackerIndex">
                            <div class="col-md-6" v-if="searchQuery === '' || tracker.number.search(searchQuery) >= 0 || (tracker.description && tracker.description.search(searchQuery)) >= 0">
                                <h6><span v-if="isTrackerNumber(tracker.number)"></span>{{ tracker.number }}</h6>
                                <div v-if="tracker.description">
                                    <p class="fst-italic">{{ tracker.description }}</p>
                                </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>

                                <br>
                                <div class="row">
                                    <div class="col">
                                        <button class="btn btn-success tracker-action-button" data-bs-dismiss="modal"
                                                @click="reactivateTracker(trackerIndex)" title="Reaktivieren">
                                            <i class="fas fa-power-off"></i>
                                        </button>
                                    </div>
                                    <div class="col" v-if="tracker.history.length > 0">
                                        <button class="btn btn-info tracker-action-button" data-bs-dismiss="modal"
                                                @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, true)" title="Löschen">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                    <div class="col" v-if="trackerSystemUrl">
                                        <a v-if="isTrackerNumber(tracker.number)" :href="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>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import bootstrap from "bootstrap";

export default {
    name: "Archive",
    data() {
        return {
            searchQuery: ''
        }
    },
    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.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 historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
                historyModal.toggle();
            }, 50);
        },
    }
}
</script>

<style scoped>

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

</style>