Django models choice textField mapping

Я создаю веб-сайт для себя Я обновляю свои проекты из админки django Я хотел создать пользовательское поле, которое представляет собой карту выбора (цвет тега) и текст тега.

Я хочу, чтобы это выглядело примерно так

enter image description here

Это моя модель

class Project(models.Model):
    projectTemplate = CloudinaryField('image')
    projectTitle = models.TextField(default="Title ")
    desc = models.TextField(default="not mentioned")
    projectLink = models.URLField(max_length=200, default="not mentioned")
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f'{self.projectTitle} - {self.desc[:15]} ..'

views.py

def projects(request):
    Projects = Project.objects.all()
    return render(request, 'devpage/projects.html',{'Projects': Projects})

Это мой текущий DTL

{% for project in Projects %}
<div class="col">
    <div class="card shadow-sm">
        <img src="{{ project.projectTemplate.url }}" height="225" width="100%">
        <div class="card-body">
            <h6 class="text-center">
                {{ project.projectTitle }}
            </h6>
            <p class="card-text">{{ project.desc }}</p>
            <div class="mb-3">
            <span class="badge rounded-pill bg-secondary">Django</span>
                <span class="badge rounded-pill bg-success">Python</span>

            </div>
            <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-warning btn-outline-secondary"><a
                            href="{{ project.projectLink }}" target="_blank" type="button"
                            class="btn">View</a></button>
                </div>
                <small class="text-muted">{{ project.created_at }}</small>
            </div>
        </div>
    </div>
</div>
{% endfor %}

Мне нужно пользовательское поле модели, которое принимает выбор цвета метки и соответствующий текст с динамическим размером Я пробовал использовать json (теги имени поля), но он не интерактивен

Это JSON DTL

//Inner for loop for tags
<div class="mb-3">
{% for color,text in Project.tags.items %}
    <span class="badge rounded-pill bg-{{ color }}">{{ text }}</span>
{% endfor %}
</div>

Предполагая, что у вас есть Tag модель, которая является ManyToManyField, вы можете просто хранить цвет как атрибут модели.

Ваша модель:

class Tag(models.Model):
    text = models.CharField(max_length=32)
    color = models.CharField(max_length=32, default="bg-success")

class Project(models.Model):
    ...
    tags = models.ManyToManyField(Tag)

Ваш шаблон:

{% for tag in Project.tags %}
    <span class="badge rounded-pill {{ tag.color }}">{{ tag.text }}</span>
{% endfor %}

В будущем можно было бы улучшить этот класс, создав подкласс, который предварительно определяет все цвета.

Вернуться на верх