✨ Add chat

2017-07-30 22:49:08 +02:00
parent f8246fd60f
commit 910a63234d
5 changed files with 927 additions and 2 deletions
@@ -109,6 +109,91 @@ class Site
            response.send(`
                <a href="/${_project.slug}/download" download>download project</a>
                <a href="/${_project.slug}/files/empty.txt" download>download file</a>
+                
+                <form action="#" class="infos-form">
+                    <input type="text" class="name" value="" /> Name
+                    <input type="submit" value="send" />
+                </form>
+
+                <form action="#" class="message-form">
+                    <input type="text" class="text" value="Lorem ipsum" /> Text
+                    <input type="number" class="file" value="1" /> File
+                    <input type="line" class="line" value="2" /> Line
+                    <input type="submit" value="send" />
+                </form>
+
+                <div class="messages"></div>
+
+                <script src="/socket.io/socket.io.js"></script>
+                <script>
+                    const socket = io('${this.config.domain}/project/${_project.slug}/chat')
+
+                    socket.on('connect', () =>
+                    {
+                        console.log('connected')
+                    })
+
+                    // Infos
+                    const $infosForm = document.querySelector('.infos-form')
+                    const $name = $infosForm.querySelector('.name')
+
+                    $infosForm.addEventListener('submit', (event) =>
+                    {
+                        event.preventDefault()
+
+                        const name = $name.value
+
+                        socket.emit('update_infos', { name })
+                    })
+
+                    socket.on('infos', (data) =>
+                    {
+                        console.log('infos')
+                        console.log(data)
+                        $name.value = data.name
+                    })
+
+                    // Messages
+                    const $messages = document.querySelector('.messages')
+                    const $messageForm = document.querySelector('.message-form')
+                    const $text = $messageForm.querySelector('.text')
+                    const $file = $messageForm.querySelector('.file')
+                    const $line = $messageForm.querySelector('.line')
+
+                    $messageForm.addEventListener('submit', (event) =>
+                    {
+                        event.preventDefault()
+
+                        const text = $text.value
+                        const file = $file.value
+                        const line = $line.value
+
+                        socket.emit('message', { text, file, line })
+                    })
+
+                    socket.on('message', (data) =>
+                    {
+                        console.log('message')
+                        console.log(data)
+
+                        $message = document.createElement('div')
+
+                        const $author = document.createElement('div')
+                        $author.style.color = data.user.color
+                        $author.innerText = data.user.name
+                        $message.appendChild($author)
+
+                        const $info = document.createElement('div')
+                        $info.innerText = data.file + ':' + data.line
+                        $message.appendChild($info)
+
+                        const $text = document.createElement('div')
+                        $text.innerText = data.text
+                        $message.appendChild($text)
+
+                        $messages.appendChild($message)
+                    })
+                </script>
            `)
        })