173 lines
9.8 KiB
HTML
173 lines
9.8 KiB
HTML
<div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
|
|
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-comments"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
|
<div class="dropdown-content">
|
|
<div class="dropdown-item">
|
|
<div id="conversation-list">
|
|
{% for Conversation in Conversations %}
|
|
<div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %} selected {% endif %}"
|
|
data-id="{{ Conversation.ID.String() }}" style="cursor: pointer;"
|
|
onclick="toggleConversationSelection(this, '{{ Conversation.Name }}')"
|
|
hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}" hx-swap="outerHTML"
|
|
hx-target="#chat-container" name="{{ Conversation.Name }}">
|
|
<span>{{ Conversation.Name }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<input class="input is-small mt-2 is-hidden" type="text" id="conversation-name-input"
|
|
name="conversation-name-input" placeholder="Conversation name" autocomplete="off">
|
|
<div class="is-flex is-justify-content-space-between mt-4 ">
|
|
<button class="button is-small is-danger {% if SelectedIsDefault %} is-hidden {% endif %}"
|
|
id="delete-conversation-button" hx-get="/deleteConversation" hx-swap="outerHTML"
|
|
hx-target="#conversation-dropdown" hx-vals="js:{conversationId: findSelectedConversationID()}">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="button is-small is-info is-outlined {% if not SelectedIsDefault %} is-hidden {% endif %}"
|
|
id="archive-default-conversation-button">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-box-archive"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-small is-danger is-outlined is-hidden" id="cancel-conversation-button">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</span>
|
|
</button>
|
|
<div class="is-flex is-justify-content-flex-end">
|
|
|
|
<button class="button is-small is-success is-outlined" id="create-conversation-button">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-small is-success is-outlined is-hidden"
|
|
id="confirm-conversation-button" hx-get="/createConversation"
|
|
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
|
|
hx-target="#conversation-dropdown">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-check"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-small is-success is-outlined is-hidden"
|
|
id="confirm-archive-default-conversation-button" hx-post="/archiveDefaultConversation"
|
|
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
|
|
hx-target="#conversation-dropdown">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-check"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function findSelectedConversationID() {
|
|
return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id');
|
|
}
|
|
|
|
function toggleConversationSelection(element, name) {
|
|
const elements = Array.from(document.getElementsByClassName('icon-conv'));
|
|
|
|
// If the conversation is already selected, keep it
|
|
if (element.classList.contains('unselected')) {
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].classList.remove('selected');
|
|
elements[i].classList.add('unselected');
|
|
}
|
|
element.classList.remove('unselected');
|
|
element.classList.add('selected');
|
|
} else if (!element.classList.contains('selected')) {
|
|
// Otherwise, select it
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].classList.remove('selected');
|
|
elements[i].classList.add('unselected');
|
|
}
|
|
element.classList.remove('unselected');
|
|
element.classList.add('selected');
|
|
}
|
|
|
|
if (name === 'Default') {
|
|
document.getElementById('delete-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('archive-default-conversation-button').classList.remove('is-hidden');
|
|
} else {
|
|
document.getElementById('delete-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
|
|
}
|
|
}
|
|
|
|
var sortable = new Sortable(document.getElementById('conversation-list'), {
|
|
animation: 150,
|
|
onEnd: function (evt) {
|
|
var items = evt.to.children;
|
|
var updates = [];
|
|
for (var i = 0; i < items.length; i++) {
|
|
var id = items[i].getAttribute('data-id');
|
|
var position = i + 1;
|
|
updates.push({ id: id, position: position });
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/updateConversationPositionBatch', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
|
xhr.send(JSON.stringify(updates));
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function (event) {
|
|
if (!document.getElementById('conversation-dropdown').contains(event.target)) {
|
|
document.getElementById('conversation-dropdown').classList.remove('is-active');
|
|
}
|
|
});
|
|
|
|
document.getElementById('archive-default-conversation-button').addEventListener('click', function () {
|
|
document.getElementById('conversation-name-input').classList.remove('is-hidden');
|
|
document.getElementById('confirm-archive-default-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('create-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('delete-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('conversation-list').classList.add('is-hidden');
|
|
document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
|
|
})
|
|
|
|
|
|
document.getElementById('create-conversation-button').addEventListener('click', function () {
|
|
document.getElementById('conversation-name-input').classList.remove('is-hidden');
|
|
document.getElementById('confirm-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('create-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('delete-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('conversation-list').classList.add('is-hidden');
|
|
})
|
|
|
|
document.getElementById('cancel-conversation-button').addEventListener('click', function () {
|
|
|
|
document.getElementById('conversation-name-input').classList.add('is-hidden');
|
|
document.getElementById('confirm-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('create-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('cancel-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('conversation-list').classList.remove('is-hidden');
|
|
|
|
// If the selected is the default conversation
|
|
if (document.getElementsByClassName('selected icon-conv')[0].getAttribute('name') === 'Default') {
|
|
document.getElementById('delete-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('archive-default-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('confirm-archive-default-conversation-button').classList.add('is-hidden');
|
|
} else {
|
|
document.getElementById('delete-conversation-button').classList.remove('is-hidden');
|
|
document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
|
|
document.getElementById('confirm-archive-default-conversation-button').classList.add('is-hidden');
|
|
}
|
|
})
|
|
</script>
|
|
</div> |