I have a list of discgolf rounds for a user, to display them I want an accordion for each course, then as you select the course all rounds for that course are displayed and can be collapsed. I can get the accordion working but the problem is each score is its own accordion. Question should I have a list of a list of rounds, or would just the shown list of rounds work?
Below is my data (getAllRoundsByUserId), my controller with rounds/{id} (id=userId) method and my html.
Data getAllRoundsByUserId (sorry if it looks complicated, a round has a date, total, score (List of Score) and a course(name, record, par, List of Hole)
[Round{roundId=19, course=Course{id=1, name='Legende', holes=[Hole{holeId=37, number=1, par=3}, Hole{holeId=38, number=2, par=3}, Hole{holeId=39, number=3, par=3}, Hole{holeId=40, number=4, par=3}, Hole{holeId=41, number=5, par=3}, Hole{holeId=42, number=6, par=3}, Hole{holeId=43, number=7, par=3}, Hole{holeId=44, number=8, par=3}, Hole{holeId=45, number=9, par=3}], par=27, record=-2}, scores=[Score{scoreId=181, score=2, holePar=3}, Score{scoreId=182, score=4, holePar=3}, Score{scoreId=183, score=4, holePar=3}, Score{scoreId=184, score=2, holePar=3}, Score{scoreId=185, score=3, holePar=3}, Score{scoreId=186, score=2, holePar=3}, Score{scoreId=187, score=3, holePar=3}, Score{scoreId=188, score=3, holePar=3}, Score{scoreId=189, score=3, holePar=3}], roundDate=2023-03-04 00:00:00.0, total=26}, Round{roundId=20, course=Course{id=1, name='Legende', holes=[Hole{holeId=37, number=1, par=3}, Hole{holeId=38, number=2, par=3}, Hole{holeId=39, number=3, par=3}, Hole{holeId=40, number=4, par=3}, Hole{holeId=41, number=5, par=3}, Hole{holeId=42, number=6, par=3}, Hole{holeId=43, number=7, par=3}, Hole{holeId=44, number=8, par=3}, Hole{holeId=45, number=9, par=3}], par=27, record=-2}, scores=[Score{scoreId=190, score=4, holePar=3}, Score{scoreId=191, score=4, holePar=3}, Score{scoreId=192, score=3, holePar=3}, Score{scoreId=193, score=3, holePar=3}, Score{scoreId=194, score=3, holePar=3}, Score{scoreId=195, score=3, holePar=3}, Score{scoreId=196, score=4, holePar=3}, Score{scoreId=197, score=3, holePar=3}, Score{scoreId=198, score=3, holePar=3}], roundDate=2023-03-04 00:00:00.0, total=30}, Round{roundId=21, course=Course{id=2, name='Ilsede', holes=[Hole{holeId=46, number=1, par=3}, Hole{holeId=47, number=2, par=3}, Hole{holeId=48, number=3, par=3}, Hole{holeId=49, number=4, par=3}, Hole{holeId=50, number=5, par=3}, Hole{holeId=51, number=6, par=3}, Hole{holeId=52, number=7, par=3}, Hole{holeId=53, number=8, par=3}, Hole{holeId=54, number=9, par=3}, Hole{holeId=55, number=10, par=3}, Hole{holeId=56, number=11, par=3}, Hole{holeId=57, number=12, par=3}, Hole{holeId=58, number=13, par=4}, Hole{holeId=59, number=14, par=3}, Hole{holeId=60, number=15, par=3}, Hole{holeId=61, number=16, par=3}, Hole{holeId=62, number=17, par=3}, Hole{holeId=63, number=18, par=3}], par=55, record=7}, scores=[Score{scoreId=199, score=3, holePar=3}, Score{scoreId=200, score=3, holePar=3}, Score{scoreId=201, score=3, holePar=3}, Score{scoreId=202, score=4, holePar=3}, Score{scoreId=203, score=3, holePar=3}, Score{scoreId=204, score=3, holePar=3}, Score{scoreId=205, score=2, holePar=3}, Score{scoreId=206, score=3, holePar=3}, Score{scoreId=207, score=3, holePar=3}, Score{scoreId=208, score=4, holePar=3}, Score{scoreId=209, score=3, holePar=3}, Score{scoreId=210, score=3, holePar=3}, Score{scoreId=211, score=2, holePar=3}, Score{scoreId=212, score=3, holePar=3}, Score{scoreId=213, score=3, holePar=3}, Score{scoreId=214, score=4, holePar=3}, Score{scoreId=215, score=3, holePar=3}, Score{scoreId=216, score=2, holePar=3}], roundDate=2023-03-01 00:00:00.0, total=54}]
Controller method
@GetMapping("/rounds/{id}")
public String roundsHome(@PathVariable(value = "id") Long id,
Model model) {
List<Course> courses = courseService.getAllCourses();
List<Round> rounds = userService.getUserById(id).getRounds();
model.addAttribute("courses", courses);
model.addAttribute("rounds", rounds);
return "/discgolf/round/rounds";
}
html
<div class="container">
<div>
<a>Rounds Played</a>
</div>
<div id="accordion">
<div th:each="round : ${rounds}" class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div>
<label>Course: </label>
<label th:text="${round.course.name}"></label>
</div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="d-flex flex-row">
<div class="p-3">
<label>Date: </label>
<label th:text="${#dates.format(round.roundDate, 'dd-MMM-yyyy')}"></label>
</div>
<div class="p-3">
<label>Score: </label>
<label th:text="${round.total - round.course.par}"></label>
</div>
</div>
<br>
<div >
<table id="courseInfo" class="table table-bordered w-auto">
<th:block th:each="course : ${round.course}">
<tr>
<th th:text="${'Hole'}"></th>
<th th:each="hole : ${course.holes}" th:text="${hole.number}"></th>
<th th:text="${'Total'}"></th>
</tr>
<tr>
<td th:text="${'Par'}"></td>
<td th:each="par : ${course.holes}" th:text="${par.par}"></td>
<td th:text="${course.par}"></td>
</tr>
<tr>
<td th:text="${'Score'}"></td>
<th:block th:each="score : ${round.scores}">
<td th:style="${score.score > score.holePar}
? 'background-color: red'
: (${score.score < score.holePar } ? 'background-color: blue'
: 'background-color: #eee' ) " th:text="${score.score}"></td>
</th:block>
<td th:text="${round.total}"></td>
</tr>
</th:block>
</table>
<br>
<a th:href="@{/discgolf/deleteRound/{id}(id=${round.roundId})}" title="Remove Course"
data-target="#deleteRoundModal" class="table-link danger" id="deleteRoundButton" >
<span id="deleteRound" class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-trash-o fa-stack-1x fa-inverse" title="Delete this round"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
So I figured it out with using a Map. For other beginners this is great to learn.
@GetMapping("/rounds/{id}")
public String roundsHome(@PathVariable(value = "id") Long id,
Model model) {
List<Course> courses = courseService.getAllCourses();
List<Round> rounds = userService.getUserById(id).getRounds();
Map<Course, List<Round>> mapRoundsByCourse = rounds.stream().collect(Collectors.groupingBy(Round::getCourse));
model.addAttribute("courses", courses);
model.addAttribute("rounds", mapRoundsByCourse);
return "/discgolf/round/rounds";
}
Then I used the bottom answer here to render in my accordion.