MusicFrontend/src/components/items/settingsModal.vue

<template>
    <!-- Round Settings, Stop after current, Don't hide title -->
    <transition name="modalAni">
        <div v-if="show" class="modal" @click.self="closeModal">
            <div class="modalContainer">
                <div class="modalWrapper">
                    <img
                        class="closeModalImg"
                        src="cancel-black-36dp.svg"
                        alt="closeModalIMG"
                        @click="closeModal"
                    />
                    <h1>Settings</h1>

                    <div class="checkboxDiv">
                        <input
                            type="checkbox"
                            name="stopAfterCurrent"
                            id="stopAfterCurrent"
                            v-model="checkboxStopAfterCurrent"
                            @change="updateOptionStopAfterCurrent"
                        />
                        <label for="stopAfterCurrent">Stop after current</label>
                    </div>
                    <div class="checkboxDiv">
                        <input
                            type="checkbox"
                            name="hideTitle"
                            id="hideTitle"
                            v-model="checkboxHideTitle"
                            @change="updateOptionHideTitle"
                        />
                        <label for="hideTitle">Hide next track</label>
                    </div>
                    <div class="checkboxDiv">
                        <input
                            type="checkbox"
                            name="addPlayed"
                            id="addPlayed"
                            v-model="checkboxAddPlayed"
                            @change="updateOptionAddPlayed"
                        />
                        <label for="addPlayed">Turn on played to database</label>
                    </div>
                    <div class="checkboxDiv">
                        <input
                            type="checkbox"
                            name="lowPlayed"
                            id="lowPlayed"
                            v-model="checkboxLowPlayed"
                            @change="updateOptionLowPlayed"
                        />
                        <label for="lowPlayed">Use low played mode</label>
                    </div>

                    <div class="winningScoreDiv">
                        <span>Winning Score: {{ winningScore }}</span>
                        <button
                            :class="{ disabled: roundStarted }"
                            :disabled="roundStarted"
                            @click="changeScore(-1)"
                        >
                            -1
                        </button>
                        <button
                            :class="{ disabled: roundStarted }"
                            :disabled="roundStarted"
                            @click="changeScore(1)"
                        >
                            +1
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            show: false,
            checkboxStopAfterCurrent: false,
            checkboxHideTitle: false,
            checkboxAddPlayed: false,
            checkboxLowPlayed: false,
        };
    },
    computed: {
        ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "addPlayed", "lowPlayed"]),
    },
    methods: {
        closeModal() {
            this.show = false;
        },
        openModal() {
            this.show = true;
        },
        updateOptionHideTitle() {
            if (this.checkboxHideTitle) {
                this.$store.dispatch("updateHideNextTitle", true);
            } else {
                this.$store.dispatch("updateHideNextTitle", false);
            }
        },
        updateOptionAddPlayed() {
            if (this.checkboxAddPlayed) {
                this.$store.dispatch("updateAddPlayed", true);
            } else {
                this.$store.dispatch("updateAddPlayed", false);
            }
        },
        updateOptionLowPlayed() {
            if (this.checkboxLowPlayed) {
                this.$store.dispatch("updateLowPlayed", true);
            } else {
                this.$store.dispatch("updateLowPlayed", false);
            }
        },
        updateOptionStopAfterCurrent() {
            if (this.checkboxStopAfterCurrent) {
                this.$store.dispatch("updateStopAfterCurrent", true);
            } else {
                this.$store.dispatch("updateStopAfterCurrent", false);
            }
        },
        changeScore(score) {
            if (score < 0) {
                this.$store.dispatch("setWinningScore", -1);
            } else {
                this.$store.dispatch("setWinningScore", 1);
            }
        },
    },
    mounted() {
        this.checkboxStopAfterCurrent = this.stopAfterCurrent;
        this.checkboxHideTitle = this.hideNextTrack;
        this.checkboxAddPlayed = this.addPlayed;
        this.checkboxLowPlayed = this.lowPlayed;
    },
};
</script>

<style scoped>
.winningScoreDiv {
    width: 100%;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 30px;
}

.checkboxDiv {
    margin: 5px;
    width: 100%;
}
.checkboxDiv:first-of-type {
    margin-top: 20px;
}
.checkboxDiv input {
    accent-color: #ff9c00;
    transform: scale(1.3);
}
.checkboxDiv label {
    margin-left: 10px;
    font-size: 1.5rem;
}

.winningScoreDiv span {
    font-size: 1.7rem;
    margin-right: 10px;
    width: 245px;
}
.winningScoreDiv button {
    display: flex;
    width: 50px;
    height: 33px;
    justify-content: center;
    align-items: center;
    line-height: 0;
    font-size: 1.5rem;
    margin: 3px;
}

.disabled {
    opacity: 50%;
}

@media only screen and (max-width: 1000px) {
    .checkboxDiv label {
        font-size: 1.3rem;
    }

    .winningScoreDiv span {
        font-size: 1.3rem;
        margin-right: 10px;
        width: 245px;
    }
}
</style>