235 lines
9.9 KiB
Cheetah
235 lines
9.9 KiB
Cheetah
{{define "paneleditmodal"}}
|
|
<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="editmodal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><b>Edit Panel</b></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-4 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Panel Title</label>
|
|
<input type="text" class="form-control" placeholder="Open a ticket!" id="edit-title">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Panel Content</label>
|
|
<textarea type="text" class="form-control"
|
|
placeholder="By reacting to this ticket, a ticket will be opened for you."
|
|
id="edit-content"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-2 pr-1">
|
|
<label class="black">Panel Colour</label>
|
|
<div class="input-group mb-3">
|
|
<input type="color" class="form-control input-fill" id="edit-colour">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 pr-1">
|
|
<label class="black">Panel Channel</label>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text">#</div>
|
|
</div>
|
|
<select class="form-control" id="edit-channel-container">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 pr-1">
|
|
<label class="black">Ticket Channel Category</label>
|
|
<div class="input-group mb-3">
|
|
<select class="form-control" id="edit-category-container">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Reaction Emote</label>
|
|
<input type="text" class="form-control" placeholder="envelope_with_arrow" id="edit-reaction">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 pr-1 offset-md-4">
|
|
<div class="text-center">
|
|
<button class="btn btn-primary btn-fill" type="button" data-toggle="collapse" data-target="#edit-advanced" aria-expanded="false" aria-controls="edit-advanced">
|
|
Expand advanced settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="collapse" id="edit-advanced" style="width: 100%">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Welcome Message</label>
|
|
<textarea type="text" class="form-control" placeholder="If not provided, your server's default welcome message will be used" id="edit-welcome-message"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Mention On Open</label>
|
|
<select class="selectpicker form-control" id="edit-mentions" multiple data-live-search="true" data-dropup-auto="false" data-size="5" data-display="static">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 pr-1">
|
|
<div class="form-group">
|
|
<label class="black">Support Teams</label>
|
|
<select class="selectpicker form-control" id="edit-teams" multiple data-live-search="true" data-dropup-auto="false" data-size="5" data-display="static">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" id="edit-panel-id">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary btn-fill" onclick="updatePanel()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function resetEditModal() {
|
|
clear('edit-title', 'edit-content', 'edit-panel-id', 'edit-reaction', 'edit-welcome-message');
|
|
$('#edit-mentions').selectpicker('deselectAll');
|
|
}
|
|
|
|
registerHideListener('editmodal');
|
|
$('#editmodal').on('hidden.bs.modal', resetEditModal);
|
|
|
|
async function openEditModal(panelId) {
|
|
resetEditModal();
|
|
|
|
const res = await axios.get('/api/{{.guildId}}/panels');
|
|
if (res.status !== 200) {
|
|
showToast("Error", res.data);
|
|
return;
|
|
}
|
|
|
|
const panel = res.data.find(panel => panel.panel_id == panelId);
|
|
if (panel === undefined) {
|
|
showToast('Error', 'Panel not found');
|
|
return;
|
|
}
|
|
|
|
await fillEditData(panel);
|
|
|
|
$('#editmodal').modal('show');
|
|
showBackdrop();
|
|
}
|
|
|
|
async function fillEditData(panel) {
|
|
document.getElementById('edit-panel-id').value = panel.panel_id;
|
|
document.getElementById('edit-title').value = panel.title;
|
|
document.getElementById('edit-content').value = panel.content;
|
|
document.getElementById('edit-colour').value = `#${panel.colour.toString(16)}`;
|
|
document.getElementById('edit-reaction').value = panel.emote;
|
|
|
|
if (panel.welcome_message !== null) {
|
|
document.getElementById('edit-welcome-message').value = panel.welcome_message;
|
|
}
|
|
|
|
const channels = await getChannels();
|
|
fillChannels('edit-channel-container', channels);
|
|
fillCategories('edit-category-container', channels);
|
|
await fillMentions('edit-mentions');
|
|
await fillTeams('edit-teams');
|
|
|
|
setActiveChannel('edit-channel-container', panel.channel_id);
|
|
setActiveCategory(panel);
|
|
setActiveMentions(panel);
|
|
setActiveTeams(panel);
|
|
}
|
|
|
|
function setActiveCategory(panel) {
|
|
const select = document.getElementById('edit-category-container');
|
|
for (let i = 0; i < select.children.length; i++) {
|
|
const child = select.children[i];
|
|
if (child.value === panel.category_id) {
|
|
select.selectedIndex = i;
|
|
}
|
|
}
|
|
}
|
|
|
|
function setActiveMentions(panel) {
|
|
if (panel.mentions !== null) {
|
|
$('#edit-mentions').selectpicker('val', panel.mentions);
|
|
}
|
|
}
|
|
|
|
function setActiveTeams(panel) {
|
|
const values = [];
|
|
if (panel['default_team']) {
|
|
values.push('default');
|
|
$('#edit-teams').selectpicker('val', 'default');
|
|
}
|
|
|
|
if (panel.teams) {
|
|
values.push(...panel.teams.map((t) => t.id));
|
|
}
|
|
|
|
$('#edit-teams').selectpicker('val', values);
|
|
}
|
|
|
|
async function updatePanel() {
|
|
const panelId = document.getElementById('edit-panel-id').value;
|
|
const title = document.getElementById('edit-title').value;
|
|
const content = document.getElementById('edit-content').value;
|
|
const emote = document.getElementById('edit-reaction').value.replace(':', '');
|
|
const welcomeMessage = document.getElementById('edit-welcome-message').value;
|
|
|
|
const data = {
|
|
panel_id: panelId,
|
|
title: title === '' ? 'Open a ticket!' : title,
|
|
content: content === '' ? 'By reacting to this ticket, a message will be opened for you.' : content,
|
|
emote: emote === '' ? 'envelope_with_arrow' : emote,
|
|
colour: parseInt(`0x${document.getElementById('edit-colour').value.slice(1)}`),
|
|
channel_id: document.getElementById('edit-channel-container').options[document.getElementById('edit-channel-container').selectedIndex].value,
|
|
category_id: document.getElementById('edit-category-container').options[document.getElementById('edit-category-container').selectedIndex].value,
|
|
welcome_message: welcomeMessage === '' ? null : welcomeMessage,
|
|
mentions: $('#edit-mentions').val(),
|
|
teams: $('#edit-teams').val()
|
|
};
|
|
|
|
const res = await axios.put('/api/{{.guildId}}/panels/' + panelId, data);
|
|
if (res.status === 200 && res.data.success) {
|
|
showToast('Success', 'Panel updated successfully')
|
|
$('#editmodal').modal('hide');
|
|
resetEditModal();
|
|
|
|
// remove old data
|
|
// TODO: Don't remove just update, looks cleaner
|
|
const el = document.getElementById(panelId);
|
|
el.parentNode.removeChild(el);
|
|
|
|
appendPanel(data, await getChannels());
|
|
} else {
|
|
showToast('Error', res.data.error);
|
|
}
|
|
}
|
|
</script>
|
|
{{end}} |