akleemans · February 11, 2016 09:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en" ng-app="TodolistApp">
  <head>
    <title>Todolist app</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body>

 <script>
 angular.module('TodolistApp', [])
 .controller('TodolistCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.tasks = [];
  $scope.getTasks = function() {
    console.log("Getting tasks.");
    $http.get('http://localhost:8080/Todolist/tasks').success(function(data) {
      $scope.tasks = data;
    });
  };
  $scope.addTask = function(task) {
    console.log('Adding task: ' + task.description);
    $http.post('http://localhost:8080/Todolist/tasks', task).success(function() {
      $scope.getTasks();
      $scope.newTask = '';
    });
  };
  $scope.deleteTask = function(task) {
    console.log('Deleting task: ' + task.description);
    $http.delete('http://localhost:8080/Todolist/tasks/' + task.id).success(function() {
      $scope.getTasks();
    });
  };
  $scope.getTasks();
  $scope.newTask = '';
 }]);
 </script>
 <div class="container col-md-3"></div>
 <div class="container col-md-6" ng-controller="TodolistCtrl">

 <div class="page-header">
  <h1>Todo list</h1>
  <p class="lead">A list with all tasks.</p>
 </div>

 <p>Each item has the attributes id, description, urgency and user name.</p>
 <p>Add tasks here:</p>

 <form class="form-inline" ng-submit="addTask(newTask)">
  <tr>
    <td>
      <input type="text" ng-model="newTask.description" name="description" class="form-control" placeholder="Description">
    </td>
    <td>
      <select name="urgency" ng-model="newTask.urgency" class="form-control">
        <option value="1">low</option>
        <option value="2">medium</option>
        <option value="3">high</option>
      </select>
    </td>
    <td>
      <select name="user_id" ng-model="newTask.user_id" class="form-control">
        <option value="1">Anna</option>
        <option value="2">Ryan</option>
        <option value="3">Liam</option>
      </select>
    </td>
    <td>
      <button type="submit" class="btn btn-default">add</button>
    </td>
  </tr>
 </form>

 <div class="col-md-10">
      <hr>
      <h3>All my tasks</h3>
      <table class="table table-hover">
        <tr>
          <th>Description</th>
          <th>Urgency</th>
          <th>Assigned</th>
          <th></th>
        </tr>
        <tr ng-repeat="task in tasks">
          <td>{{task.description}}</td>
          <td>
                <span ng-if="task.urgency == 3" class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span ng-if="task.urgency == 1" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
          </td>
          <td>{{task.user_name}}</td>
          <td>
                <button type="button" class="btn btn-default btn-xs" ng-click='deleteTask(task)'>
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </button>
          </td>
        </tr>
      </table>
 </div>
 </div> <!-- /container -->

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" ng-app="TodolistApp">
	<head>
	<title>Todolist app</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	</head>
	<body>

	<script>
	angular.module('TodolistApp', [])
	.controller('TodolistCtrl', ['$scope', '$http', function($scope, $http) {
	$scope.tasks = [];
	$scope.getTasks = function() {
	console.log("Getting tasks.");
	$http.get('http://localhost:8080/Todolist/tasks').success(function(data) {
	$scope.tasks = data;
	});
	};
	$scope.addTask = function(task) {
	console.log('Adding task: ' + task.description);
	$http.post('http://localhost:8080/Todolist/tasks', task).success(function() {
	$scope.getTasks();
	$scope.newTask = '';
	});
	};
	$scope.deleteTask = function(task) {
	console.log('Deleting task: ' + task.description);
	$http.delete('http://localhost:8080/Todolist/tasks/' + task.id).success(function() {
	$scope.getTasks();
	});
	};
	$scope.getTasks();
	$scope.newTask = '';
	}]);
	</script>
	<div class="container col-md-3"></div>
	<div class="container col-md-6" ng-controller="TodolistCtrl">

	<div class="page-header">
	<h1>Todo list</h1>
	<p class="lead">A list with all tasks.</p>
	</div>

	<p>Each item has the attributes id, description, urgency and user name.</p>
	<p>Add tasks here:</p>

	<form class="form-inline" ng-submit="addTask(newTask)">
	<tr>
	<td>
	<input type="text" ng-model="newTask.description" name="description" class="form-control" placeholder="Description">
	</td>
	<td>
	<select name="urgency" ng-model="newTask.urgency" class="form-control">
	<option value="1">low</option>
	<option value="2">medium</option>
	<option value="3">high</option>
	</select>
	</td>
	<td>
	<select name="user_id" ng-model="newTask.user_id" class="form-control">
	<option value="1">Anna</option>
	<option value="2">Ryan</option>
	<option value="3">Liam</option>
	</select>
	</td>
	<td>
	<button type="submit" class="btn btn-default">add</button>
	</td>
	</tr>
	</form>

	<div class="col-md-10">
	<hr>
	<h3>All my tasks</h3>
	<table class="table table-hover">
	<tr>
	<th>Description</th>
	<th>Urgency</th>
	<th>Assigned</th>
	<th></th>
	</tr>
	<tr ng-repeat="task in tasks">
	<td>{{task.description}}</td>
	<td>
	<span ng-if="task.urgency == 3" class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
	<span ng-if="task.urgency == 1" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
	</td>
	<td>{{task.user_name}}</td>
	<td>
	<button type="button" class="btn btn-default btn-xs" ng-click='deleteTask(task)'>
	<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </button>
	</td>
	</tr>
	</table>
	</div>
	</div> <!-- /container -->

	</body>
	</html>