forked from enviPath/enviPy
114 lines
3.1 KiB
HTML
114 lines
3.1 KiB
HTML
{% load static %}
|
|
<!-- Delete Node -->
|
|
<dialog
|
|
id="delete_pathway_node_modal"
|
|
class="modal"
|
|
x-data="modalForm({ state: { selectedNode: '', imageUrl: '' } })"
|
|
@modal-opened.window="
|
|
const el = d3.select('circle.highlighted').node();
|
|
|
|
if (el !== null) {
|
|
const selectElement = document.getElementById('delete_pathway_node_nodes');
|
|
|
|
for (let option of selectElement.options) {
|
|
if (option.value === el.__data__.url) {
|
|
option.selected = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
selectElement.dispatchEvent(new Event('change'));
|
|
}
|
|
"
|
|
@close="reset()"
|
|
>
|
|
<div class="modal-box">
|
|
<!-- Header -->
|
|
<h3 class="text-lg font-bold">Delete Node</h3>
|
|
|
|
<!-- Close button (X) -->
|
|
<form method="dialog">
|
|
<button
|
|
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
|
:disabled="isSubmitting"
|
|
>
|
|
✕
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Body -->
|
|
<div class="py-4">
|
|
<p class="mb-4">
|
|
Deletes the Node. Edges having this Node as Substrate or Product will be
|
|
removed as well.
|
|
</p>
|
|
<form
|
|
id="delete-pathway-node-modal-form"
|
|
accept-charset="UTF-8"
|
|
action=""
|
|
method="post"
|
|
>
|
|
{% csrf_token %}
|
|
<div class="form-control">
|
|
<label class="label" for="delete_pathway_node_nodes">
|
|
<span class="label-text">Select Compound to delete</span>
|
|
</label>
|
|
<select
|
|
id="delete_pathway_node_nodes"
|
|
name="node-url"
|
|
class="select select-bordered w-full"
|
|
x-model="selectedNode"
|
|
@change="imageUrl = selectedNode ? selectedNode + '?image=svg' : ''"
|
|
required
|
|
>
|
|
<option value="" disabled selected>
|
|
Select Compound to delete
|
|
</option>
|
|
{% for n in pathway.nodes %}
|
|
<option value="{{ n.url }}">
|
|
{{ n.default_node_label.name|safe }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<input type="hidden" id="hidden" name="hidden" value="delete" />
|
|
</form>
|
|
|
|
<!-- Image Preview -->
|
|
<div class="mt-4" x-show="imageUrl" x-cloak>
|
|
<img :src="imageUrl" class="w-full" alt="Node preview" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="modal-action">
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
onclick="this.closest('dialog').close()"
|
|
:disabled="isSubmitting"
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-error"
|
|
@click="setFormAction('delete-pathway-node-modal-form', selectedNode); submit('delete-pathway-node-modal-form')"
|
|
:disabled="isSubmitting || !selectedNode"
|
|
>
|
|
<span x-show="!isSubmitting">Delete</span>
|
|
<span
|
|
x-show="isSubmitting"
|
|
class="loading loading-spinner loading-sm"
|
|
></span>
|
|
<span x-show="isSubmitting">Deleting...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backdrop -->
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button :disabled="isSubmitting">close</button>
|
|
</form>
|
|
</dialog>
|