Slot Detail

In this video, we are going to create Slot Detail page to show the slot informations like date, time, quantity left for that vaccine in that slot.

Resources

• slot-list.html

Views

In the views.py file, lets create a view named "SlotDetailView"

# This view will inherit LoginRequiredMixin, generic.DetailView
class SlotDetailView(LoginRequiredMixin, generic.DetailView):
    # Now, lets specify the model name for which you are creating this view
    model = Slot
    # After that, give the template name for this view.
    template_name = "campaign/slot-detail.html"

Templates

Now, create the slot-detail.html file in the templates folder under campaign.

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

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

{% block content %}
<div class="card mb-3">
  <div class="card-body">
    <h5 class="card-title mb-4"><i class="fas fa-clock"></i> Slot Details</h5>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
       Date
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.date }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
       Start Time
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.start_time }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
       End Time
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.end_time }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
       Max Capacity
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.max_capacity }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
       Reserved
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.reserved }}
      </div>
    </div>

    <div class="row mb-1 btn-container">
      <div class="col-12">

        <button class="btn btn-sm btn-success m-1">
          <a href="#"><i class="fas fa-clock"></i> Schedule</a>
        </button>

        <button class="btn btn-sm btn-success m-1">
          <a href="#"><i class="fas fa-pen"></i> Update Slot</a>
        </button>

        <button class="btn btn-sm btn-danger m-1">
          <a href="#"><i class="fas fa-trash"></i> Delete Slot</a>
        </button>
      </div>
    </div>

  </div>
</div>
{% endblock content %}

URL

Now, lets add a url path for this view.

path("slot/<int:pk>/", views.SlotDetailView.as_view(), name="slot-detail"),

After that, add this url path in the slot-list.html file.

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

[Run the development server and see the changes.]