How to change status bar color in django html based on variable value

Question

I'm making a django project that gets some data from an API and then renders it in a table.
I have this html table, one of the cells is

<td>{{status}}</td>

where status is the status of a service running on a remote server. Started or stopped. Its contained within an html for loop so that each row is generated dynamically based on the data results. Currently the way the table is set up the status is just simply displayed in the table as plain text "Started" or "Stopped". I would like to replace that with a progress bar instead of the text. something like

 <td><progress value="100" max="100" style="background-color:green; width:60px; height:20px" ></progress></td>

However I want the bar to be red if the status is stopped and green is the status is started. Is there any way to do this? I know python decently but I don't really have any front end experience. Any help would be greatly appreciated.

Thanks!

AnkurJat · Accepted Answer · 2017-07-23 17:34:36Z

1

Use django's templating language to do this. Below is a sample

<td><progress value="100" max="100" style="background-color:{% if status == 'started' %}green{% elif status == 'stopped' %}red{% endif %}; width:60px; height:20px" ></progress></td>

answered Jul 23, 2017 at 17:34

AnkurJat

4143 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cory Madden · Accepted Answer · 2017-07-23 17:29:12Z

0

I suggest you make two different css styles. One for status-start and one for status-stop. Let's say they look like this:

.status-start{
    background-color:green; 
    width:60px; 
    height:20px;
}

.status-stop{
    color: red;
    width:60px; 
    height:20px;
}

 <td><progress value="100" max="100" class={% if status == 'start' %}"status-start"{% else %}"status-stop"{%endif%} ></progress></td>

answered Jul 23, 2017 at 17:29

Cory Madden

5,23327 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to change status bar color in django html based on variable value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related