Django generate bootstrap tabs with for loop

Question

I have a page in my web app with multiple tables, and rather than have them on separate pages or one long list, I want to use tabs and I need to be able to generate these tabs based on how many objects there are.

I'm pretty certain it's just a problem with the template, but I'll include all the other files just in case.

Here are the models relevant to the problem.

class Exercises(models.Model):
    exercise = models.CharField(max_length=45)
    evolution = models.CharField(max_length=8)
    start_date = models.DateTimeField(blank=True, null=True)
    end_date = models.DateTimeField(blank=True, null=True)
    logo = models.TextField(blank=True, null=True)

    class Meta:
        constraints = [
            models.UniqueConstraint(
                fields=['exercise', 'evolution'], name='exercise_evolution_UNIQUE')
        ]

    def __str__(self):
        return f"Exercise: {self.exercise}	 Evolution: {self.evolution}"


class Units(models.Model):
    uic = models.CharField(max_length=10)
    unit_name = models.CharField(unique=True, max_length=45)
    mcc = models.CharField(max_length=5, blank=True, null=True)
    ruc = models.CharField(max_length=10, blank=True, null=True)
    personnel = models.IntegerField(blank=True, null=True)

    class Meta:
        constraints = [
            models.UniqueConstraint(
                fields=['uic', 'mcc', 'ruc'], name='uic_mcc_ruc_UNIQUE')
        ]

    def __str__(self):
        return f"{self.unit_name}"

    def get_uic(self):
        return f'{self.uic}'

class ExercisePersonnel(models.Model):
    exercise = models.ForeignKey('Exercises', models.CASCADE)
    unit = models.ForeignKey('Units', models.CASCADE)
    location = models.ForeignKey('Locations', models.RESTRICT)
    quantity = models.IntegerField()

    def __str__(self):
        return f'{self.unit}'

class UnitEdl(models.Model):
    unit = models.ForeignKey('Units', models.CASCADE)
    equipment = models.ForeignKey('Equipment', models.CASCADE)
    quantity = models.IntegerField()

    class Meta:
        constraints = [
            models.UniqueConstraint(
                fields=['unit', 'equipment'], name='unit_equipment_UNIQUE')

I have functions that use database objects to create additional data that shows up in the tables

functions.py

def get_class_one_chow(pax=1, meals_per_day=2):
    cases_per_day =  pax * meals_per_day / 12
    pallets = cases_per_day / 48
    short_tons = pallets * 1098 / 2000
    twenty_ft_teus = pallets / 16
    ugrs_pallets = (pax * 2) / 50 / 8
    mres_pallets = pax / 12 / 48
    ugrs_short_tons = (ugrs_pallets * 1071 / 2000) + (mres_pallets * 1098 / 2000)
    ugr_twenty_ft_teus = (ugrs_pallets + mres_pallets) / 16

    return {"cases":round(cases_per_day,1),
            "pallets":round(pallets,1),
            "short_tons":round(short_tons,1),
            "twenty_ft_teus":round(twenty_ft_teus,1),
            "ugrs_pallets":round(ugrs_pallets,1),
            "mres_pallets":round(mres_pallets,1),
            "ugrs_short_tons":round(ugrs_short_tons,1),
            "ugr_twenty_ft_teus":round(ugr_twenty_ft_teus,1)
            }


def get_class_one_water_bottled(pax=1, planning_factor=2):
    min_gallons = pax * planning_factor
    min_bottles = (min_gallons * 3.785) * 2
    min_cases = min_bottles / 24
    min_pallets = min_cases / 72
    min_short_tons = min_pallets * 2182 / 2000
    twenty_ft_teus =  min_pallets / 16

    return {"gallons":round(min_gallons,1),
            "bottles":round(min_bottles,1), 
            "cases":round(min_cases,1), 
            "pallets":round(min_pallets,1), 
            "short_tons":round(min_short_tons,1), 
            "twenty_ft_teus":round(twenty_ft_teus,1)
            }



def get_class_one_water_bulk(pax=1, planning_factor=1):
    min_gallons = pax * planning_factor
    min_short_tons = (min_gallons * 8.34) / 2000

    return {"gallons":round(min_gallons,1),
            "short_tons":round(min_short_tons,1) 
            }

This is used in the views

def exercise_detail(request, pk, *args, **kwargs):
    ex_name = Exercises.objects.get(pk=pk)
    ex_personnel = ExercisePersonnel.objects.filter(exercise_id=pk)
    planners = ExercisePermissions.objects.filter(exercise=pk)
    user_list = MlptUsers.objects.order_by('email')
    unit_list_planner = Units.objects.order_by('unit_name')
    unit_list, chow_list, bottled_water_list, bulk_water_list = {}, {}, {}, {}

    # generate dictionaries so you can parse in template
    for unit in ex_personnel:
        unit_list[f"{unit}"] = unit.quantity
        chow_list[f"{unit}"] = get_class_one_chow(pax=unit.quantity)
        bottled_water_list[f"{unit}"] = get_class_one_water_bottled(
            pax=unit.quantity)
        bulk_water_list[f"{unit}"] = get_class_one_water_bulk(
            pax=unit.quantity)

    context = {
        'ex_name': ex_name,
        'chow_list': chow_list,
        'bottled_water_list': bottled_water_list,
        'bulk_water_list': bulk_water_list,
        'unit_list': unit_list,
        'planners': planners,
        'user_list': user_list,
        'unit_list_planner': unit_list_planner,
    }

    return render(request, 'exercise/exercise_detail.html', context)

However, I can't get the tabs working correctly in the template.

I can create the tables and use a for loop to create a new line for each key in the dictionary "unit_list" which displays all the info, but I don't want it in one place, which looks like this.


  PLANNING DATA
  numbers are per day


  {% for key,value in unit_list.items %}
  
    
  
  {% endfor %}


  
    
      

        
          CLASS I - WATER (BOTTLED)
          
        

            {%for key, value in bottled_water_list.items %}
             
            {%endfor%}
          
          
            
              UNIT
              GAL
              BTL
              CASES
              PLTS
              STONS
              20TEUS
            
          
          
              {{key}}
              {{value.gallons}}
              {{value.bottles}}
              {{value.cases}}
              {{value.pallets}}
              {{value.short_tons}}
              {{value.twenty_ft_teus}}
            
        
      
    
    
      CLASS I - WATER (BULK)
      
    

        {%for key, value in bulk_water_list.items %}
         
        {%endfor%}
      
      
        
          UNIT
          GAL
          STONS
        
      
      
          {{key}}
          {{value.gallons}}
          {{value.short_tons}}
        
    
  

    
      CLASS I - CHOW
      
        

            {%for key, value in chow_list.items %}
             
            {%endfor%}
          
          
            
              UNIT
              CASES
              PLTS
              STONS
              20TEUS
              UGR PLTS
              MRE PLTS
              UGR STON
              UGR 20TEUS
            
          
          
              {{key}}
              {{value.cases}}
              {{value.pallets}}
              {{value.short_tons}}
              {{value.twenty_ft_teus}}
              {{value.ugrs_pallets}}
              {{value.mres_pallets}}
              {{value.ugrs_short_tons}}
              {{value.ugr_twenty_ft_teus}}

This is the template and how I've been attempting to accomplish the same thing with separate tabs.


  PLANNING DATA
  numbers are per day


  {% for key,value in unit_list.items %}
  
    
  
  {% endfor %}


  {% for key,value in unit_list.items %}
  
    
      

        
          CLASS I - WATER (BOTTLED)
          
        
          
            
              UNIT
              GAL
              BTL
              CASES
              PLTS
              STONS
              20TEUS
            
          
          
            
              {{key}}
              {{value.gallons}}
              {{value.bottles}}
              {{value.cases}}
              {{value.pallets}}
              {{value.short_tons}}
              {{value.twenty_ft_teus}}
            
          
        
      
    
    
      CLASS I - WATER (BULK)
      
    
      
        
          UNIT
          GAL
          STONS
        
      
      
        
          {{key}}
          {{value.gallons}}
          {{value.short_tons}}
        
      
    
  

    
      CLASS I - CHOW
      
        
          
            
              UNIT
              CASES
              PLTS
              STONS
              20TEUS
              UGR PLTS
              MRE PLTS
              UGR STON
              UGR 20TEUS
            
          
          
            
              {{key}}
              {{value.cases}}
              {{value.pallets}}
              {{value.short_tons}}
              {{value.twenty_ft_teus}}
              {{value.ugrs_pallets}}
              {{value.mres_pallets}}
              {{value.ugrs_short_tons}}
              {{value.ugr_twenty_ft_teus}}
              
             
          
                       
      
    
      
    
  
  {%endfor%}

This is the source code of the webpage when I run it.


  PLANNING DATA
  numbers are per day


  
  
    
  
  
  
    
  
  


  
  
    
      

        
          CLASS I - WATER (BOTTLED)
          
        
          
            
              UNIT
              GAL
              BTL
              CASES
              PLTS
              STONS
              20TEUS
            
          
          
            
              31st MEU
              
              
              
              
              
              
            
          
        
      
    
    
      CLASS I - WATER (BULK)
      
    
      
        
          UNIT
          GAL
          STONS
        
      
      
        
          31st MEU
          
          
        
      
    
  

    
      CLASS I - CHOW
      
        
          
            
              UNIT
              CASES
              PLTS
              STONS
              20TEUS
              UGR PLTS
              MRE PLTS
              UGR STON
              UGR 20TEUS
            
          
          
            
              31st MEU
              
              
              
              
              
              
              
              
              
             
          
                       
      
    
      
    
  
  
  
    
      

        
          CLASS I - WATER (BOTTLED)
          
        
          
            
              UNIT
              GAL
              BTL
              CASES
              PLTS
              STONS
              20TEUS
            
          
          
            
              7th Comm Bn
              
              
              
              
              
              
            
          
        
      
    
    
      CLASS I - WATER (BULK)
      
    
      
        
          UNIT
          GAL
          STONS
        
      
      
        
          7th Comm Bn
          
          
        
      
    
  

    
      CLASS I - CHOW
      
        
          
            
              UNIT
              CASES
              PLTS
              STONS
              20TEUS
              UGR PLTS
              MRE PLTS
              UGR STON
              UGR 20TEUS
            
          
          
            
              7th Comm Bn

So none of the data populates into the tables when I use the for loop in this way and the html for the tables is greyed out when I inspect it, and clicking the tabs does not make it appear.

It looks like thisenter image description here

I believe this means I am somehow not successfully linking the tab id to the tab content id even though the ids match and I also don't know how the context is passed when I run the for loop on individual tables, but not the whole thing.

Django generate bootstrap tabs with for loop

0 Answers