Setting dynamic css class using filter in django

Setting dynamic css class using filter in django
=============================
How to set dynamic css class using filter in django

----------------------------- description

if you have a dict like { 'T': 'todo-type', 'ME': 'message-type' ...}
you can just use a filter like
timeline.type|timeline_type_class
which returns
timeline_type_map[timeline_type]
now
the next problem is
if you define this mapping near the filter
you know have two different places where the list of timeline types are kept
it will be easier to code if they are in a single place
so its better to place this in models.py
something like:
TYPE_MAP = [ ('M', ['Milestone', 'milestone-type']), ..... ]
then, you can generate the TYPE_CHOICES like this
[ (x[0], y[0]) for x,y in TYPE_MAP]
and you can generate the needed data for filter by doing
dict([ (x[0], y[1]) for x,y in TYPE_MAP])
we did all this code, simply for the reason that, we now have only a single place to edit, if we need to add more types
otherwise, we have to edit all over the place

------------------ in model

class Event(models.Model):

TYPE_MAP = [ ('TL', ['Todolist', 'todolist-type']),
('T', ['Todo', 'todo-type']),
('P', ['Project', 'project-type']),
('C', ['Category', 'category-type']),
('A', ['Activity', 'activity-type']),
('PM', ['Milestone', 'member-type']),
('MS', ['Mockupset', 'mockupset-type']),
('MU', ['Mockup', 'mockup-type']),
('M', ['Milestone', 'milestone-type']),
('MIC', ['Comment-Mi', 'milestone-comment-type']),
('ME', ['Message', 'message-type']),
('MEC', ['Comment-Me', 'message-comment-type']),
('TK', ['Ticket', 'ticket-type']),
('TKC', ['Comment-Tk', 'ticket-comment-type']),
]


TYPE_CHOICES = [(x, y[0]) for x,y in TYPE_MAP]


TYPE_ACTIONS = (
('A', 'Added'),
('U', 'Updated'),
('D', 'Deleted'),
('C', 'Completed'),
('R', 'Reassigned'),
('CL', 'Closed'),
)

type = models.CharField(max_length=3, choices=TYPE_CHOICES)
description = models.TextField()
created_on = models.DateTimeField()
done_by = models.ForeignKey(User)
project = models.ForeignKey(Project)
action = models.CharField(max_length=2, choices=TYPE_ACTIONS)
url = models.URLField()
objects = EventManager()

------------------ in tag file (/templatetags/filename.py)

@register.filter
def timeline_type_class(type):
#print dict(Event.TYPE_CHOICES)
type_choices = [(x, y[1]) for x,y in Event.TYPE_MAP]
for x in type_choices:
if type == x[0]:
return x[1]


------------------ in template

<ul>
{% for timeline in timelines %}
<li>
<span class="{{ timeline.type|timeline_type_class }} type">
{{ timeline.get_type_display }}
</span>
<span class="action">{{ timeline.get_action_display }} <a href="{{timeline.url}}">{{ timeline.description }}</a></span>
<span class="name">{{ timeline.get_action_display }} by {{ timeline.done_by }}</span>
</li>
{% endfor %}
</ul>

------------------ in css file

span.todo-type {
background-color: #C87800;
}

span.milestone-type {
background-color: #5F6E43;
}

span.message-type {
background-color: #334E7D;
}

span.comments-type {
background-color: #6493AC;
}

span.todolist-type {
background-color: #5493AC;
}

span.member-type {
background-color: #3493AC;
}

span.activity-type {
background-color: #8493AC;
}

span.category-type {
background-color: #6000AC;
}

span.mockup-type {
background-color: maroon;
}

span.mockupset-type {
background-color: orange;
}

span.project-type {
background-color: #AC7981;
}

span.ticket-type {
background-color: #107A81;
}

span.message-comment-type {
background-color: #BA7A81;
}

span.milestone-comment-type {
background-color: #CF7A11;
}

span.ticket-comment-type {
background-color: #CF0AA1;
}

span.type {
display: block;
float: left;
width: 70px;
text-align: right;
color: #FFFFFF;
padding: 2px 5px 2px 2px;
margin-bottom: 3px;
}


------------------ Note

1)

TYPE_CHOICES = [(x, y[0]) for x,y in TYPE_MAP] <------------

* This code create a list of touples.
* Type print TYPE_CHOICES to list of touples like below.

output look like:

[
('TL', 'Todolist'),
('T', 'Todo'),
('P', 'Project'),
('C', 'Category'),
('A', 'Activity'),
('PM', 'Milestone'),
('MS', 'Mockupset'),
('MU', 'Mockup'),
('M', 'Milestone'),
('MIC', 'Comment-Mi'),
('ME', 'Message'),
('MEC', 'Comment-Me'),
('TK', 'Ticket'),
('TKC', 'Comment-Tk')
]


2)

* Use dict() method to convert list of tuples to dictionary.

dict([(x, y[0]) for x,y in TYPE_MAP]) <------------
or
TYPE_CHOICES = [(x, y[0]) for x,y in TYPE_MAP]
dict(TYPE_CHOICES)

output look like:

{
'A': 'Activity',
'ME': 'Message',
'C': 'Category',
'TKC': 'Comment-Tk',
'MEC': 'Comment-Me',
'MIC': 'Comment-Mi',
'M': 'Milestone',
'MU': 'Mockup',
'P': 'Project',
'TL': 'Todolist',
'T': 'Todo',
'MS': 'Mockupset',
'TK': 'Ticket',
'PM': 'Milestone'
}


3)

TYPE_CHOICES = [(x, y[1]) for x,y in TYPE_MAP] <------------
print TYPE_CHOICES

output look like:

[
('TL', 'todolist-type'),
('T', 'todo-type'),
('P', 'project-type'),
('C', 'category-type'),
('A', 'activity-type'),
('PM', 'member-type'),
('MS', 'member-type'),
('MU', 'member-type'),
('M', 'milestone-type'),
('MIC', 'milestone-comment-type'),
('ME', 'message-type'),
('MEC', 'message-comment-type'),
('TK', 'member-type'),
('TKC', 'member-type')
]


------------------


**************************************************************