149 lines
4.9 KiB
Cheetah
149 lines
4.9 KiB
Cheetah
{{define "content"}}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Close Ticket</h4>
|
|
<div class="close-container">
|
|
<form class="form-inline" action="javascript:close()">
|
|
<input type="text" class="form-control" id="reason" name="reason" placeholder="No reason specified" style="width: 80%">
|
|
<div style="padding-left: 10px">
|
|
<button type="submit" class="btn btn-primary btn-fill">Close Ticket</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<h4 class="card-title">View Ticket</h4>
|
|
<div class="discord-container">
|
|
<div class="channel-header">
|
|
<span id="channel-name"></span>
|
|
</div>
|
|
<div id="message-container">
|
|
</div>
|
|
<div class="input-container">
|
|
<form onsubmit="sendMessage(); return false;">
|
|
<input type="text" class="form-control message-input" id="message" name="message">
|
|
</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" id="toast-container">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function close() {
|
|
const reason = document.getElementById('reason').value;
|
|
document.getElementById('reason').value = '';
|
|
|
|
const res = await axios.delete('/api/{{.guildId}}/tickets/{{.uuid}}', {
|
|
data: {
|
|
reason: reason
|
|
}
|
|
});
|
|
|
|
if (res.status === 200 && res.data.success) {
|
|
location.href = '/manage/{{.guildId}}/tickets';
|
|
} else {
|
|
showToast('Error', res.data.error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
async function isPremium() {
|
|
const res = await axios.get('/api/{{.guildId}}/premium');
|
|
return res.data.premium;
|
|
}
|
|
|
|
async function appendMessages(messages) {
|
|
const container = document.getElementById('message-container');
|
|
|
|
for (message of messages) {
|
|
const div = document.createElement('div');
|
|
div.classList.add('message');
|
|
|
|
const username = document.createElement('b');
|
|
username.appendChild(document.createTextNode(message.username));
|
|
username.appendChild(document.createTextNode(': '));
|
|
div.appendChild(username);
|
|
|
|
div.appendChild(document.createTextNode(message.content));
|
|
|
|
container.appendChild(div);
|
|
}
|
|
}
|
|
|
|
async function loadData() {
|
|
const premium = await isPremium();
|
|
|
|
const res = await axios.get('/api/{{.guildId}}/tickets/{{.uuid}}');
|
|
if (res.status === 200 && res.data.success) {
|
|
const data = res.data;
|
|
document.getElementById('channel-name').innerText = `#ticket-${data.ticket.TicketId}`;
|
|
await appendMessages(data.messages);
|
|
|
|
startWebsocket(data.ticket.TicketId);
|
|
} else {
|
|
showToast('Error', res.data.error);
|
|
}
|
|
|
|
const el = document.getElementById('message');
|
|
if (premium) {
|
|
el.placeholder = `Message #ticket-${res.data.ticket.TicketId}`;
|
|
} else {
|
|
el.disabled = true;
|
|
el.placeholder = 'Premium users get live messages and can respond through webchat'
|
|
}
|
|
}
|
|
|
|
loadData();
|
|
</script>
|
|
|
|
<script>
|
|
// Scroll to bottom
|
|
const container = document.getElementById("message-container");
|
|
container.scrollTop = container.scrollHeight;
|
|
|
|
async function startWebsocket(ticketId) {
|
|
//const ws = new WebSocket("wss://panel.ticketsbot.net/webchat");
|
|
const ws = new WebSocket("ws://localhost:3000/webchat");
|
|
|
|
ws.onopen = () => {
|
|
ws.send(JSON.stringify({
|
|
"type": "auth",
|
|
"data": {
|
|
"guild": "{{.guildId}}",
|
|
"ticket": `${ticketId}`
|
|
}
|
|
}));
|
|
};
|
|
|
|
ws.onmessage = (evt) => {
|
|
const data = JSON.parse(evt.data);
|
|
appendMessages([data]);
|
|
container.scrollTop = container.scrollHeight;
|
|
};
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const msg = document.getElementById("message").value;
|
|
document.getElementById("message").value = "";
|
|
|
|
const res = await axios.post('/api/{{.guildId}}/tickets/{{.uuid}}', {message: msg});
|
|
if (res.status !== 200 || !res.data.success) {
|
|
showToast('Error', res.data.error);
|
|
}
|
|
}
|
|
</script>
|
|
{{end}}
|