Replaced alert with bootstrap-modal

This commit is contained in:
Paul Konstantin Gerke 2022-02-27 02:19:19 +01:00
parent 7baeb8a85b
commit f1aa7c151c
3 changed files with 56 additions and 8 deletions

View File

@ -50,6 +50,30 @@
constructor(widget) {
this.prototype = widget.querySelector('.prototype-tag');
this.listeners = [];
this.modalElement = widget.querySelector('.tag-editor-error-modal');
this.modalBodyNode = this.modalElement.querySelector('.modal-body');
// Clean whitespace text nodes between spans
for (const n of this.modalBodyNode.childNodes) {
if (n.nodeType === Node.TEXT_NODE) {
this.modalBodyNode.removeChild(n);
}
}
}
showModal(msg) {
const selectedMessage = this.modalBodyNode.querySelector(`span[data-message='${msg}']`);
if (!selectedMessage) {
selectedMessage = this.modalBodyNode.childNodes[0];
}
for (const n of this.modalBodyNode.childNodes) {
n.classList.add('d-none');
}
selectedMessage.classList.remove('d-none');
jQuery(this.modalElement).modal('show');
}
addTagListUpdatedListener(c) {
@ -130,16 +154,12 @@
const uriTagName = encodeURIComponent(tagName);
const fail = (msg) => {
msg = msg || "Error creating tag";
this.addTagInput.select();
// TODO: Replace with modal
alert(msg);
this.taggingBase.showModal(msg || "error-creating-tag");
};
if (!tagName) {
fail('Not a valid tag name');
fail('invalid-tag-name');
return;
}
@ -164,10 +184,10 @@
(text) => {
const tagJson = JSON.parse(text);
addTag(tagJson.name, tagJson.color);
}, fail
}, () => fail("tag-creation-failed")
);
}
}, fail
}, () => fail("tag-checking-failed")
);
}
};

View File

@ -52,3 +52,8 @@
.icon-2x {
font-size: 1.65em;
}
// All modals
.modal-content {
color: theme-color('dark');
}

View File

@ -35,4 +35,27 @@
name="tags"
value="{% for t in widget.value %}"{{ t.name }}"{% if not forloop.last %},{% endif %}{% endfor %}"
>
<div class="modal fade tag-editor-error-modal">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Error</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span data-message="generic">An error ocurred</span>
<span data-message="error-creating-tag">Error creating tag.</span>
<span data-message="invalid-tag-name">Invalid tag name.</span>
<span data-message="tag-creation-failed">Failed to create tag.</span>
<span data-message="tag-checking-failed">Failed to obtain tag data.</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>