How can I do calculation based on other fields in thymeleaf? - spring

Question

I am working with Spring boot, Spring-data, ThymeLeaf. I have some fields. "Passenger Name", "Age", "Source", "Destination", "No of tickets", "Ticket Price", "Discount".
The following html code:
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="passengerName1" data-th-classappend="${#fields.hasErrors('passengerName')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="passengerName" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_passengerName}">passengerName</label>
<div class="col-md-3">
<input id="passengerName" name="passengerName" data-th-value="*{{passengerName}}" type="text" class="form-control inputmask" placeholder="passengerName" data-th-placeholder="#{label_ticketbooking_passengerName}" data-toggle="tooltip" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="age-field" data-th-classappend="${#fields.hasErrors('age')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="age" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_age}">age</label>
<div class="col-md-3">
<input id="age" name="age" data-th-value="*{{age}}" type="text" class="form-control inputmask" placeholder="age" data-th-placeholder="#{label_ticketbooking_age}" data-toggle="tooltip" data-inputmask-alias="numeric" data-inputmask-digits="0" min="1" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="source1" data-th-classappend="${#fields.hasErrors('source')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="source" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_source}">source</label>
<div class="col-md-3">
<input id="source" name="source" data-th-value="*{{source}}" type="text" class="form-control inputmask" placeholder="source" data-th-placeholder="#{label_ticketbooking_source}" data-toggle="tooltip" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="destination1" data-th-classappend="${#fields.hasErrors('destination')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="destination" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_destination}">destination</label>
<div class="col-md-3">
<input id="destination" name="destination" data-th-value="*{{destination}}" type="text" class="form-control inputmask" placeholder="destination" data-th-placeholder="#{label_ticketbooking_destination}" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="noOfTickets-field" data-th-classappend="${#fields.hasErrors('noOfTickets')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="noOfTickets" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_noOfTickets}">noOfTickets</label>
<div class="col-md-3">
<input id="noOfTickets" name="noOfTickets" data-th-value="*{{noOfTickets}}" type="text" class="form-control inputmask" placeholder="noOfTickets" data-th-placeholder="#{label_ticketbooking_noOfTickets}" data-toggle="tooltip" aria-describedby="noOfTicketsStatus" data-inputmask-alias="numeric" data-inputmask-digits="0" min="1" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="ed99c550" id="ticketPrice-field" data-th-classappend="${#fields.hasErrors('ticketPrice')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="ticketPrice" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_ticketPrice}">ticketPrice</label>
<div class="col-md-3">
<input id="ticketPrice" name="ticketPrice" data-th-value="*{{ticketPrice}}" type="text" class="form-control inputmask" placeholder="ticketPrice" data-th-placeholder="#{label_ticketbooking_ticketPrice}" data-toggle="tooltip" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="d1a1d590" id="ticketdiscount-field" data-th-classappend="${#fields.hasErrors('ticketDiscount')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="ticketDiscount" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_ticketdiscount}">ticketDiscount</label>
<div class="col-md-3">
<input id="ticketDiscount" name="ticketDiscount" data-th-value="*{{ticketDiscount}}" type="text" class="form-control inputmask" placeholder="ticketDiscount" data-th-placeholder="#{label_ticketbooking_ticketdiscount}" data-toggle="tooltip" data-inputmask-alias="numeric" data-inputmask-digits="0" />
</div>
</div>
<div class="form-group has-error has-feedback" data-z="ed99c550" id="totalPrice-field" data-th-classappend="${#fields.hasErrors('totalPrice')}? 'has-error has-feedback'" data-th-class="form-group">
<label for="totalPrice" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_totalPrice}">totalPrice</label>
<div class="col-md-3">
<input id="totalPrice" name="totalPrice" data-th-value="*{{totalPrice}}" type="text" class="form-control inputmask" placeholder="totalPrice" data-th-placeholder="#{label_ticketbooking_totalPrice}" data-toggle="tooltip" />
</div>
</div>
Here totalPrice should be calculated based on totalPrice = (noOfTickets * ticketPrice ) - ticketDiscount
Note: ticketDiscount may applicable or not. If applicable need to minus else no need to subtract it.
How can I achieve this?

Answer 1

There are several things you should take into account and several approaches you can use. Lets simplify things a little bit and suppose you have
Form DTO
#Data
public class TestDto {
private int ticketPrice;
private int noOfTickets;
private int ticketDiscount;
}
and Controller
#Controller
public class TestController {
#RequestMapping(name = "/", method = RequestMethod.GET)
public ModelAndView get() {
TestDto dto = new TestDto();
dto.setNoOfTickets(10);
dto.setTicketPrice(12);
return new ModelAndView("main", "dto", dto);
}
#RequestMapping(name = "/", method = RequestMethod.POST)
public String post(#ModelAttribute("dto") TestDto dto) {
System.out.println(dto);// can process input values
return "main";
}
}
Important. I assume you haveth:object="${dto}" in you form. If you don't, then just use dto.fieldName instead of fieldName like dto.ticketPrice instead of ticketPrice and $ instead of *
Option 1. Use Thymeleaf syntax. totalPrice will change after each form submit (POST request)
<form action="/" th:object="${dto}" method="post">
<input type="number" th:id="ticketPrice" th:field="*{ticketPrice}"/>
<input type="number" th:id="noOfTickets" th:field="*{noOfTickets}"/>
<input type="number" th:id="ticketDiscount" th:field="*{ticketDiscount}"/>
<span th:text="*{noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0)}"
th:id="totalPrice"/>
<input type="submit" value="Subscribe!"/>
</form>
Option 2. Calculate value in java code POST changes to the server is also required to update the total value. Simple case can just use method with all the calculations in your DTO. This option works only if you have all the info for your calculations in this DTO
public class TestDto {
// ... same code as before
public int getTotalPrice() {
return noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0);
}
}
This is easy to use just like any other field in your dto
<span th:text="*{totalPrice}"></span>
<span th:text="${dto.totalPrice}"></span>
<span th:text="*{getTotalPrice()}"></span>
If you need some extra info for your calculations, you probably can use service as suggested by #mrtasln. And for our simple case it can look like:
#Service("myService")
public class MyServices {
// Option 1
public int calculateTotal(MyDto dto){
return dto.getNoOfTickets() * dto.getTicketPrice() - (dto.getTicketDiscount() != 0 ? dto.getTicketDiscount(): 0);
}
// Option 2
public int calculateTotal2(int noOfTickets, int ticketPrice, int ticketDiscount){
return noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0);
}
}
And xml part can be something like one of:
<span th:id="totalPriceFromService"
th:text="${#myService.calculateTotal(dto)}"></span>
<span th:id="totalPriceFromService2"
th:text="*{#myService.calculateTotal2(ticketPrice, noOfTickets, ticketDiscount)}"></span>
<span th:id="totalPriceFromService2"
th:with="tp=*{ticketPrice},nt=*{noOfTickets},td=*{ticketDiscount}"
th:text="${#myService.calculateTotal2(tp, nt, td)}"></span>
Option 3. The Javascript way is the only dynamic option to calculate changes. No need to perform POST to update the total value.
You can use some library to help you there, but simple case should
Define some JavaScript function like calculateTotal()
Put oninput="calculateTotal()" attribute on each input field you want to listen
Something like this:
<form action="/" th:object="${dto}" method="post">
<input type="number" th:id="ticketPrice" th:field="*{ticketPrice}" oninput="calculateTotal()"/>
<input type="number" th:id="noOfTickets" th:field="*{noOfTickets}" oninput="calculateTotal()"/>
<input type="number" th:id="ticketDiscount" th:field="*{ticketDiscount}" disabled="disabled"/>
<span th:id="totalPriceJS"></span>
<input type="submit" value="Subscribe!"/>
</form>
<script type="text/javascript">
function calculateTotal() {
var price = document.getElementById("ticketPrice").value;
var quantity = document.getElementById("noOfTickets").value;
var discount = document.getElementById("ticketDiscount").value;
var totalInput = document.getElementById("totalPriceJS");
//do all the calculations here
var total = price * quantity
if (discount) total -= discount;
totalInput.innerHTML = total
}
calculateTotal(); // don't forget to call this function on the first run
</script>

Answer 2

Try this calculation:
<div th: "${ticketDiscount !=null} ? result=${noOfTickets * totalPrice - ticketDiscount } : result=${noOfTickets * totalPrice}">
<span th:text="${result}"></span>
</div>
Here I am checking the value of ticketdiscount is null or not.

Answer 3

In Spring , you can do it with using service.Example code below :
Service class :
#Component("calculateService")
public class CalculateService {
public Integer calculateTotalPrice(Integer noOfTickets ,Integer ticketPrice, Integer ticketDiscount ){
return (noOfTickets * ticketPrice ) - ticketDiscount;
}
}
Html File :
<span th:text="${#calculateService.calculateTotalPrice(noOfTickets ,ticketPrice ,ticketDiscount)}"></span>