223 lines
11 KiB
HTML
223 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load qr_code %}
|
|
{% load crispy_forms_tags %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="row justify-content-center">
|
|
{% if component.get_resolved_image %}
|
|
<img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
|
|
{% else %}
|
|
<img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
{% qr_from_text component.get_qr_code size="m" image_format="svg" %}
|
|
</div>
|
|
<div class="row">
|
|
{% if component.datasheet_link %}
|
|
<a class="btn btn-secondary mb-2" href="{{component.datasheet_link}}"><i class="bi bi-file-pdf-fill"></i> Datasheet</a>
|
|
{% endif %}
|
|
<button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#comp-edit-modal"><i class="bi bi-pencil-square"></i> Edit Component</button>
|
|
</div>
|
|
</div>
|
|
<div class="col m-1">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Package</th>
|
|
<th scope="col">Manufacturer</th>
|
|
<th scope="col">Type</th>
|
|
<th scope="col">Total #</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-middle" scope="row">
|
|
{{component.name}}
|
|
</td>
|
|
<td class="align-middle" >
|
|
{% if component.package %}
|
|
<a href="{% url 'parts-packages-detail' uuid=component.package.id %}" class="link-primary text-decoration-none">{{component.package.name}}</a>
|
|
{% if component.package.image %}
|
|
<img src="{{component.package.image.url}}" class="component-img-small">
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
<td class="align-middle" >
|
|
{% if component.manufacturer %}
|
|
<a href="{% url 'parts-manufacturers-detail' uuid=component.manufacturer.id %}" class="link-primary text-decoration-none">{{component.manufacturer.name}}</a>
|
|
{% if component.manufacturer.image %}
|
|
<img src="{{component.manufacturer.image.url}}" class="component-img-small">
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
<td class="align-middle">
|
|
{% if component.component_type %}{{component.component_type.class_name}}{% endif %}
|
|
</td>
|
|
<td class="align-middle">
|
|
{{component.get_total_amount}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h2>Description</h2>
|
|
{% if component.description %}
|
|
{{component.description|linebreaks}}
|
|
{% else %}
|
|
<div class="alert alert-secondary" role="alert">
|
|
No description available
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-4">
|
|
{% if component.pref_distri %}
|
|
<h4>Preferred Distributor</h4>
|
|
<div class="d-flex align-items-center">
|
|
{% if component.pref_distri.image %}
|
|
<div class="flex-shrink-0">
|
|
<img src="{{component.pref_distri.image.url}}" alt="{{component.pref_distri.name}}" class="component-img-big">
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<h6>{{component.pref_distri.name}}</h6>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3>Parameters</h3>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<table class="table">
|
|
<thead>
|
|
<th scope="col">Parameter</th>
|
|
<th scope="col">Value</th>
|
|
<th scope="col">Unit</th>
|
|
</thead>
|
|
<tbody>
|
|
{% for f in param_formset %}
|
|
<tr>
|
|
<td><input type="text" class="form-control{% if f.parameter_type.errors %} is-invalid{% endif %}" name="{{f.parameter_type.html_name}}" value="{{f.parameter_type.value}}"></td>
|
|
<td><input type="text" class="form-control{% if f.value.errors %} is-invalid{% endif %}" name="{{f.value.html_name}}" value="{{f.value.value}}"></td>
|
|
<td>{{f.parameter_type_object.unit|default_if_none:"-"}}</td>
|
|
</tr>
|
|
{% if f.errors %}
|
|
<tr class="text-danger">
|
|
<td>
|
|
{% if f.parameter_type.errors %}
|
|
{{f.parameter_type.errors}}
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if f.value.errors %}
|
|
{{f.value.errors}}
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{{param_formset.management_form}}
|
|
<input type="submit" class="btn btn-primary" name="submit-edit-params" value="Save Parameters">
|
|
</form>
|
|
</div>
|
|
<div class="col">
|
|
<h3>Distributor Part Numbers</h3>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<table class="table">
|
|
<thead>
|
|
<th scope="col">Distributor</th>
|
|
<th scope="col">Part Number</th>
|
|
</thead>
|
|
<tbody>
|
|
{% for form in distri_num_formset %}
|
|
<tr>
|
|
<td>
|
|
{% if form.instance.distributor %}
|
|
{{form.instance.distributor.name}}
|
|
{% else %}
|
|
<input type="text" name="__unused_search" id="{{form.distributor.id_for_label}}-search">
|
|
{% endif %}
|
|
</td>
|
|
<input type="hidden" name="{{form.distributor.html_name}}" id="{{form.distributor.id_for_label}}" value="{{form.distributor.value|default_if_none:""}}">
|
|
<input type="hidden" name="{{form.id.html_name}}" value="{{form.id.value|default_if_none:""}}">
|
|
<td>
|
|
<input class="form-control" type="text" name="{{form.distributor_part_number.html_name}}" id="{{form.distributor_part_number.id_for_label}}" value="{{form.distributor_part_number.value|default_if_none:""}}">
|
|
</td>
|
|
</tr>
|
|
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{{distri_num_formset.management_form}}
|
|
<input type="submit" class="btn btn-secondary" name="submit-edit-distri-nums" value="Save">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<table class="table">
|
|
<thead>
|
|
<th scope="col">Storage</th>
|
|
<th scope="col">Amount</th>
|
|
</thead>
|
|
<tbody>
|
|
{% for stock in stocks %}
|
|
<tr>
|
|
<td><a class="text-decoration-none text-primary" href="{% url 'parts-stocks-detail' uuid=stock.storage.id %}">{{stock.storage.get_full_path}}</a></td>
|
|
<td>{{stock.amount}}</td>
|
|
<tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if component.get_resolved_image %}
|
|
<div class="modal fade" id="comp-img-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg modal-fullscreen-lg-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5>{{component.name}}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<img class="component-img-huge" src="{{component.get_resolved_image}}">
|
|
</div>
|
|
{% if not component.image %}
|
|
<hr>
|
|
<div class="alert alert-warning">
|
|
Component doesn't have an image. The image is inherited from its package.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=edit_form %}
|
|
{% endblock content %}
|
|
|
|
{% block custom_scripts %}
|
|
|
|
<script type="text/javascript">
|
|
{% if edit_form.errors %}
|
|
bootstrap.Modal.getOrCreateInstance(document.getElementById('comp-edit-modal')).show()
|
|
{% endif %}
|
|
</script>
|
|
{% endblock custom_scripts %}
|
|
|