timetrack-router/src/views/History.vue

<template>
    <div class="offcanvas offcanvas-end" id="pastDaysModal" tabindex="-1" role="dialog"
         aria-labelledby="pastDaysModalLabel"
         aria-hidden="true">
        <div class="offcanvas-header">
            <h5><i class="fas fa-random"></i> Buchungsverlauf</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <div class="form-group">
                            <h6>Datum</h6>
                            <input id="date" type="date" class="form-control" v-model="customDateForPastDays">
                        </div>
                        <ul class="list-group">
                            <li class="list-group-item"
                                :style="entry.archive ? 'background-color: lightgrey;' : ''"
                                v-for="(entry, entryIndex) in collectDataForDay(0, customDateForPastDays)"
                                v-bind:key="entryIndex">
                                {{ entry.tracker }}
                                <span class="float-end">{{ timeWithPostFix(entry.minutes) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";

export default {
    name: "History",
    data() {
        return {
            customDateForPastDays: null,
        }
    },
    mounted() {
        this.customDateForPastDays = moment().format();
    },
    methods: {
        collectDataForDay(subtractDays = 0, customDate = false) {
            let day = moment().subtract(subtractDays, "days").format("MMM Do YY");
            let collection = [];

            if (customDate) {
                day = moment(customDate).format("MMM Do YY");
            }

            this.$store.state.trackers.forEach((tracker) => {
                tracker.history.forEach((historyEntry) => {
                    if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
                        let newEntry = {};
                        Object.assign(newEntry, historyEntry);
                        newEntry.tracker = tracker.number;

                        let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);

                        if (existingEntry) {
                            existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
                        } else {
                            collection.pushToBeginning(newEntry);
                        }
                    }
                });
            });

            this.$store.state.archive.forEach((tracker) => {
                tracker.history.forEach((historyEntry) => {
                    if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {
                        let newEntry = {};
                        Object.assign(newEntry, historyEntry);
                        newEntry.tracker = tracker.number;

                        let existingEntry = this.getCollectionItemWithValue(collection, 'tracker', tracker.number);

                        if (existingEntry) {
                            existingEntry.minutes = Number(existingEntry.minutes) + Number(newEntry.minutes);
                        } else {
                            collection.pushToBeginning(newEntry);
                        }
                    }
                });
            });

            return collection;
        },
        getCollectionItemWithValue(collection, property, value) {
            let found = false;

            collection.forEach((item) => {
                if (item[property] === value) {
                    found = item;
                }
            })

            return found;
        },
        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;
        },
    }
}
</script>

<style scoped>

</style>