102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
|
<script>
|
||
|
|
import Links from "./Links.vue";
|
||
|
|
import ScheduleTable from "./ScheduleTable.vue";
|
||
|
|
import {ref} from "vue";
|
||
|
|
import {useScheduleStore} from "../../stores/schedule.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "AdditionalButtons",
|
||
|
|
data: () => ({
|
||
|
|
showModal: ref(false),
|
||
|
|
afterModal: ref(false),
|
||
|
|
afterModalText: '',
|
||
|
|
rating: 0,
|
||
|
|
comment: ''
|
||
|
|
}),
|
||
|
|
props: {
|
||
|
|
isWide: Boolean
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
onShowModal(){
|
||
|
|
this.showModal = !this.showModal;
|
||
|
|
if (!this.showModal){
|
||
|
|
this.rating = 0;
|
||
|
|
this.comment = '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShowAfterModal(){
|
||
|
|
this.afterModal = !this.afterModal;
|
||
|
|
},
|
||
|
|
sendRating(){
|
||
|
|
axios.post(
|
||
|
|
'/api/v1/rating',
|
||
|
|
{
|
||
|
|
rate: this.rating,
|
||
|
|
comment: this.comment
|
||
|
|
}
|
||
|
|
).then((responce)=>{
|
||
|
|
this.onShowModal();
|
||
|
|
console.log(responce.data['code']);
|
||
|
|
if (responce.data['code'] === 200){
|
||
|
|
this.afterModalText = 'Спасибо за отзыв!';
|
||
|
|
} else {
|
||
|
|
this.afterModalText = 'Ошибка: Отзыв не отправился :(';
|
||
|
|
}
|
||
|
|
this.onShowAfterModal();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="w-100 d-flex justify-space-evenly" :class="isWide ? '' : 'flex-column'">
|
||
|
|
<v-btn
|
||
|
|
class="box-gradient pt-2 pb-2 ma-5 h-auto"
|
||
|
|
text="Кинуть копеечку"
|
||
|
|
href="https://www.donationalerts.com/r/dhaverd"
|
||
|
|
target="_blank"
|
||
|
|
/>
|
||
|
|
<v-btn
|
||
|
|
class="box-gradient pt-2 pb-2 ma-5 h-auto"
|
||
|
|
text="Оставить отзыв"
|
||
|
|
@click="onShowModal"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<v-dialog v-model="showModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
|
||
|
|
<v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
|
||
|
|
<div class="w-100 d-flex justify-end">
|
||
|
|
<v-btn icon="mdi-window-close" elevation="0" @click="onShowModal"/>
|
||
|
|
</div>
|
||
|
|
<v-label class="text-xl-h6">Оцените канал:</v-label>
|
||
|
|
<v-rating v-model="rating" active-color="orange-lighten-1">
|
||
|
|
sss
|
||
|
|
</v-rating>
|
||
|
|
<v-label class="text-xl-h6 mb-2">Оставьте отзыв:</v-label>
|
||
|
|
<v-textarea v-model="comment" clearable variant="outlined" label="Что можно улучшить?"/>
|
||
|
|
<div class="d-flex justify-center">
|
||
|
|
<v-btn class="box-gradient pt-2 pb-2 w-auto h-auto" @click="sendRating">Отправить</v-btn>
|
||
|
|
</div>
|
||
|
|
</v-sheet>
|
||
|
|
</v-dialog>
|
||
|
|
<v-dialog v-model="afterModal" class="align-center" :class="isWide ? 'w-50' : 'w-100 h-100'">
|
||
|
|
<v-sheet class="mt-5 mb-5 pa-5 h-auto rounded-lg d-flex flex-column">
|
||
|
|
<div class="w-100 d-flex justify-end">
|
||
|
|
<v-btn icon="mdi-window-close" elevation="0" @click="onShowAfterModal"/>
|
||
|
|
</div>
|
||
|
|
<v-label class="text-xl-h6">{{afterModalText}}</v-label>
|
||
|
|
</v-sheet>
|
||
|
|
</v-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.v-dialog {
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.v-label {
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
</style>
|