|
{% extends "app.html" %}
|
|
|
|
{% block title %}Search{% endblock %}
|
|
|
|
{% block main %}
|
|
|
|
<section class="chat-area">
|
|
<div class="chat-header">
|
|
<h2>Search user</h2>
|
|
</div>
|
|
<div class="container chat-area">
|
|
<form method="get" action="/search-user.html">
|
|
<input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
|
|
<fancy-button size="auto" text="Search" url="submit"></fancy-button>
|
|
</form>
|
|
<div class="threads">
|
|
{% for user in users %}
|
|
<a href="/channel/{{user.uid}}.html" style="max-width:100%;" data-uid="{{user.uid}}" data-color="{{user.color}}" data-channel_uid="{{user.uid}}"
|
|
data-username="{{user.username}}" data-nick="{{user.nick}}" data-last_ping="{{user.last_ping}}"
|
|
class="thread">
|
|
<div class="avatar" style="opacity: 1; background-color: {{user.color}}; color: black;"><img
|
|
src="/avatar/{{user.uid}}.svg" /></div>
|
|
<div class="message-content">
|
|
<div class="author" style="opacity: 1; color: {{user.color}};">{{user.nick}}</div>
|
|
<div class="text">{% autoescape false %}{% emoji %}{% linkify %}{% markdown %}{% autoescape false %}{%raw %}{% endraw%}{%endautoescape%}{% endmarkdown %}{% endlinkify %}{% endemoji %}{%
|
|
endautoescape %}</div>
|
|
<div class="time opacity: 1; no-select" data-created_at="{{user.last_ping}}">{{user.last_ping}}</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<script>
|
|
|
|
document.querySelector("[name=query]").focus();
|
|
|
|
function updateTimes() {
|
|
document.querySelectorAll(".time").forEach((time) => {
|
|
time.innerText = "Last seen: " + app.timeDescription(time.dataset.created_at);
|
|
});
|
|
}
|
|
|
|
|
|
const threadsContainer = document.querySelector(".chat-threads");
|
|
|
|
function updateLayout(doScrollDown) {
|
|
updateTimes();
|
|
}
|
|
|
|
setInterval(updateTimes, 1000);
|
|
|
|
function isMentionToMe(message) {
|
|
const mentionText = '@{{ current_user.username.value }}';
|
|
return message.toLowerCase().includes(mentionText);
|
|
}
|
|
function extractMentions(message) {
|
|
return [...new Set(message.match(/@\w+/g) || [])];
|
|
}
|
|
function isMentionForSomeoneElse(message) {
|
|
const mentions = extractMentions(message);
|
|
const mentionText = '@{{ current_user.username.value }}';
|
|
return mentions.length > 0 && mentions.indexOf(mentionText) == -1;
|
|
}
|
|
|
|
app.addEventListener("channel-message", (data) => {
|
|
if (data.channel_uid !== channelUid) {
|
|
if (!isMentionForSomeoneElse(data.message)) {
|
|
channelSidebar.notify(data);
|
|
app.playSound("messageOtherChannel");
|
|
}
|
|
|
|
return;
|
|
}
|
|
if (data.username !== "{{ current_user.username.value }}") {
|
|
if (isMentionToMe(data.message)) {
|
|
app.playSound("mention");
|
|
} else if (!isMentionForSomeoneElse(data.message)) {
|
|
app.playSound("message");
|
|
}
|
|
}
|
|
|
|
const threadsContainer = document.querySelector(".chat-threads");
|
|
|
|
const message = document.createElement("div");
|
|
message.innerHTML = data.html;
|
|
document.querySelector(".chat-threads").appendChild(message.firstChild);
|
|
updateLayout();
|
|
setTimeout(() => {
|
|
updateLayout()
|
|
}, 1000);
|
|
});
|
|
|
|
updateLayout(true);
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|