timetrack-router/src/views/Settings.vue

<template>
    <h5 class="modal-title"><i class="fas fa-sliders-h"></i> Einstellungen</h5>
    <hr/>
    <div class="row">
        <div class="col-md-6">
            <h5>Allgemeine Einstellungen</h5>
            <div class="form-group">
                <label>Logo-Pfad</label>
                <input type="text" v-model="dashboardLogo" class="form-control">
            </div>
            <div class="form-group">
                <label>Tracker-Link <small>Link zu einem Tracker ohne Trackernummer</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="showPT">
                    Ab 8 Stunden nurmehr PT anzeigen
                </label>
            </div>
            <br/>
            <div class="form-group">
                <label>
                    <input type="checkbox" class="form-control-checkbox" v-model="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-6">
            <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" rows="3" id="exportJsonInput" v-model="exportJson"></textarea>
                    <button class="btn btn-success btn-full-width" @click="copy2Clipboard">Export-String kopieren
                    </button>
                </div>
                <div class="col-md-6">
                    <h6>Import</h6>
                    <textarea class="form-control" rows="3" v-model="importJson"></textarea>
                    <button class="btn btn-success btn-full-width" @click="importData">Import</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="modal">Speichern</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
    </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>