Skip to content

Instantly share code, notes, and snippets.

@bureyburey

bureyburey/BureyChat.css

Last active January 1, 2017 19:58
Show Gist options
  • Save bureyburey/2e2016fd934f535e4027e11de52c6861 to your computer and use it in GitHub Desktop.
Save bureyburey/2e2016fd934f535e4027e11de52c6861 to your computer and use it in GitHub Desktop.
Download ZIP
BureyChat
Raw
BureyChat.css
body {
}
.headline{
font-size:40px;
margin-top: 1px;
margin-bottom:1px;
font-family: 'SchoolCursiveRegular';
font-weight: bold;
font-style: normal;
text-shadow: 5px 2px 4px orange;
}
#name_tag{
font-size:15px;
margin-top: 1px;
font-family:'Times New Roman';
font-weight: bold;
font-style: normal;
text-shadow: 5px 2px 4px orange;
}
.clock{
font-size:15px;
margin-top: 1px;
font-family:'Times New Roman';
font-weight: bold;
font-style: normal;
text-shadow: 5px 2px 4px orange;
}
.login_logout_btns{
background-color: #4CAF50; /* Green */
border: none;
color: white;
font-size:12px;
font-family:'Times New Roman';
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius:50%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#logged_user_name{
font-size:15px;
margin-top: 1px;
font-family:'Times New Roman';
font-weight: bold;
font-style: normal;
text-shadow: 5px 2px 4px orange;
}
#table_messages{
border:solid;
border-width: 1px
}
.msg_row{
border:solid;
/*border-width: 1px;*/
background-color: #c4c0d1;
}
.msg_by{
font-weight: bold;
text-align:center;
color: #2175f3;
/*styling credit to Cool Ha43r*/
}
/*.msg_body{*/
/* border:solid;*/
/* border-width: 1px*/
/*}*/
/*.msg_time{*/
/* border:solid;*/
/* border-width: 1px*/
/*}*/
Raw
BureyChat.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/school-cursive" type="text/css"/>
</head>
<body onload='init()' bgcolor="#2E9CF1">
<div id='container'>
<div id='table_connected_users_container'>
<table id='table_connected_users'>
<tr>
<th>Connected Users</th>
</tr>
</table>
</div>
<h2 class="headline">Firebase Chat</h2>
<div id="name_tag">By Burey</div>
<label class='clock' id='current_time'>Time:</label>
<div id='container_login'>
<table id='table_login'>
<tr><td>
<input id='login_name' placeholder='User Name:'>
</td></tr>
<!--<tr><td>
<input id='login_pass' placeholder='Password'>
</td></tr>-->
<tr><td>
<button id='btn_login' class='login_logout_btns'>Login</button>
</td></tr>
</table>
</div>
<div id='container_chat' style='display:none'>
<table id='logged_user_info'>
<tr>
<td>
<label id='logged_user_name'>Logged As:</label>
</td>
<td>
<button id='btn_logout' class='login_logout_btns'>Logout</button>
</td>
</tr>
<tr>
<td>
<input id='new_message' placeholder='Message:'>
</td>
<td>
<button id='btn_post' class='login_logout_btns'>Post</button>
</td>
<td>
<button id='show_connected' class='login_logout_btns'>Connected Users:</button>
</td>
</tr>
</table>
<table id='table_messages'>
<tr>
<th>By</th>
<th>Message</th>
<th>Time</th>
</tr>
</table>
<div id="tbl_loading">Loading Messages......</div>
</div>
</div>
</body>
</html>
Raw
BureyChat.js
var init = function() {
try {
var tag;
var timeToDateString = function(time, sep = " - ") {
/*
input: time in seconds since epoch
output: date time string formatted 'hh:mm:ss - DD/MM/YYYY'
used to show the time a message was posted
*/
var date = new Date(time);
hours = ((date.getHours() < 10) ? '0' : '') + date.getHours();
minutes = ((date.getMinutes() < 10) ? '0' : '') + date.getMinutes();
seconds = ((date.getSeconds() < 10) ? '0' : '') + date.getSeconds();
var dateString = hours + ":" + minutes + ":" + seconds + sep + date.getDate() + "/" + (date.getMonth() + 1) + "/" + (date.getYear() + 1900);
return dateString;
}
var get_time_string = function() {
/*
returns a string of the current time formatted 'hh:mm:ss'
used to show the updated time in the clock
*/
timeNow = new Date();
hours = timeNow.getHours();
minutes = timeNow.getMinutes();
seconds = timeNow.getSeconds();
timeNow = ((hours < 10) ? '0' : '') + hours + ':' + ((minutes < 10) ? '0' : '') + minutes + ':' + ((seconds < 10) ? '0' : '') + seconds;
return timeNow;
}
tag = document.getElementById("name_tag");
if (!tag)throw new Error();
var initFirebase = function() {
/*
initialize the firebase service
*/
Firebase.INTERNAL.forceWebSockets();
try {
db_ref = new Firebase("https://bureychat.firebaseio.com/");
messages_ref = db_ref.child("chat_messages");
am_online = new Firebase('https://bureychat.firebaseio.com/.info/connected');
user_ref = new Firebase('https://bureychat.firebaseio.com/connected/' + loginName);
am_online.on('value', function(snapshot) {
if (snapshot.val()) {
user_ref.onDisconnect().remove();
user_ref.set(true);
}
});
}
catch (err) {
alert(err);
}
try {
// this will get fired on inital load as well as when ever there is a change in the data
messages_ref.orderByChild("time").on("value", snapLoadMessages, onError);
db_ref.child("connected").on("value", snapLoadUsers, onError);
// messages_ref.on("child_added", snapLoad, onError);
}
catch (err) {
alert(err);
}
}
if (tag.innerHTML[2] != " ")throw new Error();
// connected users dialog box
$('#table_connected_users_container').dialog({
modal:true, //Not necessary but dims the page background
autoOpen : false,
// height:380,
'id' : 'table_connected_users_container',
open : function() {
//$(this).html('');
},
buttons : [
{
text:'Close',
'class' : 'dialog_new',
click : function() {
$('#table_connected_users_container').dialog('close');
}
}
]
}
);
if (tag.innerHTML[3] != "B")throw new Error();
$(document).ready(function() {
// best scores button click handler
$('#show_connected').click(function() {
$('#table_connected_users_container').dialog('open');
});
});
var snapLoadUsers = function(snapshot) {
var usr_list = [];
snapshot.forEach(function(child) {
usr_list.push(child.key());
});
refreshConnectedUsers(usr_list);
}
if (tag.innerHTML[4] != "u")throw new Error();
var snapLoadMessages = function(snapshot) {
list = [];
snapshot.forEach(function(child) {
list.push({
author: child.val().author,
body : child.val().body,
time : child.val().time
});
});
// refresh the UI
if (list.length > 0) {
refreshUI(list);
}
}
if (tag.innerHTML[6] != "e")throw new Error();
var onError = function(err) {
console.log("Firebase 'on' error: " + err);
}
if (tag.innerHTML[1] != "y")throw new Error();
var refresh_time = function() {
document.getElementById('current_time').innerHTML = 'Time: ' + get_time_string();
}
if (tag.innerHTML[7] != "y")throw new Error();
var start_clock = function() {
setInterval(refresh_time, 1000);
}
tag.style.visibility = "visible";
var login = function() {
loginName = document.getElementById('login_name').value;
// loginPass = document.getElementById('login_pass').value;
if (loginName.length === 0) {
alert("Name too short");
return;
}
// if(loginPass.length == 0){
// alert("Password too short");
// return;
// }
document.getElementById('container_login').style.display = 'none';
document.getElementById('container_chat').style.display = 'block';
initFirebase();
chat(loginName, loginPass);
}
tag.style.display = "block";
var logout = function() {
document.getElementById('container_login').style.display = 'block';
document.getElementById('container_chat').style.display = 'none';
user_ref.remove();
}
if (tag.innerHTML[0] != "B")throw new Error();
var chat = function(loginName, loginPass) {
document.getElementById('logged_user_name').innerHTML = 'Logged As: ' + loginName;
}
tag.style.display = "block";
if (tag.innerHTML[5] != "r")throw new Error();
var refreshConnectedUsers = function(list) {
$('#show_connected').text("Connected Users: " + list.length);
// clean the table except the first row
$("#table_connected_users").find("tr:gt(0)").remove();
var tbl = $("#table_connected_users"); // find the table with the id tbl_best_scores
for (i = list.length - 1; i >= 0; i--) {
var newRow = "<tr class='user_row'><td class='username'>" + list[i] + "</td></tr>";
tbl.append(newRow);
}
}
tag.style.visibility = "visible";
var refreshUI = function(list) {
// clears the table and rebuilds it with a new set of data
$("#tbl_loading").text("Loading......"); // show loading message
// clean the table except the first row
$("#table_messages").find("tr:gt(0)").remove();
var tbl = $("#table_messages"); // find the table with the id tbl_best_scores
for (i = list.length - 1; i >= 0; i--) {
var newRow = "<tr class='msg_row'><td class='msg_by'>" + list[i].author + "</td><td class='msg_body'>" + list[i].body + "</td><td class='msg_time'>" + timeToDateString(list[i].time, "\n") + "</td></tr>";
tbl.append(newRow);
}
$("#tbl_loading").text("");
}
var post = function() {
message = document.getElementById('new_message');
if (message.value.length == 0) {
alert('Message length problem!');
return;
}
messages_ref.push({
author:loginName,
pass : "anonymous",
body : message.value,
time : Firebase.ServerValue.TIMESTAMP
// time:Date.now()
});
message.value = '';
}
// app variables
var loginName;
var loginPass;
// database refrences
var db_ref;
var messages_ref;
var am_online;
var user_ref;
// button refrences
var btn_login = document.getElementById('btn_login');
var btn_logout = document.getElementById('btn_logout');
var btn_post = document.getElementById('btn_post');
btn_login.onclick = function() {
login();
}
btn_logout.onclick = function() {
logout();
}
btn_post.onclick = function() {
post();
}
// start the system clock
start_clock();
var chat_messages = [];
}
catch (err) {
alert("Error #" + Math.round(Math.random()*(210 - 200) + 200) + "\nCode authentication\nstage #" + Math.round(Math.random()*(10 - 1) + 1) + " failed!\n" + err);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment