t00-multiuser/server/views/admin/badge.ejs

79 lines
No EOL
3 KiB
Text

<%- include("../base/header", { title: typeof(id) === "undefined" ? "Add Badge" : `Edit ${name}`, userId: session.userId, isAdmin: true }) %>
<div class="row">
<div class="col">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/admin">Admin</a></li>
<li class="breadcrumb-item"><a href="/admin/badges">Badge Management</a></li>
<li class="breadcrumb-item active"><a><%= typeof(id) === "undefined" ? "Add Badge" : `Edit ${name}` %></a></li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1><%= typeof(id) === "undefined" ? "Add Badge" : `Edit ${name}` %></h1>
</div>
</div>
<form method="post" class="needs-validation" novalidate>
<input type="hidden" name="id" value="<%= typeof(id) === "undefined" ? "" : id %>" />
<div class="row mt-5 mb-3">
<div class="col">
<label for="name" class="form-label">Name</label>
<input class="form-control" id="name" name="name" value="<%= typeof(name) === "undefined" ? "" : name %>" required maxlength="255" />
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" name="description" required><%= typeof(description) === "undefined" ? "" : description %></textarea>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="imageUrl" class="form-label">Image URL</label>
<input class="form-control" id="imageUrl" name="imageUrl" value="<%= typeof(imageUrl) === "undefined" ? "" : imageUrl %>" />
</div>
<div class="col-auto">
<img id="imageImg" style="image-rendering:pixelated;margin-top: 36px" class="mb-3" src="<%= imageUrl.trim().length === 0 ? "/img/missing.png" : imageUrl %>" onerror="if (this.src != '/img/missing.png') this.src = '/img/missing.png';" width="32" height="32" />
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="forUrl" class="form-label">For URL</label>
<input class="form-control" id="forUrl" name="forUrl" value="<%= typeof(forUrl) === "undefined" ? "" : forUrl %>" required />
</div>
</div>
<div class="row mb-5">
<div class="col">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="isSecret" name="isSecret" <%= isSecret ? "checked" : "" %> />
<label for="isSecret" class="form-check-label">Is Secret</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col text-center">
<button type="submit" class="btn btn-primary">Save</button>
<a type="submit" class="btn btn-danger" href="/admin/badges">Cancel</a>
</div>
</div>
</form>
<script>
const imageImg = document.querySelector("#imageImg");
const imageUrl = document.querySelector("#imageUrl");
imageUrl.addEventListener("change", () => {
if (imageUrl.value.trim() === ""){
imageImg.src = "/img/missing.png";
} else {
imageImg.src = imageUrl.value;
}
});
</script>
<%- include("../base/footer", { apiKey: session.apiKey, username: session.username }) %>