mirror of
https://github.com/arcan1s/ffxivbis.git
synced 2025-10-30 21:23:41 +00:00
migrate to bootstrap (#14)
This commit is contained in:
GitHub
183
src/main/resources/html/index.html
Normal file
183
src/main/resources/html/index.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>FFXIV loot helper</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="/static/favicon.ico" rel="shortcut icon">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" type="text/css">
|
||||
|
||||
<link href="/static/styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="alert-placeholder" class="container"></div>
|
||||
|
||||
<div class="container mb-5">
|
||||
<div class="form-group row">
|
||||
<div class="btn-group" role="group" aria-label="Sign in">
|
||||
<input id="signin-btn" name="signin" type="radio" class="btn-check" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="signin-btn">login to existing party</label>
|
||||
|
||||
<input id="signup-btn" name="signin" type="radio" class="btn-check" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="signup-btn">create a new party</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="signup-form" class="container mb-5" style="display: none">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label" for="alias">party alias</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="alias" name="alias" class="form-control" placeholder="alias">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label" for="username">username</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="username" name="username" class="form-control" placeholder="admin user name" onkeyup="disableAddButton()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-2 col-form-label">password</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="password" name="password" type="password" class="form-control" placeholder="admin password" onkeyup="disableAddButton()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<button id="add-btn" type="button" class="btn btn-primary" onclick="createParty()" disabled>add</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="signin-form" class="container mb-5">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label" for="party-id">party id</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="party-id" name="partyId" class="form-control" placeholder="id" onkeyup="disableRedirectButton()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<button id="redirect-btn" type="button" class="btn btn-primary" onclick="redirectToParty()" disabled>go</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center border-top">
|
||||
<ul class="nav"></ul>
|
||||
|
||||
<ul class="nav">
|
||||
<li><a class="nav-link" href="https://github.com/arcan1s/ffxivbis" title="sources">ffxivbis</a></li>
|
||||
<li><a class="nav-link" href="https://github.com/arcan1s/ffxivbis/releases" title="releases list">releases</a></li>
|
||||
<li><a class="nav-link" href="https://github.com/arcan1s/ffxivbis/issues" title="issues tracker">report a bug</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
const signinButton = $("#signin-btn");
|
||||
const signupButton = $("#signup-btn");
|
||||
|
||||
const addButton = $("#add-btn");
|
||||
const redirectButton = $("#redirect-btn");
|
||||
const signinForm = $("#signin-form");
|
||||
const signupForm = $("#signup-form");
|
||||
|
||||
const aliasInput = $("#alias");
|
||||
const partyIdInput = $("#party-id");
|
||||
const passwordInput = $("#password");
|
||||
const usernameInput = $("#username");
|
||||
|
||||
function createDescription(partyId) {
|
||||
$.ajax({
|
||||
url: `/api/v1/party/${partyId}/description`,
|
||||
data: JSON.stringify({
|
||||
partyId: partyId,
|
||||
partyAlias: aliasInput.val(),
|
||||
}),
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
success: function (_) { doRedirect(partyId); },
|
||||
error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
|
||||
});
|
||||
}
|
||||
|
||||
function createParty() {
|
||||
$.ajax({
|
||||
url: `/api/v1/party`,
|
||||
data: JSON.stringify({
|
||||
partyId: "",
|
||||
username: usernameInput.val(),
|
||||
password: passwordInput.val(),
|
||||
permission: "admin",
|
||||
}),
|
||||
type: "PUT",
|
||||
contentType: "application/json",
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
if (aliasInput.val()) {
|
||||
createDescription(data.partyId);
|
||||
} else {
|
||||
doRedirect(data.partyId);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
|
||||
});
|
||||
}
|
||||
|
||||
function disableAddButton() {
|
||||
addButton.attr("disabled", !(passwordInput.val() && usernameInput.val()));
|
||||
}
|
||||
|
||||
function disableRedirectButton() {
|
||||
redirectButton.attr("disabled", !partyIdInput.val());
|
||||
}
|
||||
|
||||
function doRedirect(partyId) {
|
||||
location.href = `/party/${partyId}`;
|
||||
}
|
||||
|
||||
function hideSigninPart() {
|
||||
signinForm.hide();
|
||||
signupForm.show();
|
||||
}
|
||||
|
||||
function hideSignupPart() {
|
||||
signinForm.show();
|
||||
signupForm.hide();
|
||||
}
|
||||
|
||||
function redirectToParty() {
|
||||
return doRedirect(partyIdInput.val());
|
||||
}
|
||||
|
||||
function reset() {
|
||||
signinForm.trigger("reset");
|
||||
signupForm.trigger("reset");
|
||||
if (signinButton.is(":checked")) {
|
||||
hideSignupPart();
|
||||
}
|
||||
if (signupButton.is(":checked")) {
|
||||
hideSigninPart();
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
signinButton.click(function () { reset(); });
|
||||
signupButton.click(function () { reset(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user