chatview: add the ability to remove one interaction from history
Change-Id: I27a0ec40c3215f966a3637f681845b196f5418d7
Reviewed-by: Philippe Gorley <philippe.gorley@savoirfairelinux.com>
diff --git a/web/chatview.html b/web/chatview.html
index fec9979..46af2c1 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -879,7 +879,7 @@
sending.setAttribute("class", "sending")
sending.innerHTML = "<svg overflow=\"hidden\" viewBox=\"0 -2 16 14\" height=\"16px\" width=\"16px\"><circle class=\"status_circle anim-first\" cx=\"4\" cy=\"12\" r=\"1\"/><circle class=\"status_circle anim-second\" cx=\"8\" cy=\"12\" r=\"1\"/><circle class=\"status_circle anim-third\" cx=\"12\" cy=\"12\" r=\"1\"/></svg>"
// add sending animation to message;
- message_div.appendChild(sending)
+ message_div.insertBefore(sending, message_div.querySelector(".menu_interaction"))
}
message_div.querySelector(".message_text").style = "color: #888"
break
@@ -893,7 +893,7 @@
failure_div.setAttribute("class", "failure")
failure_div.innerHTML = "<svg overflow=\"visible\" viewBox=\"0 -2 16 14\" height=\"16px\" width=\"16px\"><path class=\"status-x x-first\" stroke=\"#AA0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" fill=\"none\" d=\"M4,4 L12,12\"/><path class=\"status-x x-second\" stroke=\"#AA0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" fill=\"none\" d=\"M12,4 L4,12\"/></svg>"
// add failure animation to message
- message_div.appendChild(failure_div)
+ message_div.insertBefore(failure_div, message_div.querySelector(".menu_interaction"))
}
if (sending) sending.style.display = "none"
break
@@ -980,6 +980,28 @@
}
/**
+ * Remove an interaction from the conversation
+ * @param interaction_id
+ */
+/* exported removeInteraction */
+function removeInteraction(interaction_id) {
+ var interaction = document.querySelector(`#message_${interaction_id}`)
+ var child = interaction
+ var messages = document.querySelector("#messages")
+ var i = 0
+ while( (child = child.previousSibling) != null )
+ i++
+ if (interaction) interaction.parentNode.removeChild(interaction)
+ if (i < messages.children.length) {
+ var timestampAfter = messages.children[i].classList.contains("timestamp")
+ var timestampBefore = messages.children[i].classList.contains("timestamp")
+ if (timestampAfter && timestampBefore) {
+ messages.children[i].parentNode.removeChild(messages.children[i])
+ }
+ }
+}
+
+/**
* Add a message to the conversation.
* @param message_object to treat
* @param new_message if it's a new message or if we need to update
@@ -1064,6 +1086,44 @@
message_div.appendChild(temp)
}
+ const menu_element = document.createElement("div")
+ menu_element.setAttribute("class", "menu_interaction")
+ menu_element.innerHTML = "<label for=\"showmenu\">\
+ <svg fill=\"#888888\" height=\"12\" viewBox=\"0 0 24 24\" width=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\
+ <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\
+ <path d=\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/>\
+ </svg>\
+ </label>\
+ <input type=\"checkbox\" id=\"showmenu\" hidden />"
+ menu_element.onclick = function() {
+ const button = this.querySelector("#showmenu")
+ button.checked = !button.checked
+ }
+ menu_element.onmouseleave = function() {
+ const button = this.querySelector("#showmenu")
+ button.checked = false
+ }
+ const dropdown = document.createElement("div")
+ const dropdown_classes = [
+ "dropdown",
+ `dropdown_${message_id}`
+ ]
+ dropdown.setAttribute("class", dropdown_classes.join(" "))
+ const remove = document.createElement("div")
+ remove.innerHTML = "Delete"
+ remove.msg_id = message_id
+ remove.onclick = function() {
+ window.prompt(`DELETE_INTERACTION:${this.msg_id}`)
+ }
+ dropdown.appendChild(remove)
+ menu_element.appendChild(dropdown)
+ if (message_type !== "call") {
+ message_div.appendChild(menu_element)
+ } else {
+ var wrapper = message_div.querySelector(".message_wrapper")
+ wrapper.insertBefore(menu_element, wrapper.firstChild)
+ }
+
// Get timestamp to add
const formattedTimestamp = getMessageTimestampText(message_timestamp, true)
// Create the timestamp object