jay
/
chat-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Started work on a basic GUI, organised some stuff more

This commit is contained in:
jsrobson10 2019-04-10 17:42:44 +10:00
parent cde5914101
commit 40e469514a
3 changed files with 64 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -7,23 +7,19 @@
<script src="scripts/profiles.js"></script>
<script src="scripts/communications.js"></script>
<script src="scripts/scripts.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-menu">
<ul id="chat-menu">
<ul id="chat-menu-profiles">
</ul>
<ul id="chat-menu-config">
<li><a href="#" onclick="switch_new_profile()">New Profile</a></li>
</ul>
</div>
<div class="new-profile">
<p>New Profile:</p>
<div class="chat-main" id="chat-main">
<p>
<table>
<tr><td>Hostname</td><td><input type="text" id="edit_profile_hostname"></td></tr>
<tr><td>Port</td><td><input type="text" id="edit_profile_port" value="22068"></td></tr>
<tr><td>Username</td><td><input type="text", id="edit_profile_username"></td></tr>
<tr><td>Password</td><td><input type="password" id="edit_profile_password"></td></tr>
</table>
<button onclick="profile_save()">Save Profile</button>
Welcome to the chat client! Select a server, or create a new one.
</p>
</div>
</body>

32
scripts/profiles.js
View File

@ -1,9 +1,8 @@
// Create a profiles varible
// Setup some varibles
var profiles;
// Create a connections varible
var connections = [];
var active_profile;
// Load the profiles
fs.readFile("profiles.json", "utf-8", function(err, data)
@ -32,6 +31,9 @@ fs.readFile("profiles.json", "utf-8", function(err, data)
// Connect to the server
profile_connect(i);
}
document.getElementById("chat-menu-profiles").style.bottom =
document.getElementById("chat-menu-config").style.height;
});
function profile_save()
@ -71,13 +73,14 @@ function profile_connect(id)
function profile_switch_to(id)
{
// Set the active profile
active_profile = id;
}
function profiles_reload()
{
// Get the chat menu id
var chat_menu = document.getElementById("chat-menu");
var chat_menu = document.getElementById("chat-menu-profiles");
// Reset it
chat_menu.innerHTML = "";
@ -99,10 +102,27 @@ function profiles_reload()
}
// Set the html for the list item
profile.innerHTML = "<a href='javascript:void(0)' onclick='profile_connect("+
profile.innerHTML = "<a href='javascript:void(0)' onclick='profile_switch_to("+
i+")'>"+profiles[i].username+"@"+profiles[i].hostname+port_display+"</a>";
// Add the profile to the menu
chat_menu.appendChild(profile);
}
}
function switch_new_profile()
{
// Set the html
document.getElementById("chat-main").innerHTML = "\
<p>New Profile:</p>\
<p>\
<table>\
<tr><td>Hostname</td><td><input type='text' id='edit_profile_hostname'></td></tr>\
<tr><td>Port</td><td><input type='text' id='edit_profile_port' value='22068'></td></tr>\
<tr><td>Username</td><td><input type='text', id='edit_profile_username'></td></tr>\
<tr><td>Password</td><td><input type='password' id='edit_profile_password'></td></tr>\
</table>\
<button onclick='profile_save()'>Save Profile</button>\
</p>\
";
}

31
style.css
View File

@ -0,0 +1,31 @@
.chat-menu ul#chat-menu-profiles {
top: 0;
bottom: 56px;
overflow-y: auto;
}
.chat-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #CCC;
width: 240px;
position: fixed;
left: 0;
bottom: 0;
}
.chat-menu ul li a {
display: block;
padding: 20px;
text-decoration: none;
color: #000;
}
.chat-menu ul li a:hover {
background-color: #AAA;
}
.chat-main {
padding-left: 240px;
}