add some linting and formating ,+ some fixes

This commit is contained in:
ismail 2025-05-22 19:13:40 +03:00
parent 481cda4d3b
commit e5884b2b2c
26 changed files with 2366 additions and 1935 deletions

View File

@ -558,7 +558,7 @@ class CarCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
def get_form(self, form_class=None): def get_form(self, form_class=None):
form = super().get_form(form_class) form = super().get_form(form_class)
dealer = get_user_type(self.request) dealer = get_user_type(self.request)
form.fields["vendor"].queryset = dealer.vendors.all() form.fields["vendor"].queryset = dealer.vendors.filter(active=True)
return form return form
def get_success_url(self): def get_success_url(self):
@ -874,7 +874,7 @@ class CarInventory(LoginRequiredMixin, PermissionRequiredMixin, ListView):
home_label = _("inventory") home_label = _("inventory")
template_name = "inventory/car_inventory.html" template_name = "inventory/car_inventory.html"
context_object_name = "cars" context_object_name = "cars"
paginate_by = 10 paginate_by = 20
ordering = ["receiving_date"] ordering = ["receiving_date"]
permission_required = ["inventory.view_car"] permission_required = ["inventory.view_car"]
@ -969,7 +969,7 @@ class CarListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
model = models.Car model = models.Car
template_name = "inventory/car_list_view.html" template_name = "inventory/car_list_view.html"
context_object_name = "cars" context_object_name = "cars"
paginate_by = 20 paginate_by = 30
permission_required = "inventory.view_car" permission_required = "inventory.view_car"
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
@ -4672,14 +4672,14 @@ class LeadListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
query = self.request.GET.get("q") query = self.request.GET.get("q")
dealer = get_user_type(self.request) dealer = get_user_type(self.request)
qs = models.Lead.objects.filter(dealer=dealer) qs = models.Lead.objects.filter(dealer=dealer)
if query:
qs = apply_search_filters(qs, query)
if self.request.is_dealer: if self.request.is_dealer:
return qs return qs
staffmember = getattr(self.request.user, "staffmember", None) staffmember = getattr(self.request.user, "staffmember", None)
if staffmember and getattr(staffmember, "staff", None): if staffmember and getattr(staffmember, "staff", None):
qs = qs.filter(staff=staffmember.staff) qs = qs.filter(staff=staffmember.staff)
if query: return models.Lead.objects.none()
return apply_search_filters(qs, query)
return qs
class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView): class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):

View File

@ -3,12 +3,12 @@
{% block content %} {% block content %}
<div class="row mt-4"> <div class="row mt-4">
<h5 class="text-center">{% trans "Add Colors" %}</h5> <h5 class="text-center">{% trans "Add Colors" %}</h5>
<p class="text-center">{% trans "Select exterior and interior colors for" %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p> <p class="text-center">
{% trans "Select exterior and interior colors for" %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}
</p>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
<!-- Exterior Colors -->
<!-- Exterior Colors -->
<div class="row g-4"> <div class="row g-4">
<p class="fs-5 mb-0">{% trans 'Exterior Colors' %}</p> <p class="fs-5 mb-0">{% trans 'Exterior Colors' %}</p>
{% for color in form.fields.exterior.queryset %} {% for color in form.fields.exterior.queryset %}
@ -19,7 +19,8 @@
type="radio" type="radio"
name="exterior" name="exterior"
value="{{ color.id }}"> value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});"> <div class="card-body color-display"
style="background-color: rgb({{ color.rgb }})">
<div class=""> <div class="">
<small>{{ color.get_local_name }}</small> <small>{{ color.get_local_name }}</small>
</div> </div>
@ -28,8 +29,7 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
<!-- Interior Colors -->
<!-- Interior Colors -->
<p class="fs-5 mt-3 mb-0">{% trans 'Interior Colors' %}</p> <p class="fs-5 mt-3 mb-0">{% trans 'Interior Colors' %}</p>
{% for color in form.fields.interior.queryset %} {% for color in form.fields.interior.queryset %}
<div class="col-lg-4 col-xl-2"> <div class="col-lg-4 col-xl-2">
@ -39,7 +39,8 @@
type="radio" type="radio"
name="interior" name="interior"
value="{{ color.id }}"> value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});"> <div class="card-body color-display"
style="background-color: rgb({{ color.rgb }})">
<div class=""> <div class="">
<small>{{ color.get_local_name }}</small> <small>{{ color.get_local_name }}</small>
</div> </div>
@ -49,17 +50,13 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<!-- Save and Cancel Buttons -->
<!-- Save and Cancel Buttons -->
{% comment %} <div class="row g-1 mt-4"> {% comment %} <div class="row g-1 mt-4">
<div class="btn-group"> <div class="btn-group">
<button type="submit" class="btn btn-sm btn-success me-1"><i class="fa-solid fa-floppy-disk"></i>{% trans "Save" %}</button> <button type="submit" class="btn btn-sm btn-success me-1"><i class="fa-solid fa-floppy-disk"></i>{% trans "Save" %}</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban"></i>{% trans "Cancel" %}</a> <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban"></i>{% trans "Cancel" %}</a>
</div> </div>
</div> {% endcomment %} </div> {% endcomment %}
{% comment %} <div class="row justify-content-center g-1 mt-4"> {% comment %} <div class="row justify-content-center g-1 mt-4">
<div class="col-auto"> <div class="col-auto">
<div class="btn-group shadow-sm"> <div class="btn-group shadow-sm">
@ -68,16 +65,14 @@
</div> </div>
</div> </div>
</div> {% endcomment %} </div> {% endcomment %}
<div class="d-flex justify-content-center mt-4"> <div class="d-flex justify-content-center mt-4">
<button class="btn btn-sm btn-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button> <button class="btn btn-sm btn-success me-2" type="submit">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a> <i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}
</button>
<a href="{{ request.META.HTTP_REFERER }}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
</div> </div>
</form> </form>
</div> </div>
<style> <style>
.color-card { .color-card {
cursor: pointer; cursor: pointer;

View File

@ -1,7 +1,8 @@
{% load i18n %} {% load i18n %}
{% load crispy_forms_filters %} {% load crispy_forms_filters %}
<form method="post"
<form method="post" id="customCardForm" action="{% url 'add_custom_card' car.slug %}"> id="customCardForm"
action="{% url 'add_custom_card' car.slug %}">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
<div class="d-flex gap-1"> <div class="d-flex gap-1">

View File

@ -1,13 +1,10 @@
<!-- templates/cars/car_confirm_delete.html --> <!-- templates/cars/car_confirm_delete.html -->
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% block title %}Delete Car{% endblock %} {% block title %}Delete Car{% endblock %}
{% block content %} {% block content %}
<h1>Delete Car</h1> <h1>Delete Car</h1>
<p>Are you sure you want to delete the car "{{ car }}"?</p> <p>Are you sure you want to delete the car "{{ car }}"?</p>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-danger">Confirm Delete</button> <button type="submit" class="btn btn-danger">Confirm Delete</button>

File diff suppressed because it is too large Load Diff

View File

@ -1,19 +1,24 @@
{% extends 'base.html' %} {% load crispy_forms_filters %} {% load i18n %} {% load custom_filters %} {% block title %} {% trans 'Edit Car' %} {% endblock %} {% block content %} {% extends 'base.html' %}
<div class="row"> {% load crispy_forms_filters %}
<div class="card rounded shadow mt-3"> {% load i18n %}
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Edit Car' %}</p> {% load custom_filters %}
<div class="card-body"> {% block title %}
<form method="post" class="needs-validation" novalidate> {% trans 'Edit Car' %}
{% csrf_token %} {{ form|crispy }} {% endblock %}
<!-- Save and Back Buttons --> {% block content %}
<div class="d-flex justify-content-center mt-4 ms-2"> <div class="row">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Back" %}</a> <div class="card rounded shadow mt-3">
<button type="submit" class="btn btn-sm btn-success ms-2"> <p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Edit Car' %}</p>
{% trans 'Save' %} <div class="card-body">
</button> <form method="post" class="needs-validation" novalidate>
</div> {% csrf_token %} {{ form|crispy }}
</form> <!-- Save and Back Buttons -->
</div> <div class="d-flex justify-content-center mt-4 ms-2">
</div> <a href="{{ request.META.HTTP_REFERER }}" class="btn btn-sm btn-danger">{% trans "Back" %}</a>
</div> <button type="submit" class="btn btn-sm btn-success ms-2">{% trans 'Save' %}</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %} {% endblock %}

View File

@ -2,36 +2,30 @@
{% load crispy_forms_filters %} {% load crispy_forms_filters %}
{% load i18n %} {% load i18n %}
{% load custom_filters %} {% load custom_filters %}
{% block title %}
{% block title %}{% trans "Car Finance Details" %}{% endblock %} {% trans "Car Finance Details" %}
{% endblock %}
{% block content %} {% block content %}
<div class="row p-4"> <div class="row p-4">
<p class="mb-4">{% trans "Finance Details for" %} <p class="mb-4">
{% trans "Finance Details for" %}
{{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }} {{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }}
</p> </p>
<!-- Display Validation Errors -->
<!-- Display Validation Errors -->
{% if form.errors %} {% if form.errors %}
<div class="alert alert-danger"> <div class="alert alert-danger">
<ul> <ul>
{% for field in form %} {% for field in form %}
{% for error in field.errors %} {% for error in field.errors %}<li>{{ field.label }}: {{ error }}</li>{% endfor %}
<li>{{ field.label }}: {{ error }}</li>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %} {% endfor %}
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
</ul> </ul>
</div> </div>
{% endif %} {% endif %}
<form method="post" class="needs-validation" novalidate> <form method="post" class="needs-validation" novalidate>
<div class="row g-1"> <div class="row g-1">
<div class="col-lg-4 col-xl-12"> <div class="col-lg-4 col-xl-12">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
</div> </div>
</div> </div>
@ -42,26 +36,15 @@
</div> </div>
</div> {% endcomment %} </div> {% endcomment %}
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button class="btn btn-sm btn-success me-2" type="submit">
<button class="btn btn-sm btn-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i> <i class="fa-solid fa-floppy-disk me-1"></i>
<!--<i class="bi bi-save"></i> --> <!--<i class="bi bi-save"></i> -->
{{ _("Save") }} {{ _("Save") }}
</button> </button>
<a href="{{ request.META.HTTP_REFERER }}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
</div> </div>
</form> </form>
</div> </div>
<!-- JavaScript Section -->
<!-- JavaScript Section -->
{% endblock %} {% endblock %}

View File

@ -1,5 +1,7 @@
{% extends "base.html" %} {% load i18n static custom_filters %} {% block content %} {% extends "base.html" %}
<style> {% load i18n static custom_filters %}
{% block content %}
<style>
#video { #video {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
@ -10,296 +12,297 @@
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
</style> </style>
<!-- JavaScript Section -->
<!-- JavaScript Section --> <script src="{% static 'vendors/zxing/index.min.js' %}"></script>
<script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script>
<script src="{% static 'vendors/zxing/index.min.js' %}"></script> {% if not vendor_exists %}
<script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script> <div class="alert alert-outline-warning d-flex align-items-center"
{% if not vendor_exists %} role="alert">
<div class="alert alert-outline-warning d-flex align-items-center" role="alert"> <i class="fa-solid fa-circle-info fs-6"></i>
<i class="fa-solid fa-circle-info fs-6"></i> <p class="mb-0 flex-1">{{ _("Please Add A Vendor, Before Adding A Car .") }}</p>
<p class="mb-0 flex-1">{{ _("Please Add A Vendor, Before Adding A Car .") }}</p> <button class="btn-close"
<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button> type="button"
</div> data-bs-dismiss="alert"
{% endif %} aria-label="Close"></button>
<div class=" container-fluid m-0 {% if not vendor_exists %}disabled{% endif %}"> </div>
<form method="post" id="carForm" class="form needs-validation" novalidate> {% endif %}
{% csrf_token %} <div class=" container-fluid m-0 {% if not vendor_exists %}disabled{% endif %}">
{% include 'partials/form_errors.html' %} <form method="post" id="carForm" class="form needs-validation" novalidate>
<div class="d-flex flex-column"> {% csrf_token %}
<div class="d-flex flex-column flex-sm-grow-1 p-0"> {% include 'partials/form_errors.html' %}
<div class="row g-4"> <div class="d-flex flex-column">
<h3 class="mb-3">{% trans 'Add Car' %}</h3> <div class="d-flex flex-column flex-sm-grow-1 p-0">
<!-- VIN --> <div class="row g-4">
<div class="col-lg-12 col-xl-6"> <h3 class="mb-3">{% trans 'Add Car' %}</h3>
<div class="card bg-body mb-3"> <!-- VIN -->
<div class="card-body"> <div class="col-lg-12 col-xl-6">
<div class="form-floating"> <div class="card bg-body mb-3">
<input type="text" <div class="card-body">
class="form-control form-control-sm" <div class="form-floating">
id="{{ form.vin.id_for_label }}" name="{{ form.vin.html_name }}" required/> <input type="text"
<label for="{{ form.vin.id_for_label }}">{% trans 'VIN' %}</label> class="form-control form-control-sm"
</div> id="{{ form.vin.id_for_label }}"
<div class="input-group input-group-sm my-2"> name="{{ form.vin.html_name }}"
<button type="button" required />
class="btn btn-phoenix-warning rounded-start" <label for="{{ form.vin.id_for_label }}">{% trans 'VIN' %}</label>
id="scan-vin-btn" </div>
data-bs-toggle="modal" <div class="input-group input-group-sm my-2">
data-bs-target="#scannerModal"> <button type="button"
<span class="fas fa-camera fs-9"></span> class="btn btn-phoenix-warning rounded-start"
</button> id="scan-vin-btn"
<button type="button" class="btn btn-sm btn-phoenix-primary rounded-end ms-1" id="decodeVinBtn"> data-bs-toggle="modal"
<span class="fas fa-search fs-9 fw-bolder"></span> data-bs-target="#scannerModal">
</button> <span class="fas fa-camera fs-9"></span>
</div> </button>
<button type="button"
<div class="row mt-2"> class="btn btn-sm btn-phoenix-primary rounded-end ms-1"
<div class="col-md-6"> id="decodeVinBtn">
<div class="form-floating"> <span class="fas fa-search fs-9 fw-bolder"></span>
<span class="text-success fw-bold" id="year-check"></span> </button>
<input type="number" </div>
class="form-control form-control-sm" <div class="row mt-2">
id="{{ form.year.id_for_label }}" <div class="col-md-6">
name="{{ form.year.html_name }}" /> <div class="form-floating">
<label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label> <span class="text-success fw-bold" id="year-check"></span>
</div> <input type="number"
class="form-control form-control-sm"
id="{{ form.year.id_for_label }}"
name="{{ form.year.html_name }}" />
<label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label>
</div>
</div>
<div id="serie-row" class="col-md-6">
<div class="form-floating">
<select class="form-select form-select-sm"
id="{{ form.id_car_serie.id_for_label }}"
name="{{ form.id_car_serie.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
<label for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}</label>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6" id="make-row">
<div class="form-floating">
<span class="text-success fw-bold" id="make-check"></span>
{{ form.id_car_make|default:'Select' }}
<label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
</div>
</div>
<div class="col-md-6" id="trim-row">
<div class="form-floating">
<select class="form-select form-select-sm"
id="{{ form.id_car_trim.id_for_label }}"
name="{{ form.id_car_trim.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
<label for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}</label>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6" id="model-row">
<div class="form-floating">
<span class="text-success fw-bold" id="model-check"></span>
<select class="form-select form-select-sm"
id="{{ form.id_car_model.id_for_label }}"
name="{{ form.id_car_model.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
<label for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}</label>
</div>
<div class="badge badge-phoenix fs-11 badge-phoenix-success m-1"
id="generation-div"></div>
</div>
<div class="col-4 align-items-center">
<button type="button"
class="btn btn-sm btn-phoenix-success p-1"
id="specification-btn"
data-bs-toggle="modal"
data-bs-target="#specificationsModal"
disabled>{% trans 'specifications'|capfirst %}</button>
<button type="button"
class="btn btn-sm btn-phoenix-warning p-1"
id="options-btn"
data-bs-toggle="modal"
data-bs-target="#equipmentOptionsModal"
disabled>{% trans 'options'|capfirst %}</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="serie-row" class="col-md-6"> <div class="row g-3">
<div class="form-floating"> <div class="col-xl-6">
<select class="form-select form-select-sm" <div class="row">
id="{{ form.id_car_serie.id_for_label }}" <!--Vendor Field-->
name="{{ form.id_car_serie.html_name }}"> <div class="col-lg-4 col-xl-4">
<option value="">{% trans 'Select' %}</option> <div class="card bg-body my-1">
</select> <div class="card-body">
<label for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}</label> <div class="form-floating">
</div> {{ form.vendor|add_class:"form-select form-select-sm" }}
<label for="{{ form.vendor.id_for_label }}" class="form-label">{% trans 'Vendor' %}</label>
</div>
</div>
</div>
</div>
<!-- Stock Type Card -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-1">
<div class="card-body">
<div class="form-floating">
{{ form.stock_type|add_class:"form-select form-select-sm" }}
<label for="{{ form.stock_type.id_for_label }}">{% trans 'Stock Type'|capfirst %}</label>
</div>
</div>
</div>
</div>
<!-- Mileage Card -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-1">
<div class="card-body">
<div class="form-floating">
{{ form.mileage|add_class:"form-control form-control-sm" }}
<label for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}</label>
</div>
</div>
</div>
</div>
<!-- Receiving Date Field -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-3">
<div class="card-body">
<div class="form-floating">
{{ form.receiving_date|add_class:"form-control form-control-sm" }}
<label for="{{ form.receiving_date.id_for_label }}" class="form-label">{% trans 'Receiving Date' %}:</label>
</div>
</div>
</div>
</div>
<!-- Remarks Card -->
<div class="col-lg-4 col-xl-8">
<div class="card bg-body my-3">
<div class="card-body">
<div class="form-floating">
{{ form.remarks|add_class:"form-control form-control-sm" }}
<label for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
</div>
</div>
</div>
</div>
</div>
<!--Save Buttons-->
<div class="btn-group">
<button type="submit"
name="add_another"
value="true"
class="btn btn-sm btn-phoenix-success me-1">
{% trans "Save and Add Another" %}
</button>
<button type="submit"
name="go_to_stats"
value="true"
class="btn btn-sm btn-phoenix-primary">
{% trans "Save and Go to Inventory" %}
</button>
</div>
</div>
</div> </div>
</div>
<div class="row mt-2">
<div class="col-md-6" id="make-row">
<div class="form-floating">
<span class="text-success fw-bold" id="make-check"></span>
{{ form.id_car_make|default:'Select' }}
<label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
</div>
</div>
<div class="col-md-6" id="trim-row">
<div class="form-floating">
<select class="form-select form-select-sm"
id="{{ form.id_car_trim.id_for_label }}"
name="{{ form.id_car_trim.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
<label for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}</label>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6" id="model-row">
<div class="form-floating">
<span class="text-success fw-bold" id="model-check"></span>
<select class="form-select form-select-sm"
id="{{ form.id_car_model.id_for_label }}"
name="{{ form.id_car_model.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
<label for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}</label>
</div>
<div class="badge badge-phoenix fs-11 badge-phoenix-success m-1" id="generation-div"></div>
</div>
<div class="col-4 align-items-center">
<button type="button"
class="btn btn-sm btn-phoenix-success p-1"
id="specification-btn"
data-bs-toggle="modal"
data-bs-target="#specificationsModal"
disabled>
{% trans 'specifications'|capfirst %}
</button>
<button type="button"
class="btn btn-sm btn-phoenix-warning p-1"
id="options-btn"
data-bs-toggle="modal"
data-bs-target="#equipmentOptionsModal"
disabled>{% trans 'options'|capfirst %}
</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </form>
<div class="row g-3"> <!--Specification Modal-->
<div class="col-xl-6"> <div class="modal fade"
<div class="row"> id="specificationsModal"
tabindex="-1"
<!--Vendor Field--> aria-labelledby="specificationsModalLabel"
<div class="col-lg-4 col-xl-4"> aria-modal="true"
<div class="card bg-body my-1"> role="dialog">
<div class="card-body"> <div class="modal-dialog modal-md">
<div class="form-floating"> <div class="modal-content overflow-hidden">
{{ form.vendor|add_class:"form-select form-select-sm" }} <div class="modal-header position-relative">
<label for="{{ form.vendor.id_for_label }}" class="form-label"> <h5 class="modal-title" id="specificationsModalLabel">
{% trans 'Vendor' %} <span class="ms-3 my-5">{% trans 'specifications'|capfirst %}</span><span class="ms-1 fw-light">{{ _("Details") }}</span>
</label> </h5>
</div> <button class="btn btn-circle project-modal-btn position-absolute end-0 top-0 mt-3 me-3 bg-body-emphasis"
data-bs-dismiss="modal">
<span class="fa-solid fa-xmark text-body dark__text-gray-100"></span>
</button>
</div> </div>
</div> <div class="modal-body">
</div> <div id="specificationsContent"></div>
<!-- Stock Type Card -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-1">
<div class="card-body">
<div class="form-floating">
{{ form.stock_type|add_class:"form-select form-select-sm" }}
<label for="{{ form.stock_type.id_for_label }}">
{% trans 'Stock Type'|capfirst %}
</label>
</div>
</div> </div>
</div> <div class="modal-footer">
</div> <button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
<!-- Mileage Card -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-1">
<div class="card-body">
<div class="form-floating">
{{ form.mileage|add_class:"form-control form-control-sm" }}
<label for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}</label>
</div>
</div> </div>
</div>
</div> </div>
<!-- Receiving Date Field -->
<div class="col-lg-4 col-xl-4">
<div class="card bg-body my-3">
<div class="card-body">
<div class="form-floating">
{{ form.receiving_date|add_class:"form-control form-control-sm" }}
<label for="{{ form.receiving_date.id_for_label }}"
class="form-label">
{% trans 'Receiving Date' %}:
</label>
</div>
</div>
</div>
</div>
<!-- Remarks Card -->
<div class="col-lg-4 col-xl-8">
<div class="card bg-body my-3">
<div class="card-body">
<div class="form-floating">
{{ form.remarks|add_class:"form-control form-control-sm" }}
<label for="{{ form.remarks.id_for_label }}">
{% trans 'Remarks'|capfirst %}:
</label>
</div>
</div>
</div>
</div>
</div>
<!--Save Buttons-->
<div class="btn-group">
<button type="submit" name="add_another" value="true" class="btn btn-sm btn-phoenix-success me-1">
{% trans "Save and Add Another" %}
</button>
<button type="submit" name="go_to_stats" value="true" class="btn btn-sm btn-phoenix-primary">
{% trans "Save and Go to Inventory" %}
</button>
</div>
</div> </div>
</div>
</div> </div>
</div> <!--equipments and options Modal-->
</form> <div class="modal fade"
id="equipmentOptionsModal"
<!--Specification Modal--> tabindex="-1"
<div class="modal fade" aria-labelledby="equipmentOptionsModalLabel"
id="specificationsModal" aria-modal="true"
tabindex="-1" role="dialog">
aria-labelledby="specificationsModalLabel" <div class="modal-dialog modal-md">
aria-modal="true" <div class="modal-content overflow-hidden">
role="dialog"> <div class="modal-header position-relative">
<div class="modal-dialog modal-md"> <h5 class="modal-title" id="equipmentOptionsModalLabel">{% trans 'Options'|capfirst %}</h5>
<div class="modal-content overflow-hidden"> <button type="button"
<div class="modal-header position-relative"> class="btn-close"
<h5 class="modal-title" id="specificationsModalLabel"> data-bs-dismiss="modal"
<span class="ms-3 my-5">{% trans 'specifications'|capfirst %}</span><span class="ms-1 fw-light">{{ _("Details") }}</span> aria-label="{% trans 'Close' %}"></button>
</h5> </div>
<button class="btn btn-circle project-modal-btn position-absolute end-0 top-0 mt-3 me-3 bg-body-emphasis" data-bs-dismiss="modal"> <div class="modal-body">
<span class="fa-solid fa-xmark text-body dark__text-gray-100"></span> <div class="col-lg-4 col-xl-3">
</button> <div class="card h-100">
</div> <div class="card-body" id="equipment-container">
<div class="modal-body"> <label class="form-label" for="equipment_id">{% trans 'equipment'|capfirst %}:</label>
<div id="specificationsContent"></div> <select class="form-select form-select-sm"
</div> id="equipment_id"
<div class="modal-footer"> name="equipment_name_id">
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button> <option value="">{% trans 'Select' %}</option>
</div> </select>
</div> </div>
</div> </div>
</div> </div>
<div id="optionsContent"></div>
<!--equipments and options Modal--> </div>
<div class="modal fade" <div class="modal-footer">
id="equipmentOptionsModal" <button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
tabindex="-1" </div>
aria-labelledby="equipmentOptionsModalLabel"
aria-modal="true"
role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content overflow-hidden">
<div class="modal-header position-relative">
<h5 class="modal-title" id="equipmentOptionsModalLabel">
{% trans 'Options'|capfirst %}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
</div>
<div class="modal-body">
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body" id="equipment-container">
<label class="form-label" for="equipment_id">
{% trans 'equipment'|capfirst %}:
</label>
<select class="form-select form-select-sm"
id="equipment_id"
name="equipment_name_id">
<option value="">{% trans 'Select' %}</option>
</select>
</div> </div>
</div>
</div> </div>
<div id="optionsContent"></div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div> </div>
</div> <!--Scanner Modal-->
</div> <div class="modal fade"
id="scannerModal"
<!--Scanner Modal--> tabindex="-1"
<div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel"> aria-labelledby="scannerModalLabel">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-top-3"> <div class="modal-content rounded-top-3">
<div class="modal-header rounded-top-3 shadow"> <div class="modal-header rounded-top-3 shadow">
<h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5> <h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button> <button type="button"
</div> class="btn-close"
<div class="modal-body text-center"> data-bs-dismiss="modal"
<video id="video" autoplay playsinline></video> aria-label="{{ _("Close") }}"></button>
<p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p> </div>
<button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button> <div class="modal-body text-center">
</div> <video id="video" autoplay playsinline>
</video>
<p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
<button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
<script>
</div>
<script>
function getCookie(name) { function getCookie(name) {
let cookieValue = null; let cookieValue = null;
if (document.cookie && document.cookie !== "") { if (document.cookie && document.cookie !== "") {
@ -630,6 +633,5 @@
titleText: msg, titleText: msg,
}); });
} }
</script> </script>
{% endblock %} {% endblock %}

View File

@ -1,5 +1,7 @@
{% extends "base.html" %} {% load i18n static custom_filters %} {% block content %} {% extends "base.html" %}
<style> {% load i18n static custom_filters %}
{% block content %}
<style>
#video { #video {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
@ -9,341 +11,293 @@
.modal-dialog { .modal-dialog {
max-width: 95%; max-width: 95%;
} }
</style> </style>
{% include 'partials/form_errors.html' %} {% include 'partials/form_errors.html' %}
<!-- JavaScript Section -->
<!-- JavaScript Section --> <script src="https://unpkg.com/@zxing/library@latest"></script>
<script src="https://unpkg.com/@zxing/library@latest"></script> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script> <div class="container-lg">
<form method="post" id="carForm" class="form needs-validation" novalidate>
<div class="container-lg"> {% csrf_token %}
<form method="post" id="carForm" class="form needs-validation" novalidate> <div class="d-flex flex-column min-vh-100">
{% csrf_token %} <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
<div class="d-flex flex-column min-vh-100"> <main class="d-grid gap-4 p-1">
<div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4"> <div class="row g-4">
<main class="d-grid gap-4 p-1"> <!-- VIN -->
<div class="row g-4"> <div class="col-lg-12 col-xl-12">
<!-- VIN --> <div class="card h-100 border-1 rounded shadow">
<div class="col-lg-12 col-xl-12"> <div class="card-body">
<div class="card h-100 border-1 rounded shadow"> <label class="form-label" for="{{ form.vin.id_for_label }}">{% trans 'VIN' %}:</label>
<div class="card-body"> <div class="input-group input-group-sm">
<label class="form-label" for="{{ form.vin.id_for_label }}"> <button type="button"
{% trans 'VIN' %}: class="btn btn-phoenix-warning fs-8 rounded-start"
</label> id="scan-vin-btn"
<div class="input-group input-group-sm"> data-bs-toggle="modal"
<button type="button" data-bs-target="#scannerModal">
class="btn btn-phoenix-warning fs-8 rounded-start" <span class="fas fa-camera"></span>
id="scan-vin-btn" </button>
data-bs-toggle="modal" <input type="text"
data-bs-target="#scannerModal"> class="form-control form-control-sm"
<span class="fas fa-camera"></span> id="{{ form.vin.id_for_label }}"
</button> name="{{ form.vin.html_name }}" />
<input type="text" <button type="button"
class="form-control form-control-sm" class="btn btn-sm btn-phoenix-primary rounded-end"
id="{{ form.vin.id_for_label }}" name="{{ form.vin.html_name }}" /> id="decodeVinBtn">{% trans 'Search' %}</button>
<button type="button" class="btn btn-sm btn-phoenix-primary rounded-end" id="decodeVinBtn"> </div>
{% trans 'Search' %} {% if form.vin.errors %}<div class="text-danger small">{{ form.vin.errors|striptags }}</div>{% endif %}
</button> </div>
</div> </div>
{% if form.vin.errors %} </div>
<div class="text-danger small"> <!-- Year Card -->
{{ form.vin.errors|striptags }} <div class="col-lg-4 col-xl-3">
</div> <div class="card h-100">
{% endif %} <div class="card-body" id="year-container">
</div> <label class="form-label" for="{{ form.year.id_for_label }}">{% trans 'Year' %}:</label>
</div> <span class="text-success fw-bold" id="year-check"></span>
</div> <input type="number"
<!-- Year Card --> class="form-control form-control-sm"
<div class="col-lg-4 col-xl-3"> id="{{ form.year.id_for_label }}"
<div class="card h-100"> name="{{ form.year.html_name }}" />
<div class="card-body" id="year-container"> {% if form.year.errors %}<div class="text-danger small">{{ form.year.errors|striptags }}</div>{% endif %}
<label class="form-label" for="{{ form.year.id_for_label }}"> </div>
{% trans 'Year' %}: </div>
</label> </div>
<span class="text-success fw-bold" id="year-check"></span> <!-- Makes Card -->
<input type="number" <div class="col-lg-4 col-xl-3">
class="form-control form-control-sm" <div class="card h-100">
id="{{ form.year.id_for_label }}" <div id="make-container" class="card-body">
name="{{ form.year.html_name }}" /> <div class="status"></div>
{% if form.year.errors %} <label class="form-label" for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}:</label>
<div class="text-danger small"> <span class="text-success fw-bold" id="make-check"></span>
{{ form.year.errors|striptags }} {{ form.id_car_make|add_class:"form-select form-select-sm" }}
</div> {% if form.id_car_make.errors %}
{% endif %} <div class="text-danger small">{{ form.id_car_make.errors|striptags }}</div>
</div> {% endif %}
</div> </div>
</div> </div>
<!-- Makes Card --> </div>
<div class="col-lg-4 col-xl-3"> <!-- Models Card -->
<div class="card h-100"> <div class="col-lg-4 col-xl-3">
<div id="make-container" class="card-body"> <div class="card h-100">
<div class="status"></div> <div id="model-container" class="card-body">
<label class="form-label" for="{{ form.id_car_make.id_for_label }}"> <label class="form-label" for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}:</label>
{% trans 'make'|capfirst %}: <span class="text-success fw-bold" id="model-check"></span>
</label> <select class="form-select form-select-sm"
<span class="text-success fw-bold" id="make-check"></span> id="{{ form.id_car_model.id_for_label }}"
{{ form.id_car_make|add_class:"form-select form-select-sm" }} {% if form.id_car_make.errors %} name="{{ form.id_car_model.html_name }}">
<div class="text-danger small"> <option value="">{% trans 'Select' %}</option>
{{ form.id_car_make.errors|striptags }} </select>
</div> {% if form.id_car_model.errors %}
{% endif %} <div class="text-danger small">{{ form.id_car_model.errors|striptags }}</div>
</div> {% endif %}
</div> </div>
</div> </div>
</div>
<!-- Models Card --> <!-- Series Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div id="model-container" class="card-body"> <div class="card-body" id="serie-container">
<label class="form-label" for="{{ form.id_car_model.id_for_label }}"> <label class="form-label" for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}:</label>
{% trans 'model'|capfirst %}: <select class="form-select form-select-sm"
</label> id="{{ form.id_car_serie.id_for_label }}"
<span class="text-success fw-bold" id="model-check"></span> name="{{ form.id_car_serie.html_name }}">
<select class="form-select form-select-sm" <option value="">{% trans 'Select' %}</option>
id="{{ form.id_car_model.id_for_label }}" </select>
name="{{ form.id_car_model.html_name }}"> {% if form.id_car_serie.errors %}
<option value="">{% trans 'Select' %}</option> <div class="text-danger small">{{ form.id_car_serie.errors|striptags }}</div>
</select> {% endif %}
{% if form.id_car_model.errors %} <div class="badge-phoenix-primary" id="generation-div"></div>
<div class="text-danger small"> </div>
{{ form.id_car_model.errors|striptags }} </div>
</div> </div>
{% endif %} <!-- Trims Card -->
</div> <div class="col-lg-4 col-xl-3">
</div> <div class="card h-100">
</div> <div class="card-body" id="trim-container">
<label class="form-label" for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}:</label>
<!-- Series Card --> <select class="form-select form-select-sm"
<div class="col-lg-4 col-xl-3"> id="{{ form.id_car_trim.id_for_label }}"
<div class="card h-100"> name="{{ form.id_car_trim.html_name }}">
<div class="card-body" id="serie-container"> <option value="">{% trans 'Select' %}</option>
<label class="form-label" for="{{ form.id_car_serie.id_for_label }}"> </select>
{% trans 'Series' %}: {% if form.id_car_trim.errors %}
</label> <div class="text-danger small">{{ form.id_car_trim.errors|striptags }}</div>
<select class="form-select form-select-sm" {% endif %}
id="{{ form.id_car_serie.id_for_label }}" </div>
name="{{ form.id_car_serie.html_name }}"> </div>
<option value="">{% trans 'Select' %}</option> </div>
</select>
{% if form.id_car_serie.errors %}
<div class="text-danger small">
{{ form.id_car_serie.errors|striptags }}
</div>
{% endif %}
<div class="badge-phoenix-primary" id="generation-div"></div>
</div>
</div>
</div>
<!-- Trims Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body" id="trim-container">
<label class="form-label" for="{{ form.id_car_trim.id_for_label }}">
{% trans 'trim'|capfirst %}:
</label>
<select class="form-select form-select-sm"
id="{{ form.id_car_trim.id_for_label }}"
name="{{ form.id_car_trim.html_name }}">
<option value="">{% trans 'Select' %}</option>
</select>
{% if form.id_car_trim.errors %}
<div class="text-danger small">
{{ form.id_car_trim.errors|striptags }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="row g-4">
<!-- Vendor Field -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<div class="form-group">
<label for="{{ form.vendor.id_for_label }}" class="form-label">
{% trans 'Vendor' %}:
</label>
{{ form.vendor|add_class:"form-select form-select-sm" }}
</div>
{% if form.vendor.errors %}
<div class="text-danger small">
{{ form.vendor.errors|striptags }}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Stock Type Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<label class="form-label" for="{{ form.stock_type.id_for_label }}">
{% trans 'Stock Type'|capfirst %}:
</label>
{{ form.stock_type|add_class:"form-select form-select-sm" }} {% if form.stock_type.errors %}
<div class="text-danger small">
{{ form.stock_type.errors|striptags }}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Mileage Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<label class="form-label" for="{{ form.mileage.id_for_label }}">
{% trans 'Mileage'|capfirst %}:
</label>
{{ form.mileage|add_class:"form-control form-control-sm" }} {% if form.mileage.errors %}
<div class="text-danger small">
{{ form.mileage.errors|striptags }}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Receiving Date Field -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100 border-1 rounded shadow">
<div class="card-body">
<div class="form-group">
<label for="{{ form.receiving_date.id_for_label }}"
class="form-label">
{% trans 'Receiving Date' %}:
</label>
{{ form.receiving_date|add_class:"form-control form-control-sm" }}
{% if form.receiving_date.errors %}
<div class="text-danger small">
{{ form.receiving_date.errors|striptags }}
</div> </div>
{% endif %} <div class="row g-4">
<!-- Vendor Field -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<div class="form-group">
<label for="{{ form.vendor.id_for_label }}" class="form-label">{% trans 'Vendor' %}:</label>
{{ form.vendor|add_class:"form-select form-select-sm" }}
</div>
{% if form.vendor.errors %}<div class="text-danger small">{{ form.vendor.errors|striptags }}</div>{% endif %}
</div>
</div>
</div>
<!-- Stock Type Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<label class="form-label" for="{{ form.stock_type.id_for_label }}">{% trans 'Stock Type'|capfirst %}:</label>
{{ form.stock_type|add_class:"form-select form-select-sm" }}
{% if form.stock_type.errors %}<div class="text-danger small">{{ form.stock_type.errors|striptags }}</div>{% endif %}
</div>
</div>
</div>
<!-- Mileage Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<label class="form-label" for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}:</label>
{{ form.mileage|add_class:"form-control form-control-sm" }}
{% if form.mileage.errors %}<div class="text-danger small">{{ form.mileage.errors|striptags }}</div>{% endif %}
</div>
</div>
</div>
<!-- Receiving Date Field -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100 border-1 rounded shadow">
<div class="card-body">
<div class="form-group">
<label for="{{ form.receiving_date.id_for_label }}" class="form-label">{% trans 'Receiving Date' %}:</label>
{{ form.receiving_date|add_class:"form-control form-control-sm" }}
{% if form.receiving_date.errors %}
<div class="text-danger small">{{ form.receiving_date.errors|striptags }}</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Remarks Card -->
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body">
<label class="label" for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
{{ form.remarks|add_class:"form-control form-control-sm" }}
{% if form.remarks.errors %}<div class="text-danger small">{{ form.remarks.errors|striptags }}</div>{% endif %}
</div>
</div>
</div>
</div>
<!-- Specifications Buttons -->
<div class="row g-1">
<div class="btn-group">
<button type="button"
class="btn btn-sm btn-danger me-1"
id="specification-btn"
data-bs-toggle="modal"
data-bs-target="#specificationsModal"
disabled>{% trans 'specifications'|capfirst %}</button>
<button type="button"
class="btn btn-sm btn-danger me-1"
id="options-btn"
data-bs-toggle="modal"
data-bs-target="#equipmentOptionsModal"
disabled>{% trans 'options'|capfirst %}</button>
<button type="submit"
name="add_another"
value="true"
class="btn btn-sm btn-success me-1">{% trans "Save and Add Another" %}</button>
<button type="submit"
name="go_to_stats"
value="true"
class="btn btn-sm btn-primary">{% trans "Save and Go to Inventory" %}</button>
</div>
</div>
</main>
</div>
</div>
</form>
<!-- Specification Modal -->
<div class="modal fade"
id="specificationsModal"
tabindex="-1"
aria-labelledby="specificationsModalLabel">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content rounded-top-2">
<div class="modal-header">
<h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|capfirst %}</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="{% trans 'Close' %}"></button>
</div>
<div class="modal-body">
<div id="specificationsContent"></div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
</div> </div>
</div>
</div> </div>
</div> </div>
<!-- Remarks Card --> </div>
<div class="col-lg-4 col-xl-3"> <!-- equipments and options Modal -->
<div class="card h-100"> <div class="modal fade"
<div class="card-body"> id="equipmentOptionsModal"
<label class="label" for="{{ form.remarks.id_for_label }}"> tabindex="-1"
{% trans 'Remarks'|capfirst %}: aria-labelledby="equipmentOptionsModalLabel">
</label> <div class="modal-dialog modal-lg modal-dialog-scrollable">
{{ form.remarks|add_class:"form-control form-control-sm" }} {% if form.remarks.errors %} <div class="modal-content rounded-top-2">
<div class="text-danger small"> <div class="modal-header">
{{ form.remarks.errors|striptags }} <h5 class="modal-title" id="equipmentOptionsModalLabel">{% trans 'specifications'|capfirst %}</h5>
</div> <button type="button"
{% endif %} class="btn-close"
</div> data-bs-dismiss="modal"
aria-label="{% trans 'Close' %}"></button>
</div>
<div class="modal-body">
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body" id="equipment-container">
<label class="form-label" for="equipment_id">{% trans 'equipment'|capfirst %}:</label>
<select class="form-select form-select-sm"
id="equipment_id"
name="equipment_name_id">
<option value="">{% trans 'Select' %}</option>
</select>
</div>
</div>
</div>
<div id="optionsContent"></div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div> </div>
</div>
</div> </div>
<!-- Specifications Buttons -->
<div class="row g-1">
<div class="btn-group">
<button type="button"
class="btn btn-sm btn-danger me-1"
id="specification-btn"
data-bs-toggle="modal"
data-bs-target="#specificationsModal"
disabled>{% trans 'specifications'|capfirst %}
</button>
<button type="button"
class="btn btn-sm btn-danger me-1"
id="options-btn"
data-bs-toggle="modal"
data-bs-target="#equipmentOptionsModal"
disabled>{% trans 'options'|capfirst %}
</button>
<button type="submit" name="add_another" value="true" class="btn btn-sm btn-success me-1">
{% trans "Save and Add Another" %}
</button>
<button type="submit" name="go_to_stats" value="true" class="btn btn-sm btn-primary">
{% trans "Save and Go to Inventory" %}
</button>
</div>
</div>
</main>
</div> </div>
</div> <!-- Scanner Modal -->
</form> <div class="modal fade"
<!-- Specification Modal --> id="scannerModal"
<div class="modal fade" id="specificationsModal" tabindex="-1" aria-labelledby="specificationsModalLabel"> tabindex="-1"
<div class="modal-dialog modal-lg modal-dialog-scrollable"> aria-labelledby="scannerModalLabel">
<div class="modal-content rounded-top-2"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-header"> <div class="modal-content rounded-top-3">
<h5 class="modal-title" id="specificationsModalLabel"> <div class="modal-header rounded-top-3 shadow">
{% trans 'specifications'|capfirst %} <h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
</h5> <button type="button"
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button> class="btn-close"
</div> data-bs-dismiss="modal"
<div class="modal-body"> aria-label="{{ _("Close") }}"></button>
<div id="specificationsContent"></div> </div>
</div> <div class="modal-body text-center">
<div class="modal-footer"> <video id="video" autoplay playsinline>
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button> </video>
</div> <p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
</div> <button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
</div> </div>
</div>
<!-- equipments and options Modal -->
<div class="modal fade" id="equipmentOptionsModal" tabindex="-1" aria-labelledby="equipmentOptionsModalLabel">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content rounded-top-2">
<div class="modal-header">
<h5 class="modal-title" id="equipmentOptionsModalLabel">
{% trans 'specifications'|capfirst %}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
</div>
<div class="modal-body">
<div class="col-lg-4 col-xl-3">
<div class="card h-100">
<div class="card-body" id="equipment-container">
<label class="form-label" for="equipment_id">
{% trans 'equipment'|capfirst %}:
</label>
<select class="form-select form-select-sm"
id="equipment_id"
name="equipment_name_id">
<option value="">{% trans 'Select' %}</option>
</select>
</div> </div>
</div>
</div> </div>
<div id="optionsContent"></div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div> </div>
</div> <!-- CAR FORM -->
</div> </div>
<script>
<!-- Scanner Modal -->
<div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-top-3">
<div class="modal-header rounded-top-3 shadow">
<h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
</div>
<div class="modal-body text-center">
<video id="video" autoplay playsinline></video>
<p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
<button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
</div>
</div>
</div>
</div>
<!-- CAR FORM -->
</div>
<script>
function getCookie(name) { function getCookie(name) {
let cookieValue = null; let cookieValue = null;
if (document.cookie && document.cookie !== "") { if (document.cookie && document.cookie !== "") {
@ -670,6 +624,5 @@
titleText: msg, titleText: msg,
}); });
} }
</script> </script>
{% endblock %} {% endblock %}

View File

@ -1,47 +1,61 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n static custom_filters %} {% load i18n static custom_filters %}
{% block title %} {% block title %}{{ _("Car Details") }}{% endblock %}
{{ _('Car Details') }}
{% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab"> <div class="tab-pane fade active show"
<div class="row gx-xl-8 gx-xxl-11"> id="tab-activity"
<div class="col-xl-5 p-xxl-7"> role="tabpanel"
<div class="ms-xxl-3 d-none d-xl-block position-sticky" style="top: 30%"><img class="d-dark-none img-fluid" src="../assets/img/spot-illustrations/timeline.png" alt="" /><img class="d-light-none img-fluid" src="../assets/img/spot-illustrations/timeline-dark.png" alt="" /></div> aria-labelledby="activity-tab">
</div> <div class="row gx-xl-8 gx-xxl-11">
<div class="col-xl-12 scrollbar"> <div class="col-xl-5 p-xxl-7">
<div> <div class="ms-xxl-3 d-none d-xl-block position-sticky" style="top: 30%">
<h4 class="py-3 border-y mb-5 ms-8">{{_('History')}}</h4> <img class="d-dark-none img-fluid"
<div class="timeline-basic mb-9"> src="../assets/img/spot-illustrations/timeline.png"
{% for activity in activities %} alt="" />
<div class="timeline-item"> <img class="d-light-none img-fluid"
<div class="row g-3"> src="../assets/img/spot-illustrations/timeline-dark.png"
<div class="col-auto"> alt="" />
<div class="timeline-item-bar position-relative">
<div class="icon-item icon-item-md rounded-7 border border-translucent"><span class="fa-solid fa-clipboard text-success fs-9"></span></div><span class="timeline-bar border-end border-dashed"></span>
</div> </div>
</div>
<div class="col">
<div class="d-flex justify-content-between">
<div class="d-flex mb-2">
<h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{activity.content_object}}</h6>
</div>
<p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time"><span class="fa-regular fa-clock me-1"></span>{{activity.created}}</p>
</div>
<h6 class="fs-10 fw-normal mb-3">by <a class="fw-semibold" href="#!">{{activity.created_by}}</a></h6>
<p class="fs-9 text-body-secondary w-sm-60 mb-5">{{activity.notes}}.</p>
</div>
</div> </div>
</div> <div class="col-xl-12 scrollbar">
{% endfor %} <div>
</div> <h4 class="py-3 border-y mb-5 ms-8">{{ _("History") }}</h4>
<div class="timeline-basic mb-9">
{% for activity in activities %}
<div class="timeline-item">
<div class="row g-3">
<div class="col-auto">
<div class="timeline-item-bar position-relative">
<div class="icon-item icon-item-md rounded-7 border border-translucent">
<span class="fa-solid fa-clipboard text-success fs-9"></span>
</div>
<span class="timeline-bar border-end border-dashed"></span>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-between">
<div class="d-flex mb-2">
<h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{ activity.content_object }}</h6>
</div>
<p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time">
<span class="fa-regular fa-clock me-1"></span>{{ activity.created }}
</p>
</div>
<h6 class="fs-10 fw-normal mb-3">
by <a class="fw-semibold" href="#!">{{ activity.created_by }}</a>
</h6>
<p class="fs-9 text-body-secondary w-sm-60 mb-5">{{ activity.notes }}.</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div>
{% endblock %} {% endblock %}

View File

@ -1,41 +1,50 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n static %} {% load i18n static %}
{% block title %} {% block title %}
{% trans "inventory"|capfirst %} {% trans "inventory"|capfirst %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row g-3 justify-content-between"> <div class="row g-3 justify-content-between">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card border h-100 w-100 overflow-hidden"> <div class="card border h-100 w-100 overflow-hidden">
<div class="bg-holder d-block bg-card" style="background-image:url({% static 'images/spot-illustrations/32.png' %});background-position: top right;"> <div class="bg-holder d-block bg-card"
</div> style="background-image:url({% static 'images/spot-illustrations/32.png' %});
background-position: top right"></div>
<div class="d-dark-none me-5"> <div class="d-dark-none me-5">
<div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %}); background-position: bottom right; background-size: auto;"> <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card"
</div> style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
background-position: bottom right;
background-size: auto"></div>
</div> </div>
<div class="d-light-none me-5"> <div class="d-light-none me-5">
<div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/21.png' %}); background-position: bottom right; background-size: auto;"> <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card"
</div> style="background-image:url({% static 'images/spot-illustrations/21.png' %});
background-position: bottom right;
background-size: auto"></div>
</div> </div>
<div class="card-body px-lg-5 position-relative"> <div class="card-body px-lg-5 position-relative">
<br> <br>
<div class="row align-items-center g-3 g-sm-5 text-start text-sm-start"> <div class="row align-items-center g-3 g-sm-5 text-start text-sm-start">
<div class="col-12 col-sm-auto "> <div class="col-12 col-sm-auto ">
<div class="avatar avatar-3xl avatar-bordered mb-3"> <div class="avatar avatar-3xl avatar-bordered mb-3">
{% if cars.first.id_car_make.logo %} {% if cars.first.id_car_make.logo %}
<img class="rounded" src="{{ cars.first.id_car_make.logo.url }}" alt=""> <img class="rounded" src="{{ cars.first.id_car_make.logo.url }}" alt="">
{% else %} {% else %}
<img class="rounded" src="{% static 'images/logos/car_make/sedan.svg' %}" alt=""> <img class="rounded"
src="{% static 'images/logos/car_make/sedan.svg' %}"
alt="">
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="col-12 col-sm-auto flex-1"> <div class="col-12 col-sm-auto flex-1">
<div><h3 class="mb-2">{{ cars.first.id_car_make.get_local_name }}&nbsp;<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span></h3></div> <div>
<p class="text-body-tertiary fw-semibold">{{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span></p> <h3 class="mb-2">
{{ cars.first.id_car_make.get_local_name }}&nbsp;<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span>
</h3>
</div>
<p class="text-body-tertiary fw-semibold">
{{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -49,14 +58,27 @@
<table class="table align-items-center table-flush"> <table class="table align-items-center table-flush">
<thead class="text-body"> <thead class="text-body">
<tr class="bg-body-highlight"> <tr class="bg-body-highlight">
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="stock">{% trans 'Stock'|upper %}</th> <th class="pe-1 align-middle white-space-nowrap text-center"
<th class="pe-1 align-middle white-space-nowrap text-start" data-sort="vin" style="min-width: 4.5rem;">{% trans "VIN" %}</th> data-sort="stock">{% trans 'Stock'|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="date">{% trans "Year"|upper %}</th> <th class="pe-1 align-middle white-space-nowrap text-start"
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="extColor" style="min-width: 8.5rem">{% trans 'Exterior Color'|upper %}</th> data-sort="vin"
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="intColor" style="min-width: 8.5rem">{% trans 'Interior Color'|upper %}</th> style="min-width: 4.5rem">{% trans "VIN" %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="location" style="min-width: 12.5rem;">{% trans "Showroom Location"|upper %}</th> <th class="pe-1 align-middle white-space-nowrap text-center"
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="status">{% trans 'Status'|upper %}</th> data-sort="date">{% trans "Year"|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="age" style="min-width: 7rem">{% trans 'Age'|upper %}</th> <th class="pe-1 align-middle white-space-nowrap text-center"
data-sort="extColor"
style="min-width: 8.5rem">{% trans 'Exterior Color'|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center"
data-sort="intColor"
style="min-width: 8.5rem">{% trans 'Interior Color'|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center"
data-sort="location"
style="min-width: 12.5rem">{% trans "Showroom Location"|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center"
data-sort="status">{% trans 'Status'|upper %}</th>
<th class="pe-1 align-middle white-space-nowrap text-center"
data-sort="age"
style="min-width: 7rem">{% trans 'Age'|upper %}</th>
<th class="no-sort align-middle white-space-nowrap text-center"></th> <th class="no-sort align-middle white-space-nowrap text-center"></th>
</tr> </tr>
</thead> </thead>
@ -65,27 +87,37 @@
<tr> <tr>
<td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary"> <td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
{% if car.stock_type == "new" %} {% if car.stock_type == "new" %}
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("New")}}</span></span> <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{ _("New") }}</span></span>
{% elif car.status == "used" %} {% elif car.status == "used" %}
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Used")}}</span></span> <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("Used") }}</span></span>
{% endif %} {% endif %}
</td> </td>
<td class="align-middle white-space-nowrap text-start"><a class="fs-9 fw-bold" href="{% url 'car_detail' car.slug %}">{{ car.vin }}</a></td> <td class="align-middle white-space-nowrap text-start">
<a class="fs-9 fw-bold" href="{% url 'car_detail' car.slug %}">{{ car.vin }}</a>
</td>
<td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td> <td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td>
{% if car.colors %} {% if car.colors %}
<td class="align-middle white-space-nowrap text-body fs-9 text-start"> <td class="align-middle white-space-nowrap text-body fs-9 text-start">
<div class="d-flex flex-column align-items-center"> <div class="d-flex flex-column align-items-center">
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%);" title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span> <span class="color-div"
style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%)"
title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span>
</div> </div>
</td> </td>
<td class="align-middle white-space-nowrap text-body fs-9 text-start"> <td class="align-middle white-space-nowrap text-body fs-9 text-start">
<div class="d-flex flex-column align-items-center"> <div class="d-flex flex-column align-items-center">
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%);" title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span> <span class="color-div"
style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%)"
title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span>
</div> </div>
</td> </td>
{% else %} {% else %}
<td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td> <td class="align-middle white-space-nowrap text-body fs-9 text-center">
<td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td> <span class="color-div">{% trans 'No Color' %}</span>
</td>
<td class="align-middle white-space-nowrap text-body fs-9 text-center">
<span class="color-div">{% trans 'No Color' %}</span>
</td>
{% endif %} {% endif %}
<td class="align-middle white-space-nowrap text-body fs-9 text-center"> <td class="align-middle white-space-nowrap text-body fs-9 text-center">
{% if car.location.is_owner_showroom %} {% if car.location.is_owner_showroom %}
@ -96,11 +128,14 @@
</td> </td>
<td class="status align-middle white-space-nowrap text-center fw-bold text-body-tertiary"> <td class="status align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
{% if car.status == "available" %} {% if car.status == "available" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{_("Available")}}</span><span class="ms-1" data-feather="check" style="height:13px;width:13px;"></span></span> <span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{ _("Available") }}</span><span class="ms-1" data-feather="check" style="height:13px;width:13px;"></span></span>
{% elif car.status == "sold" %} {% elif car.status == "sold" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{_("Sold")}}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span> <span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{ _("Sold") }}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span>
{% elif car.status == "hold" %} {% elif car.status == "hold" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1" data-feather="alert-octagon" style="height:13px;width:13px;"></span></span> <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1"
data-feather="alert-octagon"
style="height:13px;
width:13px"></span></span>
{% elif car.status == "reserved" %} {% elif car.status == "reserved" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span> <span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span>
{% elif car.status == "damaged" %} {% elif car.status == "damaged" %}
@ -111,7 +146,8 @@
<span class="fw-light">{{ car.receiving_date|timesince }}</span> <span class="fw-light">{{ car.receiving_date|timesince }}</span>
</td> </td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-4"> <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
<a class="btn btn-sm btn-phoenix-success" href="{% url 'car_detail' car.slug %}">{% trans "view"|capfirst %}</a> <a class="btn btn-sm btn-phoenix-success"
href="{% url 'car_detail' car.slug %}">{% trans "view"|capfirst %}</a>
</td> </td>
</tr> </tr>
{% empty %} {% empty %}
@ -126,15 +162,13 @@
</table> </table>
</div> </div>
</div> </div>
<div class="d-flex justify-content-between mt-3"><span class="d-none d-sm-inline-block" data-list-info="data-list-info">{{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}<span class="text-body-tertiary"> {{ _("Items of")}} </span>{{ page_obj.paginator.count }}</span> <div class="d-flex justify-content-end mt-3">
<div class="d-flex"> <div class="d-flex">
{% if is_paginated %}
{% if is_paginated %} {% include 'partials/pagination.html' %}
{% include 'partials/pagination.html' %} {% endif %}
{% endif %} </div>
</div> </div>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,21 +1,19 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% load custom_filters %} {% load custom_filters %}
{% block content %} {% block content %}
<div class="row-fluid p-2"> <div class="row-fluid p-2">
<!-- Display Validation Errors --> <!-- Display Validation Errors -->
{% if errors %} {% if errors %}
<div class="alert alert-danger"> <div class="alert alert-danger">
<ul> <ul>
{% for error in errors %} {% for error in errors %}<li>{{ error }}</li>{% endfor %}
<li>{{ error }}</li>
{% endfor %}
</ul> </ul>
</div> </div>
{% endif %} {% endif %}
<!-- Option Modal --> <!-- Option Modal -->
<div class="modal fade" id="optionsModal" <div class="modal fade"
id="optionsModal"
data-bs-backdrop="static" data-bs-backdrop="static"
data-bs-keyboard="false" data-bs-keyboard="false"
tabindex="-1" tabindex="-1"
@ -25,7 +23,10 @@
<div class="modal-content glossy-modal"> <div class="modal-content glossy-modal">
<div class="modal-header bg-primary-subtle"> <div class="modal-header bg-primary-subtle">
<h5 class="modal-title" id="optionsModalLabel">{% trans 'options'|capfirst %}</h5> <h5 class="modal-title" id="optionsModalLabel">{% trans 'options'|capfirst %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div id="optionsContent"></div> <div id="optionsContent"></div>
@ -33,9 +34,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Specification Modal -->
<!-- Specification Modal --> <div class="modal fade"
<div class="modal fade" id="specificationsModal" id="specificationsModal"
data-bs-backdrop="static" data-bs-backdrop="static"
data-bs-keyboard="false" data-bs-keyboard="false"
tabindex="-1" tabindex="-1"
@ -45,7 +46,10 @@
<div class="modal-content glossy-modal"> <div class="modal-content glossy-modal">
<div class="modal-header bg-primary-subtle"> <div class="modal-header bg-primary-subtle">
<h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|capfirst %}</h5> <h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|capfirst %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div id="specificationsContent"></div> <div id="specificationsContent"></div>
@ -53,26 +57,31 @@
</div> </div>
</div> </div>
</div> </div>
<!-- CAR FORM --> <!-- CAR FORM -->
<form method="post" id="carForm" class="form"> <form method="post" id="carForm" class="form">
{% csrf_token %} {% csrf_token %}
<div class="d-flex flex-column min-vh-100"> <div class="d-flex flex-column min-vh-100">
<div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4"> <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
<main class="d-grid gap-4 p-1"> <main class="d-grid gap-4 p-1">
<div class="row g-4"> <div class="row g-4">
<!-- VIN --> <!-- VIN -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-primary-subtle"> <div class="card-body bg-primary-subtle">
<label class="label" for="vin">{% trans 'VIN'|capfirst %}:</label> <label class="label" for="vin">{% trans 'VIN'|capfirst %}:</label>
<div class="input-group"> <div class="input-group">
<input id="vin" name="vin" type="text" class="form-control form-control-sm" placeholder="{% trans 'VIN'|capfirst %}" maxlength="17"> <input id="vin"
name="vin"
type="text"
class="form-control form-control-sm"
placeholder="{% trans 'VIN'|capfirst %}"
maxlength="17">
<button type="button" class="btn btn-sm btn-primary" id="decodeVinBtn">{% trans 'search'|capfirst %}</button> <button type="button" class="btn btn-sm btn-primary" id="decodeVinBtn">{% trans 'search'|capfirst %}</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Makes Card --> <!-- Makes Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="make-row"> <div class="card-body bg-danger-subtle" id="make-row">
@ -90,7 +99,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Models Card --> <!-- Models Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="model-row"> <div class="card-body bg-danger-subtle" id="model-row">
@ -101,7 +110,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Generation Card --> <!-- Generation Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="generation-row"> <div class="card-body bg-danger-subtle" id="generation-row">
@ -112,7 +121,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Year Card --> <!-- Year Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="year-row"> <div class="card-body bg-danger-subtle" id="year-row">
@ -123,7 +132,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Series Card --> <!-- Series Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="serie-row"> <div class="card-body bg-danger-subtle" id="serie-row">
@ -134,7 +143,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Trims Card --> <!-- Trims Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="trim-row"> <div class="card-body bg-danger-subtle" id="trim-row">
@ -145,7 +154,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Equipments Card --> <!-- Equipments Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-danger-subtle" id="equipment-row"> <div class="card-body bg-danger-subtle" id="equipment-row">
@ -156,53 +165,58 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Status Card --> <!-- Status Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-info-subtle"> <div class="card-body bg-info-subtle">
<label class="label" for="status">{% trans 'Status'|capfirst %}:</label> <label class="label" for="status">{% trans 'Status'|capfirst %}:</label>
<select class="form-select form-select-sm" id="status" name="status"> <select class="form-select form-select-sm" id="status" name="status">
<option value="">{% trans 'select'|capfirst %}</option> <option value="">{% trans 'select'|capfirst %}</option>
{% for value, display in status_choices %} {% for value, display in status_choices %}<option value="{{ value }}">{{ display }}</option>{% endfor %}
<option value="{{ value }}">{{ display }}</option>
{% endfor %}
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<!-- Stock Type Card --> <!-- Stock Type Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-info-subtle"> <div class="card-body bg-info-subtle">
<label class="label" for="stock_type">{% trans 'Stock Type'|capfirst %}:</label> <label class="label" for="stock_type">{% trans 'Stock Type'|capfirst %}:</label>
<select class="form-select form-select-sm" id="stock_type" name="stock_type"> <select class="form-select form-select-sm" id="stock_type" name="stock_type">
<option value="">{% trans 'select'|capfirst %}</option> <option value="">{% trans 'select'|capfirst %}</option>
{% for value, display in stock_type_choices %} {% for value, display in stock_type_choices %}<option value="{{ value }}">{{ display }}</option>{% endfor %}
<option value="{{ value }}">{{ display }}</option>
{% endfor %}
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<!-- Mileage Card --> <!-- Mileage Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-info-subtle"> <div class="card-body bg-info-subtle">
<label class="label" for="mileage">{% trans 'Mileage'|capfirst %}:</label> <label class="label" for="mileage">{% trans 'Mileage'|capfirst %}:</label>
<input id="mileage" name="mileage" type="number" min="0" class="form-control form-control-sm" placeholder="{% trans 'Mileage'|capfirst %}"> <input id="mileage"
name="mileage"
type="number"
min="0"
class="form-control form-control-sm"
placeholder="{% trans 'Mileage'|capfirst %}">
</div> </div>
</div> </div>
</div> </div>
<!-- Remarks Card --> <!-- Remarks Card -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body bg-info-subtle"> <div class="card-body bg-info-subtle">
<label class="label" for="remarks">{% trans 'Remarks'|capfirst %}:</label> <label class="label" for="remarks">{% trans 'Remarks'|capfirst %}:</label>
<textarea id="remarks" name="remarks" class="form-control form-control-sm" rows="3" placeholder="{% trans 'Enter remarks'|capfirst %}"></textarea> <textarea id="remarks"
name="remarks"
class="form-control form-control-sm"
rows="3"
placeholder="{% trans 'Enter remarks'|capfirst %}"></textarea>
</div> </div>
</div> </div>
</div> </div>
<!-- Options and Specifications Buttons --> <!-- Options and Specifications Buttons -->
<div class="col-lg-4 col-xl-3"> <div class="col-lg-4 col-xl-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body" id="option-row"> <div class="card-body" id="option-row">
@ -211,19 +225,14 @@
id="option-btn" id="option-btn"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#optionsModal" data-bs-target="#optionsModal"
disabled>{% trans 'options'|capfirst %} disabled>{% trans 'options'|capfirst %}</button>
</button>
<button type="button" <button type="button"
class="btn btn-sm btn-danger mt-1" class="btn btn-sm btn-danger mt-1"
id="specification-btn" id="specification-btn"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#specificationsModal" data-bs-target="#specificationsModal"
disabled>{% trans 'specifications'|capfirst %} disabled>{% trans 'specifications'|capfirst %}</button>
</button> <button type="submit" class="btn btn-sm btn-primary mt-1" id="saveCarBtn">{% trans 'save'|capfirst %}</button>
<button type="submit"
class="btn btn-sm btn-primary mt-1"
id="saveCarBtn">{% trans 'save'|capfirst %}
</button>
</div> </div>
</div> </div>
</div> </div>
@ -233,10 +242,7 @@
</div> </div>
</form> </form>
</div> </div>
<!-- JavaScript Section -->
<!-- JavaScript Section -->
<script> <script>
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const vinInput = document.getElementById('vin'); const vinInput = document.getElementById('vin');
@ -595,5 +601,4 @@ checkFormCompletion();
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}

View File

@ -1,9 +1,6 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static i18n django_tables2 %} {% load static i18n django_tables2 %}
{% load export_url from django_tables2 %} {% load export_url from django_tables2 %}
{% block content %} {% block content %}
<div class="container-fluid mx-n1 p-3"> <div class="container-fluid mx-n1 p-3">
<div class="row"> <div class="row">
@ -17,15 +14,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12 p-1"> <div class="col-md-12 p-1">
<div class="table-responsive scrollbar mx-n1 p-1 align-center"> <div class="table-responsive scrollbar mx-n1 p-1 align-center">{% render_table table %}</div>
{% render_table table %}
</div>
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,9 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n custom_filters humanize %}
{% load custom_filters %}
{% block customCSS %} {% block customCSS %}
<style> <style>
.htmx-indicator{ .htmx-indicator{
opacity:0; opacity:0;
transition: opacity 500ms ease-in; transition: opacity 500ms ease-in;
@ -21,183 +19,238 @@
.transition { .transition {
transition: all ease-in 1s ; transition: all ease-in 1s ;
} }
</style> </style>
{% endblock customCSS %} {% endblock customCSS %}
{% block content %} {% block content %}
<div class="mb-9"> <div class="mb-9">
<div id="projectSummary"> <div id="projectSummary">
<div class="row g-3 justify-content-between align-items-end mb-4"> <div class="row g-3 justify-content-between align-items-end mb-4">
<div class="col-12 col-sm-auto"> <div class="col-12 col-sm-auto">
<ul class="nav nav-links mx-n2"
<ul class="nav nav-links mx-n2" hx-boost="true" hx-push-url='false' hx-target=".table-responsive" hx-select=".table-responsive" hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator" hx-boost="true"
hx-on::before-request="on_before_request()" hx-push-url='false'
hx-on::after-request="on_after_request()" hx-target=".table-responsive"
> hx-select=".table-responsive"
<li class="nav-item"><a class="nav-link px-2 py-1 active" aria-current="page" href="{% url 'car_list' %}"><span>{{ _("All") }}</span><span class="text-body-tertiary fw-semibold">({{stats.all}})</span></a></li> hx-swap="innerHTML show:window:top"
<li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=available"><span>{{ _("Available") }}</span><span class="text-body-tertiary fw-semibold">({{stats.available}})</span></a></li> hx-indicator=".htmx-indicator"
<li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=reserved"><span>{{ _("Reserved") }}</span><span class="text-body-tertiary fw-semibold">({{stats.reserved}})</span></a></li> hx-on::before-request="on_before_request()"
<li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=transfer"><span>{{ _("Transfer") }}</span><span class="text-body-tertiary fw-semibold">({{stats.transfer}})</span></a></li> hx-on::after-request="on_after_request()">
<li class="nav-item"><a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=sold"><span>{{ _("Sold") }}</span><span class="text-body-tertiary fw-semibold">({{stats.sold}})</span></a></li> <li class="nav-item">
<li class="nav-item"><button hx-on:click="toggle_filter()" class="btn btn-sm btn-primary px-2 py-1"><span><span class="fa fa-filter me-1"></span>{{ _("Filter") }}</span><span class="fas fa-caret-down fs-9 ms-1 filter-icon"></span></button></li> <a class="nav-link px-2 py-1 active"
</ul> aria-current="page"
</div> href="{% url 'car_list' %}"><span>{{ _("All") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.all }})</span></a>
<div class="col-12 col-sm-auto"> </li>
<div class="d-flex align-items-center"> <li class="nav-item">
<div class="spinner-border mx-3 htmx-indicator" role="status"><span class="visually-hidden">Loading...</span></div> <a class="nav-link px-2 py-1"
<div class="search-box me-3"> href="{% url 'car_list' %}?status=available"><span>{{ _("Available") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.available }})</span></a>
<form class="position-relative"> </li>
<input class="form-control search-input search" name='search' type="search" placeholder="Search" aria-label="Search" hx-get="{% url 'car_list' %}" hx-trigger='keyup changed delay:500ms' hx-target='.table-responsive' hx-select='.table-responsive' hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator" <li class="nav-item">
hx-on::before-request="on_before_request()" <a class="nav-link px-2 py-1"
hx-on::after-request="on_after_request()" href="{% url 'car_list' %}?status=reserved"><span>{{ _("Reserved") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.reserved }})</span></a>
/> </li>
<span class="fas fa-search search-box-icon"></span> <li class="nav-item">
</form> <a class="nav-link px-2 py-1"
href="{% url 'car_list' %}?status=transfer"><span>{{ _("Transfer") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.transfer }})</span></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 py-1" href="{% url 'car_list' %}?status=sold"><span>{{ _("Sold") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.sold }})</span></a>
</li>
<li class="nav-item">
<button hx-on:click="toggle_filter()"
class="btn btn-sm btn-primary px-2 py-1">
<span><span class="fa fa-filter me-1"></span>{{ _("Filter") }}</span><span class="fas fa-caret-down fs-9 ms-1 filter-icon"></span>
</button>
</li>
</ul>
</div>
<div class="col-12 col-sm-auto">
<div class="d-flex align-items-center">
<div class="spinner-border mx-3 htmx-indicator" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="search-box me-3">
<form class="position-relative">
<input class="form-control search-input search"
name='search'
type="search"
placeholder="Search"
aria-label="Search"
hx-get="{% url 'car_list' %}"
hx-trigger='keyup changed delay:500ms'
hx-target='.table-responsive'
hx-select='.table-responsive'
hx-swap="innerHTML show:window:top"
hx-indicator=".htmx-indicator"
hx-on::before-request="on_before_request()"
hx-on::after-request="on_after_request()" />
<span class="fas fa-search search-box-icon"></span>
</form>
</div>
</div>
</div>
</div> </div>
</div> <div class="d-flex align-items-center d-none filter">
</div> <select hx-get="{% url 'car_list' %}"
</div> name="make"
<div class="d-flex align-items-center d-none filter"> hx-target='.model-select'
<select hx-get="{% url 'car_list' %}" name="make" hx-target='.model-select' hx-select='.model-select' hx-swap="outerHTML show:window:top" hx-indicator=".htmx-indicator" class="form-select form-control-sm me-1 make" aria-label="Default select example" hx-select='.model-select'
hx-on::before-request="filter_before_request()" hx-swap="outerHTML show:window:top"
hx-on::after-request="filter_after_request()"> hx-indicator=".htmx-indicator"
<option selected="" value="" disabled>{{ _("Make")}}</option> class="form-select form-control-sm me-1 make"
{% for m in make %} aria-label="Default select example"
<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option> hx-on::before-request="filter_before_request()"
{% endfor %} hx-on::after-request="filter_after_request()">
</select> <option selected="" value="" disabled>{{ _("Make") }}</option>
<select hx-get="{% url 'car_list' %}" hx-include=".make" name="model" hx-target='.year' hx-select='.year' hx-swap="outerHTML show:window:top" hx-indicator=".htmx-indicator" class="form-select form-control-sm me-1 model-select" aria-label="Default select example" {% for m in make %}<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>{% endfor %}
hx-on::before-request="filter_before_request()" </select>
hx-on::after-request="filter_after_request()" <select hx-get="{% url 'car_list' %}"
> hx-include=".make"
<option selected="" value="" disabled>{{ _("Model")}}</option> name="model"
{% for m in model %} hx-target='.year'
<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option> hx-select='.year'
{% endfor %} hx-swap="outerHTML show:window:top"
</select> hx-indicator=".htmx-indicator"
<select class="form-select form-control-sm me-1 year" name="year" aria-label="Default select example"> class="form-select form-control-sm me-1 model-select"
<option selected="" value="" disabled>{{ _("Year")}}</option> aria-label="Default select example"
{% for y in year %} hx-on::before-request="filter_before_request()"
<option value="{{ y.0 }}">{{ y.0 }}</option> hx-on::after-request="filter_after_request()">
{% endfor %} <option selected="" value="" disabled>{{ _("Model") }}</option>
</select> {% for m in model %}<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>{% endfor %}
<select class="form-select form-control-sm me-1 car_status" name="car_status" aria-label="Default select example"> </select>
<option selected="" value="">{{ _("All") }}</option> <select class="form-select form-control-sm me-1 year"
<option value="available">{{ _("Available") }}</option> name="year"
<option value="reserved">{{ _("Reserved") }}</option> aria-label="Default select example">
<option value="sold">{{ _("Sold") }}</option> <option selected="" value="" disabled>{{ _("Year") }}</option>
<option value="transfer">{{ _("Transfer") }}</option> {% for y in year %}<option value="{{ y.0 }}">{{ y.0 }}</option>{% endfor %}
</select> </select>
<button id="search" hx-get="{% url 'car_list' %}" hx-include=".make,.model,.year,.car_status" hx-indicator=".htmx-indicator" hx-target='.table-responsive' hx-select='.table-responsive' hx-swap="outerHTML show:window:top" class="btn btn-sm btn-phoenix-primary ms-1" <select class="form-select form-control-sm me-1 car_status"
hx-on::before-request="filter_before_request()" name="car_status"
hx-on::after-request="filter_after_request()">{{ _("Search") }}</button> aria-label="Default select example">
</div> <option selected="" value="">{{ _("All") }}</option>
<div class="row"> <option value="available">{{ _("Available") }}</option>
<div class="table-responsive scrollbar transition"> <option value="reserved">{{ _("Reserved") }}</option>
<div class="d-flex flex-wrap align-items-center justify-content-between py-3 pe-0 fs-9"> <option value="sold">{{ _("Sold") }}</option>
<div class="d-flex" hx-boost="true" hx-push-url='false' hx-include=".make,.model,.year,.car_status" hx-target=".table-responsive" hx-select=".table-responsive" hx-swap="innerHTML show:window:top" hx-indicator=".htmx-indicator" <option value="transfer">{{ _("Transfer") }}</option>
hx-on::before-request="on_before_request()" </select>
hx-on::after-request="on_after_request()"> <button id="search"
hx-get="{% url 'car_list' %}"
hx-include=".make,.model,.year,.car_status"
hx-indicator=".htmx-indicator"
hx-target='.table-responsive'
hx-select='.table-responsive'
hx-swap="outerHTML show:window:top"
class="btn btn-sm btn-phoenix-primary ms-1"
hx-on::before-request="filter_before_request()"
hx-on::after-request="filter_after_request()">{{ _("Search") }}</button>
</div> </div>
<div class="row">
<div class="table-responsive scrollbar transition">
<table class="table align-items-center table-flush"> <div class="d-flex flex-wrap align-items-center justify-content-between py-3 pe-0 fs-9">
<thead class="text-body"> <div class="d-flex"
<tr class="bg-body-highlight"> hx-boost="true"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("VIN") }}</th> hx-push-url='false'
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Make") }}</th> hx-include=".make,.model,.year,.car_status"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Model") }}</th> hx-target=".table-responsive"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Year") }}</th> hx-select=".table-responsive"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Trim") }}</th> hx-swap="innerHTML show:window:top"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Color") }}</th> hx-indicator=".htmx-indicator"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Age") }}</th> hx-on::before-request="on_before_request()"
<th class="sort white-space-nowrap align-middle" scope="col">{{ _("Status") }}</th> hx-on::after-request="on_after_request()"></div>
<th class="sort white-space-nowrap align-middle" scope="col"></th> <table class="table align-items-center table-flush">
</tr> <thead class="text-body">
</thead> <tr class="bg-body-highlight">
<tbody class="list" id="project-list-table-body"> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("VIN") }}</th>
{% for car in cars %} <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Make") }}</th>
<tr class="position-static"> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Model") }}</th>
<td class="align-middle white-space-nowrap ps-1"> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Year") }}</th>
<a class="fw-bold" href="{% url 'car_detail' car.slug %}">{{car.vin}}</a> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Trim") }}</th>
</td> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Color") }}</th>
<td class="align-middle white-space-nowrap"> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Date Received") }}</th>
<p class="text-body mb-0">{{car.id_car_make.get_local_name|default:car.id_car_make.name}}</p> <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Status") }}</th>
</td> <th class="sort white-space-nowrap align-middle" scope="col"></th>
<td class="align-middle white-space-nowrap"> </tr>
<p class="text-body mb-0">{{car.id_car_model.get_local_name|default:car.id_car_model.name}}</p> </thead>
</td> <tbody class="list" id="project-list-table-body">
<td class="align-middle white-space-nowrap"> {% for car in cars %}
<p class="text-body mb-0">{{car.year}}</p> <tr class="position-static">
</td> <td class="align-middle white-space-nowrap ps-1">
<td class="align-middle white-space-nowrap"> <a class="fw-bold" href="{% url 'car_detail' car.slug %}">{{ car.vin }}</a>
<p class="fw-bold text-body mb-0">{{car.id_car_trim }}</p> </td>
</td> <td class="align-middle white-space-nowrap">
<td class="align-middle white-space-nowrap"> <p class="text-body mb-0">{{ car.id_car_make.get_local_name|default:car.id_car_make.name }}</p>
<div class="d-flex flex-row align-items-center"> </td>
<div class="d-flex flex-column align-items-center"> <td class="align-middle white-space-nowrap">
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%);" title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span> <p class="text-body mb-0">{{ car.id_car_model.get_local_name|default:car.id_car_model.name }}</p>
</td>
<td class="align-middle white-space-nowrap">
<p class="text-body mb-0">{{ car.year }}</p>
</td>
<td class="align-middle white-space-nowrap">
<p class="fw-bold text-body mb-0">{{ car.id_car_trim }}</p>
</td>
<td class="align-middle white-space-nowrap">
<div class="d-flex flex-row align-items-center">
<div class="d-flex flex-column align-items-center">
<span class="color-div"
style="background: linear-gradient(90deg, rgba({{ car.colors.exterior.rgb }},1) 10%, rgba({{ car.colors.exterior.rgb }},0.10) 100%)"
title="{{ car.colors.exterior.get_local_name }}"></span><span>{{ car.colors.exterior.get_local_name }}</span>
</div>
<div class="d-flex flex-column align-items-center">
<span class="color-div"
style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%)"
title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span>
</div>
</div>
</td>
<td class="align-middle white-space-nowrap">
<p class="fw-bold text-body mb-0">{{ car.receiving_date|naturalday|capfirst }}</p>
</td>
<td class="align-middle white-space-nowrap statuses">
{% if car.status == "available" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-success">{{ _("Available") }}</span>
{% elif car.status == "reserved" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-danger">{{ _("Reserved") }}</span>
{% elif car.status == "sold" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-info">{{ _("Sold") }}</span>
{% elif car.status == "transfer" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-warning">{{ _("Transfer") }}</span>
{% endif %}
</td>
<td class="align-middle text-end white-space-nowrap pe-0 action">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
type="button"
data-bs-toggle="dropdown"
data-boundary="window"
aria-haspopup="true"
aria-expanded="false"
data-bs-reference="parent">
<span class="fas fa-ellipsis-h fs-10"></span>
</button>
<div class="dropdown-menu dropdown-menu-end py-2">
<a class="dropdown-item" href="{% url 'car_detail' car.slug %}">{{ _("View") }}</a>
<a class="dropdown-item" href="#!">{{ _("Export") }}</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="d-flex justify-content-end mt-3">
<div class="d-flex">
{% if is_paginated %}
{% include 'partials/pagination.html' %}
{% endif %}
</div> </div>
<div class="d-flex flex-column align-items-center"> </div>
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.interior.rgb }},1) 10%, rgba({{ car.colors.interior.rgb }},0.10) 100%);" title="{{ car.colors.interior.get_local_name }}"></span><span>{{ car.colors.interior.get_local_name }}</span> </div>
</div>
</div>
</td>
<td class="align-middle white-space-nowrap">
<p class="fw-bold text-body mb-0">{{car.receiving_date|timesince}}</p>
</td>
<td class="align-middle white-space-nowrap statuses">
{% if car.status == "available" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-success">{{ _("Available") }}</span>
{% elif car.status == "reserved" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-danger">{{ _("Reserved") }}</span>
{% elif car.status == "sold" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-info">{{ _("Sold") }}</span>
{% elif car.status == "transfer" %}
<span class="badge badge-phoenix fs-11 badge-phoenix-warning">{{ _("Transfer") }}</span>
{% endif %}
</td>
<td class="align-middle text-end white-space-nowrap pe-0 action">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2">
<a class="dropdown-item" href="{% url 'car_detail' car.slug %}">{{ _("View") }}</a>
<a class="dropdown-item" href="#!">{{ _("Export") }}</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="d-flex justify-content-between mt-3"><span class="d-none d-sm-inline-block" data-list-info="data-list-info">{{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}<span class="text-body-tertiary"> {{ _("Items of")}} </span>{{ page_obj.paginator.count }}</span>
<div class="d-flex">
{% if is_paginated %}
{% include 'partials/pagination.html' %}
{% endif %}
</div> </div>
</div> </div>
{% endblock %}
</div> {% block customJS %}
<script>
</div>
</div>
</div>
{% endblock %}
{% block customJS %}
<script>
links = document.querySelectorAll('.nav-link') links = document.querySelectorAll('.nav-link')
links.forEach(link => { links.forEach(link => {
link.addEventListener('click', () => { link.addEventListener('click', () => {
@ -231,5 +284,5 @@
document.querySelector('.car_status').removeAttribute('disabled') document.querySelector('.car_status').removeAttribute('disabled')
} }
</script> </script>
{% endblock customJS %} {% endblock customJS %}

View File

@ -1,10 +1,11 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% load crispy_forms_filters %} {% load crispy_forms_filters %}
{% block title %}{% trans "Manage Car Location" %}{% endblock %} {% block title %}
{% trans "Manage Car Location" %}
{% endblock %}
{% block content %} {% block content %}
<div class="row mt-3"> <div class="row mt-3">
<h3 class="mb-3">{% trans "Manage Car Location" %}</h3> <h3 class="mb-3">{% trans "Manage Car Location" %}</h3>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}

View File

@ -1,8 +1,9 @@
{% load i18n %} {% load i18n %}
{% load crispy_forms_filters %} {% load crispy_forms_filters %}
<div class="w-100 g-3"> <div class="w-100 g-3">
<form method="post" id="registrationForm" action="{% url 'add_registration' car.slug %}"> <form method="post"
id="registrationForm"
action="{% url 'add_registration' car.slug %}">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
<div class="d-flex gap-1"> <div class="d-flex gap-1">

View File

@ -1,10 +1,11 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% load crispy_forms_filters %} {% load crispy_forms_filters %}
{% block title %}{% trans "Car Transfer" %}{% endblock %} {% block title %}
{% trans "Car Transfer" %}
{% endblock %}
{% block content %} {% block content %}
<div class="row mt-3"> <div class="row mt-3">
<h3 class="mb-3">{% trans "Sell car to another dealer" %}</h3> <h3 class="mb-3">{% trans "Sell car to another dealer" %}</h3>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}

View File

@ -1,20 +1,21 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static i18n %} {% load static i18n %}
{% block content %} {% block content %}
<div class="container"> <div class="container">
<div id="car_list" data-list=""> <div id="car_list" data-list="">
<div class="search-box mb-3 mx-auto"> <div class="search-box mb-3 mx-auto">
<form class="position-relative"> <form class="position-relative">
<input class="form-control search-input search form-control-sm" type="search" placeholder="Search" aria-label="Search" /> <input class="form-control search-input search form-control-sm"
type="search"
placeholder="Search"
aria-label="Search" />
<span class="fas fa-search search-box-icon"></span> <span class="fas fa-search search-box-icon"></span>
</form> </form>
</div> </div>
<div class="row justify-content-end g-0"> <div class="row justify-content-end g-0">
<div class="col-auto px-3"> <div class="col-auto px-3">
<select class="form-select form-select-sm mb-3" data-list-filter="data-list-filter"> <select class="form-select form-select-sm mb-3"
data-list-filter="data-list-filter">
<option selected="" value="">{{ _("Status") }}</option> <option selected="" value="">{{ _("Status") }}</option>
<option value="available">{{ _("Available") }}</option> <option value="available">{{ _("Available") }}</option>
<option value="reserved">{{ _("Reserved") }}</option> <option value="reserved">{{ _("Reserved") }}</option>
@ -40,16 +41,27 @@
</table> </table>
</div> </div>
<div class="d-flex justify-content-between mt-3"> <div class="d-flex justify-content-between mt-3">
<span class="d-none d-sm-inline-block fs-9 fw-bold" data-list-info="data-list-info"><span class="text-body-tertiary fs-9 fw-bold"></span></span> <span class="d-none d-sm-inline-block fs-9 fw-bold"
data-list-info="data-list-info"><span class="text-body-tertiary fs-9 fw-bold"></span></span>
<div class="d-flex"> <div class="d-flex">
<button class="page-link disabled" data-list-pagination="prev" disabled=""><span class="fas fa-chevron-left"></span></button> <button class="page-link disabled" data-list-pagination="prev" disabled="">
<ul class="mb-0 pagination"><li class="active"><button class="page" type="button" data-i="1" data-page="10">1</button></li><li><button class="page" type="button" data-i="2" data-page="5">2</button></li></ul> <span class="fas fa-chevron-left"></span>
<button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button> </button>
<ul class="mb-0 pagination">
<li class="active">
<button class="page" type="button" data-i="1" data-page="10">1</button>
</li>
<li>
<button class="page" type="button" data-i="2" data-page="5">2</button>
</li>
</ul>
<button class="page-link pe-0" data-list-pagination="next">
<span class="fas fa-chevron-right"></span>
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
let currentPage = 1; let currentPage = 1;
@ -146,5 +158,4 @@
loadPage(currentPage); loadPage(currentPage);
}); });
</script> </script>
{% endblock %} {% endblock %}

View File

@ -2,7 +2,6 @@
{% load i18n %} {% load i18n %}
{% load static %} {% load static %}
{% load custom_filters %} {% load custom_filters %}
{% block content %} {% block content %}
<style> <style>
.color-option { .color-option {
@ -63,7 +62,6 @@
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
<div class="row mt-3"> <div class="row mt-3">
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
@ -76,7 +74,7 @@
<div class="form-title"> <div class="form-title">
<p>{% trans 'Add Color for' %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p> <p>{% trans 'Add Color for' %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p>
</div> </div>
<!-- Color Type Selection --> <!-- Color Type Selection -->
<div class="row g-4 justify-content-center"> <div class="row g-4 justify-content-center">
<div class="col-lg-6 col-xl-4"> <div class="col-lg-6 col-xl-4">
<div class="card p-3"> <div class="card p-3">
@ -86,14 +84,16 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<!-- Color Options --> <!-- Color Options -->
<div class="row g-4"> <div class="row g-4">
{% for choice in form.color.field.choices %} {% for choice in form.color.field.choices %}
<div class="col-lg-3 col-xl-3 text-center"> <div class="col-lg-3 col-xl-3 text-center">
<label class="color-option" id="color-option-{{ forloop.counter }}"> <label class="color-option" id="color-option-{{ forloop.counter }}">
<input type="radio" name="color" value="{{ choice.0 }}" <input type="radio"
name="color"
value="{{ choice.0 }}"
{% if choice.0 == form.color.value %}checked{% endif %} {% if choice.0 == form.color.value %}checked{% endif %}
style="display: none;" style="display: none"
onchange="highlightSelectedColor({{ forloop.counter }})"> onchange="highlightSelectedColor({{ forloop.counter }})">
<div class="color-box" style="background-color: rgb({{ choice.0 }});"></div> <div class="color-box" style="background-color: rgb({{ choice.0 }});"></div>
<span><small class="fw-lighter">{{ choice.1 }}</small></span> <span><small class="fw-lighter">{{ choice.1 }}</small></span>
@ -101,12 +101,12 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<!-- Save and Cancel Buttons --> <!-- Save and Cancel Buttons -->
<div class="btn-group"> <div class="btn-group">
<button type="submit" class="btn btn-sm btn-success me-1">{% trans "Save" %}</button> <button type="submit" class="btn btn-sm btn-success me-1">{% trans "Save" %}</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger me-1">{% trans "Cancel" %}</a> <a href="{{ request.META.HTTP_REFERER }}"
class="btn btn-sm btn-danger me-1">{% trans "Cancel" %}</a>
</div> </div>
</main> </main>
</div> </div>
</div> </div>

View File

@ -1,94 +1,363 @@
<div class="content"> <div class="content">
<div class="margin10 center" style="min-height:120px;"> <div class="margin10 center" style="min-height:120px;">
<div data-aaad="true" data-aa-adunit="/22815767462/CLHX_728v_1" data-status="rendered" id="9868dff0-5025-4bf8-ba3a-df1a6220e51b" data-aa-device="[&quot;bigDesktop&quot;,&quot;desktop&quot;,&quot;smallDesktop&quot;,&quot;tablet&quot;]" data-aa-sizes="[[970,90],[728,90]]" data-aa-lazy-loaded="false" data-aa-refresh-viewable="30" data-google-query-id="CL7JkYCp64kDFZp1pAQdPh4w0w"><div id="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0__row__" style="border: 0pt none;"><iframe id="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0" name="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0" title="3rd party ad content" width="1" height="1" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" aria-label="Advertisement" tabindex="0" allow="private-state-token-redemption;attribution-reporting" data-load-complete="true" style="border: 0px; vertical-align: bottom; width: 728px; height: 90px;" data-google-row-id="1"></iframe></div></div> <div data-aaad="true"
<div data-aaad="true" data-aa-adunit="/22815767462/CLHX_Mob_300v_1" data-status="skipped" id="0b22b9ef-8269-48aa-8684-e1c990efc466" data-aa-device="[&quot;mobile&quot;]" data-aa-sizes="[[320,100],[320,50]]" data-aa-lazy-loaded="true" data-aa-refresh-viewable="30"></div> data-aa-adunit="/22815767462/CLHX_728v_1"
data-status="rendered"
id="9868dff0-5025-4bf8-ba3a-df1a6220e51b"
data-aa-device="[&quot;bigDesktop&quot;,&quot;desktop&quot;,&quot;smallDesktop&quot;,&quot;tablet&quot;]"
data-aa-sizes="[[970,90],[728,90]]"
data-aa-lazy-loaded="false"
data-aa-refresh-viewable="30"
data-google-query-id="CL7JkYCp64kDFZp1pAQdPh4w0w">
<div id="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0__row__"
style="border: 0pt none">
<iframe id="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0"
name="google_ads_iframe_/22815767462,22668611618/CLHX_728v_1_0"
title="3rd party ad content"
width="1"
height="1"
scrolling="no"
marginwidth="0"
marginheight="0"
frameborder="0"
aria-label="Advertisement"
tabindex="0"
allow="private-state-token-redemption;attribution-reporting"
data-load-complete="true"
style="border: 0px;
vertical-align: bottom;
width: 728px;
height: 90px"
data-google-row-id="1"></iframe>
</div>
</div>
<div data-aaad="true"
data-aa-adunit="/22815767462/CLHX_Mob_300v_1"
data-status="skipped"
id="0b22b9ef-8269-48aa-8684-e1c990efc466"
data-aa-device="[&quot;mobile&quot;]"
data-aa-sizes="[[320,100],[320,50]]"
data-aa-lazy-loaded="true"
data-aa-refresh-viewable="30"></div>
</div> </div>
<h1>Popular Colors</h1> <h1>Popular Colors</h1>
#ff80ed #ff80ed
#065535 #065535
#000000 #000000
#133337 #133337
#ffc0cb</a><br><span class="glyphicon glyphicon-star"></span>707</div> #ffc0cb</a>
#ffffff</a><br><span class="glyphicon glyphicon-star"></span>607</div> <br>
#ffe4e1</a><br><span class="glyphicon glyphicon-star"></span>559</div> <span class="glyphicon glyphicon-star"></span>707
#008080</a><br><span class="glyphicon glyphicon-star"></span>542</div> </div>
#ff0000</a><br><span class="glyphicon glyphicon-star"></span>441</div> #ffffff</a>
#e6e6fa</a><br><span class="glyphicon glyphicon-star"></span>434</div> <br>
#ffd700</a><br><span class="glyphicon glyphicon-star"></span>396</div> <span class="glyphicon glyphicon-star"></span>607
#00ffff</a><br><span class="glyphicon glyphicon-star"></span>361</div> </div>
#ffa500</a><br><span class="glyphicon glyphicon-star"></span>342</div> #ffe4e1</a>
#0000ff</a><br><span class="glyphicon glyphicon-star"></span>342</div> <br>
#c6e2ff</a><br><span class="glyphicon glyphicon-star"></span>333</div> <span class="glyphicon glyphicon-star"></span>559
#b0e0e6</a><br><span class="glyphicon glyphicon-star"></span>321</div> </div>
#40e0d0</a><br><span class="glyphicon glyphicon-star"></span>320</div> #008080</a>
#d3ffce</a><br><span class="glyphicon glyphicon-star"></span>320</div> <br>
#ff7373</a><br><span class="glyphicon glyphicon-star"></span>318</div> <span class="glyphicon glyphicon-star"></span>542
#f0f8ff</a><br><span class="glyphicon glyphicon-star"></span>312</div> </div>
#666666</a><br><span class="glyphicon glyphicon-star"></span>282</div> #ff0000</a>
#faebd7</a><br><span class="glyphicon glyphicon-star"></span>281</div> <br>
#bada55</a><br><span class="glyphicon glyphicon-star"></span>271</div> <span class="glyphicon glyphicon-star"></span>441
#003366</a><br><span class="glyphicon glyphicon-star"></span>268</div> </div>
#fa8072</a><br><span class="glyphicon glyphicon-star"></span>265</div> #e6e6fa</a>
#ffb6c1</a><br><span class="glyphicon glyphicon-star"></span>263</div> <br>
#ffff00</a><br><span class="glyphicon glyphicon-star"></span>260</div> <span class="glyphicon glyphicon-star"></span>434
#c0c0c0</a><br><span class="glyphicon glyphicon-star"></span>254</div> </div>
#800000</a><br><span class="glyphicon glyphicon-star"></span>248</div> #ffd700</a>
#800080</a><br><span class="glyphicon glyphicon-star"></span>243</div> <br>
#00ff00</a><br><span class="glyphicon glyphicon-star"></span>242</div> <span class="glyphicon glyphicon-star"></span>396
#c39797</a><br><span class="glyphicon glyphicon-star"></span>239</div> </div>
#7fffd4</a><br><span class="glyphicon glyphicon-star"></span>230</div> #00ffff</a>
#fff68f</a><br><span class="glyphicon glyphicon-star"></span>228</div> <br>
#eeeeee</a><br><span class="glyphicon glyphicon-star"></span>227</div> <span class="glyphicon glyphicon-star"></span>361
#20b2aa</a><br><span class="glyphicon glyphicon-star"></span>221</div> </div>
#cccccc</a><br><span class="glyphicon glyphicon-star"></span>218</div> #ffa500</a>
#f08080</a><br><span class="glyphicon glyphicon-star"></span>217</div> <br>
#333333</a><br><span class="glyphicon glyphicon-star"></span>216</div> <span class="glyphicon glyphicon-star"></span>342
#ffc3a0</a><br><span class="glyphicon glyphicon-star"></span>210</div> </div>
#c0d6e4</a><br><span class="glyphicon glyphicon-star"></span>209</div> #0000ff</a>
#66cdaa</a><br><span class="glyphicon glyphicon-star"></span>206</div> <br>
#ff00ff</a><br><span class="glyphicon glyphicon-star"></span>202</div> <span class="glyphicon glyphicon-star"></span>342
#ff7f50</a><br><span class="glyphicon glyphicon-star"></span>198</div> </div>
#ff6666</a><br><span class="glyphicon glyphicon-star"></span>196</div> #c6e2ff</a>
#cbbeb5</a><br><span class="glyphicon glyphicon-star"></span>193</div> <br>
#468499</a><br><span class="glyphicon glyphicon-star"></span>189</div> <span class="glyphicon glyphicon-star"></span>333
#ffdab9</a><br><span class="glyphicon glyphicon-star"></span>189</div> </div>
#008000</a><br><span class="glyphicon glyphicon-star"></span>177</div> #b0e0e6</a>
#b4eeb4</a><br><span class="glyphicon glyphicon-star"></span>176</div> <br>
#afeeee</a><br><span class="glyphicon glyphicon-star"></span>176</div> <span class="glyphicon glyphicon-star"></span>321
#00ced1</a><br><span class="glyphicon glyphicon-star"></span>174</div> </div>
#000080</a><br><span class="glyphicon glyphicon-star"></span>172</div> #40e0d0</a>
#990000</a><br><span class="glyphicon glyphicon-star"></span>167</div> <br>
#f6546a</a><br><span class="glyphicon glyphicon-star"></span>166</div> <span class="glyphicon glyphicon-star"></span>320
#660066</a><br><span class="glyphicon glyphicon-star"></span>165</div> </div>
#8a2be2</a><br><span class="glyphicon glyphicon-star"></span>162</div> #d3ffce</a>
#f5f5f5</a><br><span class="glyphicon glyphicon-star"></span>162</div> <br>
#0e2f44</a><br><span class="glyphicon glyphicon-star"></span>161</div> <span class="glyphicon glyphicon-star"></span>320
#b6fcd5</a><br><span class="glyphicon glyphicon-star"></span>161</div> </div>
#696969</a><br><span class="glyphicon glyphicon-star"></span>161</div> #ff7373</a>
#daa520</a><br><span class="glyphicon glyphicon-star"></span>161</div> <br>
#f5f5dc</a><br><span class="glyphicon glyphicon-star"></span>159</div> <span class="glyphicon glyphicon-star"></span>318
#6897bb</a><br><span class="glyphicon glyphicon-star"></span>158</div> </div>
#8b0000</a><br><span class="glyphicon glyphicon-star"></span>152</div> #f0f8ff</a>
#808080</a><br><span class="glyphicon glyphicon-star"></span>151</div> <br>
#088da5</a><br><span class="glyphicon glyphicon-star"></span>147</div> <span class="glyphicon glyphicon-star"></span>312
#ccff00</a><br><span class="glyphicon glyphicon-star"></span>146</div> </div>
#ff1493</a><br><span class="glyphicon glyphicon-star"></span>140</div> #666666</a>
#ffff66</a><br><span class="glyphicon glyphicon-star"></span>140</div> <br>
#81d8d0</a><br><span class="glyphicon glyphicon-star"></span>140</div> <span class="glyphicon glyphicon-star"></span>282
#dddddd</a><br><span class="glyphicon glyphicon-star"></span>136</div> </div>
#2acaea</a><br><span class="glyphicon glyphicon-star"></span>135</div> #faebd7</a>
#ff4040</a><br><span class="glyphicon glyphicon-star"></span>135</div> <br>
#0a75ad</a><br><span class="glyphicon glyphicon-star"></span>134</div> <span class="glyphicon glyphicon-star"></span>281
#a0db8e</a><br><span class="glyphicon glyphicon-star"></span>132</div> </div>
#101010</a><br><span class="glyphicon glyphicon-star"></span>129</div> #bada55</a>
#420420</a><br><span class="glyphicon glyphicon-star"></span>128</div> <br>
#66cccc</a><br><span class="glyphicon glyphicon-star"></span>125</div> <span class="glyphicon glyphicon-star"></span>271
#999999</a><br><span class="glyphicon glyphicon-star"></span>122</div> </div>
#794044</a><br><span class="glyphicon glyphicon-star"></span>113</div> #003366</a>
#00ff7f</a><br><span class="glyphicon glyphicon-star"></span>112</div> <br>
#cc0000</a><br><span class="glyphicon glyphicon-star"></span>111</div> <span class="glyphicon glyphicon-star"></span>268
</div>
#fa8072</a>
<br>
<span class="glyphicon glyphicon-star"></span>265
</div>
#ffb6c1</a>
<br>
<span class="glyphicon glyphicon-star"></span>263
</div>
#ffff00</a>
<br>
<span class="glyphicon glyphicon-star"></span>260
</div>
#c0c0c0</a>
<br>
<span class="glyphicon glyphicon-star"></span>254
</div>
#800000</a>
<br>
<span class="glyphicon glyphicon-star"></span>248
</div>
#800080</a>
<br>
<span class="glyphicon glyphicon-star"></span>243
</div>
#00ff00</a>
<br>
<span class="glyphicon glyphicon-star"></span>242
</div>
#c39797</a>
<br>
<span class="glyphicon glyphicon-star"></span>239
</div>
#7fffd4</a>
<br>
<span class="glyphicon glyphicon-star"></span>230
</div>
#fff68f</a>
<br>
<span class="glyphicon glyphicon-star"></span>228
</div>
#eeeeee</a>
<br>
<span class="glyphicon glyphicon-star"></span>227
</div>
#20b2aa</a>
<br>
<span class="glyphicon glyphicon-star"></span>221
</div>
#cccccc</a>
<br>
<span class="glyphicon glyphicon-star"></span>218
</div>
#f08080</a>
<br>
<span class="glyphicon glyphicon-star"></span>217
</div>
#333333</a>
<br>
<span class="glyphicon glyphicon-star"></span>216
</div>
#ffc3a0</a>
<br>
<span class="glyphicon glyphicon-star"></span>210
</div>
#c0d6e4</a>
<br>
<span class="glyphicon glyphicon-star"></span>209
</div>
#66cdaa</a>
<br>
<span class="glyphicon glyphicon-star"></span>206
</div>
#ff00ff</a>
<br>
<span class="glyphicon glyphicon-star"></span>202
</div>
#ff7f50</a>
<br>
<span class="glyphicon glyphicon-star"></span>198
</div>
#ff6666</a>
<br>
<span class="glyphicon glyphicon-star"></span>196
</div>
#cbbeb5</a>
<br>
<span class="glyphicon glyphicon-star"></span>193
</div>
#468499</a>
<br>
<span class="glyphicon glyphicon-star"></span>189
</div>
#ffdab9</a>
<br>
<span class="glyphicon glyphicon-star"></span>189
</div>
#008000</a>
<br>
<span class="glyphicon glyphicon-star"></span>177
</div>
#b4eeb4</a>
<br>
<span class="glyphicon glyphicon-star"></span>176
</div>
#afeeee</a>
<br>
<span class="glyphicon glyphicon-star"></span>176
</div>
#00ced1</a>
<br>
<span class="glyphicon glyphicon-star"></span>174
</div>
#000080</a>
<br>
<span class="glyphicon glyphicon-star"></span>172
</div>
#990000</a>
<br>
<span class="glyphicon glyphicon-star"></span>167
</div>
#f6546a</a>
<br>
<span class="glyphicon glyphicon-star"></span>166
</div>
#660066</a>
<br>
<span class="glyphicon glyphicon-star"></span>165
</div>
#8a2be2</a>
<br>
<span class="glyphicon glyphicon-star"></span>162
</div>
#f5f5f5</a>
<br>
<span class="glyphicon glyphicon-star"></span>162
</div>
#0e2f44</a>
<br>
<span class="glyphicon glyphicon-star"></span>161
</div>
#b6fcd5</a>
<br>
<span class="glyphicon glyphicon-star"></span>161
</div>
#696969</a>
<br>
<span class="glyphicon glyphicon-star"></span>161
</div>
#daa520</a>
<br>
<span class="glyphicon glyphicon-star"></span>161
</div>
#f5f5dc</a>
<br>
<span class="glyphicon glyphicon-star"></span>159
</div>
#6897bb</a>
<br>
<span class="glyphicon glyphicon-star"></span>158
</div>
#8b0000</a>
<br>
<span class="glyphicon glyphicon-star"></span>152
</div>
#808080</a>
<br>
<span class="glyphicon glyphicon-star"></span>151
</div>
#088da5</a>
<br>
<span class="glyphicon glyphicon-star"></span>147
</div>
#ccff00</a>
<br>
<span class="glyphicon glyphicon-star"></span>146
</div>
#ff1493</a>
<br>
<span class="glyphicon glyphicon-star"></span>140
</div>
#ffff66</a>
<br>
<span class="glyphicon glyphicon-star"></span>140
</div>
#81d8d0</a>
<br>
<span class="glyphicon glyphicon-star"></span>140
</div>
#dddddd</a>
<br>
<span class="glyphicon glyphicon-star"></span>136
</div>
#2acaea</a>
<br>
<span class="glyphicon glyphicon-star"></span>135
</div>
#ff4040</a>
<br>
<span class="glyphicon glyphicon-star"></span>135
</div>
#0a75ad</a>
<br>
<span class="glyphicon glyphicon-star"></span>134
</div>
#a0db8e</a>
<br>
<span class="glyphicon glyphicon-star"></span>132
</div>
#101010</a>
<br>
<span class="glyphicon glyphicon-star"></span>129
</div>
#420420</a>
<br>
<span class="glyphicon glyphicon-star"></span>128
</div>
#66cccc</a>
<br>
<span class="glyphicon glyphicon-star"></span>125
</div>
#999999</a>
<br>
<span class="glyphicon glyphicon-star"></span>122
</div>
#794044</a>
<br>
<span class="glyphicon glyphicon-star"></span>113
</div>
#00ff7f</a>
<br>
<span class="glyphicon glyphicon-star"></span>112
</div>
#cc0000</a>
<br>
<span class="glyphicon glyphicon-star"></span>111
</div>

View File

@ -1,92 +1,90 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n static %} {% load i18n static %}
{% block title %} {% block title %}
{% trans "inventory"|capfirst %} {% trans "inventory"|capfirst %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row justify-content-between">
<div class="row justify-content-between"> <div class="col-sm-12 ">
<div class="col-sm-12 "> <div class="card border h-100 w-100 p-lg-10">
<div class="card border h-100 w-100 p-lg-10"> <div class="bg-holder bg-card"
<div class="bg-holder bg-card" style="background-image:url({% static 'images/spot-illustrations/32.png' %});background-position: top right;"> style="background-image:url({% static 'images/spot-illustrations/32.png' %});
</div> background-position: top right"></div>
<div class="d-dark-none"> <div class="d-dark-none">
<div class="bg-holder bg-card me-5" style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %}); background-position: bottom right; transform: revert;"> <div class="bg-holder bg-card me-5"
</div> style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %});
</div> background-position: bottom right;
<div class="d-light-none"> transform: revert"></div>
<div class="bg-holder bg-card me-5" style="background-image:url({% static 'images/spot-illustrations/21.png' %}); background-position: bottom right; transform: revert;"> </div>
</div> <div class="d-light-none">
</div> <div class="bg-holder bg-card me-5"
</div> style="background-image:url({% static 'images/spot-illustrations/21.png' %});
</div> background-position: bottom right;
</div> transform: revert"></div>
<!-- Total Cars --> </div>
<div class="row justify-content-center">
<div class="col-sm-12">
<!-- Inventory by Makes -->
<div class="accordion" id="makesAccordion">
{% for make in inventory.makes %}
<div class="accordion-item">
<p class="accordion-header" id="heading{{ make.make_id }}">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse{{ make.make_id }}"
aria-expanded="true"
aria-controls="collapse{{ make.make_id }}">
{{ make.make_name }}:&nbsp;
<strong>{{ make.total_cars }}</strong>
</button>
</p>
<div id="collapse{{ make.make_id }}"
class="accordion-collapse collapse"
aria-labelledby="heading{{ make.make_id }}"
data-bs-parent="#makesAccordion">
<div class="accordion-body">
<p>{% trans "models"|capfirst %}</p>
<ul class="list-group">
{% for model in make.models %}
<li class="list-group-item">
{{ model.model_name }}:&nbsp;
<strong>{{ model.total_cars }}</strong>
<button class="btn btn-sm btn-link text-decoration-none"
type="button"
data-bs-toggle="collapse"
data-bs-target="#detailsModel{{ model.model_id }}"
aria-expanded="false"
aria-controls="detailsModel{{ model.model_id }}">
{% trans "Details" %}
</button>
<div class="collapse mt-2" id="detailsModel{{ model.model_id }}">
<p class="mt-2">{% trans "Trims" %}</p>
<ul>
{% for trim in model.trims %}
<li>
<a href="{% url 'car_inventory' make_id=make.slug model_id=model.slug trim_id=trim.slug %}">
{{ trim.trim_name }}
</a>&nbsp;-&nbsp;{% trans "Total" %}:
<strong>{{ trim.total_cars }}</strong></li>
{% empty %}
<li>{% trans "No trims available" %}</li>
{% endfor %}
</ul>
</div>
</li>
{% empty %}
<li class="list-group-item">{% trans "No models available." %}</li>
{% endfor %}
</ul>
</div>
</div> </div>
</div> </div>
{% endfor %} </div>
</div> <!-- Total Cars -->
<div class="row justify-content-center">
<div class="col-sm-12">
<!-- Inventory by Makes -->
<div class="accordion" id="makesAccordion">
{% for make in inventory.makes %}
<div class="accordion-item">
<p class="accordion-header" id="heading{{ make.make_id }}">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse{{ make.make_id }}"
aria-expanded="true"
aria-controls="collapse{{ make.make_id }}">
{{ make.make_name }}:&nbsp;
<strong>{{ make.total_cars }}</strong>
</button>
</p>
<div id="collapse{{ make.make_id }}"
class="accordion-collapse collapse"
aria-labelledby="heading{{ make.make_id }}"
data-bs-parent="#makesAccordion">
<div class="accordion-body">
<p>{% trans "models"|capfirst %}</p>
<ul class="list-group">
{% for model in make.models %}
<li class="list-group-item">
{{ model.model_name }}:&nbsp;
<strong>{{ model.total_cars }}</strong>
<button class="btn btn-sm btn-link text-decoration-none"
type="button"
data-bs-toggle="collapse"
data-bs-target="#detailsModel{{ model.model_id }}"
aria-expanded="false"
aria-controls="detailsModel{{ model.model_id }}">
{% trans "Details" %}
</button>
<div class="collapse mt-2" id="detailsModel{{ model.model_id }}">
<p class="mt-2">{% trans "Trims" %}</p>
<ul>
{% for trim in model.trims %}
<li>
<a href="{% url 'car_inventory' make_id=make.slug model_id=model.slug trim_id=trim.slug %}">{{ trim.trim_name }}</a>&nbsp;-&nbsp;{% trans "Total" %}:
<strong>{{ trim.total_cars }}</strong>
</li>
{% empty %}
<li>{% trans "No trims available" %}</li>
{% endfor %}
</ul>
</div>
</li>
{% empty %}
<li class="list-group-item">{% trans "No models available." %}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div> </div>
</div>
{% endblock %} {% endblock %}

View File

@ -1,30 +1,23 @@
<!-- templates/cars/reserve_car.html --> <!-- templates/cars/reserve_car.html -->
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% block title %}
{% block title %}{% trans "Reserve Car" %}{% endblock %} {% trans "Reserve Car" %}
{% endblock %}
{% block content %} {% block content %}
<h1>{% trans "Reserve Car" %}</h1> <h1>{% trans "Reserve Car" %}</h1>
<p>{% trans "You are reserving" %}: {{ car }}</p> <p>{% trans "You are reserving" %}: {{ car }}</p>
<form method="post" class="needs-validation" novalidate> <form method="post" class="needs-validation" novalidate>
{% csrf_token %} {% csrf_token %}
<div class="mb-3"> <div class="mb-3">
<label for="id_reservation_start">{% trans "Reservation Start Time" %}</label> <label for="id_reservation_start">{% trans "Reservation Start Time" %}</label>
{{ form.reservation_start }} {{ form.reservation_start }}
{% for error in form.reservation_start.errors %} {% for error in form.reservation_start.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="id_reservation_end">{% trans "Reservation End Time" %}</label> <label for="id_reservation_end">{% trans "Reservation End Time" %}</label>
{{ form.reservation_end }} {{ form.reservation_end }}
{% for error in form.reservation_end.errors %} {% for error in form.reservation_end.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div> </div>
<button type="submit" class="btn btn-primary">{% trans "Reserve" %}</button> <button type="submit" class="btn btn-primary">{% trans "Reserve" %}</button>
<a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary">{% trans "Cancel" %}</a> <a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary">{% trans "Cancel" %}</a>

View File

@ -1,32 +1,28 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static i18n%} {% load static i18n %}
{% block content %} {% block content %}
<div class="container my-4"> <div class="container my-4">
<h3 class="mb-4">{{ _("Scan Vehicle Code")}}</h3> <h3 class="mb-4">{{ _("Scan Vehicle Code") }}</h3>
<form id="car-form" class="mb-3"> <form id="car-form" class="mb-3">
<div class="mb-3"> <div class="mb-3">
<label for="vin_no" class="form-label">{{ _("VIN / Barcode / QR Code")}}</label> <label for="vin_no" class="form-label">{{ _("VIN / Barcode / QR Code") }}</label>
<input type="text" class="form-control" id="vin_no" name="vin_no" readonly> <input type="text" class="form-control" id="vin_no" name="vin_no" readonly>
</div> </div>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<button type="button" class="btn btn-primary" id="capture-btn">{{ _("Start Scanning")}}</button> <button type="button" class="btn btn-primary" id="capture-btn">{{ _("Start Scanning") }}</button>
<button type="submit" class="btn btn-success">{{ _("Search") }}</button> <button type="submit" class="btn btn-success">{{ _("Search") }}</button>
</div> </div>
</form> </form>
<div id="camera-container" class="my-3" style="display:none;"> <div id="camera-container" class="my-3" style="display:none;">
<video id="camera" class="border rounded" autoplay playsinline width="100%"></video> <video id="camera" class="border rounded" autoplay playsinline width="100%">
</video>
<div class="mt-2 d-flex gap-2"> <div class="mt-2 d-flex gap-2">
<button class="btn btn-warning" id="toggle-btn">{{ _("Switch Camera")}}</button> <button class="btn btn-warning" id="toggle-btn">{{ _("Switch Camera") }}</button>
<button class="btn btn-info" id="scan-btn">{{ _("Scan") }}</button> <button class="btn btn-info" id="scan-btn">{{ _("Scan") }}</button>
</div> </div>
</div> </div>
<div id="result" class="alert mt-3" style="display:none;"></div> <div id="result" class="alert mt-3" style="display:none;"></div>
</div> </div>
<script> <script>
function getCookie(name) { function getCookie(name) {
let cookieValue = null; let cookieValue = null;

View File

@ -1,7 +1,8 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load i18n %} {% load i18n %}
{% block title %}
{% block title %}{% trans "Transfer Car"|capfirst %}{% endblock title %} {% trans "Transfer Car"|capfirst %}
{% endblock title %}
{% block content %} {% block content %}
<h1>{% trans "transfer car"|capfirst %}</h1> <h1>{% trans "transfer car"|capfirst %}</h1>
<form method="post"> <form method="post">
@ -10,18 +11,10 @@
<div class="form-group"> <div class="form-group">
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label> <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }} {{ field }}
{% if field.errors %} {% if field.errors %}<div class="alert alert-danger">{{ field.errors }}</div>{% endif %}
<div class="alert alert-danger"> {% if field.help_text %}<small class="form-text text-muted">{{ field.help_text|safe }}</small>{% endif %}
{{ field.errors }}
</div>
{% endif %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text|safe }}</small>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
<button type="submit" class="btn btn-sm btn-primary">{% trans "transfer"|capfirst %}</button> <button type="submit" class="btn btn-sm btn-primary">{% trans "transfer"|capfirst %}</button>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -3,115 +3,138 @@
{% load i18n %} {% load i18n %}
{% load custom_filters %} {% load custom_filters %}
{% load num2words_tags %} {% load num2words_tags %}
{% block title %} {% block title %}
{% trans 'Car Transfer Details' %} {% trans 'Car Transfer Details' %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<!-- Approve Modal --> <!-- Approve Modal -->
<div class="modal fade" id="approveCardModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true"> <div class="modal fade"
<div class="modal-dialog modal-sm"> id="approveCardModal"
<div class="modal-content"> tabindex="-1"
<div class="modal-header bg-primary"> aria-labelledby="approveModalLabel"
<h5 class="modal-title text-light" id="approveModalLabel">{% trans 'Car Transfer Approve' %}</h5> aria-hidden="true">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title text-light" id="approveModalLabel">{% trans 'Car Transfer Approve' %}</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">{% trans 'Are you sure?' %}</div>
<div class="modal-footer">
<button type="button"
class="btn btn-sm btn-phoenix-danger"
data-bs-dismiss="modal">{% trans 'No' %}</button>
<form method="POST"
action="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}"
class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-phoenix-success btn-sm">{% trans 'Confirm' %}</button>
</form>
</div>
</div>
</div> </div>
<div class="modal-body">
{% trans 'Are you sure?' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-phoenix-danger" data-bs-dismiss="modal">{% trans 'No' %}</button>
<form method="POST" action="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-phoenix-success btn-sm">{% trans 'Confirm' %}</button>
</form>
</div>
</div>
</div> </div>
</div> <!-- Cancel Modal -->
<!-- Cancel Modal --> <div class="modal fade"
<div class="modal fade" id="cancelCardModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true"> id="cancelCardModal"
<div class="modal-dialog modal-sm"> tabindex="-1"
<div class="modal-content"> aria-labelledby="cancelModalLabel"
<div class="modal-header bg-primary"> aria-hidden="true">
<h5 class="modal-title text-light" id="cancelModalLabel">{% trans 'Cancel Transfer' %}</h5> <div class="modal-dialog modal-sm">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title text-light" id="cancelModalLabel">{% trans 'Cancel Transfer' %}</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">{% trans 'Are you sure' %}?</div>
<div class="p-1">
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">{% trans 'No' %}</button>
<a href="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}?action=cancel"
type="button"
type="submit"
class="btn btn-success btn-sm">{% trans 'Yes' %}</a>
</div>
</div>
</div>
</div> </div>
<div class="modal-body"> </div>
{% trans 'Are you sure' %}? <div class="row g-3">
<div class="col-12">
<h3 class="my-3">{% trans 'Transfer Details' %}</h3>
<div class="transfer-details">
<p>
<strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
</p>
<p>
<strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
</p>
<p>
<strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
</p>
</div>
<!-- Items Table -->
<div class="table table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>{% trans "VIN" %}</th>
<th>{% trans "Car" %}</th>
<th class="text-center">{% trans "Price" %}</th>
<th class="text-center">{% trans "VAT" %}</th>
<th class="text-center">{% trans "Total" %}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ transfer.car.vin }}</td>
<td>{{ transfer.car }}</td>
<td class="text-center">
{{ transfer.car.finances.selling_price }}&nbsp;<span class="currency">{{ CURRENCY }}</span>
</td>
<td class="text-center">
{{ transfer.car.finances.vat_amount }}&nbsp;<span class="currency">{{ CURRENCY }}</span>
</td>
<td class="text-center">
{{ transfer.total_price }}&nbsp;<span class="currency">{{ CURRENCY }}</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Total -->
<div class="transfer-total">
<p>
<strong>{% trans "Total Amount" %}:</strong> <span class="text-danger-darker fw-bold fs-8">{{ transfer.total_price }}&nbsp;<span class="currency">{{ CURRENCY }}</span></span>
</p>
<p>
<strong>{% trans "Total Amount written" %}:</strong> <span>{{ transfer.total_price|num_to_words:"ar" }}&nbsp;<span class="currency">{{ CURRENCY }}</span> {{ _("only") }}</span>
</p>
</div>
</div> </div>
<div class="p-1"> <div class="col-12"></div>
<div class="d-flex gap-1"> </div>
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">{% trans 'No' %}</button> <div class="row g-1">
<a href="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}?action=cancel" type="button" type="submit" class="btn btn-success btn-sm">{% trans 'Yes' %}</a> <div class="col-12">
</div> <div class="d-flex gap-1">
{% if not action == 'cancel' %}
<button type="button"
class="btn btn-sm btn-success w-100"
data-bs-toggle="modal"
data-bs-target="#approveCardModal">{% trans 'Approve' %}</button>
{% endif %}
<button type="button"
class="btn btn-sm btn-warning w-100"
data-bs-toggle="modal"
data-bs-target="#cancelCardModal">{% trans 'Cancel Transfer' %}</button>
</div>
</div> </div>
</div>
</div> </div>
</div> <!-- JavaScript Section -->
<div class="row g-3">
<div class="col-12">
<h3 class="my-3">{% trans 'Transfer Details' %}</h3>
<div class="transfer-details">
<p><strong>{% trans "Date" %} :</strong> {{transfer.created_at}}</p>
<p><strong>{% trans "From" %} :</strong> {{transfer.from_dealer}}</p>
<p><strong>{% trans "To" %} :</strong> {{transfer.to_dealer}}</p>
</div>
<!-- Items Table -->
<div class="table table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>{% trans "VIN" %}</th>
<th>{% trans "Car" %}</th>
<th class="text-center">{% trans "Price" %}</th>
<th class="text-center">{% trans "VAT" %}</th>
<th class="text-center">{% trans "Total" %}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ transfer.car.vin }}</td>
<td>{{ transfer.car }}</td>
<td class="text-center">{{ transfer.car.finances.selling_price }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
<td class="text-center">{{ transfer.car.finances.vat_amount }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
<td class="text-center">{{ transfer.total_price }}&nbsp;<span class="currency"> {{ CURRENCY }}</span></td>
</tr>
</tbody>
</table>
</div>
<!-- Total -->
<div class="transfer-total">
<p><strong>{%trans "Total Amount" %}:</strong> <span class="text-danger-darker fw-bold fs-8">{{transfer.total_price}}&nbsp;<span class="currency"> {{ CURRENCY }}</span></span></p>
<p><strong>{%trans "Total Amount written" %}:</strong> <span>{{ transfer.total_price|num_to_words:"ar" }}&nbsp;<span class="currency"> {{ CURRENCY }}</span> {{ _("only") }}</span></p>
</div>
</div>
<div class="col-12">
</div>
</div>
<div class="row g-1">
<div class="col-12">
<div class="d-flex gap-1">
{% if not action == 'cancel' %}
<button type="button" class="btn btn-sm btn-success w-100" data-bs-toggle="modal" data-bs-target="#approveCardModal">
{% trans 'Approve' %}
</button>
{% endif %}
<button type="button" class="btn btn-sm btn-warning w-100" data-bs-toggle="modal" data-bs-target="#cancelCardModal">
{% trans 'Cancel Transfer' %}
</button>
</div>
</div>
</div>
<!-- JavaScript Section -->
{% endblock %} {% endblock %}

View File

@ -5,11 +5,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transfer</title> <title>transfer</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
<!-- Google Fonts - Roboto --> rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <!-- Google Fonts - Roboto -->
<!-- Custom CSS --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet">
<!-- Custom CSS -->
<style> <style>
body { body {
background-color: #f8f9fa; background-color: #f8f9fa;
@ -114,25 +116,55 @@
} }
</style> </style>
{% if LANGUAGE_CODE == 'en' %} {% if LANGUAGE_CODE == 'en' %}
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default"> <link href="{% static 'css/theme.min.css' %}"
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default"> type="text/css"
rel="stylesheet"
id="style-default">
<link href="{% static 'css/user.min.css' %}"
type="text/css"
rel="stylesheet"
id="user-style-default">
{% else %} {% else %}
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl"> <link href="{% static 'css/theme-rtl.min.css' %}"
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl"> type="text/css"
rel="stylesheet"
id="style-rtl">
<link href="{% static 'css/user-rtl.min.css' %}"
type="text/css"
rel="stylesheet"
id="user-style-rtl">
{% endif %} {% endif %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head> </head>
<body> <body>
{% if transfer.status != "approved" %} {% if transfer.status != "approved" %}
<main class="main" id="top"> <main class="main" id="top">
<div class="px-3"> <div class="px-3">
<div class="row min-vh-100 flex-center p-5"> <div class="row min-vh-100 flex-center p-5">
<div class="col-12 col-xl-10 col-xxl-8"> <div class="col-12 col-xl-10 col-xxl-8">
<div class="row justify-content-center align-items-center g-5"> <div class="row justify-content-center align-items-center g-5">
<div class="col-12 col-lg-6 text-center order-lg-1"><img class="img-fluid w-lg-100 d-dark-none" src="{% static 'images/spot-illustrations/404-illustration.png' %}" alt="" width="400" /><img class="img-fluid w-md-50 w-lg-100 d-light-none" src="../../assets/img/spot-illustrations/dark_404-illustration.png" alt="" width="540" /></div> <div class="col-12 col-lg-6 text-center order-lg-1">
<div class="col-12 col-lg-6 text-center text-lg-start"><img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/404.png' %}" alt="" /><img class="img-fluid mb-6 w-50 w-lg-75 d-light-none" src="../../assets/img/spot-illustrations/dark_404.png" alt="" /> <img class="img-fluid w-lg-100 d-dark-none"
src="{% static 'images/spot-illustrations/404-illustration.png' %}"
alt=""
width="400" />
<img class="img-fluid w-md-50 w-lg-100 d-light-none"
src="../../assets/img/spot-illustrations/dark_404-illustration.png"
alt=""
width="540" />
</div>
<div class="col-12 col-lg-6 text-center text-lg-start">
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
src="{% static 'images/spot-illustrations/404.png' %}"
alt="" />
<img class="img-fluid mb-6 w-50 w-lg-75 d-light-none"
src="../../assets/img/spot-illustrations/dark_404.png"
alt="" />
<h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2> <h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
<p class="text-body mb-5">But no worries! Our ostrich is looking everywhere <br class="d-none d-sm-block" /> <p class="text-body mb-5">
But no worries! Our ostrich is looking everywhere
<br class="d-none d-sm-block" />
</div> </div>
</div> </div>
</div> </div>
@ -151,117 +183,142 @@
navbarVertical.setAttribute('data-navbar-appearance', 'darker'); navbarVertical.setAttribute('data-navbar-appearance', 'darker');
} }
</script> </script>
</main> </main>
{% else%} {% else %}
<div class="button-row"> <div class="button-row">
<button id="download-pdf" class="btn btn-primary"> <button id="download-pdf" class="btn btn-primary">
<i class="fas fa-download"></i> {% trans 'Download transfer' %} <i class="fas fa-download"></i> {% trans 'Download transfer' %}
</button> </button>
<button id="accept" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#acceptModal"> <button id="accept"
<i class="fas fa-check-circle"></i> {% trans 'Accept transfer' %} class="btn btn-success"
</button> data-bs-toggle="modal"
<button id="reject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal"> data-bs-target="#acceptModal">
<i class="fas fa-times-circle"></i> {% trans 'Reject transfer' %} <i class="fas fa-check-circle"></i> {% trans 'Accept transfer' %}
</button> </button>
</div> <button id="reject"
class="btn btn-danger"
<!-- Accept Modal --> data-bs-toggle="modal"
<div class="modal fade" id="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true"> data-bs-target="#rejectModal">
<div class="modal-dialog"> <i class="fas fa-times-circle"></i> {% trans 'Reject transfer' %}
<div class="modal-content"> </button>
<div class="modal-header"> </div>
<h5 class="modal-title" id="acceptModalLabel">{% trans 'Accept transfer' %}</h5> <!-- Accept Modal -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal fade"
</div> id="acceptModal"
<div class="modal-body"> tabindex="-1"
{% trans 'Are you sure you want to accept this transfer?' %} aria-labelledby="acceptModalLabel"
</div> aria-hidden="true">
<div class="modal-footer"> <div class="modal-dialog">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> <div class="modal-content">
<a class="btn btn-success" href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=accepted">Confirm</a> <div class="modal-header">
<h5 class="modal-title" id="acceptModalLabel">{% trans 'Accept transfer' %}</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">{% trans 'Are you sure you want to accept this transfer?' %}</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
<a class="btn btn-success"
href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=accepted">Confirm</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- Reject Modal -->
<div class="modal fade"
<!-- Reject Modal --> id="rejectModal"
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true"> tabindex="-1"
<div class="modal-dialog"> aria-labelledby="rejectModalLabel"
<div class="modal-content"> aria-hidden="true">
<div class="modal-header"> <div class="modal-dialog">
<h5 class="modal-title" id="rejectModalLabel">{% trans 'Reject transfer' %}</h5> <div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-header">
</div> <h5 class="modal-title" id="rejectModalLabel">{% trans 'Reject transfer' %}</h5>
<div class="modal-body"> <button type="button"
{% trans 'Are you sure you want to reject this transfer?' %} class="btn-close"
</div> data-bs-dismiss="modal"
<div class="modal-footer"> aria-label="Close"></button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> </div>
<a class="btn btn-success" href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=rejected">Confirm</a> <div class="modal-body">{% trans 'Are you sure you want to reject this transfer?' %}</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
<a class="btn btn-success"
href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=rejected">Confirm</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="transfer-row" id="transfer-content">
<!-- Header -->
<div class="transfer-row" id="transfer-content"> <div class="transfer-header">
<!-- Header --> <svg width="101"
<div class="transfer-header"> height="24"
<svg width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 101 24"
<!-- SVG Paths --> fill="none"
</svg> xmlns="http://www.w3.org/2000/svg">
<h1 style="margin-top: 10px;"><b>{% trans "Transfer" %}</b></h1> <!-- SVG Paths -->
<p>{% trans "Thank you for choosing us. We appreciate your business" %}</p> </svg>
<h1 style="margin-top: 10px;">
<b>{% trans "Transfer" %}</b>
</h1>
<p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
</div>
<!-- Details -->
<div class="transfer-details">
<p>
<strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
</p>
<p>
<strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
</p>
<p>
<strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
</p>
</div>
<!-- Items Table -->
<div class="transfer-table">
<table class="table table-bordered">
<thead>
<tr>
<th>{% trans "Item" %}</th>
<th class="text-center">{% trans "Quantity" %}</th>
<th class="text-center">{% trans "Unit Price" %}</th>
<th class="text-center">{% trans "Total" %}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ transfer.car }}</td>
<td class="text-center">{{ transfer.quantity }}</td>
<td class="text-center">{{ transfer.car.finances.selling_price }}</td>
<td class="text-center">{{ transfer.total_price }}</td>
</tr>
</tbody>
</table>
</div>
<!-- Total -->
<div class="transfer-total">
<p>
<strong>{% trans "Total Amount" %}:</strong> <span class="highlight">${{ transfer.total_price }}</span>
</p>
</div>
<!-- Footer Note -->
<div class="footer-note">
<p>
{% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@tenhal.com</a>.
</p>
<p>{% trans "Thank you for your business" %}</p>
</div>
</div> </div>
{% endif %}
<!-- Details --> <!-- Bootstrap JS (Optional) -->
<div class="transfer-details"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<p><strong>{% trans "Date" %} :</strong> {{transfer.created_at}}</p> <!-- jsPDF Library -->
<p><strong>{% trans "From" %} :</strong> {{transfer.from_dealer}}</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<p><strong>{% trans "To" %} :</strong> {{transfer.to_dealer}}</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</div> <script>
<!-- Items Table -->
<div class="transfer-table">
<table class="table table-bordered">
<thead>
<tr>
<th>{% trans "Item" %}</th>
<th class="text-center">{% trans "Quantity" %}</th>
<th class="text-center">{% trans "Unit Price" %}</th>
<th class="text-center">{% trans "Total" %}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ transfer.car }}</td>
<td class="text-center">{{ transfer.quantity }}</td>
<td class="text-center">{{ transfer.car.finances.selling_price }}</td>
<td class="text-center">{{ transfer.total_price }}</td>
</tr>
</tbody>
</table>
</div>
<!-- Total -->
<div class="transfer-total">
<p><strong>{%trans "Total Amount" %}:</strong> <span class="highlight">${{transfer.total_price}}</span></p>
</div>
<!-- Footer Note -->
<div class="footer-note">
<p>{% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@tenhal.com</a>.</p>
<p>{% trans "Thank you for your business" %}</p>
</div>
</div>
{% endif %}
<!-- Bootstrap JS (Optional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- jsPDF Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
document.getElementById('download-pdf').addEventListener('click', function () { document.getElementById('download-pdf').addEventListener('click', function () {
const element = document.getElementById('transfer-content'); const element = document.getElementById('transfer-content');
@ -292,6 +349,6 @@
// Handle the reject action here // Handle the reject action here
$('#rejectModal').modal('hide'); $('#rejectModal').modal('hide');
}); });
</script> </script>
</body> </body>
</html> </html>