scheduleServer/static/js/api/vueGroup.js

const requestFunc = async(url, method = "GET", data = null, token = null) => {
    apihost = 'http://127.0.0.1/api'
    method = method.toLocaleUpperCase()
    let fullurl = `${apihost}${url}`;
    let options = {
    method: method,
    headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${token}`,
    },
};

switch(method) {
    case "PUT":
    delete options.headers["Content-Type"];
    options.body = data;
    break;
    case "POST": case "PATCH": case "DELETE":
    options.body = JSON.stringify(data);
    break;
}

const res = await fetch(fullurl, options);
return await res.json();
};

var vueapp = new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        data: {
            groups:[],
            teachers:[],
            specialties:[],
            selectedRow:{
                "ID": "",
                "Number":"",
                "IDSpecialty": 0,
                "IDTeacher": 0,
                "IsBudget": "",
                "Year": ""
            },
        },
        methods: {
            async getGroups(){
                this.groups = await requestFunc("/group/", "GET")
            },
            async getTeachers(){
                teachers = await requestFunc("/teacher/", "GET")
                for(let i =0; i < teachers.length; i++) {
                    Vue.set(this.teachers, i, teachers[i]);
                }
            },
            async getSpecilties(){
                specialties = await requestFunc("/specialty/", "GET")
                for(let i =0; i < specialties.length; i++) {
                    Vue.set(this.specialties, i, specialties[i]);
                }
            },
            async mountFunc(){
                await this.getTeachers()
                await this.getGroups()
                await this.getSpecilties()
            },
            selectRow(row, index){
                let rows = document.querySelectorAll('.clickHover')
                this.selectedRow = row;
                if(rows[index].style.backgroundColor != 'red'){
                    rows[index].style.backgroundColor = 'red'
                }
                else{
                    rows[index].style.backgroundColor = 'white'
                    this.clearSelectedRow()
                }   
            },
            clearSelectedRow(){
                this.selectedRow = {
                    "ID": "",
                    "Number":"",
                    "IDSpecialty": 0,
                    "IDTeacher": 0,
                    "IsBudget": "",
                    "Year": ""
                }
            },
            changeRequestType(requestType){
                this.requestType = requestType 
            },
            modalClick(add, requestType) {
                if(add==='yes') {
                    this.clearSelectedRow();
                }
                this.changeRequestType(requestType);
            },
        }, 
        async mounted() {
            await this.mountFunc()
            console.log(this.teachers)
        }
    });

addSubject = (requestType) =>{
    let name = document.querySelector('.name').value
    let patronymic = document.querySelector('.patronymic').value
    var select = document.getElementById("selectClassroom");
    var value = select.value;

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    var raw = {"Surname":surname,"Name":name,"IDCLassroom":Number(value),"Patronymic": patronymic};
    requestFunc(url="/teacher/", method="POST", data=raw)
    alert("Добавлено")
}