109 lines
3.1 KiB
Plaintext
109 lines
3.1 KiB
Plaintext
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="discord-container">
|
|
<div class="channel-header">
|
|
<span class="channel-name">#ticket-{{ticketId}}</span>
|
|
</div>
|
|
<div id="message-container">
|
|
{{#messages}}
|
|
<div class="message">
|
|
<b>{{username}}</b>
|
|
{{content}}
|
|
</div>
|
|
{{/messages}}
|
|
</div>
|
|
<div class="input-container">
|
|
<form action="javascript:sendMessage()">
|
|
{{#premium}}
|
|
<input type="text" class="form-control message-input" id="message" name="message"
|
|
placeholder="Message #ticket-{{ticketId}}">
|
|
{{/premium}}
|
|
{{^premium}}
|
|
<input type="text" class="form-control message-input" id="message" name="message"
|
|
placeholder="Premium users get live messages and can respond through webchat" disabled>
|
|
{{/premium}}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
|
|
<div style="position: absolute; right: 10px; min-width: 300px">
|
|
{{#isError}}
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">Error</strong>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">
|
|
{{error}}
|
|
</div>
|
|
</div>
|
|
{{/isError}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$('.toast').toast('show');
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Scroll to bottom
|
|
container.scrollTop = container.scrollHeight;
|
|
</script>
|
|
|
|
{{#premium}}
|
|
<script>
|
|
ws = new WebSocket("wss://panel.ticketsbot.net/webchat");
|
|
|
|
ws.onopen = (evt) => {
|
|
ws.send(JSON.stringify({
|
|
"type": "auth",
|
|
"data": {
|
|
"guild": "{{guildId}}",
|
|
"ticket": "{{ticketId}}"
|
|
}
|
|
}));
|
|
};
|
|
|
|
ws.onmessage = (evt) => {
|
|
let data = JSON.parse(evt.data);
|
|
|
|
let container = document.getElementById("message-container");
|
|
|
|
let element = document.createElement("div");
|
|
element.className = "message";
|
|
element.innerHTML = `
|
|
<b>${data.username}</b>
|
|
${data.content}
|
|
`;
|
|
|
|
container.appendChild(element);
|
|
|
|
// Scroll to bottom
|
|
container.scrollTop = container.scrollHeight;
|
|
};
|
|
|
|
function sendMessage() {
|
|
let msg = document.getElementById("message").value;
|
|
document.getElementById("message").value = "";
|
|
|
|
ws.send(JSON.stringify({
|
|
"type": "send",
|
|
"data": msg
|
|
}))
|
|
}
|
|
</script>
|
|
{{/premium}}
|