add car number under parking number

FRONTEND/fastparking/finance/migrations/0005_alter_tariff_end_date.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.0.4 on 2024-04-23 18:30
+
+import datetime
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('finance', '0004_alter_tariff_end_date'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='tariff',
+            name='end_date',
+            field=models.DateTimeField(default=datetime.datetime(2999, 12, 31, 23, 59, 59)),
+        ),
+    ]

FRONTEND/fastparking/parking/static/parking/styles.css

@@ -160,3 +160,9 @@ footer .icon {
     width: 20px;
     height: 20px;
 }
+
+.car-num {
+  font-size: small;
+  width: 100px; 
+  text-align: left;
+}

FRONTEND/fastparking/parking/templates/parking/parking_plan.html

@@ -1,35 +1,42 @@
-{% extends "parking/base.html" %} {% block content %} {% load static %}
+{% extends "parking/base.html" %} 
+{% block content %} 
+{% load static %}
 <h2>Plan of parking</h2>
-<h3>Total number of parking spaces: {{ parking_spaces.count }}, including free spaces: {{parking_spaces_count}}</h3>
+<h3>Total number of parking spaces: {{ parking_spaces.count }}, including free spaces: {{ parking_spaces_count }}</h3>
 <div class="progress">
-  <div
-    class="progress-bar"
-    role="progressbar"
-    style="width: {{ parking_progress }}%;"
-    aria-valuenow="{{ parking_progress }}"
-    aria-valuemin="0"
-    aria-valuemax="100"
-  >
+  <div class="progress-bar"
+       role="progressbar"
+       style="width: {{ parking_progress }}%;"
+       aria-valuenow="{{ parking_progress }}"
+       aria-valuemin="0"
+       aria-valuemax="100">
     Filled: {{ parking_progress }}%
   </div>
 </div>
 <div class="container-fluid">
   <div class="row pt-4 mt-3 border rounded bg-light">
     {% for entry in parking_spaces %}
     <div class="col-xl-1 mb-3">
-      <div class="card" style="width: 100%; max-width: 70px">
-        <img
-          class="card-img-top"
-          width="100%"
-          alt="{{entry.number}}"
-          title="{{entry.number}}{% if entry.car_num %} - {{entry.car_num}}{% endif %}"
-          src="{% if entry.status %}{% static 'parking/car-02.png' %}{% else %}{% static 'parking/car-01.png' %}{%endif%}"
-        />
-        <div class="text-center"><p class="card-title">{{entry.number}}</p></div>
+      <div class="card" style="width: 100%; max-width: 80px">
+        {% if entry.status %}
+          <img class="card-img-top"
+               width="100%"
+               alt="{{ entry.number }}"
+               title="{{ entry.number }}-{{ entry.car_num }}"
+               src="{% static 'parking/car-02.png' %}" />
+          <div class="text-center"><p class="car-number">{{ entry.number }}</p></div>
+          <div class="text-left"><p class="car-num">{{ entry.car_num }}</p></div>
+        {% else %}
+          <img class="card-img-top"
+               width="100%"
+               alt="{{ entry.number }}"
+               title="{{ entry.number }}"
+               src="{% static 'parking/car-01.png' %}" />
+          <div class="text-center"><p class="car-number">{{ entry.number }}</p></div>
+        {% endif %}
       </div>
     </div>
     {% endfor %}
   </div>
 </div>
-
 {% endblock %}