Several improvements in chat.js

2 files changed, 13 insertions, 197 deletions

diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 3ef8240..c395765 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -150,6 +150,18 @@
         </div>
     </script>
     <script>
-        {% include "pages/partials/chat.js.twig" %}
+        function ReplaceServerMessage(Type) { // translation service
+            var LastServerMessage = $(".MessageWrapper:last .ServerChatMessage");
+            if (Type === "YouGroupJoin") {
+                var GroupName = LastServerMessage.text();
+                LastServerMessage.text("{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + GroupName + '"') + ".");
+            } else if (Type === "UserGroupJoin") {
+                var Username = LastServerMessage.text();
+                LastServerMessage.text("{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", Username) + ".");
+            } else if (Type === "UserDisconnect") {
+                var Username = LastServerMessage.text();
+                LastServerMessage.text("{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", Username) + ".");
+            }
+        }
     </script>
 {% endblock %}
diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
deleted file mode 100644
index d32ed5d..0000000
--- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
+++ /dev/null
@@ -1,196 +0,0 @@
-{% autoescape 'js' %}
-
-/************
- GENERATE KEYS
- ************
- if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('KeysGenerated') !== "true") {
-    // GENERATE -- LATER ON LOGIN!
-    var EncryptionPhrase = "PASSWORD 123"; // THE USERS PASSWORD -- needs to generate on login!
-    var RSABitLength = 1024;
-    var PrivateKeyString = cryptico.generateRSAKey(EncryptionPhrase, RSABitLength);
-    var PublicKeyString = cryptico.publicKeyString(PrivateKeyString);
-    // SAVE TO DATABASE
-    $.ajax({
-        type: "POST",
-        url: "assets/php/SavePublicKey.php",
-        data: {
-            UserID: "1", // TEMPORARY
-            PublicKeyString: PublicKeyString
-        },
-        async: true,
-        error: function () {
-            console.error("Error while saving public key to database!");
-        },
-        success: function () {
-            localStorage.setItem('KeysGenerated', "true");
-        }
-    });
-}
-
-
- /******
- GENERAL
- ******/
-function InitializeChatServer() {
-    var ChatTextInput = $("#ChatTextInput");
-    var SubscribeTextInput = $("#SubscribeTextInput");
-    var ChatMessages = $("#ChatMessages");
-    var TypingIndicatorAnimationElement = "<div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div>";
-
-    var ChatSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
-    ChatSocket.onerror = function () {
-        setTimeout(function () {
-            console.log("[WEBSOCKET LOGGER] Connection failed. Trying again...");
-            InitializeChatServer();
-        }, 5000);
-    };
-    ChatSocket.onopen = function () {
-        console.log("[WEBSOCKET LOGGER] Chat connection established!");
-
-        // GOT MESSAGE
-        ChatSocket.onmessage = function (e) {
-            var TypingIndicatorMessage = $(".TypingIndicatorMessage").parent();
-            var LastMessage = $(".MessageWrapper.Normal:last .ChatMessage");
-            var MessageObject = JSON.parse(e.data);
-            if (MessageObject.ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER
-                if (MessageObject.WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF
-                    if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE
-                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
-                    } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN
-                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>");
-                        if (LastMessage.hasClass("AloneMessage")) {
-                            LastMessage.removeClass("AloneMessage");
-                            LastMessage.addClass("TopMessage");
-                        } else if (LastMessage.hasClass("BottomMessage")) {
-                            LastMessage.removeClass("BottomMessage");
-                            LastMessage.addClass("MiddleMessage");
-                        }
-                    }
-                    // CONVERT LINKS TO LINKS
-                    $('.MessageSent').linkify({
-                        target: "_blank"
-                    });
-                } else if (MessageObject.WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER
-                    if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE
-                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
-                    } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN
-                        ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>");
-                        if (LastMessage.hasClass("AloneMessage")) {
-                            LastMessage.removeClass("AloneMessage");
-                            LastMessage.addClass("TopMessage");
-                        } else if (LastMessage.hasClass("BottomMessage")) {
-                            LastMessage.removeClass("BottomMessage");
-                            LastMessage.addClass("MiddleMessage");
-                        }
-                    }
-                    // CONVERT LINKS TO LINKS
-                    $('.MessageReceived').linkify({
-                        target: "_blank"
-                    });
-                }
-            } else if (MessageObject.ServerMessage === true) { // SERVER MESSAGE
-                if (MessageObject.ServerMessageType === "GroupJoin") { // TYPE: USER JOINED A GROUP
-                    if (MessageObject.WasHimself === true) { // HIMSELF JOINED A GROUP -> NOTIFY
-                        ChatMessages.empty();
-                        var Message = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"');
-                    } else if (MessageObject.WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY
-                        var Message = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
-                    }
-                    ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + Message + "</span>.</div></div><br>");
-                } else if (MessageObject.ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY
-                    var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
-                    ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div></div><br>");
-                } else if (MessageObject.ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED!
-                    if (MessageObject.State === true) { // IF 'SOMEBODY' STARTED TYPING
-                        if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?)
-                            // NOTHING
-                        } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE
-                            ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage TypingIndicatorMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div></div>");
-                            console.log("[SERVER REPORT] " + MessageObject.Username + " STARTED TYPING");
-                        }
-                    } else if (MessageObject.State === false) { // IF 'SOMEBODY' STOPPED TYPING
-                        if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?)
-                            // NOTHING
-                        } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION
-                            //TypingIndicatorMessage.fadeOut("fast");
-                            TypingIndicatorMessage.remove();
-                            console.log("[SERVER REPORT] " + MessageObject.Username + " STOPPED TYPING");
-                        }
-                    }
-                }
-            }
-            // SCROLL TO BOTTOM ON NEW MESSAGE OF ANY KIND
-            ChatMessages.animate({scrollTop: document.querySelector("#ChatMessages").scrollHeight}, "slow");
-        };
-
-
-        // TYPING RECOGNITION
-        var typingTimer;
-        var isTyping = false;
-
-        ChatTextInput.keydown(function () {
-            sendStartTyping();
-            clearTimeout(typingTimer);
-        });
-
-        ChatTextInput.keyup(function () {
-            clearTimeout(typingTimer);
-            typingTimer = setTimeout(function () {
-                sendStopTyping()
-            }, 2500)
-        })
-
-        function sendStartTyping() {
-            if (isTyping === false) {
-                sendTypingState(true);
-                isTyping = true;
-            }
-        }
-
-        function sendStopTyping() {
-            if (isTyping === true) {
-                sendTypingState(false);
-                isTyping = false;
-            }
-        }
-
-        function sendTypingState(state) { // SEND STATE TO CHAT SERVER
-            ChatSocket.send(JSON.stringify({ClientMessageType: "TypingState", State: state}));
-        }
-
-        $(window).unload(function () {
-            sendStopTyping(); // USER STOPS TYPING ON PAGE CLOSE ETC
-        })
-
-        // SUBSCRIBE TO CHAT
-        SubscribeTextInput.keyup(function (e) {
-            if (e.keyCode === 13 && SubscribeTextInput.val().length > 0) {
-                subscribe(SubscribeTextInput.val());
-            }
-        });
-
-        function subscribe(channel) {
-            ChatSocket.send(JSON.stringify({ClientMessageType: "Subscribe", Channel: channel}));
-            SubscribeTextInput.hide();
-            ChatTextInput.show();
-        }
-
-        // SEND MESSAGE FROM INPUT FIELD
-        ChatTextInput.keyup(function (e) {
-            if (e.keyCode === 13 && ChatTextInput.val().length > 0) {
-                ChatSocket.send(JSON.stringify({ClientMessageType: "Message", Message: ChatTextInput.val()}));
-                ChatTextInput.val("");
-                ChatTextInput.val("");
-
-                // USER USUALLY STOPS TYPING ON SENDING -> CHANGE STATE TO FALSE
-                sendTypingState(false);
-                isTyping = false;
-                clearTimeout(typingTimer);
-            }
-        });
-    };
-}
-
-InitializeChatServer();
-
-{% endautoescape %}
\ No newline at end of file