{% 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 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 %} </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 %}