|
|
@@ -1,156 +0,0 @@
|
|
|
-<!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>
|