<!DOCTYPE html>
<html ng-app="Temp">
<head>
  <title>Temp</title>
  <style>
    a[ ng-click ] {
      color: #ff00cc;
      cursor: pointer;
      text-decoration: underline;
      }


  </style>
    <link rel="stylesheet" type="text/css" href="stylesheets/tables.css">
  <!--<script type="text/javascript" src="lib/jquery.js"></script>-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar.min.js"></script>
</head>

<body ng-controller="TempController">
<div class="CSSTableGenerator">
    <table>
<tr>
<td>Date</td>
<td>Reading</td>
</tr>
        <tr ng-repeat="entry in tempData" >
            <td>{{ entry.date }}</td><td>{{ entry.reading }}</td>
        </tr>
    </table>

</div>

<script type="text/javascript">
   var app = angular.module( "Temp", []);
   app.controller(
       "TempController",
       function( $scope, tempService) {

         $scope.tempData = [];

         loadRemoteData();



         function applyRemoteData(newData)
         {
           $scope.tempData = newData;
         }


         function loadRemoteData() {
           tempService.getTemp()
               .then(
                   function(tempData) {
                     applyRemoteData(tempData);
                   }
               )
         }
       }
   );


  app.service(
    "tempService",
      function($http, $q) {
        return({getTemp:getTemp});

        function getTemp() {
           var request = $http({
             method: "get",
             url:"/temp/all",
             params: {
              /* action:"get"*/
             }
           });
          return (request.then(handleSuccess, handleError));
        }



        function handleError(response) {
          if ( !angular.isObject(response.data) || !response.data.message) {
            return( $q.reject("An unknown error occured"));
          }

          return($q.reject(response.data.message));
        }

        function handleSuccess(response)
        {
          return(response.data);
        }

      }
  );
</script>

</body>




</html>