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/profiles.js"></script>
<script src="scripts/communications.js"></script> <script src="scripts/communications.js"></script>
<script src="scripts/scripts.js"></script> <script src="scripts/scripts.js"></script>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="chat-menu"> <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> </ul>
</div> </div>
<div class="new-profile"> <div class="chat-main" id="chat-main">
<p>New Profile:</p>
<p> <p>
<table> Welcome to the chat client! Select a server, or create a new one.
<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> </p>
</div> </div>
</body> </body>

32
scripts/profiles.js
View File

@ -1,9 +1,8 @@
// Create a profiles varible // Setup some varibles
var profiles; var profiles;
// Create a connections varible
var connections = []; var connections = [];
var active_profile;
// Load the profiles // Load the profiles
fs.readFile("profiles.json", "utf-8", function(err, data) 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 // Connect to the server
profile_connect(i); profile_connect(i);
} }
document.getElementById("chat-menu-profiles").style.bottom =
document.getElementById("chat-menu-config").style.height;
}); });
function profile_save() function profile_save()
@ -71,13 +73,14 @@ function profile_connect(id)
function profile_switch_to(id) function profile_switch_to(id)
{ {
// Set the active profile
active_profile = id;
} }
function profiles_reload() function profiles_reload()
{ {
// Get the chat menu id // Get the chat menu id
var chat_menu = document.getElementById("chat-menu"); var chat_menu = document.getElementById("chat-menu-profiles");
// Reset it // Reset it
chat_menu.innerHTML = ""; chat_menu.innerHTML = "";
@ -99,10 +102,27 @@ function profiles_reload()
} }
// Set the html for the list item // 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>"; i+")'>"+profiles[i].username+"@"+profiles[i].hostname+port_display+"</a>";
// Add the profile to the menu // Add the profile to the menu
chat_menu.appendChild(profile); 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;
}