timetrack-router/src/views/Settings.vue

<template>
    <div class="offcanvas offcanvas-end" id="settingsCanvas"
         aria-hidden="true">
        <div class="offcanvas-header">
            <h5><i class="fas fa-sliders-h"></i> Einstellungen</h5>
            <button type="button" v-on:click="updateStorage()" class="btn-close" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-md-12">
                    <h5>Allgemeine Einstellungen</h5>
                    <div class="form-group">
                        <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
                        <input type="text" v-model="trackerSystemUrl" class="form-control">
                    </div>
                    <br/>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.showPT">
                            Ab 8 Stunden nurmehr PT anzeigen
                        </label>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" class="form-control-checkbox"
                                   v-model="$store.state.settings.dontShowMinutes">
                            Zeit immer in Stunden anzeigen
                        </label>
                    </div>
                    <br/>
                    <!--            <div class="form-group">-->
                    <!--                <label>Design</label>-->
                    <!--                <select v-model="theme" class="form-control">-->
                    <!--                    <option v-for="(availableTheme, themeIndex) in themes" :value="availableTheme.name.toLowerCase()"-->
                    <!--                            v-bind:key="themeIndex">{{ availableTheme.name }}-->
                    <!--                    </option>-->
                    <!--                </select>-->
                    <!--            </div>-->
                    <!--            <br/>-->
                </div>
                <div class="col-md-12">
                    <!--            <h5>Zurücksetzen & Löschen</h5>-->
                    <!--            <div class="row">-->
                    <!--                <div class="col-md-6">-->
                    <!--                    <button class="btn btn-outline-danger btn-full-width" @click="deleteAllData()">Alle Daten-->
                    <!--                        löschen-->
                    <!--                    </button>-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--            <br/>-->
                    <h5>Import & Export</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Export-Json</h6>
                            <textarea class="form-control" id="exportJsonInput" v-model="exportJson"></textarea>
                            <button class="btn btn-success tracker-action-button" @click="copy2Clipboard">Export-String
                                kopieren
                            </button>
                        </div>
                        <div class="col-md-6">
                            <h6>Import</h6>
                            <textarea class="form-control" v-model="importJson"></textarea>
                            <button class="btn btn-success tracker-action-button" @click="importData">Import</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "Settings",
    data() {
        return {
            settings: {},
            importJson: '',
            theme: '',
            themes: null,
            // dashboardLogo: 'assets/img/logo.png',
            trackerSystemUrl: '',
            showPT: true,
            dontShowMinutes: false,
            linkTarget: '_blank',
            exportJson: ''
        }
    },
    mounted() {
        this.fetchThemes();
    },
    methods: {
        importData() {
            let json = JSON.parse(this.importJson);

            if (json.trackedTrackers) {
                this.trackers = this.extractTrackersFromLegacyJson(json.trackedTrackers);
                this.archive = this.extractArchivedTrackersFromLegacyJson(json.trackedTrackers);
            } else {
                this.trackers = json.trackers;
                this.archive = json.archive ?? [];
            }

            this.trackerSystemUrl = json.redmineUrl ?? json.trackerSystemUrl;
            this.showPT = json.showPT;
            this.theme = json.theme;
            this.updateStorage();
            location.reload();
        },
        extractTrackersFromLegacyJson(trackers) {
            return this.extractTrackers(trackers);
        },
        extractArchivedTrackersFromLegacyJson(trackers) {
            return this.extractTrackers(trackers, true);
        },
        extractTrackers(trackerCollection, forArchive = false) {
            let trackers = [];
            let archive = [];

            trackerCollection.forEach((tracker) => {
                if (tracker.archived || (tracker.active && tracker.active === false)) {
                    archive.pushToBeginning(tracker);
                } else {
                    trackers.pushToBeginning(tracker)
                }
            });

            return forArchive ? archive : trackers;
        },
        copy2Clipboard() {
            let copyText = document.getElementById("exportJsonInput");

            copyText.select();
            copyText.setSelectionRange(0, 99999);

            document.execCommand("copy");
        },
        fetchThemes() {
            let vue = this;

            axios.get(
                'https://bootswatch.com/api/5.json'
            ).then((response) => {
                vue.themes = response.data.themes;
            }).catch((error) => {
                console.log(error);
            });
        },
    }
}
</script>

<style scoped>

</style>