diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html | 98 | ||||
| -rw-r--r-- | src/index.ts | 76 |
2 files changed, 148 insertions, 26 deletions
diff --git a/src/index.html b/src/index.html index 9637b67..8341455 100644 --- a/src/index.html +++ b/src/index.html @@ -25,7 +25,7 @@ </head> <body class="bg-dark text-white"> - <div id="chatlist"> + <div id="chatlist" class="bg-secondary"> <div class="scrollbar"> <div class="track"> <div class="thumb"> @@ -35,22 +35,92 @@ </div> <div class="viewport"> <div class="overview"> - <ul> - <li id="emot">:) :D :P ;)</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - <li>item</li> - </ul> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> + <div><span>[12:02]</span> <span><@maks></span> <span>Hello world</span></div> </div> </div> </div> + <input type="text" name="msg" id="msg" style="width: 570px; display: block; margin: 5px auto;"> </body> </html>
\ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 61abe7d..b074be1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,64 @@ -// import moduleFunction from "Modules/dummy"; - -// const userName = prompt("Gimme your name:"); -// if (userName === null) { -// document.body.innerHTML = 'You should give me your name'; -// } else { -// document.body.innerHTML = userName; -// } -//@ts-ignore -$("#chatlist").tinyscrollbar(); -//@ts-ignore -$("#emot").emoticonize(); +type Message = { + text: string; + user: string; + color: string; +}; +const url = "http://localhost:5000/"; +const input = document.getElementById("msg") as HTMLInputElement; +let username: string; +let color: string; +color = "#123456"; +// @ts-ignore +const chatListScroll = $("#chatlist").tinyscrollbar(); +function init() { + const username = prompt("Gimme your name: "); + if (username === null) { + document.body.innerHTML = "You should give me your name!"; + return; + } + // @ts-ignore + // chatList.tinyscrollbar(); + // //@ts-ignore + // $("#emot").emoticonize(); + if (input === null) return; + input.onclick = sendMessage; + poll(); +} +function poll() { + $.ajax({ + url: url + "poll", + success: addMessage /* data => { + console.log(data); // { text: "Some data" } -> will be printed in your browser console every 5 seconds + poll(); + } */, + error: () => setTimeout(() => poll(), 1000), + timeout: 30000, // 30 seconds + }); +} +function sendMessage() { + const msg = { + text: input.value, + user: username, + color: color, + }; + fetch(url + "send", { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify(msg), + }); +} +function addMessage(msg: Message) { + const board = $(".overview")[0]; + const div = document.createElement("div"); + div.innerHTML = JSON.stringify(msg); + board.appendChild(div); + console.log(msg); + // @ts-ignore + $(chatListScroll).data().plugin_tinyscrollbar.update("relative"); + // $(chatListScroll).data().plugin_tinyscrollbar.update("bottom"); + poll(); +} +init(); |