<?php
include('common.inc.php');
$tgid = 44028;
$from = (isset($_REQUEST['from']) ? $_REQUEST['from'] : strtotime("2012-09-12"));
$to = (isset($_REQUEST['to']) ? $_REQUEST['to'] : strtotime("2012-12-12"));
include_header("fdds");
$sth = $conn->prepare('select distinct date_trunc(\'day\', call_timestamp) as rdate from recordings order by rdate');
 
$sth->execute();
foreach ($sth->fetchAll() as $row) {
    echo '<a href="?from=' . strtotime($row['rdate']) . '&amp;to=' . strtotime($row['rdate'] . ' +1 day') . '">' . $row['rdate'] . '</a> <br>';
}
 
?>
<form class="form-horizontal">
    <fieldset>
        <div class="input-prepend">
            <span class="add-on"><i class="icon-calendar"></i></span><input type="text" name="range" id="range" />
        </div>
    </fieldset>
</form>
<div class="span12">
 
    <table width="100%" height="775px">
        <tr>
            <td valign="middle"><span class="arrow-w" style="font-size:2em;">&lt;</span></td>
            <td width="95%">
                <div id="placeholder" style="width:100%;height:575px;"></div>
            </td>
            <td valign="middle"><span class="arrow-e" style="font-size:2em;">&gt;</span></td>
        </tr>
    </table>
    <script>
        var data = [];
        var plot;
        var options = {
            lines: { show: true },
            points: { show: true },
            xaxis: {
                mode: 'time',
                labelsAngle: 45
            },
            selection: { mode: 'x', fps: 30 },
            series: {
                lines: { show: true },
                points: { show: true }
            },
            mouse: {
                track: true,
                relative: true
            }
        };
        $(function () {
            // graph
 
 
            var placeholder = document.getElementById("placeholder");
 
            drawGraph(options);
 
            // Hook into the 'flotr:select' event.
            Flotr.EventAdapter.observe(placeholder, 'flotr:select', function (area) {
 
                // Draw graph with new area
                graph = drawGraph({
                    xaxis: {min: area.x1, max: area.x2, mode: 'time', labelsAngle: 45},
                    yaxis: {min: area.y1, max: area.y2}
                });
            });
 
            // When graph is clicked, draw the graph with default area.
            Flotr.EventAdapter.observe(placeholder, 'flotr:click', function () {
                drawGraph();
            });
 
 
            // Set the default dates
            var startDate       = Date.create().addDays(-6),    // 7 days ago
                endDate         = Date.create();                                // today
 
            var range = $('#range');
 
            // Show the dates in the range input
            range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - ' + endDate.format('{MM}/{dd}/{yyyy}'));
 
            range.daterangepicker({
 
                startDate: startDate,
                endDate: endDate,
 
                ranges: {
                    'Today': ['today', 'today'],
                    'Yesterday': ['yesterday', 'yesterday'],
                    'Last 7 Days': [Date.create().addDays(-6), 'today'],
                    'Last 30 Days': [Date.create().addDays(-29), 'today']
                }
            },function(start, end){
 
                ajaxLoadChart(start, end);
 
            });
            function ajaxLoadChart(startDate,endDate) {
 
                // If no data is passed (the chart was cleared)
 
                if(!startDate || !endDate){
                    chart.setData({
                        "xScale" : "time",
                        "yScale" : "linear",
                        "main" : [{
                            className : ".stats",
                            data : []
                        }]
                    });
 
                    return;
                }
 
                // Otherwise, issue an AJAX request
 
                $.getJSON('ajax.php', {
 
                    start:      startDate.format('{yyyy}-{MM}-{dd}'),
                    end:        endDate.format('{yyyy}-{MM}-{dd}')
 
                }, function(data) {
 
                    var set = [];
                    $.each(data, function() {
                        set.push({
                            x : this.label,
                            y : parseInt(this.value, 10)
                        });
                    });
 
                    chart.setData({
                        "xScale" : "time",
                        "yScale" : "linear",
                        "main" : [{
                            className : ".stats",
                            data : set
                        }]
                    });
 
                });
            }
            getData('<?php echo $tgid; ?>', '<?php echo $from ?>', '<?php echo $to ?>');
 
        });
 
        // Draw graph with default options, overwriting with passed options
        function drawGraph(opts) {
 
            // Clone the options, so the 'options' variable always keeps intact.
            var o = Flotr._.extend(Flotr._.clone(options), opts || {});
 
            // Return a new graph.
            return Flotr.draw(
                placeholder,
                data,
                o
            );
        }
 
 
        function onDataReceived(series) {
            data = []
            for (var key in series.data) {
                data[data.length] = {label: key, data: series.data[key]};
            }
            drawGraph(options);
        }
        function getData(sensorID, from, to) {
            $.ajax({
                url: "<?php echo $basePath; ?>calls.json.php?action=graphcount&tgid=" + sensorID + "&from=" + from + "&to=" + to,
                method: 'GET',
                dataType: 'json',
                success: onDataReceived
            });
        }
 
 
    </script>
</div>
<?php
include_footer();
?>