{% extends "vast_simulator/base.html" %}
{% block content %}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="/static/script/moment.js"></script>
<script src="/static/jquery.dataTables.js"></script>
<script src="/static/dataTables.fixedColumns.js"></script>
<script src="/static/dataTables.bootstrap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link href="/static/css/calendarUI.css" rel="stylesheet"/>
<link href="/static/bootstrap.min.css" rel="stylesheet"/>
<link href="/static/dataTables.bootstrap.css" rel="stylesheet"/>
<style>
td { white-space: nowrap; }
    .dataTables_wrapper {
        /*width: 800px;*/
        margin: 0 auto;
    }
    .dataTables_filter{
        visibility:hidden;
    }
    .dataTables_info{
        visibility:hidden;
    }

</style>
<script type="text/javascript">

function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd   = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") {
        return;
    }

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=");
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) {
            parms[n] = [];
        }

        parms[n].push(nv.length === 2 ? v : null);
    }
    return query;
}


var polyline;
var map = null;
function initialize() {
   var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.508742,-0.120850)
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
    };

    polyline = new google.maps.Polyline(polyOptions);
    polyline.setMap(map);

    var route = JSON.parse((("{{route}}").replace(/&(l|g|quo)t;/g, function(a,b){
        return {
            l   : '<',
            g   : '>',
            quo : '"'
        }[b];
    })));

    var path = polyline.getPath();
    console.log(route[0][0]);
    for(var i = 0; i < route.length; i++){
        // console.log("hi");
        path.push( new google.maps.LatLng(route[i][0], route[i][1]));
    }

}

google.maps.event.addDomListener(window, 'load', initialize);
// alert(polyline);
</script>
<script type="text/javascript">
$.getScript('http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js',function(){

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

var vp = (("{{json_plan}}").replace(/&(l|g|quo)t;/g, function(a,b){
    return {
        l   : '<',
        g   : '>',
        quo : '"'
    }[b];
}));

// var eta = (("{{ETA}}").replace(/&(l|g|quo)t;/g, function(a,b){
//     return {
//         l   : '<',
//         g   : '>',
//         quo : '"'
//     }[b];
// }));
// alert(eta);

var plan_type = (("{{plan_type}}").replace(/&(l|g|quo)t;/g, function(a,b){
    return {
        l   : '<',
        g   : '>',
        quo : '"'
    }[b];
}));
// alert(plan_type);
var formatted_data = JSON.parse(vp);

var events = [];
var date_prev = formatted_data[0].date;

var speed_day = 0;
var foc_day = 0;
var actual_rpm_day = 0;
var distance_covered_day = 0;
var wind_force_day = 0;


var count_day = 0;


for(var i = 0; i < formatted_data.length; i++){
  var title = "Avg Rpm " + formatted_data[i].actual_speed
  var date = moment(formatted_data[i].date.substring(0, 19)).toDate();
  var end =  moment(formatted_data[i].date.substring(0, 19)).add(6, 'hour').toDate();
  events.push({
    title : title,
    start : date,
    end : end,
    allDay : false
  })

  if(formatted_data[i].date.substring(0, 11) != date_prev.substring(0, 11)){

    // console.log("sdfsdsdgds testin "+ speed_day + " count " + count_day);
    speed_day = speed_day/count_day;
    foc_day = foc_day/count_day;
    actual_rpm_day = actual_rpm_day/count_day;
    distance_covered_day = distance_covered_day/count_day;
    wind_force_day = wind_force_day/count_day;

    events.push({
      title : "avg speed " + speed_day.toFixed(1),
      start : date_prev.substring(0,19),
      allDay : true
    })
    events.push({
      title : "Distance completed" + distance_covered_day.toFixed(1),
      start : date_prev.substring(0,19),
      allDay : true
    })
    events.push({
      title : "avg rpm " + actual_rpm_day.toFixed(1),
      start : date_prev.substring(0,19),
      allDay : true
    })
    events.push({
      title : "FOC " + foc_day.toFixed(1),
      start : date_prev.substring(0,19),
      allDay : true
    })
    events.push({
      title : "wind force " + wind_force_day.toFixed(1),
      start : date_prev.substring(0,19),
      allDay : true
    })
    date_prev = formatted_data[i].date

    speed_day = 0;
    foc_day = 0;
    actual_rpm_day = 0;
    distance_covered_day = 0;
    wind_force_day = 0;


    count_day = 0;

  }
  else{

    speed_day += formatted_data[i].actual_speed;
    foc_day += formatted_data[i].foc;
    actual_rpm_day += formatted_data[i].actual_rpm;
    distance_covered_day += formatted_data[i].distance_covered;
    wind_force_day += formatted_data[i].wind_force;
    count_day++;
    // console.log(" testin "+ speed_day + " count " + count_day);
  }


}

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    eventMouseover :function(event, jsEvent, view) {

    },
    eventMouseout :function(event, jsEvent, view) {

    },
    eventRender: function(event, element) {
        var view = $('#calendar').fullCalendar('getView');
        if (view.name == 'month' && !event.allDay) return false;
    },
    events : events,
    dayClick: function() {
        alert('a day has been clicked!');
    }
  });
})

</script>
<script type="text/javascript">

var vp = (("{{json_plan}}").replace(/&(l|g|quo)t;/g, function(a,b){
    return {
        l   : '<',
        g   : '>',
        quo : '"'
    }[b];
}));
alert("{{detailed_plan}}");
var plan_type = (("{{plan_type}}").replace(/&(l|g|quo)t;/g, function(a,b){
    return {
        l   : '<',
        g   : '>',
        quo : '"'
    }[b];
}));
var formatted_data = JSON.parse(vp);

$(document).on('click', '#save_plan', function(){
    data = parseURLParams(window.location.href);
    alert(data);
    $.ajax({
        url: "/vast/save_plan?" + data,
        type : "GET",
        success:function(data){
            alert(data);
        },
        error:function(err){
            console.log((err));
        }
    });
    // alert();
});

</script>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Voyage Plan</h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class = "panel panel-default">
    <div class = "panel-heading"><i class="fa fa-globe fa-fw"></i> Voyage Route</div>
    <div class = "panel-body">
        <div class="col-lg-12" id="map_canvas" style="height:350px;"></div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3 col-md-3">
        <div class="panel" style = "background-color : #44B78B; color : white">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-calendar fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>ETA</div>
                        <div class="" style="font-size:20px;">{{ ETA|date:'M d, Y H:i'}}</div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-lg-3 col-md-3">
        <div class="panel" style = "background-color : #6666FF; color : white">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-dashboard fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>Avg Speed (Kts)</div>
                        <div class="huge">{{ detailed_plan.summary.avg_speed | floatformat:1}}</div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-lg-3 col-md-3">
         <div class="panel" style = "background-color :#3399FF; color : white">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-gears fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>Avg RPM</div>
                        <div class="huge">{{ detailed_plan.summary.avg_rpm | floatformat:1}}</div>

                    </div>
                </div>
            </div>

        </div>
    </div>
   <div class="col-lg-3 col-md-3">
         <div class="panel" style = "background-color : #A68400; color : white">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-tint fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div>Total FOC (MT)</div>
                        <div class="huge">{{ detailed_plan.summary.total_foc |floatformat:0}}</div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- /.row -->

<hr>
<div class="col-lg-12">
    <div class ="panel panel-default">
        <div class = "panel-heading"><i class="fa fa-calendar fa-fw"></i> Planned Voyage Schedule</div>
        <div class = "panel-body">
            <div class="table-responsive col-lg-12">
                  <table id="plan" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Date</th>
                                {% for plan in detailed_plan.schedule %}
                                <th>{{plan.date | date:"SHORT_DATETIME_FORMAT"}}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Port Name</th>
                                 {% for plan in detailed_plan.schedule %}
                                    {%ifequal plan.port_name None%}
                                    <td>way pt.({{plan.lat|floatformat:"1"}},{{plan.lon|floatformat:"1"}})</td>
                                    {%else%}
                                <td>{{plan.port_name}}({{plan.lat|floatformat:"1"}},{{plan.lon|floatformat:"1"}})</td>
                                    {%endifequal%}
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Actual Speed</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.actual_speed|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                              <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Estimated RPM</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.actual_rpm|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                             <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">FOC</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.foc|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Distance Covered</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.distance_covered|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Wind Force</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.wind_force|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                             <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Wind Direction</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.wind_direction|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                             <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Current Speed</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.current_speed|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Current Direction</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.current_direction|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Wave Height</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.wave_height|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Wave Direction</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.wave_direction|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Swell Direction</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.swell_direction|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>
                            <tr style="background-color:white;color:#3ab98c">
                                <th style="background-color:#3ab98c;color:white">Swell height</th>
                                 {% for plan in detailed_plan.schedule %}
                                <td>{{plan.swell_height|floatformat:"2"}}</td>
                                {% endfor %}
                            </tr>


                    </table>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="row">
        <div class = "col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-bar-chart-o fa-fw"></i> Speed/Weather
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div id="container"></div>
                </div>
                <!-- /.panel-body -->
            </div>
        </div>
        <div class = "col-lg-6">

            <!-- /.panel -->

        <!-- /.panel -->

    <!-- /.col-lg-8 -->

</div>
<div class = "col-lg-12">
    <div class="panel panel-default">
        <div class = "panel-heading"><i class="fa fa-calendar fa-fw"></i> Daily Voyage Schedule</div>
        <div class = "panel-body">
            <div id="calendar"  class = "col-lg-12" ></div>
        </div>
    </div>
</div>

<div class = "col-lg-12">
<button id = "save_plan" class = "btn btn-primary col-lg-12">Save Plan</button>
<hr>
</div>



<script type="text/javascript">

var table = $('#plan').DataTable( {
        scrollY:        "500px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        ordering: false,
        // "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [ 0,7,9 ] }],
        "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    } );
    new $.fn.dataTable.FixedColumns( table );


    $(function () {
        actual_speed = [];
        actual_rpm = [];
        wind_force = [];
        sea_current = [];
        for(var i = 0; i < formatted_data.length; i++){
            actual_speed.push(formatted_data[i].actual_speed);
            wind_force.push(formatted_data[i].wind_force);
            sea_current.push(formatted_data[i].current_speed);
        }
        // alert(data);
        var sd = moment(formatted_data[0].date.substring(0, 19))
        // alert(sd);
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Voyage Plan'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            minRange: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: [{
                    title: {
                        text: 'Current Speed/ Wind Force/ Speed',
                        // style: {
                        //     color: Highcharts.getOptions().colors[2]
                        // }
                    },
                    labels : {
                        // style: {
                        //     color: Highcharts.getOptions().colors[0]
                        // }
                    }
                },
                // {
                //     title: {
                //         text: 'Wind Force',
                //         style: {
                //             color: Highcharts.getOptions().colors[1]
                //         },
                //     },

                //     labels : {
                //         style: {
                //             color: Highcharts.getOptions().colors[1]
                //         }
                    // },

                //     opposite: true
                // },

                ],

        plotOptions: {
            area: {
                fillColor: {
                    // linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    // stops: [
                    //     [0, Highcharts.getOptions().colors[0]],
                    //     [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    // ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        tooltip: {
            crosshairs: {
                color: 'green',
                dashStyle: 'solid'
            },
            shared: true
        },

        series: [{
            type: 'line',
            name: 'Actual Speed',
            pointInterval: 6 * 3600 * 1000,
            pointStart: Date.UTC(sd.year(), sd.month(), sd.date()),
            data: actual_speed
        },

        {
            type: 'line',
            name: 'Wind Force',
            pointInterval: 6 * 3600 * 1000,
            pointStart: Date.UTC(sd.year(), sd.month(), sd.date()),
            data: wind_force
        },

         {
            type: 'line',
            name: 'Sea Current',
            pointInterval: 6 * 3600 * 1000,
            pointStart: Date.UTC(sd.year(), sd.month(), sd.date()),
            data: sea_current
        }

        ]
    });

});

</script>
<!-- /.row -->
{% endblock %}