mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-18 05:25:50 +00:00
AA: Add modal form partials for Owner add/edit, Pets add/edit, and Pet Visit add
This commit is contained in:
Andrew Abogado
parent
505b17c98c
commit
b8e1d1e457
6 changed files with 439 additions and 35 deletions
|
|
@ -1,3 +1,5 @@
|
|||
<!-- This partial include Add/Edit Owners and Success Modals -->
|
||||
|
||||
<!-- Add Owner Modal -->
|
||||
<div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
|
|
@ -6,7 +8,7 @@
|
|||
<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-12 col-md-offset-2">
|
||||
<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>
|
||||
|
|
@ -16,10 +18,7 @@
|
|||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h2 class="form-group-heading">Basic Information</h2>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-offset-2">
|
||||
<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">
|
||||
|
|
@ -28,32 +27,27 @@
|
|||
<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>
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputFile">Profile Photo</label>
|
||||
<div class="thumbnail">
|
||||
<img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image">
|
||||
<div class="caption">
|
||||
<input type="file" id="exampleInputFile">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h2 class="form-group-heading">Contact Details</h2>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-offset-2">
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<textarea class="form-control" rows="3" id="address"></textarea>
|
||||
<input type="text" class="form-control" id="address">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
|
|
@ -63,9 +57,157 @@
|
|||
<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 btn-md">Add Owner</button>
|
||||
<button class="btn btn-link btn-md">Cancel</button>
|
||||
<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">
|
||||
<!-- ##TODO: Should link to the proper owner details page -->
|
||||
<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>
|
||||
|
|
|
|||
183
src/main/webapp/components/_partials/_modal_add_pet.html
Normal file
183
src/main/webapp/components/_partials/_modal_add_pet.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<!-- This partial include Add/Edit Pet and Success Modals -->
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!-- This partial include Add Pet Visit and Success Modals -->
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -47,9 +47,3 @@
|
|||
</ul>
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
||||
<!-- Search modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>
|
||||
|
||||
<!-- Add Owner modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_add_owner.html'"></data-ng-include>
|
||||
|
|
@ -19,6 +19,15 @@
|
|||
|
||||
<data-ng-include src="'components/footer.html'"></data-ng-include>
|
||||
|
||||
<!-- Search modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>
|
||||
<!-- Add Owner modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_add_owner.html'"></data-ng-include>
|
||||
<!-- Add Pet modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_add_pet.html'"></data-ng-include>
|
||||
<!-- Add Pet Visit modal -->
|
||||
<data-ng-include src="'components/_partials/_modal_add_pet_visit.html'"></data-ng-include>
|
||||
|
||||
<!--<script src="http://code.jquery.com/jquery.js"></script>-->
|
||||
<script src="plugins/jquery/jquery-2.1.0.min.js"></script>
|
||||
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue