Choose Slot

After choosing vaccine and campaign, we need to ask users to choose a slot. In this video, we are going to create a page where the user can choose a slot from a list of available slot based on their preferences.

Resources

• choose-slot.html

Views

In the views.py file of vaccination, at first import the Slot model

from campaign.models import Slot

# Now, create a view to choose a slot
class ChooseSlot(LoginRequiredMixin, generic.ListView):
    # At first, we need to specify the name of model for which we are creating ListView
    model = Slot
    # Then, give the name of template
    template_name = "vaccination/choose-slot.html"
    # After that, paginate this view by 10 objects per page
    paginate_by = 10
    # Then set the ordering for the queryset.
    ordering = ["date"]

    # Now, this will will return all the slots instance stored in database. But we want to show the slots which are associated to only a particular campaign which the user has choosed.
    # So, we need to override the queryset in order to filter out slots by campaign
    def get_queryset(self):
      # Import timezone at the top of file
      from django.utils import timezone
      return super().get_queryset().filter(campaign=self.kwargs["campaign_id"], date__gte=timezone.now())
      # here, we will filter campaign by campaign_id which we will get from the url.
      # Also, the date of the slot must be greater than current time.

Templates

Now lets create a template for this view. Create a choose-slot.html file in the vaccination folder of templates.

I have attached choose-slot.html file in the resources section. Please downlaod it and paste its content in this file.

{% extends 'mysite/base.html' %}

{% block title %} 
    <title>Choose Slot</title>
{% endblock title %}

{% block content %}
<div class="mt-3">
  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center">Choose Your Desired Slot</h3>
  </div>
  <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Start Time'</th>
        <th scope="col">End Time</th>
        <th scope="col">Max Capacity</th>
        <th scope="col">Reserved</th>
        <th scope="col">Confirm</th>
      </tr>
    </thead>
    <tbody>
      {% for slot in page_obj %}
      <tr>
        <td>{{ slot.date }}</td>
        <td>{{ slot.start_time }}</td>
        <td>{{ slot.end_time }}</td>
        <td>{{ slot.max_capacity }}</td>
        <td>{{ slot.reserved }}</td>
        <td><a href="#" class="btn-sm btn-outline-primary">Choose</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% include "components/pagination.html" %}

</div>
{% endblock content %}

URLS

Now, lets create a url path to access this view.

path("choose-slot/<int:campaign_id>/", views.ChooseSlot.as_view(), name="choose-slot"),

After that, we need to add this url in the choose-campaign.html

<td><a href="{% url 'vaccination:choose-slot' campaign.id %}" class="btn-sm btn-outline-primary">Select</a></td>

[Run the development server and see the changes]