mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-18 13:35:50 +00:00
LH :: Added OwnerDetails to the flow
This commit is contained in:
SG Development
parent
855394a6a6
commit
3b27132918
6 changed files with 696 additions and 4 deletions
|
|
@ -1,4 +1,4 @@
|
|||
var OwnerController = ['$scope','Owner',function($scope,Owner) {
|
||||
var OwnerController = ['$scope','$state','Owner',function($scope,$state,Owner) {
|
||||
$scope.$on('$viewContentLoaded', function(event){
|
||||
$('html, body').animate({
|
||||
scrollTop: $("#owners").offset().top
|
||||
|
|
@ -6,4 +6,15 @@ var OwnerController = ['$scope','Owner',function($scope,Owner) {
|
|||
});
|
||||
|
||||
$scope.owners = Owner.query();
|
||||
}];
|
||||
|
||||
var OwnerDetailsController = ['$scope','$stateParams','Owner', function($scope,$stateParams,Owner) {
|
||||
|
||||
var currentId = $stateParams.id;
|
||||
var nextId = parseInt($stateParams.id) + 1;
|
||||
var prevId = parseInt($stateParams.id) - 1;
|
||||
|
||||
$scope.prevOwner = Owner.get({id:prevId});
|
||||
$scope.nextOwner = Owner.get({id:nextId});
|
||||
$scope.currentOwner = Owner.get($stateParams);
|
||||
}];
|
||||
649
src/main/webapp/components/owners/owner_details.html
Normal file
649
src/main/webapp/components/owners/owner_details.html
Normal file
|
|
@ -0,0 +1,649 @@
|
|||
<!-- Owner Brief Info -->
|
||||
<header class="sections sections-narrow sections-light">
|
||||
<div class="container">
|
||||
<div class="media media-welcome">
|
||||
<div class="media-left">
|
||||
<img data-ng-src="images/avatars/owner{{currentOwner.id}}.jpg" class="img-circle media-object" width="90" height="90">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<div class="pull-right stats stats-lg">
|
||||
<ul>
|
||||
<li>{{currentOwner.pets.length || 0}}<span>Pets</span></li>
|
||||
<li>{{currentOwner.visits.length || 0}}<span>Visits</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="h3" data-ng-bind="currentOwner.firstName + ' ' + currentOwner.lastName"></h1>
|
||||
<p data-ng-bind="currentOwner.description">Accountant, Ledger Associates</p>
|
||||
<p data-ng-bind="currentOwner.city"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>California, USA</p>
|
||||
<div class="btn-group">
|
||||
<a href="#" class="btn btn-link"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Call</a>
|
||||
<a href="#" class="btn btn-link"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Message</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Owners -->
|
||||
<section id="ownersInfo" class="sections sections-narrow">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#editOwnerModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Owner</a>
|
||||
<h2 class="h3 sub-header">Owner Information</h2>
|
||||
<form class="form-inline form-inline-display">
|
||||
<div class="form-group">
|
||||
<p>First Name</p>
|
||||
<p class="h5" data-ng-bind="currentOwner.firstName">Maria</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>Last Name</p>
|
||||
<p class="h5" data-ng-bind="currentOwner.lastName">Rodriguez</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>Address</p>
|
||||
<p class="h5" data-ng-bind="currentOwner.address">345 Maple St.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>City</p>
|
||||
<p class="h5" data-ng-bind="currentOwner.city">Madison</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>Contact Number</p>
|
||||
<p class="h5" data-ng-bind="currentOwner.telephone">6085557683</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h2 class="h3 sub-header">Owner Activities</h2>
|
||||
<!-- List group -->
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
|
||||
<strong>Next Appointment:</strong> None</li>
|
||||
<li class="list-group-item">
|
||||
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
|
||||
<strong>Last Visited:</strong> 02 Feb 2015</li>
|
||||
<li class="list-group-item">
|
||||
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
|
||||
<strong>Due Date:</strong> 14 Mar 2015</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pets -->
|
||||
<section id="pets" class="sections sections-narrow">
|
||||
<div class="container">
|
||||
<div class="action-wrappers pull-right">
|
||||
<a class="btn btn-primary pull-right action-item" data-toggle="modal" data-target="#addPetModal">
|
||||
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add New Pet
|
||||
</a>
|
||||
<div class="pull-right action-item">
|
||||
View as
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="sub-header">Owner's Pets</h2>
|
||||
<div class="row thumbnail-wrapper">
|
||||
<div data-ng-repeat="pet in currentOwner.pets" class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<img data-ng-src="images/pets/pet{{pet.id % 10 + 1}}.jpg" class="img-circle" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<h3 class="caption-heading" data-ng-bind="pet.name">Basil</h3>
|
||||
<p class="caption-meta" data-ng-bind="pet.birthdate">08 August 2012</p>
|
||||
<p class="caption-meta"><span class="caption-label" data-ng-bind="pet.type.name">Hamster</span></p>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-default" data-toggle="modal" data-target="#editPetModal">
|
||||
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Pet
|
||||
</a>
|
||||
<a class="btn btn-default" data-toggle="modal" data-target="#addPetVisitModal">
|
||||
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Visit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pets -->
|
||||
<section id="pets" class="sections sections-bottom-nav sections-light">
|
||||
<div class="container">
|
||||
<ul class="pager pull-left">
|
||||
<li><a data-ui-sref="owners"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back to Owners List</a></li>
|
||||
</ul>
|
||||
<ul class="pager pull-right">
|
||||
<li><a data-ui-sref="ownerDetails({id:prevOwner.id})"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> {{prevOwner.firstName + ' ' + prevOwner.lastName}}</a></li>
|
||||
<li><a data-ui-sref="ownerDetails({id:nextOwner.id})">{{nextOwner.firstName + ' ' + nextOwner.lastName}}<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Add Owner Modal -->
|
||||
<div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Add An Owner</h1>
|
||||
<em class="text-muted">Fill up pet owners basic information and contact details</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="profileImg">Profile Photo</label>
|
||||
<input type="file" class="form-control-file" id="profileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="occupation">Occupation</label>
|
||||
<input type="text" class="form-control" id="occupation">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" class="form-control" id="address">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactNumber">Contact Number</label>
|
||||
<input type="text" class="form-control" id="contactNumber">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" class="form-control" id="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Add Owner</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Owner Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addOwnerSuccessModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Owner added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added an a new owner.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's details</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Owner Modal -->
|
||||
<div class="modal modal-owner fade" id="editOwnerModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Edit Owner</h1>
|
||||
<em class="text-muted">Fill up pet owners basic information and contact details</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName" value="Rodriguez">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="profileImg">Profile Photo</label>
|
||||
<input type="file" class="form-control-file" id="profileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="occupation">Occupation</label>
|
||||
<input type="text" class="form-control" id="occupation" value="Accountant">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" value="Ledger Associates">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate" value="04 Feb 1988">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" class="form-control" id="address" value="345 Maple St.">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" value="Madison">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactNumber">Contact Number</label>
|
||||
<input type="text" class="form-control" id="contactNumber" value="6085557683">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" class="form-control" id="email" value="maria.escobito@gmail.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Update Owner</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Owner Success Modal -->
|
||||
<div class="modal modal-owner fade" id="editOwnerSuccessModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Owner updated successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully updated an owner.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's details</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add New Pet Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">Add a New Pet</h1>
|
||||
<em class="text-muted">Fill up pet basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Owner</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petProfileImg">Pet Photo</label>
|
||||
<input type="file" class="form-control-file" id="petProfileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type">Type</label>
|
||||
<select class="form-control" id="type">
|
||||
<option value="bird">bird</option>
|
||||
<option value="cat">cat</option>
|
||||
<option value="dog">dog</option>
|
||||
<option value="hamster">hamster</option>
|
||||
<option value="lizard">lizard</option>
|
||||
<option value="snake">snake</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close">Add Pet</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add New Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetSuccessModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added a pet.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitModal" data-dismiss="modal" aria-label="Close">Add New Visit</button>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Not Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Modal -->
|
||||
<div class="modal modal-owner fade" id="editPetModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">Edit Pet</h1>
|
||||
<em class="text-muted">Fill up pet basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="firstName">Owner</label>
|
||||
<input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName" value="Basil">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="petProfileImg">Pet Photo</label>
|
||||
<input type="file" class="form-control-file" id="petProfileImg">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="birthDate">Birth Date</label>
|
||||
<input type="text" class="form-control" id="birthDate" value="08 August 2012">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type">Type</label>
|
||||
<select class="form-control" id="type">
|
||||
<option value="bird">bird</option>
|
||||
<option value="cat">cat</option>
|
||||
<option value="dog">dog</option>
|
||||
<option value="hamster" selected>hamster</option>
|
||||
<option value="lizard">lizard</option>
|
||||
<option value="snake">snake</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editPetSuccessModal" data-dismiss="modal" aria-label="Close">Update Pet</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="editPetSuccessModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet update successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully update a pet.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<a href="owner_details.html" class="btn btn-primary">View owner's pets</a>
|
||||
<button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Pet Visit Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetVisitModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="sub-header">New Visit</h1>
|
||||
<em class="text-muted">Fill up pet visit basic information</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div class="form-group">
|
||||
<label for="petName">Pet Name</label>
|
||||
<input type="text" class="form-control" id="petName" value="Basil" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="visitDate">Visit Date</label>
|
||||
<input type="text" class="form-control" id="visitDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="visitDesc">Description</label>
|
||||
<textarea class="form-control" rows="3" id="visitDesc"></textarea>
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitSuccessModal" data-dismiss="modal" aria-label="Close">Add Visit</button>
|
||||
<button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Pet Success Modal -->
|
||||
<div class="modal modal-owner fade" id="addPetVisitSuccessModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="sub-header">Pet visit added successfully!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Well done! You've successfully added a pet visit.
|
||||
</div>
|
||||
<div class="form-group form-group-action">
|
||||
<button class="btn btn-primary" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Result Modal -->
|
||||
<div class="modal modal-search fade" id="searchModal" tabindex="-1">
|
||||
<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">×</span></button>
|
||||
<div class="container">
|
||||
<h1 class="sub-header">Search PetClinic</h1>
|
||||
<em class="text-muted">Start typing to search for owner, pets, or veterinarians...</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="search" class="form-control">
|
||||
<button class="btn btn-default" type="button">
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- ### TODO:
|
||||
Note by AA: I'm just showing the results for reference purpose
|
||||
This should be hidden by default and only be shown if there's result -->
|
||||
<div class="modal-seach-result">
|
||||
<h2 class="form-group-heading">Result of your search query</h2>
|
||||
<div class="row thumbnail-wrapper">
|
||||
<div class="col-md-3" ng-repeat="x in [1,2,3,4,5,6,7]">
|
||||
<div class="thumbnail">
|
||||
<a href="#"><img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
|
||||
<div class="caption">
|
||||
<h3 class="caption-heading"><a href="#">Eduardo Rodriguez</a></h3>
|
||||
<p class="caption-meta">2693 Commerce St., McFarland</p>
|
||||
<p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="row">
|
||||
<div class="col-md-3" data-ng-repeat="owner in owners">
|
||||
<div class="thumbnail">
|
||||
<a href="show.html"><img class="img-circle" data-ng-src="images/avatars/owner{{owner.id}}.jpg" alt="Generic placeholder image"></img></a>
|
||||
<a data-ui-sref="ownerDetails({id: owner.id})"><img class="img-circle" data-ng-src="images/avatars/owner{{owner.id}}.jpg" alt="{{owner.firstName + ' ' + owner.lastName}}"></img></a>
|
||||
<div class="caption">
|
||||
<h3 class="caption-heading"><a href="show.html" data-ng-bind="owner.firstName + ' ' +owner.lastName"></a></h3>
|
||||
<p data-ng-bind="owner.city"></p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ var app = angular.module('spring-petclinic', ['ui.router','ui.router.stateHelper
|
|||
|
||||
|
||||
/** Start of Configurable constants **/
|
||||
app.constant('useMockData', false);
|
||||
app.constant('useMockData', true);
|
||||
app.constant('context', '/petclinic');
|
||||
/** End of Configurable constants **/
|
||||
|
||||
|
|
@ -42,6 +42,12 @@ app.config(['stateHelperProvider','$urlRouterProvider','$urlMatcherFactoryProvid
|
|||
templateUrl: "components/owners/owners.html",
|
||||
controller: "OwnerController",
|
||||
data: { requireLogin : true }
|
||||
}).state({
|
||||
name: "ownerDetails",
|
||||
url: "/owners/:id",
|
||||
templateUrl: "components/owners/owner_details.html",
|
||||
controller: "OwnerDetailsController",
|
||||
data: {requireLogin : true}
|
||||
});
|
||||
|
||||
} ]);
|
||||
|
|
@ -52,6 +58,7 @@ app.controller('DashboardController', DashboardController);
|
|||
app.controller('VeterinarianController', VeterinarianController);
|
||||
app.controller('PetController', PetController);
|
||||
app.controller('OwnerController', OwnerController);
|
||||
app.controller('OwnerDetailsController', OwnerDetailsController);
|
||||
app.controller('VisitController', VisitController);
|
||||
|
||||
/** Services **/
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ var MockService = ['$httpBackend', '$http', '$q', 'context', function($httpBacke
|
|||
$q.all([
|
||||
$http.get(context + '/static/mock-data/pets.json'),
|
||||
$http.get(context + '/static/mock-data/vets.json'),
|
||||
$http.get(context + '/static/mock-data/owners.json')
|
||||
$http.get(context + '/static/mock-data/owners.json'),
|
||||
$http.get(context + '/static/mock-data/owner_one.json')
|
||||
]).then(function(data) {
|
||||
console.log("Mocking /api/pets");
|
||||
$httpBackend.whenGET(context + '/api/pets').respond(data[0].data);
|
||||
|
|
@ -38,6 +39,8 @@ var MockService = ['$httpBackend', '$http', '$q', 'context', function($httpBacke
|
|||
$httpBackend.whenGET(context + '/api/vets').respond(data[1].data);
|
||||
console.log("Mocking /api/owners");
|
||||
$httpBackend.whenGET(context + '/api/owners').respond(data[2].data);
|
||||
console.log("Mocking /api/owners/1");
|
||||
$httpBackend.whenGET(context + '/api/owners/1').respond(data[3].data);
|
||||
|
||||
console.log("Setting up passthrough for other urls");
|
||||
var passThroughRegex = new RegExp('/');
|
||||
|
|
|
|||
22
src/main/webapp/static/mock-data/owner_one.json
Normal file
22
src/main/webapp/static/mock-data/owner_one.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"id" : 1,
|
||||
"firstName" : "George",
|
||||
"lastName" : "Franklin",
|
||||
"description" : null,
|
||||
"address" : "110 W. Liberty St.",
|
||||
"city" : "Madison",
|
||||
"telephone" : "6085551023",
|
||||
"pets" : [ {
|
||||
"id" : 1,
|
||||
"name" : "Leo",
|
||||
"birthDate" : "2010-09-07T00:00:00.000Z",
|
||||
"type" : {
|
||||
"id" : 1,
|
||||
"name" : "cat",
|
||||
"new" : false
|
||||
},
|
||||
"visits" : [ ],
|
||||
"new" : false
|
||||
} ],
|
||||
"new" : false
|
||||
}
|
||||
Loading…
Reference in a new issue