{% extends "base.html" %}

{% block style_block %}
<link href="/static/css/coco_stats.css" rel="stylesheet">
{% endblock %}

{% block content %}
<h1>CodeCombat Productivity Stats</h1>
<p>Percentile feedback work graph for my <a href="/codecombat">CodeCombat</a> work hours.</p>
<div id="pf_timer" class="big_graph">
  <h3>CodeCombat work time today: <span id="pf_timer_today_total"></span></h3>
  <div id="percentile_feedback"></div>
  <h4>All-time total: <span id="pf_timer_all_time_total"></span></h4>
</div>
<div class="clearfix"></div>
{% endblock %}

{% block footer_script %}
{{super()}}
<script src="/static/js/highcharts.js"></script>
<script>
var today_wr = {date: {{wr.date|jsdate}}, starts: {{wr.start_times}}, stops: {{wr.stop_times}}};
var updateInterval;
var refresh_delay = {{refresh_delay}};
var past_wrs = [];
{% for past_wr in past_wrs %}
past_wrs.push({date: {{past_wr.date|jsdate}}, starts: {{past_wr.start_times}}, stops: {{past_wr.stop_times}}});
{% endfor %}
</script>
<script src="/static/js/work_timer.js"></script>
{% endblock %}

{% block onload %}
generatePercentileFeedbackGraph();
updateWorkTime();
{% if working %}updateInterval = setInterval(updateWorkTime, 1000);{% endif %}
setTimeout(refreshPage, refresh_delay * 1000);
setInterval(generatePercentileFeedbackGraph, 10 * 60 * 1000);
{% endblock %}