mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 21:15:50 +00:00
Added complete map functionality, seperate map.
This commit is contained in:
Austin-Mills
parent
ca89c25fe2
commit
22d8d55f87
7 changed files with 200 additions and 4 deletions
|
|
@ -48,6 +48,18 @@ class DoctorController {
|
|||
return "doctors/doctorList";
|
||||
}
|
||||
|
||||
@RequestMapping(value = { "/map.html" })
|
||||
public String showDoctorLists(Map<String, Object> model) {
|
||||
// Here we are returning an object of type 'Doctors' rather than a collection of Doctor
|
||||
// objects so it is simpler for Object-Xml mapping
|
||||
Doctors doctors = new Doctors();
|
||||
doctors.getDoctorList().addAll(this.doctors.findAll());
|
||||
model.put("doctors", doctors);
|
||||
return "mapList";
|
||||
}
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = { "/doctors.json", "/doctors.xml" })
|
||||
public @ResponseBody Doctors showResourcesVetList() {
|
||||
// Here we are returning an object of type 'Doctors' rather than a collection of Doctor
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>This is a test let me know if this works.</p>
|
||||
</body>
|
||||
|
||||
<footer> </footer>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
<li th:classappend="${module == 'reviews' ? 'active' : ''}"><a href="/reviews.html" th:href="@{/reviews.html}"><span class="glyphicon glyphicon-star"> Reviews</a></li>
|
||||
|
||||
<li th:classappend="${module == 'error' ? 'active' : ''}"><a href="/oops" th:href="@{/oops}" ><span class="glyphicon glyphicon-warning-sign"> Errors</a></li>
|
||||
<li th:classappend="${module == 'map' ? 'active' : ''}"><a href="/map.html" th:href= "@{/map.html}"><span class = "glyphicon glyphicon-map-marker " > Map</a></li>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
10
src/main/resources/templates/fragments/map.html
Normal file
10
src/main/resources/templates/fragments/map.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'map')}">
|
||||
|
||||
<body>
|
||||
<h2>Map</h2>
|
||||
<p>We are currently curating our Map.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
53
src/main/resources/templates/map.html
Normal file
53
src/main/resources/templates/map.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'doctors')}">
|
||||
|
||||
<body>
|
||||
<h2>Map</h2>
|
||||
<p>We are currently curating our Map</p>
|
||||
|
||||
<table id="doctors" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Address</th>
|
||||
<th>City</th>
|
||||
<th>State</th>
|
||||
<th>Specialties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="doctor : ${doctors.doctorList}">
|
||||
<td th:text="${doctor.firstName + ' ' + doctor.lastName}"></td>
|
||||
<td th:text="${doctor.address}"></td>
|
||||
<td th:text="${doctor.city}"></td>
|
||||
<td th:text="${doctor.state}"></td>
|
||||
<td><span th:each="specialty : ${doctor.specialties}"
|
||||
th:text="${specialty.name + ' '}" /> <span
|
||||
th:if="${doctor.nrOfSpecialties == 0}">none</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button onclick="displayAddresses()">Click me</button>
|
||||
|
||||
<script type="text/javascript" th:inline="javascript">
|
||||
function displayAddresses()
|
||||
{
|
||||
var dlist = /*[[${doctors.doctorList}]]*/;
|
||||
var d = "";
|
||||
for (i = 0; i < dlist.length; i++)
|
||||
{
|
||||
d = dlist[i];
|
||||
console.log(d);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
106
src/main/resources/templates/mapList.html
Normal file
106
src/main/resources/templates/mapList.html
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'map')}">
|
||||
|
||||
<body>
|
||||
|
||||
<h2 style="background-color: white; position: centered;">Map</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="usr">Your Address</label>
|
||||
<input type="text" class="form-control" id="usr">
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a onclick ="displayAddresses()" class="btn btn-primary">See Doctors</a>
|
||||
<a onclick="displayPatient()" class="btn btn-primary">See Your Address</a>
|
||||
</div>
|
||||
|
||||
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfrxRUJL-3gcMNhoiOeu85oB69PkbvgMc&callback=initial">
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" th:inline="javascript" >
|
||||
|
||||
var map;
|
||||
var geocoder;
|
||||
|
||||
function initial() {
|
||||
|
||||
geocoder= new google.maps.Geocoder();
|
||||
var latlng = new google.maps.LatLng(43.0731, -89.4012);
|
||||
var mapOptions = {
|
||||
zoom: 8,
|
||||
center: latlng
|
||||
}
|
||||
map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function displayAddresses()
|
||||
{
|
||||
var dlist = /*[[${doctors.doctorList}]]*/;
|
||||
var d = "";
|
||||
for (i = 0; i < dlist.length; i++)
|
||||
{
|
||||
d = dlist[i].address.concat(", ").concat(dlist[i].city).concat(", ").concat(dlist[i].state);
|
||||
console.log(d);
|
||||
geocoder.geocode( { 'address': d}, function(results, status) {
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
map: map, position: results[0].geometry.location});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
function displayPatient()
|
||||
{
|
||||
var alpha = document.getElementById('usr').value;
|
||||
geocoder.geocode( { 'address': alpha}, function(results, status) {
|
||||
map.setCenter(results[0].geometry.location);
|
||||
var marker = new google.maps.Marker({
|
||||
map: map, position: results[0].geometry.location});
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div id="map" ></div>
|
||||
<style>
|
||||
/* Always set the map height explicitly to define the size of the div
|
||||
* element that contains the map. */
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
/* Optional: Makes the sample page fill the window. */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{fragments/layout :: layout (~{::body},'parents')}">
|
||||
th:replace="~{fragments/layout :: layout (~{::body},'parents')}" >
|
||||
|
||||
<body onload="codeAddress()">
|
||||
|
||||
|
|
@ -136,6 +137,8 @@
|
|||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
function codeAddress() {
|
||||
var address1 = /*[[${parent.address}]]*/;
|
||||
var city = (/*[[${parent.city}]]*/);
|
||||
|
|
@ -147,6 +150,7 @@
|
|||
var address = addressHelpHelp.concat(state);
|
||||
console.log(/*[[${parent.state}]]*/)
|
||||
console.log(/*[[${parent.address}]]*/);
|
||||
|
||||
geocoder.geocode( { 'address': address}, function(results, status) {
|
||||
if (status == 'OK') {
|
||||
map.setCenter(results[0].geometry.location);
|
||||
|
|
@ -221,12 +225,13 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div id="map" ></div>
|
||||
<!-- <p th:text="${doctors.doctorList}" /> -->
|
||||
|
||||
|
||||
<style>
|
||||
|
|
@ -243,6 +248,13 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue