Newbee wants to create a nested template

Using Django Templates & Frontend
1

Hi

I have data like this:

id, week, date, shift_title
id, week, date, shift_title
id, week, date, shift_title
ect.

I want to represent this like this:

Week 1
date 1
shift_title
date 2
shift_title

Week 2
date 3
shift_title 3
date 4
shift_title 4

etc.

I will use grid or flex css.

Can anyone suggest an approach to do this?
As said I’m a newbee. Some pointing in the right direction would be helpfull

nb. database connection, models, views, templates are working allready

2

Can you provide a little more detail about the data you’re working with? You’re referencing a “Week 1”, “date 1” in your sample display but they don’t match anything you’re showing in how your data exists.

You mention that you have your models working already, it would be extremely helpful if you post the actual model and view you have so far.

3

Thanks Ken,
I wanted to keep it simple.

This is the main model. The models/tables with ForeignKeys are there also ofcourse.

class Shift(models.Model):
    status = models.ForeignKey('Status', default=1, on_delete=models.CASCADE)
    shift_title = models.CharField('Shift title', max_length=255)
    function = models.ForeignKey('Function', on_delete=models.CASCADE)
    start_date = models.DateField('Start date')
    start_time = models.TimeField('Start time')
    end_date = models.DateField('End date')
    end_time = models.TimeField('End time')
    site = models.ForeignKey('Site', blank=True, null=True, on_delete=models.CASCADE)
    user = models.ForeignKey('Shiftuser', blank=True, null=True, on_delete=models.CASCADE)

    class Meta:
        ordering = ('start_date', 'start_time')

    def __str__(self):
        return self.shift_title

    def Weeknr(self):
        weeknr = self.start_date.isocalendar()[1]
        return weeknr

Here is my VIEW:

from django.shortcuts import render
from django.http import HttpResponse
from .models import Shift


def index(request):
    shifts = Shift.objects.all()
    return render(request, 'index.html',
                  {'shifts': shifts})

Here a sketch image of what I want to see in my Template

7z-mainscreen
7z-mainscreen1017×765 185 KB

I suppose I need something with nesting data?!

Thanks for getting back to me!

Perry

4

You can perform your queries however necessary to retrieve the desired data. I see no immediate need to think about changing your model.

However, I’m still not seeing how “Week 1” is associated with this data. Do you have a formula to determine what dates are “Week 1”, etc? Are they fixed assignments, or relative to the current page?

Rendering this will be easy, once you’ve identified the pattern. You’ll render something like a div for a week, with the “Week” header at the top. In that same div, you’ll have 7 divs - one per day. At the top of each of those, you’ll have the day/date, then iterate over the blue boxes to be aligned vertically.

As a very rough pseudo-code, it’s going to look something like this:

for week in weeks
  Week 1
  for day in week
    Day/Date
    for event in day
      Event
5

The weeknr is defined from the start_date of the event. Is this way every event (or shift in my case) has an own weeknr. As you mention performing queries and rendering the values for the specific div’s I have to dive in these subjects. Are not familiar with that yet.

Thanks for evaluating my code!