website-Live-chat/script.js at main · iammazdak/website-Live-chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
let id = 1;
let userData="";
let supporterData="";
let messageBoxIsShow = false;

    setInterval(() => {
        if (messageBoxIsShow) {
        fetchSupporterMessage();
        console.log("fetch data in server")
        }
    }, 5000);


$(".online-chat").click(function () {
    console.log("this");
    messageBoxIsShow = true;
    $(this).fadeOut(200);
    $(".online-chat-section").fadeIn(500)
    console.log();
})
$(".chat-close-btn").click(function () {
    messageBoxIsShow = false;
    $(".online-chat-section").fadeOut(500)
    $(".online-chat").fadeIn(300)
})
$(".chat-btn").on("click",function(){
    let userMessage;
     $(".chat-input-text").val(function(index,value){

        console.log(index, value)
        userMessage = value;
        // $(this).val = ""
        return "";
    });
        console.log(userMessage)
       if(userMessage != ""){
            fetchUserDataHistory(userMessage);
            createUserMessage(userMessage)
       }
})
$(".chat-input-text").keypress(function (event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    var value = event.target.value;
    if (keycode == '13' && value != "") {
        console.log(event.target.value)
        createUserMessage(event.target.value)
        event.target.value="";

    }
});
function createUserMessage(message){
    let messageID = "mes_" + (++id)
    let messageDiv = "<div class='user-message'><div class='text-chat'>"
    messageDiv += message + "</div><div class='chack-reserved " + messageID + "'><span>&#10004;</span></div></div>"
    $(".chat-message-box").append(messageDiv);
    setTimeout(() => {
        $(`.${messageID}`).append("<span>&#10004;</span>");
    }, 2000);
}
function createSupporterMessage(message){
    let messageDiv = "<div class='chat-supporter-message'><div class='chat-text-supporter'>"
    messageDiv += message + "</div></div>"
}
function fetchSupporterMessage (){
    $.ajax({
        url: "api url",
        method: "post & get",
        async: true,
        success: function () {
            createSupporterMessage(data)
        }
    })
}
function fetchUserDataHistory (userData){
    $.ajax({
        url : "api url",
        method : "post & get",
        data: userData,
        async: true,
        success: function () {
            $("mes_" + id).append("<span>&#10004;</span>");
        }
    })
}