227 lines
9.3 KiB
Plaintext
227 lines
9.3 KiB
Plaintext
<%- include("partials/layout-top", { title }) %>
|
|
<section class="card">
|
|
<h1>Custom commands</h1>
|
|
<% const platformLabelMap = new Map((platforms || []).map((item) => [item.id, item.label])); %>
|
|
<form method="post" action="/admin/commands" class="form-grid command-form">
|
|
<div class="field">
|
|
<label>Trigger</label>
|
|
<input name="trigger" placeholder="hello" />
|
|
</div>
|
|
<div class="field full">
|
|
<label>Platforms</label>
|
|
<div class="platform-checkboxes">
|
|
<% (platforms || []).forEach((platform) => { %>
|
|
<label class="platform-check <%= platform.enabled ? '' : 'is-disabled' %>" title="<%= platform.enabled ? '' : 'Disabled in Platform Integration' %>">
|
|
<input
|
|
type="checkbox"
|
|
name="platforms"
|
|
value="<%= platform.id %>"
|
|
<%= platform.enabled ? 'checked' : '' %>
|
|
/>
|
|
<span><%= platform.label %></span>
|
|
</label>
|
|
<% }) %>
|
|
</div>
|
|
<% if (!platforms || !platforms.length) { %>
|
|
<p class="hint">Enable platforms in Platform Integration to assign them here.</p>
|
|
<% } %>
|
|
</div>
|
|
<% if (isAdmin) { %>
|
|
<div class="field">
|
|
<label>Mode</label>
|
|
<select name="mode" class="js-command-mode">
|
|
<option value="plain" selected>Static</option>
|
|
<option value="advanced">Dynamic</option>
|
|
</select>
|
|
</div>
|
|
<div class="field js-field-language">
|
|
<label>Language</label>
|
|
<select name="language">
|
|
<option value="js">JavaScript</option>
|
|
<option value="python">Python</option>
|
|
</select>
|
|
</div>
|
|
<% } else { %>
|
|
<input type="hidden" name="mode" value="plain" />
|
|
<input type="hidden" name="language" value="js" />
|
|
<% } %>
|
|
<div class="field">
|
|
<label>Response</label>
|
|
<input name="response" placeholder="Hello there!" class="js-field-response" />
|
|
</div>
|
|
<% if (isAdmin) { %>
|
|
<div class="field full js-field-code">
|
|
<label>Dynamic code</label>
|
|
<textarea name="code" rows="6" placeholder="function run(ctx) { return `Hello ${ctx.user.username}`; }"></textarea>
|
|
</div>
|
|
<% } %>
|
|
<button type="submit" class="button">Create command</button>
|
|
</form>
|
|
<% if (isAdmin) { %>
|
|
<p class="hint">Dynamic commands must export a <code>run(ctx)</code> function. Return a string to reply.</p>
|
|
<% } else { %>
|
|
<p class="hint">Moderators can create static text commands only.</p>
|
|
<% } %>
|
|
<h2>Existing commands</h2>
|
|
<% if (!commands.length) { %>
|
|
<p>No commands created yet.</p>
|
|
<% } else { %>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Trigger</th>
|
|
<th>Response</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% commands.forEach((command) => { %>
|
|
<tr>
|
|
<td><%= command.trigger %></td>
|
|
<td>
|
|
<div class="command-meta">
|
|
<span class="platform-pills">
|
|
<% (command.platforms || []).forEach((platform) => { %>
|
|
<span class="badge <%= platform %>"><%= platformLabelMap.get(platform) || platform %></span>
|
|
<% }) %>
|
|
</span>
|
|
<% if (command.mode !== "advanced") { %>
|
|
<span><%= command.response %></span>
|
|
<% } else if (command.preview.status === "ready") { %>
|
|
<span class="command-preview" title="Sandboxed example output">
|
|
<% command.preview.compactParts.forEach((part) => { %>
|
|
<% if (part.dynamic) { %><mark class="preview-dynamic" title="Dynamic <%= part.type %>"><%= part.text %></mark><% } else { %><%= part.text %><% } %>
|
|
<% }) %>
|
|
</span>
|
|
<% if (command.preview.isLong) { %>
|
|
<details class="command-preview-details">
|
|
<summary>Full preview</summary>
|
|
<div class="command-preview-full">
|
|
<% command.preview.fullParts.forEach((part) => { %>
|
|
<% if (part.dynamic) { %><mark class="preview-dynamic" title="Dynamic <%= part.type %>"><%= part.text %></mark><% } else { %><%= part.text %><% } %>
|
|
<% }) %>
|
|
</div>
|
|
</details>
|
|
<% } %>
|
|
<% } else { %>
|
|
<span class="command-preview-unavailable" title="<%= isAdmin ? command.preview.error : 'Ask an administrator to refresh this preview.' %>">Preview unavailable</span>
|
|
<% if (isAdmin) { %>
|
|
<details class="command-preview-details">
|
|
<summary>Details</summary>
|
|
<span><%= command.preview.error %></span>
|
|
</details>
|
|
<% } %>
|
|
<% } %>
|
|
</div>
|
|
</td>
|
|
<td><%= command.enabled ? "Enabled" : "Disabled" %></td>
|
|
<td>
|
|
<form method="post" action="/admin/commands/<%= command.id %>/toggle" class="inline-form">
|
|
<button type="submit" class="button subtle"><%= command.enabled ? "Disable" : "Enable" %></button>
|
|
</form>
|
|
<form method="post" action="/admin/commands/<%= command.id %>/delete" class="inline-form" data-confirm-text="Delete !<%= command.trigger %>?">
|
|
<button type="submit" class="button danger">Delete</button>
|
|
</form>
|
|
<% if (isAdmin && command.mode === "advanced") { %>
|
|
<form method="post" action="/admin/commands/<%= command.id %>/preview" class="inline-form">
|
|
<button type="submit" class="button subtle">Refresh preview</button>
|
|
</form>
|
|
<% } %>
|
|
<% if (isAdmin || command.mode === "plain") { %>
|
|
<button
|
|
type="button"
|
|
class="button subtle"
|
|
data-edit-toggle="command-<%= command.id %>"
|
|
aria-expanded="false"
|
|
>
|
|
Edit
|
|
</button>
|
|
<% } %>
|
|
</td>
|
|
</tr>
|
|
<tr class="edit-row" data-edit-row="command-<%= command.id %>">
|
|
<td colspan="4">
|
|
<form method="post" action="/admin/commands/<%= command.id %>/update" class="form-grid command-form">
|
|
<div class="field">
|
|
<label>Trigger</label>
|
|
<input name="trigger" value="<%= command.trigger %>" />
|
|
</div>
|
|
<div class="field full">
|
|
<label>Platforms</label>
|
|
<div class="platform-checkboxes">
|
|
<% (platforms || []).forEach((platform) => { %>
|
|
<label class="platform-check <%= platform.enabled ? '' : 'is-disabled' %>" title="<%= platform.enabled ? '' : 'Disabled in Platform Integration' %>">
|
|
<input
|
|
type="checkbox"
|
|
name="platforms"
|
|
value="<%= platform.id %>"
|
|
<%= command.platforms && command.platforms.includes(platform.id) ? 'checked' : '' %>
|
|
/>
|
|
<span><%= platform.label %></span>
|
|
</label>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
<% if (isAdmin) { %>
|
|
<div class="field">
|
|
<label>Mode</label>
|
|
<select name="mode" class="js-command-mode">
|
|
<option value="plain" <%= command.mode === 'plain' ? 'selected' : '' %>>Static</option>
|
|
<option value="advanced" <%= command.mode === 'advanced' ? 'selected' : '' %>>Dynamic</option>
|
|
</select>
|
|
</div>
|
|
<div class="field js-field-language">
|
|
<label>Language</label>
|
|
<select name="language">
|
|
<option value="js" <%= command.language === 'js' ? 'selected' : '' %>>JavaScript</option>
|
|
<option value="python" <%= command.language === 'python' ? 'selected' : '' %>>Python</option>
|
|
</select>
|
|
</div>
|
|
<% } else { %>
|
|
<input type="hidden" name="mode" value="plain" />
|
|
<input type="hidden" name="language" value="js" />
|
|
<% } %>
|
|
<div class="field">
|
|
<label>Response</label>
|
|
<input name="response" value="<%= command.response %>" class="js-field-response" />
|
|
</div>
|
|
<% if (isAdmin) { %>
|
|
<div class="field full js-field-code">
|
|
<label>Dynamic code</label>
|
|
<textarea name="code" rows="6"><%= command.code || '' %></textarea>
|
|
</div>
|
|
<% } %>
|
|
<button type="submit" class="button">Save</button>
|
|
</form>
|
|
<% if (!isAdmin && command.mode === 'advanced') { %>
|
|
<p class="hint">Dynamic commands can only be edited by admins.</p>
|
|
<% } %>
|
|
</td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
<% } %>
|
|
</section>
|
|
<script>
|
|
const forms = document.querySelectorAll(".command-form");
|
|
const toggleFields = (form) => {
|
|
const mode = form.querySelector(".js-command-mode")?.value || "plain";
|
|
const response = form.querySelector(".js-field-response")?.closest(".field");
|
|
const code = form.querySelector(".js-field-code");
|
|
const language = form.querySelector(".js-field-language");
|
|
const isAdvanced = mode === "advanced";
|
|
if (response) response.style.display = isAdvanced ? "none" : "";
|
|
if (code) code.style.display = isAdvanced ? "" : "none";
|
|
if (language) language.style.display = isAdvanced ? "" : "none";
|
|
};
|
|
forms.forEach((form) => {
|
|
toggleFields(form);
|
|
form.querySelector(".js-command-mode")?.addEventListener("change", () => {
|
|
toggleFields(form);
|
|
});
|
|
});
|
|
</script>
|
|
<%- include("partials/layout-bottom") %>
|