OWASP/railsgoat

<div class="dashboard-wrapper">
  <div class="main-container">
    <div class="row-fluid">
      <div class="span12">
        <div id="success" style="display: none;" class="alert alert-block alert-success fade in">
                <h4 class="alert-heading">
                  Success!
                </h4>
                <p>
                  Information successfully updated.
                </p>
              </div>
      </div>
    </div>
    <div class="row-fluid">
      <div class="span12">
        <div id="failure" style="display: none;" class="alert alert-block alert-error fade in">
                    <h4 class="alert-heading">
                      Error!
                    </h4>
                    <p>
                      Failed to update.
                    </p>
                  </div>
      </div>
    </div>
    <!-- Begin DP-->
    <div class="row-fluid">
      <!-- begin cal -->
      <div  class="span6">
        <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> PTO Calendar
                  </div>
                </div>
                <div id="calendarDiv" class="widget-body">
                 <div id='calendar'></div>
                </div>
              </div>
      </div>
      <!-- End cal-->
      <div class="span6">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe052;"></span> Schedule PTO
                  </div>
                </div>
                <!-- Begin WB-->
        <div id="scheduleDiv" class="widget-body">
                     <%= form_for @schedule, :url => "#",:html => {:id => "cal_update"} do |s|%>
             <div class="control-group">
              <%= s.label :event_name, "Event Name", {:class => "control-label"}%>
              <%= s.text_field :event_name, {:placeholder => "My PTO", :class => "span6"}%>
             </div>
               <div class="control-group">
              <%= s.text_field :event_type, {:type => "hidden", :value => "pto", :class => "span6"}%>
             </div>
             <div class="control-group">
              <%= s.label :event_desc, "Event Description", {:class => "control-label"}%>
              <%= s.text_field :event_desc, {:placeholder => "Travel to Europe", :class => "span6"}%>
             </div>
             <div class="control-group">
                          <label class="control-label" for="date_range1">
                            Event Dates
                          </label>
                          <div class="controls">
                            <div class="input-append">
                              <input type="text" name="date_range1" id="date_range1" class="span8 date_picker" placeholder="Select Date"/>
                              <span class="add-on">
                                <i class="icon-calendar"></i>
                              </span>
                            </div>
                          </div>
                     </div>
              <%= s.submit "Submit", {:id => 'cal_update_submit', :class => "btn btn-primary pull-left"} %>
           <% end %>
          <div class="clearfix">
                    </div>



                </div>
                 <!-- End WB-->
        </div>
            </div>
    </div>
    <!-- End DP-->
    <div class="row-fluid">
          <div class="span12">
            <div class="widget">
              <div class="widget-header">
                <div class="title">
                  <span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> Sick Days
                </div>
              </div>
              <div class="widget-body">
                <div id="column_chart_1"></div>
              </div>
            </div>
          </div>
        </div>
    <div class="row-fluid">
          <div class="span12">
            <div class="widget">
              <div class="widget-header">
                <div class="title">
                  <span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span> Paid Time Off
                </div>
              </div>
              <div class="widget-body">
                <div id="column_chart_2"></div>
              </div>
            </div>
          </div>
        </div>
  </div>
</div>

<%= javascript_include_tag "moment.min.js" %>
<%= javascript_include_tag "fullcalendar.min.js" %>

<script type="text/javascript">



function makeActive(){
  $('li[id="pto"]').addClass('active');
};


$(document).ready(function() {
  $('#calendar').fullCalendar({
        events: <%= get_pto_schedule_schedule_index_path(:format => "json").inspect.html_safe %>,
  });
});



//Date picker
$('.date_picker').daterangepicker({
  opens: 'right'
});

 $(document).ready(function () {
   drawChart1(),
   drawChart2(),
   resizeTopWidgets(),
   makeActive()
  });

   google.load("visualization", "1", {
      packages: ["corechart"]
    });

function drawChart1() {
    var data = google.visualization.arrayToDataTable([
      ['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
      [ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.sick_days_earned %>,  <%= @pto.sick_days_taken %>, <%= @pto.sick_days_remaining %> ], ]);

    var options = {
      width: 'auto',
      height: '160',
      backgroundColor: 'transparent',
      colors: ['#579da9', '#e26666', '#1e825e'],
      tooltip: {
        textStyle: {
          color: '#666666',
          fontSize: 11
        },
        showColorCode: true
      },
      legend: {
        textStyle: {
          color: 'black',
          fontSize: 12
        }
      },
      chartArea: {
        left: 60,
        top: 10,
        height: '80%'
      },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_1'));
    chart.draw(data, options);
  }

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
      ['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
      [ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.pto_earned %>,  <%= @pto.pto_taken %>, <%= @pto.pto_days_remaining %> ], ]);

    var options = {
      width: 'auto',
      height: '160',
      backgroundColor: 'transparent',
      colors: ['#579da9', '#e26666', '#1e825e'],
      tooltip: {
        textStyle: {
          color: '#666666',
          fontSize: 11
        },
        showColorCode: true
      },
      legend: {
        textStyle: {
          color: 'black',
          fontSize: 12
        }
      },
      chartArea: {
        left: 60,
        top: 10,
        height: '80%'
      },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_2'));
    chart.draw(data, options);
  }

function resizeTopWidgets(){
  var calHeight = $("#calendarDiv").height();
    $("#scheduleDiv").css({'height':calHeight});
};

$("#cal_update_submit").click(function(event) {
    var valuesToSubmit = $("#cal_update").serialize();
    event.preventDefault();
    $.ajax({
      url: "/schedule.json",
    data: valuesToSubmit,
    type: "POST",
    success: function(response) {
    if (response.msg == "failure") {
      $('#failure').show(500).delay(1500).fadeOut();
    } else {
      $('#success').show(500).delay(1500).fadeOut();
      $('#calendar').fullCalendar('refetchEvents')
    }
    },
    error: function(event) {
    $('#failure').show(500).delay(1500).fadeOut();
    }
  });
});

</script>