<?php
/**
 * FETCHING DATA 
 * 
 * requires to install CURL for PHP
 * requires to enable CURL extension in php.ini
 */
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'https://labcom.cloud/graphql');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);

// replace the query with your desired objects and attributes
curl_setopt($ch, CURLOPT_POSTFIELDS, '{"query": "{ CloudAccount { email last_change_time Accounts { forename surname Measurements { value parameter unit timestamp } } } }" }');

$headers[]         = 'Content-Type: application/json';

// replace YOURTOKEN with the token from https://labcom.cloud/settings
$headers[]         = 'Authorization: YOURTOKEN';

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);

if (curl_errno($ch))
{
    echo 'Error:' . curl_error($ch);
}

curl_close($ch);

$array          = json_decode($result, true);
$myCloudAccount = $array['data']['CloudAccount'];

// basic example with the the first account/measurement source only
$myFirstAccount = $myCloudAccount['Accounts'][0];
$measurements   = $myFirstAccount['Measurements'];

/**
 * to parse the UNIX timestamp in PHP you could use Carbon
 * https://carbon.nesbot.com/docs/
 * 
 * Carbon::createFromTimestampUTC($yourTimestamp)
 * ->tz('Europe/Berlin')
 * ->format('d.m.Y H:i')
 */
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        
        <title>LabCom GraphQL Example</title>

        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <!-- Google Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- Material Design Bootstrap -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/css/mdb.min.css">
    </head>
</head>

<body>
    <nav class="navbar navbar-dark cyan darken-2 mb-2">
        <span class="navbar-brand">LabCom - GraphQL Example</span>
    </nav>
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">Accounts</li>
                <li class="breadcrumb-item active">
                    <?php 
                        // print your account name
                        echo $myFirstAccount['forename'] . ' ' . $myFirstAccount['surname'] 
                    ?>
                </li>
            </ol>
        </nav>
        <table class="table mt-2">
            <thead>
                <tr>
                <th scope="col">Date</th>
                <th scope="col">Parameter</th>
                <th scope="col">Value</th>
                <th scope="col">Unit</th>
                </tr>
            </thead>
            <tbody>
                <?php
                // print the table rows (measurement entries)
                foreach ($measurements as $measurement)
                {
                    echo '<tr>' . 
                            '<td class="unixToLocal">' 	. $measurement['timestamp'] 	. '</td>' . 
                            '<td>' 			. $measurement['parameter'] 	. '</td>' . 
                            '<td>' 			. $measurement['value'] 	. '</td>' . 
                            '<td>' 			. $measurement['unit'] 		. '</td>' . 
                        '</tr>';
                }
                ?>
            </tbody>
        </table>
    </div>

    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/js/mdb.min.js"></script>
    <!-- Moment JS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.unixToLocal').each(function(){
                $(this).text( moment.unix( $(this).text() ).format("DD.MM.YYYY hh:mm") );
            });
        });
    </script>
</body>
</html>
