61 lines
3.0 KiB
HTML
61 lines
3.0 KiB
HTML
{{define "chat"}}{{template "base" .}}{{end}}
|
||
|
||
{{define "chat-content"}}
|
||
<div class="chat-container" data-board-id="{{.Board.ID}}" data-base-path="{{.BasePath}}" data-current-username="{{.CurrentUsername}}">
|
||
<div class="chat-breadcrumb">
|
||
<a href="{{.BasePath}}/">Home</a>
|
||
<span class="chat-breadcrumb-separator">›</span>
|
||
<a href="{{.BasePath}}/boards/">Boards</a>
|
||
<span class="chat-breadcrumb-separator">›</span>
|
||
<span>{{.Board.Name}}</span>
|
||
</div>
|
||
<header class="chat-header">
|
||
<div class="connection-status">
|
||
<div class="connection-dot connecting" id="connection-dot"></div>
|
||
<span id="connection-text">Connecting...</span>
|
||
</div>
|
||
<h2>{{.Board.Name}}</h2>
|
||
<p>{{.Board.Description}}</p>
|
||
</header>
|
||
<div class="chat-messages" id="chat-messages">
|
||
<div class="typing-indicator" id="typing-indicator">
|
||
<span id="typing-users"></span><span class="typing-dots"><span>.</span><span>.</span><span>.</span></span>
|
||
</div>
|
||
{{range .Messages}}
|
||
<div class="chat-message{{if .Mentions}}{{range .Mentions}}{{if eq . $.CurrentUsername}} chat-message-highlighted{{end}}{{end}}{{end}}" id="msg-{{.ID}}" data-user="{{.Username}}" data-reply="{{.ReplyTo}}">
|
||
<div class="chat-message-header">
|
||
{{if .PfpFileID.Valid}}
|
||
<img src="{{$.BasePath}}/file?id={{.PfpFileID.Int64}}" alt="PFP" class="chat-message-pfp">
|
||
{{else}}
|
||
<div class="chat-message-pfp" style="background-color: #001858;"></div>
|
||
{{end}}
|
||
<span class="chat-message-username">{{.Username}}</span>
|
||
<span class="chat-message-timestamp">{{.Timestamp.Format "02/01/2006 15:04"}}</span>
|
||
</div>
|
||
{{if gt .ReplyTo 0}}
|
||
<div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to message...</div>
|
||
{{end}}
|
||
<div class="chat-message-content">{{.Content}}</div>
|
||
<div class="post-actions">
|
||
<a href="javascript:void(0)" onclick="replyToMessage({{printf "%v" .ID}}, '{{.Username}}')">Reply</a>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
<button class="jump-to-bottom" id="jump-to-bottom" title="Jump to bottom" type="button">
|
||
↓
|
||
<span class="unread-badge" id="unread-badge" style="display: none;">0</span>
|
||
</button>
|
||
<div class="chat-input">
|
||
<div id="reply-indicator" class="reply-indicator">
|
||
<span id="reply-username">Replying to </span>
|
||
<button onclick="cancelReply()" type="button">X</button>
|
||
</div>
|
||
<textarea id="chat-input-text" placeholder="Type a message..."></textarea>
|
||
<button onclick="sendMessage()" type="button">Send</button>
|
||
</div>
|
||
</div>
|
||
<div id="autocomplete-popup" class="autocomplete-popup"></div>
|
||
<script type="application/json" id="chat-usernames">{{.AllUsernames}}</script>
|
||
{{end}}
|