VoldemarProger/PutBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: front logic

Browse Source
This commit is contained in:
Володя 2024-12-17 19:11:42 +04:00
parent 4f4fdb4917
commit 0eab40fb5c
3 changed files with 331 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
front/src/components/examCreate.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<div v-if="show" class="modal-shadow" @click.self="closeModal">
<div class="container">
<form >
<div class="mb-3">
<label
htmlFor="num"
class="form-label">Название
</label>
<input
type="text"
class="form-control"
id="num"
name="num"
v-model="title"
/>
</div>
<div class="d-grid gap-2">
<button
@click="create"
type="button"
class="btn btn-primary btn-block">Добавить
</button>
</div>
</form>
</div>
</div>
</template>
<script>
import ExamSevice from '@/services/ExamSevice';
export default {
name: "ModalWindow",
data: function () {
return {
show: false,
id:'',
title:'',
}
},
methods: {
closeModal() {
this.show = false
this.title =''
},
create(){
let data = {
id:null,
title:this.title,
}
console.log(data)
ExamSevice.create(data).then(res => {
console.log(res.data)
window.location.reload()
})
}
}
}
</script>
<style scoped >
.modal-shadow {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
padding: 50px ;
background: rgba(0, 0, 0, 0.39);
}
.container {
position: absolute;
min-width: 100px;
height: fit-content;
top: 50%;
left: 50%;
padding: 1%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.modal-close {
border-radius: 50%;
color: #fff;
background: #2a4cc7;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 7px;
right: 7px;
width: 30px;
height: 30px;
cursor: pointer;
}
.modal-title {
color: #0971c7;
}
.modal-content {
margin-bottom: 20px
}
</style>

114
front/src/components/examUpd.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div v-if="show" class="modal-shadow" @click.self="closeModal">
<div class="container">
<form >
<div class="mb-3">
<label
htmlFor="num"
class="form-label">Название
</label>
<input
type="text"
class="form-control"
id="num"
name="num"
v-model="title"
/>
</div>
<div class="d-grid gap-2">
<button
@click="create"
type="button"
class="btn btn-primary btn-block">Обновить
</button>
</div>
</form>
</div>
</div>
</template>
<script>
import ExamSevice from '@/services/ExamSevice';
export default {
name: "ModalWindow",
data: function () {
return {
show: false,
id:'',
title:'',
}
},
methods: {
closeModal() {
this.show = false
this.title =''
},
create(){
let data = {
id:this.id,
title:this.title,
}
console.log(data)
ExamSevice.update(data).then(res => {
console.log(res.data)
window.location.reload()
})
}
}
}
</script>
<style scoped >
.modal-shadow {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
padding: 50px ;
background: rgba(0, 0, 0, 0.39);
}
.container {
position: absolute;
min-width: 100px;
height: fit-content;
top: 50%;
left: 50%;
padding: 1%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.modal-close {
border-radius: 50%;
color: #fff;
background: #2a4cc7;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 7px;
right: 7px;
width: 30px;
height: 30px;
cursor: pointer;
}
.modal-title {
color: #0971c7;
}
.modal-content {
margin-bottom: 20px
}
</style>

104
front/src/components/exams.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<AdminHeader />
<div>
<div class="container m-3">
<div class="rounded-card row">
<H1>Экзамены</H1>
<div style="min-width:max-content;" class="m-2">
<div class="row">
<button class="btn-success border border-transparent rounded shadow-sm " @click="showCreate">Добавить</button>
</div>
<table class="table table-hover table-bordered">
<tbody>
<tr>
<td>Номер</td>
<td>Название</td>
<td></td>
</tr>
<tr v-for="(row, index) in exams" :key="index" style="min-width:max-content;" >
<td @click="showUpd(row.id,row.title)">{{ index+1 }}</td>
<td @click="showUpd(row.id,row.title)">{{ row.title }}</td>
<td><button class="btn btn-outline-danger" @click="deleteAch(row.id)">Удалить</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<examCreate ref="modalCreate"></examCreate>
<examUpd ref="modalUpdate"></examUpd>
</template>
<script scoped>
import ExamSevice from '@/services/ExamSevice';
import AdminHeader from '@/elemets/adminHeader.vue';
import examUpd from './examUpd.vue';
import examCreate from './examCreate.vue';
export default{
name:"benefits",
data(){
return{
exams: [],
}
},
components: {
AdminHeader,
examCreate,
examUpd
},
beforeCreate(){
ExamSevice.getAll().then(response =>{
this.exams = response.data
})
},
methods:{
showUpd(id,title) {
this.$refs.modalUpdate.show = true;
this.$refs.modalUpdate.id = id
this.$refs.modalUpdate.title = title
},
showCreate() {
this.$refs.modalCreate.show = true;
},
deleteAch(id){
ExamSevice.delete(id).then(response =>{
console.log(response.data)
ExamSevice.getAll().then(response =>{
this.exams = response.data
})
}).catch(e => {
console.log(e.data)
})
}
}
}
</script>
<style scoped>
.container
{
position:absolute ;
min-width:calc(205vh);
background-color: #6ec0d9e9 ;
border: 5px solid #3f8ba2;
padding:12px;
align-items: center;
border-radius:8px;
}
.rounded-card{
border: 5px solid #3f8ba2;
padding:6px;
margin:6px;
border-radius:8px;
align-items: center;
}
</style>