<!DOCTYPE html>
|
|
<html ng-app="items">
|
<head>
|
<title>To Do List</title>
|
|
<link rel="stylesheet" href="lib/dependencies/css/bootstrap.min.css" />
|
<link rel="stylesheet" href="lib/dependencies/css/ng-grid.min.css" />
|
|
<!-- build:css css/application.css -->
|
<link rel="stylesheet" type="text/css" href="css/style.css"/>
|
<!-- endbuild -->
|
|
<script src="lib/dependencies/jquery.min.js"></script>
|
<script src="lib/dependencies/angular.min.js"></script>
|
<script src="lib/dependencies/angular-resource.min.js"></script>
|
<script src="lib/dependencies/ng-grid-2.0.11.min.js"></script>
|
<script src="lib/dependencies/ui-bootstrap-tpls.min.js"></script>
|
|
<!-- build:js script/all.js -->
|
<script src="script/item.js"></script>
|
<!-- endbuild -->
|
</head>
|
|
<body>
|
|
<h1>To Do List Application</h1>
|
|
<br/>
|
|
<!-- Specify a Angular controller script that binds Javascript variables to the feedback messages.-->
|
<div class="message" ng-controller="alertMessagesController">
|
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
|
</div>
|
|
<br>
|
|
<!-- Specify a Angular controller script that binds Javascript variables to the grid.-->
|
<div class="grid" ng-controller="itemsListController">
|
<div>
|
<h3>To Do List</h3>
|
</div>
|
|
<!-- Binds the grid component to be displayed. -->
|
<div class="gridStyle" ng-grid="gridOptions"></div>
|
|
<!-- Bind the pagination component to be displayed. -->
|
<pagination direction-links="true" boundary-links="true"
|
total-items="items.totalResults" items-per-page="items.pageSize"
|
ng-model="items.currentPage" ng-change="refreshGrid()">
|
</pagination>
|
</div>
|
|
<!-- Specify a Angular controller script that binds Javascript variables to the form.-->
|
<div class="form" ng-controller="itemsFormController">
|
<!-- Verify item, if there is no id present, that we are Adding a Item -->
|
<div ng-if="item.id == null">
|
<h3>Add Task</h3>
|
</div>
|
<!-- Otherwise it's an Edit -->
|
<div ng-if="item.id != null">
|
<h3>Edit Task</h3>
|
</div>
|
|
<div>
|
<!-- Specify the function to be called on submit and disable HTML5 validation, since we're using Angular validation-->
|
<form name="itemForm" ng-submit="updateItem()" novalidate>
|
|
<!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
|
<div class="form-group" ng-class="{'has-error' : itemForm.description.$invalid && itemForm.description.$dirty}">
|
<label for="description">Description:</label>
|
<!-- Display a check when the field is valid and was modified -->
|
<span ng-class="{'glyphicon glyphicon-ok' : itemForm.description.$valid && itemForm.description.$dirty}"></span>
|
|
<input id="description" name="description" type="text" class="form-control" maxlength="100"
|
ng-model="item.description"
|
required ng-minlength="5" ng-maxlength="100"/>
|
|
<!-- Validation messages to be displayed on required, minlength and maxlength -->
|
<p class="help-block" ng-show="itemForm.description.$error.required">Add Description.</p>
|
<p class="help-block" ng-show="itemForm.description.$error.minlength">Description must be at least 5 characters long.</p>
|
<p class="help-block" ng-show="itemForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p>
|
</div>
|
|
<div class="form-group" ng-class="{'has-error' : itemForm.done.$invalid && itemForm.done.$dirty}">
|
<label for="done">Completed:</label>
|
<!-- Display a check when the field is valid and was modified -->
|
<span ng-class="{'glyphicon glyphicon-ok' : itemForm.done.$valid && itemForm.done.$dirty}"></span>
|
|
<input id="done" name="done" type="checkbox" class="form-control"
|
ng-model="item.done" />
|
|
</div>
|
|
<!-- Form buttons. The 'Save' button is only enabled when the form is valid. -->
|
<div class="buttons">
|
<button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button>
|
<button type="submit" class="btn btn-primary" ng-disabled="itemForm.$invalid">Save</button>
|
</div>
|
</form>
|
</div>
|
</div>
|
<div class="footer" ng-controller="hostController">
|
From host: {{host.hostname}} / {{host.ip}}
|
</div>
|
</body>
|
</html>
|
