197 lines
8.1 KiB
HTML
197 lines
8.1 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
{% block title %}
|
|
{% trans "Car Bulk Upload"|capfirst %}
|
|
{% endblock %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.color-card {
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
width: 80px; /* Increased from 3rem for better visibility */
|
|
height: 80px; /* Increased from 3rem for better visibility */
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.color-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.color-option {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.color-radio {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.color-radio:checked + .color-display {
|
|
border: 2px solid #0d6efd;
|
|
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
.color-radio:focus + .color-display {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
.color-display {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.color-name {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Added for better layout of color options */
|
|
.color-options-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
{% endblock customCSS %}
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<h2>
|
|
{% trans 'Upload Cars CSV' %} <i class="fa-solid fa-file-csv text-primary"></i>
|
|
</h2>
|
|
<div class="d-flex justify-content-end">
|
|
<a href="{% static 'sample/cars_sample.csv' %}"
|
|
class="btn btn-phoenix-primary mt-4">
|
|
<i class="fa-solid fa-file-csv me-2"></i>{% trans "Download Sample CSV" %}
|
|
</a>
|
|
</div>
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-outline-warning }} mt-4" role="alert">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<form method="post" enctype="multipart/form-data" class="mt-4">
|
|
{% csrf_token %}
|
|
{% if not item %}
|
|
<div class="row g-4">
|
|
<div class="col">
|
|
{% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
|
|
</div>
|
|
<div class="col">
|
|
{% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
|
|
</div>
|
|
<div class="col">
|
|
{% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
|
|
</div>
|
|
<div class="col">
|
|
{% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col">
|
|
{{ form.vendor.label }}
|
|
{{ form.vendor }}
|
|
</div>
|
|
<div class="col">
|
|
{{ form.year.label }}
|
|
{{ form.year }}
|
|
</div>
|
|
<div class="col">
|
|
{{ form.receiving_date.label }}
|
|
{{ form.receiving_date }}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="row g-4">
|
|
<div class="col">
|
|
<p class="fs-5 mb-2">{% trans 'Exterior Colors' %}</p>
|
|
<div class="color-options-container">
|
|
{% for color in form.fields.exterior.queryset %}
|
|
<div class="color-card">
|
|
<label class="color-option">
|
|
<input class="color-radio"
|
|
type="radio"
|
|
name="exterior"
|
|
value="{{ color.id }}"
|
|
{% if color.id == form.instance.exterior.id %}checked{% endif %}>
|
|
<div class="color-display" style="background-color: rgb({{ color.rgb }})">
|
|
<span class="color-name">{{ color.get_local_name }}</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="fs-5 mb-2">{% trans 'Interior Colors' %}</p>
|
|
<div class="color-options-container">
|
|
{% for color in form.fields.interior.queryset %}
|
|
<div class="color-card">
|
|
<label class="color-option">
|
|
<input class="color-radio"
|
|
type="radio"
|
|
name="interior"
|
|
value="{{ color.id }}"
|
|
{% if color.id == form.instance.interior.id %}checked{% endif %}>
|
|
<div class="color-display" style="background-color: rgb({{ color.rgb }})">
|
|
<span class="color-name">{{ color.get_local_name }}</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if item %}
|
|
<h3 class="mt-4">{% trans "List of Items" %}</h3>
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<span class="badge bg-primary">{{ item.item_model }}</span>
|
|
</li>
|
|
</ul>
|
|
{% endif %}
|
|
<div class="mb-3">
|
|
<label for="marked_price" class="form-label">{% trans "Marked Price" %}</label>
|
|
<input type="number"
|
|
class="form-control"
|
|
id="marked_price"
|
|
name="marked_price"
|
|
>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="csv_file" class="form-label">{% trans "CSV File" %}</label>
|
|
<input type="file"
|
|
class="form-control"
|
|
id="csv_file"
|
|
name="csv_file"
|
|
accept=".csv"
|
|
required>
|
|
<div class="form-text">{{ _("CSV should include columns: vin") }}</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-phoenix-primary mb-2">{% trans "Upload" %}</button>
|
|
<a href="{% url 'car_list' request.dealer.slug %}"
|
|
class="btn btn-phoenix-secondary mb-2">{% trans "Cancel" %}</a>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|