Add manufacturers and distributors to Website

shimatta_kenkyusho/templates/parts/distributors-detail.html

@@ -0,0 +1,94 @@
+{% extends 'base.html' %}
+
+{% load static %}
+{% load crispy_forms_tags %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-3">
+            <div class="row justify-content-center">
+                {% if distributor.image %}
+                    <img src="{{distributor.image.url}}" alt="{{distributor.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#distri-img-modal">
+                {% else %}
+                    <img src="{% static 'css/icons/card-image.svg' %}" alt="{{distributor.name}}" class="component-img-def-big">
+                {% endif %}
+            </div>
+            <div class="row">
+                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#distri-delete-modal"><i class="bi bi-file-x"></i> Delete {{distributor.name}}</button>
+            </div>
+        </div>
+        <div class="col m-1">
+        <h2>Distributor {{distributor.name}}</h2>
+        <form action="" method="post" enctype="multipart/form-data">
+            {% csrf_token %}
+            {{edit_form|crispy}}
+            <input type="submit" class="btn btn-primary" value="Save" name="submit-distri-edit">
+        </form>
+        </div>
+    </div>
+</div>
+
+{% if distributor.image %}
+<div class="modal fade" id="distri-img-modal" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>{{distributor.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="{{distributor.image.url}}">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<!-- Delete modal -->
+<div class="modal fade" id="distri-delete-modal" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>{{distributor.name}}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h4>Delete this Distributor?</h4>
+                {% if delete_error %}
+                <div class="alert alert-danger">
+                    {{delete_error}}
+                </div>
+                {% if protected_components %}
+                <h4>Following components prevent the deletion:</h4>
+                <ul>
+                    {% for comp in protected_components %}
+                    <li><a class="text-decoration-none text-primary" href="{% url 'parts-components-detail' uuid=comp.id %}">{{comp}}</a></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-distri-delete"><i class="bi bi-file-x"></i> Delete {{distributor.name}}</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% endblock content %}
+
+{% block custom_scripts %}
+<script type="text/javascript">
+{% if delete_error %}
+bootstrap.Modal.getOrCreateInstance(document.getElementById('distri-delete-modal')).show();
+{% endif %}
+</script>
+
+{% endblock custom_scripts %}