Finances (Dirty)

by ricajess

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
  <form>

    <input id="JETCC" type="checkbox" checked="true" name="JETCC" value="JET" onchange="updateTable()" > JetBlue CC<br>

    <input id="RITZCC" type="checkbox" checked="true" name="RITZCC" value="RITZ" onchange="updateTable()"> Ritz CC<br><p></p>

    <select id="userSelect" value="All" onchange="updateTable()">

	  <option id="userAll" value="All">All</option>

      <option id="userRicardo" value="Ricardo" >Ricardo</option>

      <option id="userJessica" value="Jessica">Jessica</option>

      <option id="userJoint" value="Joint">Joint</option>

	    <option id="userTravel" value="Travel">Travel</option>

      <option id="userJesswork" value="Jess Work">Jessica Work</option>

      <option id="userRicwork" value="Ric Work">Ricardo Work</option> 

    </select><br>

	<p></P>

	<select id="statementSelect" value="" onchange="updateTable()">

	  <option id="allDates" value="2018-1-1">All Transactions</option>

	  <option id="2017Dates" value="2017-1-1">2017 Transactions</option>

	  <option id="2018Dates" value="2018-1-1">2018 Transactions</option>

      <option id="0118D" value="2017-11-27" >January '18</option>

      <option id="0218D" value="2017-12-27">February '18</option>

      <option id="0318D" value="2018-1-27">March '18</option>

	  <option id="0418D" value="2018-2-27">April '18</option>

      <option id="0518D" value="2018-3-27">May '18</option>

      <option id="0618D" value="2018-4-27">June '18</option>

	  <option id="0718D" value="2018-5-27">July '18</option>

      <option id="0818D" value="2018-6-27" >August '18</option>

      <option id="0918D" value="2018-7-27">September '18</option>

      <option id="1018D" value="2018-8-27">October '18</option>

	  <option id="1118D" value="2018-9-27">November '18</option>

      <option id="1218D" value="2018-10-27">December '18</option>

    </select>

  </form>

<p id="demo1"></p>

CSS

#customers {

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    border-collapse: collapse;

    width: 100%;

    margin: auto;

}



#customers td, #customers th {

    border: 1px solid #ddd;

    padding: 8px;

}



#customers tr:nth-child(even){background-color: #f2f2f2;}



#customers tr:hover {background-color: #ddd;}



#customers th {

    padding-top: 12px;

    padding-bottom: 12px;

    text-align: center;

    background-color: #4CAF50;

    color: white;

}

input[type=text], select {

    width: 100%;

    padding: 12px 20px;

    display: inline-block;

    border: 1px solid #ccc;

    border-radius: 4px;

}



input[type=submit] {

    width: 100%;

    background-color: #4CAF50;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}



input[type=submit]:hover {

    background-color: #45a049;

}



div {

    border-radius: 5px;

    background-color: #f2f2f2;

    padding: 20px;

}

JavaScript

google.charts.load("current", {packages:['corechart']});

google.charts.setOnLoadCallback(drawGIDall);



function updateTable(){

var valid = document.getElementById("userSelect").value

if (valid == "All") {

updateTableAll();

} else {

updateTableSingle();

}

}



function updateTableAll(){

google.charts.load("current", {packages:['corechart']});

google.charts.setOnLoadCallback(drawGIDall);

}



function updateTableSingle(){

google.charts.load("current", {packages:['corechart']});

google.charts.setOnLoadCallback(drawGIDsingle);

}



function drawGIDall(){

	if (document.getElementById("JETCC").checked == true) {	

		if (document.getElementById("RITZCC").checked == true) {

		    var stateDate = new Date(document.getElementById("statementSelect").value);

				if (stateDate.getDate() == 1){

					var endDate = stateDate.getFullYear() + "-" + 12 + "-31";

					var queryDates = "B>=date'" + document.getElementById("statementSelect").value + "' AND B<=date'" +endDate+"'"

					var queryString = encodeURIComponent("SELECT B,C,L,E,F,G,A WHERE "+queryDates);

					var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1YyUwr7XWM2kCAH_VQDdGYAc-nwZpMphteXiNqg5Tv-Y/gviz/tq?gid=0&headers=1&tq=' + queryString);

					query.send(handleQueryResponse);

				} else {

					var endDate = stateDate.getFullYear() + "-" + (stateDate.getMonth() + 2) + "-26";

					var RitzStartDate = stateDate.getFullYear() + "-" + (stateDate.getMonth() + 2) + "-8";

					var RitzEndDate = stateDate.getFullYear() + "-" +(stateDate.getMonth() + 3) + "-7";

					var queryDates = "(A='JET' and B>=date'" + document.getElementById("statementSelect").value + "' AND B<=date'" +endDate+"') OR (A='RITZ' AND B>=date'" +RitzStartDate+"' AND B<=date'" +RitzEndDate+"')";

					var queryString = encodeURIComponent("SELECT B,C,L,E,F,G,A WHERE "+ queryDates);

					var query = new...