HW<13> done

js/13-js-chat/css/main.css

@@ -85,7 +85,7 @@ input[type="text"]:focus {
     border: none;
     border-radius: 8px;
     background-color: #99a3ba;
-    transition: 0.3s ease-in-out;
+    transition: 0.2s ease-in-out;
 }
 
 #btn:hover {

js/13-js-chat/js/main.js

@@ -1,9 +1,51 @@
+let timeConverter = timestamp => {
+    let date = new Date(timestamp);
+    let optionsDate = { year: "numeric", month: 'long', day: 'numeric' }
+    let optionsTime = { hour: '2-digit', minute: '2-digit' }
+    let convertedDate = date.toLocaleDateString("ua-UA", optionsDate) + "  " + date.toLocaleTimeString("ua-UA", optionsTime)
+
+    return convertedDate;
+}
+
+let del = 350;
+let msgId = 0;
+
+let updateScroll = () => {
+    setTimeout(() => chatWindow.scrollTop = chatWindow.scrollHeight, del)
+
+    if (del === 350) {
+        del = 0;
+    }
+}
+
+let chatWindowShower = (data, parent) => {
+    for (let key of data) {
+        let div = document.createElement("div");
+        let spanNick = document.createElement("span");
+        let spanMsg = document.createElement("span");
+        let spanDate = document.createElement("span");
+        spanNick.innerText = key.nick;
+        spanMsg.innerText = key.message;
+        spanDate.innerText = timeConverter(key.timestamp);
+
+        div.append(spanNick, spanMsg, spanDate)
+
+        parent.append(div)
+    }
+}
+
+let delay = ms => {
+    return new Promise(ok => {
+        setTimeout(() => ok(ms), ms)
+    })
+}
+
 //stage 0 - 4
+/*
 function jsonPost(url, data) {
     return new Promise((resolve, reject) => {
         var x = new XMLHttpRequest();
         x.onerror = () => reject(new Error('jsonPost failed'))
-        //         //x.setRequestHeader('Content-Type', 'application/json');
         x.open("POST", url, true);
         x.send(JSON.stringify(data))
 
@@ -18,30 +60,15 @@ function jsonPost(url, data) {
     })
 }
 
-let timeConverter = timestamp => {
-    let date = new Date(timestamp);
-    let optionsDate = { year: "numeric", month: 'long', day: 'numeric' }
-    let optionsTime = { hour: '2-digit', minute: '2-digit' }
-    let convertedDate = date.toLocaleDateString("ua-UA", optionsDate) + "  " + date.toLocaleTimeString("ua-UA", optionsTime)
-
-    return convertedDate;
-}
-
-let updateScroll = () => {
-    setTimeout(() => chatWindow.scrollTop = chatWindow.scrollHeight, 350)
-}
-
 btn.onclick = e => {
-    if (nick.value !== "" && msg.value !== "") {
-        jsonPost("http://students.a-level.com.ua:10012", { func: 'addMessage', nick: nick.value, message: msg.value })
-
-        msg.value = ""
-    }
-}
+     if (nick.value !== "" && msg.value !== "") {
+         jsonPost("http://students.a-level.com.ua:10012", { func: 'addMessage', nick: nick.value, message: msg.value })
 
-let msgId = 0;
+         msg.value = ""
+     }
+ }
 
-let chatWindowShower = () => {
+let getMsg = () => {
     jsonPost("http://students.a-level.com.ua:10012", { func: "getMessages", messageId: msgId })
         .then(json => {
 
@@ -49,47 +76,53 @@ let chatWindowShower = () => {
                 updateScroll()
                 msgId = json.nextMessageId;
             }
-
-            for (let key of json.data) {
-                let div = document.createElement("div");
-                let spanNick = document.createElement("span");
-                let spanMsg = document.createElement("span");
-                let spanDate = document.createElement("span");
-                spanNick.innerText = key.nick;
-                spanMsg.innerText = key.message;
-                spanDate.innerText = timeConverter(key.timestamp);
-
-                div.append(spanNick, spanMsg, spanDate)
-
-                chatWindow.append(div)
-            }
+            chatWindowShower(json.data, chatWindow)
         })
 }
 
-setInterval(chatWindowShower, 2000)
+setInterval(getMsg, 2000)
+*/
 
-//stage 5
-async function sendMessage(nick, message) {
+//stage 5-6
+async function jsonPost(url, data) {
+    const response = await fetch(url, { method: 'POST', body: JSON.stringify(data) });
+    let result = await response.json()
+    return result;
+}
 
+async function sendMessage(nck, msg) {
+    let result = await jsonPost("http://students.a-level.com.ua:10012", { func: 'addMessage', nick: nck, message: msg });
+    return result;
 }
 
 async function getMessages() {
+    let json = await jsonPost("http://students.a-level.com.ua:10012", { func: "getMessages", messageId: msgId });
+
+    if (json.nextMessageId !== msgId) {
+        updateScroll()
+        msgId = json.nextMessageId;
+    }
 
+    chatWindowShower(json.data, chatWindow)
 }
 
 async function sendAndCheck() {
-
+    await sendMessage(nick.value, msg.value)
+    await getMessages()
 }
 
 async function checkLoop() {
+    while (true) {
+        getMessages()
+        await delay(2000)
+    }
 
 }
 
-//stage 6
-/*
-async function jsonPost(url, data) {
-    const response = await fetch(url, { method: 'POST', body: JSON.stringify(data) });
-    let result = await response.json()
-    return result;
+btn.onclick = e => {
+    if (nick.value !== "" && msg.value !== "") {
+        sendAndCheck()
+    }
 }
-*/
+
+checkLoop()