TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
		<meta name="theme-color" content="#4b75ff">
		<link rel="stylesheet" href="../script/semantic/semantic.min.css">
		<script src="../script/jquery.min.js"></script>
		<script src="../script/ao_module.js"></script>
		<script src="../script/semantic/semantic.min.js"></script>
        <script src="message.js"></script>
		<link rel="icon" type="image/png" href="img/module_icon.png">
		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
		<title>Message</title>
		<style>
			body{
                background-color: rgb(250, 250, 250);
			}  

            .chatdialog{
                width: 100%;
                display: flex;
                padding-top: 0.4em;
            }   

            .self.chatdialog{
                justify-content: end;
            }

            .other.chatdialog{
                justify-content: start;
            }

            .chatbubble{
                max-width: 70%;
            }

            .self.chatdialog .chatbubble{
                background: rgb(98,135,254);
                background: linear-gradient(120deg, rgba(98,135,254,1) 37%, rgba(67,202,231,1) 100%); 
                
                color: white;
            }

            .other.chatdialog .chatbubble{
                
            }

            .chatbubble{
                display: inline-block !important;
                padding: 7px !important;
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            .chatbubble p{
                margin-right: 2em;
            }

            .chatbubble .timestamp{
                float: right;
            }
            .chatbubble .timestampWrapper{
                height: 1em;
            }
            .sendbar{
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 0.4em;
            }
		</style>
	</head>
	<body>
        <div class="ui segment" stlye="padding-top: 1em;">
            <div style="width: 100%; height: 0.3em;"></div>
            <img id="usericon" class="ui avatar mini image" style="margin-top: -0.7em; " src="img/noicon.png">
            <div style="display: inline-block; font-size: 1.5rem; margin-left: 0.2em;"><i id="onlineStatus"></i><span id="username">Username</span></div>
        </div>
		<div id="chatroom" class="ui text container">
            <!-- 
			<div class="self chatdialog">
                <div class="ui segment chatbubble">
                    <p>Hello World! How are you today?</p>
                    <div class="timestampWrapper">
                        <small class="timestamp">4 Jan 14:25</small>
                    </div>
                </div>
            </div>
            <div class="other chatdialog">
                <div class="ui segment chatbubble">
                    <p>Good, thanks!</p>
                    <div class="timestampWrapper">
                        <small class="timestamp">4 Jan 14:25</small>
                    </div>
                </div>
            </div>
            -->
		</div>
        <div class="sendbar">
            <div class="ui fluid action input">
                <input id="msgInput" type="text" placeholder="Aa">
                <button class="ui icon button" style="background-color: #608cfc; color: white;"><i class="chevron right icon"></i></button>
            </div>
        </div>
		
		<br><br>
		<script>
            var username = "";
			if (window.location.hash.length > 1){
                username = window.location.hash.substr(1);
                $("#username").text(username);

                //Get the user icon
                $.get("../system/users/list", function(data){
					console.log(data);
					data.forEach(function(user){
						let thisUsername = user[0];
						let usericon = user[2];
                        if (thisUsername == username){
                            $("#usericon").attr('src', usericon);
                        }
                    });
                });

                //Update the channel id, see message.js
                channelID = username;
                
            }


            function updateUserOnlineStatus(lastOnlineTimestamp){
                var currentTime = Math.floor(Date.now() / 1000);
                if (currentTime - lastOnlineTimestamp > 300){
                    //Offline
                    $("#onlineStatus").attr("class", "grey small circle icon");
                }else{
                    //Online
                    $("#onlineStatus").attr("class", "green small circle icon");
                }
            }

            //RPC callback events
            rpcCallback = function(data){
                console.log(data);
                updateUserOnlineStatus(data.oppositeLastOnlineTime);
            }

            //Manually start the first request on page load
            updateStatus();
            
		</script>
	</body>
</html>