Refactor image fragment to improve code readability and maintainability
This commit is contained in:
parent
d488324c50
commit
028cb84fed
1 changed files with 43 additions and 41 deletions
|
|
@ -4,49 +4,51 @@
|
||||||
<!-- Image fragment -->
|
<!-- Image fragment -->
|
||||||
<div class="image-slot text-center">
|
<div class="image-slot text-center">
|
||||||
{% if image %}
|
{% if image %}
|
||||||
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
|
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
|
||||||
style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
|
style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
|
||||||
<div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
|
<div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-body text-center">
|
<div class="modal-body text-center">
|
||||||
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-fluid">
|
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}"
|
||||||
</div>
|
class="img-fluid">
|
||||||
{% if enabled %}
|
|
||||||
<div class="modal-footer justify-content-between">
|
|
||||||
<button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
|
|
||||||
{{ icons.render_icon('trash') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
|
|
||||||
<input type="file" id="image-upload-input-{{ id }}" name="file"
|
|
||||||
onchange="ImageWidget.submitImageUpload('{{ id }}')">
|
|
||||||
<input type="hidden" name="target_model" value="inventory">
|
|
||||||
<input type="hidden" name="model_id" value="{{ id }}">
|
|
||||||
<input type="hidden" name="caption" value="Uploaded via UI">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
|
|
||||||
{{ icons.render_icon('upload') }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% if enabled %}
|
||||||
|
<div class="modal-footer justify-content-between">
|
||||||
|
<button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
|
||||||
|
{{ icons.render_icon('trash') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
|
||||||
|
<input type="file" id="image-upload-input-{{ id }}" name="file"
|
||||||
|
onchange="ImageWidget.submitImageUpload('{{ id }}')">
|
||||||
|
<input type="hidden" name="target_model" value="inventory">
|
||||||
|
<input type="hidden" name="model_id" value="{{ id }}">
|
||||||
|
<input type="hidden" name="caption" value="Uploaded via UI">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
|
||||||
|
{{ icons.render_icon('upload') }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if enabled %}
|
{% if enabled %}
|
||||||
<a href="#" class="link-secondary" onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
|
<a href="#" class="link-secondary"
|
||||||
{{ icons.render_icon('image', 256) }}
|
onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
|
||||||
</a>
|
{{ icons.render_icon('image', 256) }}
|
||||||
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
|
</a>
|
||||||
<input type="file" id="image-upload-input-{{ id }}" name="file"
|
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
|
||||||
onchange="ImageWidget.submitImageUpload('{{ id }}')">
|
<input type="file" id="image-upload-input-{{ id }}" name="file"
|
||||||
<input type="hidden" name="target_model" value="inventory">
|
onchange="ImageWidget.submitImageUpload('{{ id }}')">
|
||||||
<input type="hidden" name="model_id" value="{{ id }}">
|
<input type="hidden" name="target_model" value="inventory">
|
||||||
<input type="hidden" name="caption" value="Uploaded via UI">
|
<input type="hidden" name="model_id" value="{{ id }}">
|
||||||
</form>
|
<input type="hidden" name="caption" value="Uploaded via UI">
|
||||||
{% endif %}
|
</form>
|
||||||
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue