Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -0,0 +1,72 @@
<!DOCTYPE>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>A shitty chess game</title>
<link rel="stylesheet" href="assets/css/chessboard-0.3.0.css">
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/3.0.1/firechat.min.css"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css">
<link rel="stylesheet" href="assets/css/style.css">

</head>
<body>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>


<section id="userButtons" class="box columns is-mobile level">
<div class="column level-left">
<button id="login" class="button is-primary">Login</button>
</div>
<div class="columns level-right">
<div class="column container">
<button id="restartButton" class="button is-success" disabled>Restart</button>
<button id="createRoom" class="button is-success" disabled>Create a New Room</button>
<button id="playPC" class="button is-success" disabled>Play a Computer</button>
</div>
<div class="field column">
<button id="joinRoom" class="button is-success" disabled>Join an Existing Room</button>
<label class="label">Room ID</label>
<input type="text" id="room">
</div>
</div>
</section>

<section class="container">
<div id="board"></div>
</section>


<section class="box column">
<p>Status: <span id="status"></span></p>
<p>FEN: <span id="fen"></span></p>
<p>PGN: <span id="pgn"></span></p>
</section>


<div id="dialog-message" title="Game Status">
<p>
Game Status: <span id="gameStatus"></span>
<br>
Room Key: <span id="roomKey"></span>
</p>
</div>

<div id="firechat-wrapper"></div>

<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<script src="https://cdn.firebase.com/libs/firechat/3.0.1/firechat.min.js"></script>
<script src="assets/js/chessboard-0.3.0.js" type="text/javascript"></script>
<script src="assets/js/chess.js" type="text/javascript"></script>

<script src="assets/js/logic.js"></script>
</body>
</html>
@@ -0,0 +1,64 @@
<!DOCTYPE>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Employee Tracker</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>

<section id="addEmployee" class="form-style-8">
<form>
<div>
<label for="name">Employee Name:</label>
<input type="text" id="name" name="employee_name">
</div>
<div>
<label for="role">Role:</label>
<input type="text" id="role" name="employee_role">
</div>
<div>
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" name="employee_start">
</div>
<div>
<label for="rate">Monthly Rate:</label>
<input type="text" id="rate" name="employee_rate">
</div>

<input type="button" value="Submit Data" id="submitButton">

</form>
</section>

<section id="employeeDisplay">
<table class="table-fill" id="employees">
<thead>
<tr>
<th>Employee Name</th>
<th>Role</th>
<th>Start Date</th>
<th>Months Worked</th>
<th>Monthly Rate ($)</th>
<th>Total Billed ($)</th>
</tr>
</thead>
<tbody class="table-hover" id="tableBody">

</tbody>
</table>
</section>



</body>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="logic.js"></script>
</html>
@@ -0,0 +1,54 @@
let config = {
apiKey: "AIzaSyCYqa60B0WHyzdGFexO-kSzWB-s5D1xYq4",
authDomain: "flaxxproject.firebaseapp.com",
databaseURL: "https://flaxxproject.firebaseio.com",
projectId: "flaxxproject",
storageBucket: "flaxxproject.appspot.com",
messagingSenderId: "283222690232"
};
firebase.initializeApp(config);

moment().format();
let database = firebase.database();

$("#submitButton").click(function () {
event.preventDefault();

let users = database.ref("/employees/");
let newEmployee = users.push();
newEmployee.set({
"name": $("#name").val().trim(),
"role": $("#role").val().trim(),
"startDate": $("#startDate").val().trim(),
"rate": $("#rate").val().trim(),
"dateAdded": firebase.database.ServerValue.TIMESTAMP
})

});

let employeeRef = database.ref("/employees/").orderByChild("dateAdded");

employeeRef.on('child_added', function (data) {
let employeeData = data.val();
let date = parseMoment(employeeData.startDate);
$("#tableBody")
.prepend($("<tr>")
.append($("<td>").text(employeeData.name),
$("<td>").text(employeeData.role),
$("<td>").text(date.format("MM/DD/YYYY")),
$("<td>").text(getMonthsWorked(date)),
$("<td>").text("$" + employeeData.rate),
$("<td>").text("$" + (employeeData.rate * getMonthsWorked(date)).toLocaleString())
)
);
});

function parseMoment(date) {
return moment(date);
}

function getMonthsWorked(date){
let currTime = moment();
return currTime.diff(date, 'months');
}

@@ -0,0 +1,219 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

body {
background-color: antiquewhite;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
padding: 20px;
}

div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
}

.table-title h3 {
color: #fafafa;
font-size: 30px;
font-weight: 400;
font-style:normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}

th {
color:#D5DDE5;;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
}

th:first-child {
border-top-left-radius:3px;
}

th:last-child {
border-top-right-radius:3px;
border-right:none;
}

tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td {
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
border-bottom: 1px solid #22262e;
}

tr:first-child {
border-top:none;
}

tr:last-child {
border-bottom:none;
}

tr:nth-child(odd) td {
background:#EBEBEB;
}

tr:nth-child(odd):hover td {
background:#4E5066;
}

tr:last-child td:first-child {
border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
border-bottom-right-radius:3px;
}

td {
background:#FFFFFF;
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}

td:last-child {
border-right: 0px;
}

th.text-left {
text-align: left;
}

th.text-center {
text-align: center;
}

th.text-right {
text-align: right;
}

td.text-left {
text-align: left;
}

td.text-center {
text-align: center;
}

td.text-right {
text-align: right;
}

.form-style-8{
font-family: 'Open Sans Condensed', arial, sans;
width: 500px;
padding: 30px;
background: #FFFFFF;
margin: 50px auto;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);

}
.form-style-8 h2{
background: #4D4D4D;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
color: #797979;
font-size: 18px;
font-weight: 100;
padding: 20px;
margin: -30px -30px 30px -30px;
}
.form-style-8 input[type="text"],
.form-style-8 input[type="date"],
.form-style-8 input[type="datetime"],
.form-style-8 input[type="email"],
.form-style-8 input[type="number"],
.form-style-8 input[type="search"],
.form-style-8 input[type="time"],
.form-style-8 input[type="url"],
.form-style-8 input[type="password"],
.form-style-8 textarea,
.form-style-8 select
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
display: block;
width: 100%;
padding: 7px;
border: none;
border-bottom: 1px solid #ddd;
background: transparent;
margin-bottom: 10px;
font: 16px Arial, Helvetica, sans-serif;
height: 45px;
}
.form-style-8 textarea{
resize:none;
overflow: hidden;
}
.form-style-8 input[type="button"],
.form-style-8 input[type="submit"]{
-moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
-webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
box-shadow: inset 0px 1px 0px 0px #45D6D6;
background-color: #2CBBBB;
border: 1px solid #27A0A0;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 14px;
padding: 8px 18px;
text-decoration: none;
text-transform: uppercase;
}
.form-style-8 input[type="button"]:hover,
.form-style-8 input[type="submit"]:hover {
background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
background-color:#34CACA;
}