HW/HWJS13/js/script.js

//////////////////////////////////Chat Homework
let nextMessageId = 0;
let arrMonthName=['Января','Февраля','Марта','Апреля','Мая','Июня','Июля','Августа','Сентября','Октября','Ноября','Декабря'];
let currentDate;

let wrapperMessages = document.querySelector(".wrapper-messages");
let inputNick = document.querySelector(".nick-inp");
let inputMes = document.querySelector(".message-inp");
let btnImg = document.querySelector("img");
let url = "http://students.a-level.com.ua:10012";

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

function createMessage (parent,{nick, message, timestamp}){
    let hours = new Date(timestamp).getHours();
    let minutes = new Date(timestamp).getMinutes();
    let date = new Date(timestamp).getDate();
    let month = new Date(timestamp).getMonth();
    let year = new Date(timestamp).getFullYear();
    let fullDate = `${date} ${arrMonthName[month]} ${year}`

    if(currentDate !== fullDate){
        let divDate = document.createElement('div');
        divDate.classList.add("mes-date");
        parent.prepend(divDate);
        divDate.innerHTML = fullDate;
        currentDate = fullDate;
    }

    let divWrap = document.createElement('div');
    divWrap.classList.add("wrap-message");
    parent.prepend(divWrap);

    let divNick = document.createElement('div');
    divNick.classList.add("nick");
    divWrap.append(divNick);
    divNick.innerHTML = nick;

    let divMes = document.createElement('div');
    divMes.classList.add("message");
    divWrap.append(divMes);
    divMes.innerHTML = message;

    let divTime = document.createElement('div');
    divTime.classList.add("mes-time");
    divMes.append(divTime);
    divTime.innerHTML = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
}

async function jsonPost(url,data){
    let response = await fetch(url, {
        method : 'POST',
        body : JSON.stringify(data),
        headers : {
            // 'Content-Type' : 'application/json',
            // 'Accept' : 'application/json',
        }
    })
    if(response.status === 200){
        let json = await response.json();
        return json
    }
}

async function sendMessage(nick, message){
    if (nick.length >= 3 && message.length >= 3){
        await jsonPost(url, {func: "addMessage", nick: nick, message: message});
    }
}
async function getMessages(){
    let data = await jsonPost(url, {func: "getMessages", messageId: nextMessageId});
    nextMessageId = data.nextMessageId;
    data.data.forEach(elem=> {
        createMessage(wrapperMessages, elem)
    })
}

async function sendAndCheck(){
    await sendMessage(inputNick.value, inputMes.value);
    inputMes.value = ''               /// оставляем только ник
    await getMessages();
    btnImg.onclick = onClick;       //// снова вешаем клик 
}

getMessages();

async function checkLoop(){
    while(true){
        await delay(3000);
        await getMessages();
        // console.log('3000')
    }
}

checkLoop()

function onClick(){
    btnImg.onclick = null           //// для исключения повторного клика 
    sendAndCheck();
}

btnImg.onclick = onClick;