www-POC/app/static/templates/notes.html

<div class="modal fade" id="addModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Add a New Note...</h4>
			</div>
			<div class="modal-body">
				<div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
				<form>
					<div class="form-group">
						<label for="note_text">Note</label>
						<textarea ng-model="newNote.note_text" class="form-control" id="note_text"></textarea>
					</div>
					<div class="form-group">
						<label for="author">Author</label>
						<input type="text" ng-model="newNote.author" class="form-control" id="author" />
					</div>
					<hr />
					<div class="form-group">
						<label for="created_on">Note Time</label>
						<br />
						<quick-datepicker id="created_on" ng-model='newNote.created_on'></quick-datepicker>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" ng-click="submitNewNote();" data-dismiss="modal">Submit Note</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="editModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Edit a Tag...</h4>
			</div>
			<div class="modal-body">
				<div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
				<form>
					<div class="form-group">
						<label for="note_text">Note</label>
						<textarea ng-model="editNote.note_text" class="form-control" id="note_text"></textarea>
					</div>
					<div class="form-group">
						<label for="author">Author</label>
						<input type="text" ng-model="editNote.author" class="form-control" id="author" />
					</div>
					<hr />
					<div class="form-group">
						<label for="created_on">Note Time</label>
						<br />
						<quick-datepicker id="created_on" ng-model='editNote.created_on'></quick-datepicker>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" ng-click="submitEditNote();" data-dismiss="modal">Submit Well Test Edits</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="deleteModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Are you sure?</h4>
			</div>
			<div class="modal-body">
				<div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
				<h3>Are you sure you want to delete the Note by {{deleteNote.author}} at {{deleteNote.created_on}}?</h3>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">NO!!!!!!</button>
				<button type="button" class="btn btn-danger" ng-click="submitDeleteNote(deleteNote._id);" data-dismiss="modal">Yes, delete it!</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class='container'>
	<div class="row">
		<div class="col-md-12">
			<h1>Notes</h1>
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
				New Note
			</button>
			<div ng-if="num_pages>1" style="text-align:center;">
				<ul class="pagination">
					<li>
						<a ng-click="loadNotesPageData(page_num_prev)" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li ng-repeat="p in page_list" ng-class="{'active':p==page_num}"><a ng-click="loadNotesPageData(p)">{{p}}</a></li>
					<li>
						<a ng-click="loadNotesPageData(page_num_next)" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>


	<div class='row'>
		<div class='col-md-12'>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Date</th>
						<th>Note</th>
						<th>Author</th>
						<th></th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="n in notes_data">
						<td nowrap>{{ n.created_on | date:'medium'}}</td>
						<td nowrap>{{ n.note_text }}</td>
						<td nowrap>{{ n.author }}</td>
						<td><button data-toggle="modal" data-target="#editModal" ng-click="startEditNote(n._id)" class="btn btn-primary">Edit</button></td>
						<td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteNote(n._id)" class="btn btn-danger">Delete</button></td>
					</tr>
				</tbody>
			</table>
			<div ng-if="notes_data.length==0" class="well" style="text-align:center">No stored notes yet.</div>
		</div>
	</div>
</div>