shimatta-kenkyusho/shimatta_kenkyusho/templates/parts/components-detail.html

283 lines
14 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>
<button class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#component-delete-modal"><i class="bi bi-file-x"></i> Delete {{component.name}}</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 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 class="row">
<div class="col">
<h3>Parameters <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#new-component-parameter-modal"><i class="bi bi-plus-circle"></i></button></h3>
<table class="table align-middle mb-3">
<thead>
<th scope="col">Parameter</th>
<th scope="col">Value</th>
<th scope="col"></th>
</thead>
<tbody>
{% for param in package_parameters %}
<td>
<h6 {% if param.parameter_type.parameter_description %} class="accordion-header" data-bs-toggle="collapse" data-bs-target="#collapse-pkg-parameter-desc-{{forloop.counter}}"{% endif %}>
{{param.parameter_type.parameter_name}}
</h6>
</td>
<td>
{{param.resolved_value_as_string}}
</td>
<td><span class="text-info">from Package</span></td>
{% endfor %}
{% for param in parameters %}
<tr>
<td>
<h6 {% if param.parameter_type.parameter_description %} class="accordion-header" data-bs-toggle="collapse" data-bs-target="#collapse-parameter-desc-{{forloop.counter}}"{% endif %}>
{{param.parameter_type.parameter_name}}
</h6>
</td>
<td>
{{param.resolved_value_as_string}}
</td>
<td>
<form method="post">
{% csrf_token %}
<input type="hidden" value="{{param.id}}" name="param_num">
<button class="btn btn-danger" name="submit-delete-param">X</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="accordion" id="accordion-param-desc">
{% for param in parameters %}
{% if param.parameter_type.parameter_description %}
<div class="collapse accordion-collapse" id="collapse-parameter-desc-{{forloop.counter}}" data-bs-parent="#accordion-param-desc">
{{param.parameter_type.parameter_description}}
</div>
{% endif %}
{% endfor %}
{% for param in package_parameters %}
{% if param.parameter_type.parameter_description %}
<div class="collapse accordion-collapse" id="collapse-pkg-parameter-desc-{{forloop.counter}}" data-bs-parent="#accordion-param-desc">
{{param.parameter_type.parameter_description}}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="col">
<h3>Distributor Part Numbers <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#new-distributor-number-modal"><i class="bi bi-plus-circle"></i></button></h3>
<table class="table align-middle">
<thead>
<th scope="col">Distributor</th>
<th scope="col">Part Number</th>
<th scope="col"></th>
</thead>
<tbody>
{% for num in distri_nums %}
<tr>
<td><a class="link-primary text-decoration-none" href="{% url 'parts-distributors-detail' uuid=num.distributor.id %}">{{num.distributor.name}}</a></td>
<td>{{num.distributor_part_number}}</td>
<td>
<form method="post">
{% csrf_token %}
<input type="hidden" value="{{num.id}}" name="distributor_num">
<button class="btn btn-danger" name="submit-delete-distributor-num">X</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</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 %}
<!-- Delete modal -->
<div class="modal fade" id="component-delete-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">
<h4>Delete this Component?</h4>
{% if delete_error %}
<div class="alert alert-danger">
{{delete_error}}
</div>
{% if protected_stuff %}
<h4>Following prevent the deletion:</h4>
<ul>
{% for elem in protected_stuff %}
<li>{{elem}}</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
</div>
<div class="modal-footer">
<form action="" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-danger" name="submit-component-delete"><i class="bi bi-file-x"></i> Delete {{component.name}}</button>
</form>
</div>
</div>
</div>
</div>
{% include 'parts/modals/new-distributor-number-modal.html' with component_name=component.name form=new_distri_num_form %}
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=comp_form %}
{% include 'parts/modals/new-component-parameter-modal.html' with component_name=component.name form=new_param_form %}
{% endblock content %}
{% block custom_scripts %}
<script type="text/javascript">
{% if comp_form.errors %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('comp-edit-modal')).show()
{% endif %}
{% if delete_error %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('component-delete-modal')).show();
{% endif %}
{% if new_distri_num_form.errors %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('new-distributor-number-modal')).show();
{% endif %}
{% if new_param_form.errors %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('new-component-parameter-modal')).show();
{% endif %}
</script>
{% endblock custom_scripts %}