I am using Flask WTF to display the results of a database query, but I would like to change the color of the cell background to light red if the value is less than 25. I am not certain how and where to insert the javascript to test the cell value and change the CSS class for that data cell. At present I can change the whole column data to bootstrap class "bg-danger", but not one cell.
Here is a simplified version of the python code:
import os
import logging
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_table import Table, Col
app = Flask(__name__)
bootstrap = Bootstrap(app)
moment = Moment(app)
class damLevel(object):
def __init__(self, Dam, PercentFull):
self.Dam = Dam
self.PercentFull = PercentFull
class damTable(Table):
classes = ['table', 'table-bordered', 'table-striped']
Dam = Col('Dam')
PercentFull = Col(name='PercentFull',attr='PercentFull', td_html_attrs={'class':'bg-danger'})
@app.route('/', methods=['GET'])
def index():
damData = [damLevel('Boulder', '85'),
damLevel('FishPond', '7')]
damForm=damTable(damData)
return render_template('damlevels.html', damForm=damForm)
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))
Here is the HTML template:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}DamLevels{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Dam Levels</h1>
</div>
<div class="container" >
<form action="" method="get" class="form" role="form">
<div class="row" style="width:32em">
{{ damForm }}
</div>
<div class="row">
<a href="/">Return</a>
</div>
</form>
</div>
{% endblock %}
I managed to get this to work by iterating within Jinja2 as follows:
import os
import logging
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_table import Table, Col
from flask_wtf import FlaskForm
app = Flask(__name__)
bootstrap = Bootstrap(app)
moment = Moment(app)
app.config['SECRET_KEY'] = 'NobodyCanGuessThisKey'
class damLevel(object):
def __init__(self, Dam, PercentFull):
self.Dam = Dam
self.PercentFull = PercentFull
class damTable(Table):
classes = ['table', 'table-bordered', 'table-striped']
Dam = Col('Dam')
PercentFull = Col('PercentFull')
@app.route('/', methods=['GET'])
def index():
damData = [damLevel('Boulder', '85'),
damLevel('FishPond', '7')]
damForm=damTable(damData)
print ("damForm type :",type(damData))
return render_template('damlevels.html', form=damData)
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))
HTML Template:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}DamLevels{% endblock %}
{% block page_content %}
<table id="data" class="table table-striped" style="width:16em">
<thead>
<tr>
<th>Dam</th>
<th class="text-right">PercentFull</th>
</tr>
</thead>
<tbody>
{% for damItem in form %}
<tr>
<td>{{ damItem.Dam }}</td>
<td>
{% set number = damItem.PercentFull | float %}
{% if number < 25.0 -%}
<p class="bg-danger text-right">{{ damItem.PercentFull }}</p>
{% else -%}
<p class="text-right">{{ damItem.PercentFull }}</p>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}