Merge branch 'master' into getmessageN1

app/public/css/main.css

@@ -0,0 +1,116 @@
+.cover {
+  padding: 0 1.5rem;
+}
+.cover .btn-lg {
+  padding: .75rem 1.25rem;
+  font-weight: bold;
+}
+
+.cover-container {
+  vertical-align: middle;
+  width: 100%;
+}
+
+body {
+  padding-top: 50px;
+  background-color: white;
+}
+
+.sidebar {
+  position: fixed;
+  top: 57px;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 0px 0px 90px 0px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-right: 1px solid #eee;
+  background-color: #eee;
+}
+
+#chatbox-frame {
+  position: fixed;
+  background-color: white;
+  bottom: 0;
+  padding-bottom: 25px;
+}
+
+.chatbox {
+  background-color: white;
+  height: 60px;
+  bottom: 0;
+  padding-bottom: 10px;
+}
+
+.chatbox textarea {
+  resize: none;
+}
+
+#timeline {
+  padding-top: 60px;
+  padding-bottom: 80px;
+}
+
+div.message {
+  margin: 0px;
+  border-bottom: 1px solid lightgray;
+}
+
+img.avatar-lg {
+	width: 500px;
+}
+
+div.message img.avatar {
+  border-radius: .25rem;
+  width: 100px;
+}
+
+p.message-date {
+  text-align: right;
+  padding-right: 20px;
+  color: gray;
+  margin-bottom:0.2em;
+}
+
+a.navbar-brand {
+  text-transform: lowercase;
+  letter-spacing: 0.7em;
+  color: #cc99ff !important;
+}
+
+a.navbar-brand:before {
+  content:"#";
+  color: #eee;
+}
+
+.sidebar .nav-pills .nav-item .nav-link {
+  border-radius: 0px !important;
+  border-top: 1px solid gray;
+  border-bottom: 1px solid black;
+  background-color: #595b5c;
+  color: #f0f0f0;
+}
+
+.sidebar .nav-pills .nav-item .nav-link:hover {
+  background-color: #f0f0f0;
+  color: #595b5c;
+}
+
+div.well {
+  border-bottom: 1px solid black;
+  background-color: #696b6c;
+  color: #f0f0f0;
+  position: fixed;
+  width: 100%;
+  padding-top: 0.5em;
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+  padding-left: 1em;
+}
+
+.row main {
+  padding-top: 7px !important;
+  padding-left: 0px;
+}
+

app/public/js/chat.js

@@ -0,0 +1,155 @@
+var last_message_id = 0
+
+function append(msg) {
+    var text = msg["content"]
+    var name = msg["user"]["display_name"] + "@" + msg["user"]["name"]
+    var date = msg["date"]
+    var icon = msg["user"]["avatar_icon"]
+    var p = $('<div class="media message"></div>')
+		var body = $('<div class="media-body">')
+    $('<img class="avatar d-flex align-self-start mr-3" alt="no avatar">').attr('src', '/icons/'+icon).appendTo(p)
+    $('<h5 class="mt-0"></h5>').append($('<a></a>').attr('href', '/profile/'+msg["user"]["name"]).text(name)).appendTo(body)
+    $('<p class="content"></p>').text(text).appendTo(body)
+    $('<p class="message-date"></p>').text(date).appendTo(body)
+    body.appendTo(p)
+    p.appendTo("#timeline")
+    last_message_id = Math.max(last_message_id, msg['id'])
+    var messages = $("div[class*='media message']")
+    if (100 < messages.length) {
+        messages.slice(0, -100).remove()
+    }
+}
+
+function go_bottom() {
+    $(window).scrollTop($(document).height());
+}
+
+function get_channel_id() {
+    var ar = window.location.pathname.split("/")
+    for (var i = 0; i < ar.length; i++) {
+        if (ar[i] == "channel" && ar.length != i + 1) {
+            return ar[i + 1]
+        }
+    }
+    console.log(ar)
+    return "1"
+}
+
+function fetch_unread(callback) {
+    $.ajax({
+        dataType: "json",
+        async: true,
+        type: "GET",
+        url: "/fetch",
+        success: callback
+    })
+}
+
+function get_message(callback) {
+    channel_id = get_channel_id()
+    msg_id = last_message_id
+
+    if (channel_id == null) {
+        console.error("channel_id is null")
+        return
+    }
+
+    if (isNaN(msg_id)) {
+        console.error("last_message_id is NaN")
+        return
+    }
+
+    $.ajax({
+        dataType: "json",
+        async: true,
+        type: "GET",
+        url: "/message",
+        data: {
+            last_message_id: last_message_id,
+            channel_id: channel_id
+        },
+        success: function(messages) {
+            callback(messages)
+        }
+    })
+}
+
+function post_message(msg) {
+    channel_id = get_channel_id()
+    if (channel_id == null) {
+        console.error("channel_id is null")
+        return
+    }
+
+    $.ajax({
+        async: true,
+        type: "POST",
+        url: "/message",
+        data: {
+            channel_id: channel_id,
+            message: msg
+        },
+    })
+}
+
+function on_send_button() {
+    var textarea = $("#chatbox-textarea")
+    var msg = textarea.val()
+    if (msg == "") {
+        return
+    }
+    post_message(msg)
+    textarea.val("")
+}
+
+$(document).ready(function() {
+
+    $("#chatbox-textarea").keydown(function(e) {
+        // Enter was pressed without shift key
+        if (e.keyCode == 13 && !e.shiftKey)
+        {
+            on_send_button()
+            // prevent default behavior
+            e.preventDefault()
+        }
+    });
+
+    get_message(function(messages) {
+        messages.forEach(append)
+
+        var loading = false
+
+        setInterval(function() {
+            if (loading) return
+            loading = true
+            fetch_unread(function(json) {
+                console.log(json)
+                channel_id = get_channel_id()
+                updated = false
+                json.forEach(function(channel) {
+                    current_channel = channel.channel_id == channel_id
+                    if (current_channel && 0 < channel.unread) {
+                      updated = true
+                    }
+                    var badge = $("#unread-" + channel.channel_id)
+                    if (current_channel || channel.unread == 0) {
+                      badge.text("")
+                    } else {
+                      badge.text(channel.unread.toString())
+                    }
+                })
+                if (updated) {
+                  get_message(function(new_messages) {
+                      if (0 < new_messages.length) {
+                          new_messages.forEach(append)
+                          go_bottom()
+                      }
+                      loading = false
+                  })
+                } else {
+                  loading = false
+                }
+            })
+        }, 10)
+    })
+})

server/etc/nginx/sites-enabled/nginx.conf

@@ -0,0 +1,19 @@
+server {
+        listen 80 default_server;
+        listen [::]:80 default_server;
+        server_name isubata.example.com;
+
+        client_max_body_size 20M;
+
+        root /home/isucon/isucon-practice-20200830/app/public;
+
+        location /favicon.ico { }
+        location /fonts/ { }
+        location /js/ { }
+        location /css/ { }
+
+        location / {
+                proxy_set_header Host $http_host;
+                proxy_pass http://127.0.0.1:5000;
+        }
+}