сделал отображение занятых мест (Требуется оптимизация)

CineSync/static/css/includes/film_timtable_card.css

@@ -0,0 +1,70 @@
+.age_limit {
+    margin-left: 1vw;
+    padding: 0.1vw;
+    padding-left: 0.25vw;
+    padding-right: 0.25vw;
+    border: 0.15vw solid #aaaaaa;
+    color: #aaaaaa;
+    font-weight: bold;
+    border-radius: 0.5vw;
+    font-size: 0.7vw;
+}
+.film_card {
+    width: 100%;
+    background-color: #eaeaea;
+    margin-top: 1vw;
+    margin-bottom: 1vw;
+    border-radius: 3vw;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+}
+.film_card_image {
+    object-fit: cover;
+    height: 15vw !important;
+    width: 10vw !important;
+    border-radius: 3vw;
+}
+.film_card_column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-around;
+    height: 10vw;
+    margin-left: 2vw;
+    overflow-x: scroll;
+}
+.film_card_column::-webkit-scrollbar {
+    height: 7px;
+}
+.film_card_column::-webkit-scrollbar-thumb {
+    background-color: #0d1d3a;
+    border-radius: 5vw;
+    border: 1px solid #eaeaea;
+}
+.film_card_title_row {
+    height: 20%;
+    margin-top: 0.5vw;
+    margin-bottom: 0.5vw;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.film_card_row {
+    height: 60%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+.film_card_footer {
+    height: 20%;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}

CineSync/static/css/style.css

@@ -31,70 +31,18 @@
     padding-bottom: 2vw;
     flex-direction: column;
 }
-.film_card {
+.session_time {
-    width: 100%;
+    font-size: 12px;
-    background-color: #eaeaea;
+    color: #eaeaea;
-    margin-top: 1vw;
-    margin-bottom: 1vw;
-    border-radius: 3vw;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-start;
 }
-.film_card_image {
+.genre {
-    object-fit: cover;
+    margin-right: 0.5vw;
-    height: 15vw !important;
-    width: 10vw !important;
-    border-radius: 3vw;
-}
-.film_card_column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-around;
-    height: 10vw;
-    margin-left: 2vw;
-    overflow-x: scroll;
-}
-.film_card_column::-webkit-scrollbar {
-    height: 7px;
-}
-.film_card_column::-webkit-scrollbar-thumb {
-    background-color: #0d1d3a;
-    border-radius: 5vw;
-    border: 1px solid #eaeaea;
-}
-.film_card_title_row {
-    height: 20%;
-    margin-top: 0.5vw;
-    margin-bottom: 0.5vw;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: space-evenly;
-}
-.film_card_row {
-    height: 60%;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    flex-wrap: nowrap;
-}
-.film_card_footer {
-    height: 20%;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: row;
-    flex-wrap: nowrap;
 }
 .film_session {
     background-color: rgb(255, 64, 96);
     color: #eaeaea;
     font-weight: bold;
-    padding: 1vw;
+    padding: 0.5vw;
     padding-top: 1vw;
     padding-bottom: 1vw;
     margin: 0.3vw;
@@ -107,13 +55,6 @@
 .film_session:hover {
     background-color: rgb(196, 47, 72);
 }
-.session_time {
-    font-size: 12px;
-    color: #eaeaea;
-}
-.genre {
-    margin-right: 0.5vw;
-}
 body::-webkit-scrollbar {
     width: 8px;
 }

CineSync/static/css/timetable/session.css

@@ -119,5 +119,5 @@
     font-size: 1.2vw;
 }
 .disabled {
-    background-color: #0d1d3a !important;
+    background-color: #5a5a5a !important;
 }

CineSync/templates/includes/film_timetable_card.html

@@ -1,3 +1,5 @@
+{% load static %}
+<link href="{% static 'css/includes/film_timtable_card.css' %}" rel="stylesheet">
 <div class="film_card">
     {% if film.image %}
     <img src="{{ film.image.url }}" class="d-block w-100 film_card_image film_card_item"
@@ -8,6 +10,7 @@
     <div class="film_card_column">
         <div class="film_card_title_row">
             <label>{{film.name}}</label>
+            <span class="age_limit">{{ film.age_limit }}</span>
         </div>
         <div class="film_card_row">
             {% for time_sessions in session %}

CineSync/templates/timetable/session.html

@@ -34,6 +34,8 @@
             <td class="row_number_cell cell">Ряд {{ forloop.counter }}</td>
             {% for _ in row.column_count|get_range %}
             <td class="cell">
+                {% with column_seat_str=forloop.counter|stringformat:"i" row_seat_str=row.row_number|stringformat:"i" %}
+                {% if column_seat_str|add:"-"|add:row_seat_str in occupied_seats %}
                 <label class="film_session disabled">
                     <input type="checkbox" name="selected_seats"
                            value="[{{ forloop.counter }}, {{ row.row_number }}]" class="seat_checkbox"
@@ -47,6 +49,7 @@
                     <span class="seat_number">{{ forloop.counter }}</span>
                 </label>
                 {% endif %}
+                {% endwith %}
             </td>
             {% endfor %}
         </tr>

CineSync/timetable/views.py

@@ -54,7 +54,7 @@ def session_view(request, sess_id):
     height = round(session.auditorium.rows.count() * 4 + 7)
 
     tickets = Ticket.objects.get_tickets_for_session(session.pk)
-    occupied_seats = [f'{str(ticket.column_number)}{str(ticket.row_number)}' for ticket in tickets]
+    occupied_seats = [f"{str(ticket.row_number)}-{str(ticket.column_number)}" for ticket in tickets]
 
     if request.method == 'POST':
         form = SeatSelectionForm(request.POST, auditorium=session.auditorium)