0

I have a service class as follows:

package com.sample.service;

import org.springframework.stereotype.Service;

@Service
public class TestService {
    
    public int Server() {
        
        int a=90;
        int flag=0;
        if(a>85) {
            flag=1;
            System.out.println(a);
        }else {
            System.out.println(a);
        }
        System.out.println(flag);
        return flag;
    }
    }

And I also have a controller class as follows:

package com.sample.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.sample.service.TestService;

@Controller
public class TestController {
    
    @Autowired
    
    private TestService service;
    
    
    @RequestMapping("/space")
    public String check(Model model) {
        int num=service.Server();
        model.addAttribute("num", num);
        return "index";
        
    }
    

}

Here I am returning a html page called index and "num" is a object which stores the value of the flag, which is in service class.

And html page which I have designed is:

<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<script>
function sb(){
    if(document.getElementId("colorchange").value == "'1'"){
        document.getElementId("buttonDemo").style.background = "red";
    }
    else{
        document.getElementId("buttonDemo").style.background = "green";
    }
}

</script>
<style> 
.container { 
 

  height: 300px;  
  
  position: relative;
  border: 3px solid black; 
}
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


</style>
<title>UI</title>
</head>
<body>

<div id = "colorchange" th:switch="${num}" onchange="sb"> 
  <p th:case="'0'"></p>
  <p th:case="'1'"></p> 
</div>
<div class="container">
  <div class="center">

<button class="button" id="buttonDemo">Flag</button>


</div>
</div>
</body>
</html>

So my requirement is, The value received from the flag which is 0 or 1 Based on this value I need to change the colour of the button. For example if the value received is 0 then the colour of the button must be green or else if the value is 1 the colour of the button should be red. I am using spring boot and html page is based on thymeleaf. Any help would be greatly appreciated Thanks in advance

Banu
  • 1

1 Answers1

0

Modifying style depending on model values with thymeleaf can be done using th:classappend="${num} == 0 ? 'green' : 'red'" and classes in your css. You could also use th:style="'color:' + ${num} == 0 ? 'green' : 'red'" but in my opinion this ends up being less readable in most cases.

Alternativly you can always render completely seperate elements such as you'r doing with the p element in your example

Ralan
  • 651
  • 6
  • 17
  • I have tried the above mentioned code but still when the value is greater than 85 the button colour doesn't change it stays as green. Can you tell me whether I am missing something or not? – Banu Aug 02 '22 at 07:37
  • Might be the use of string values for 0 and 1 in thymeleaf as controller sends ints, modified example to use integers instead. if it's not that i'm not sure – Ralan Aug 02 '22 at 07:42