Files
InfantrySkillCalculator/templates/modals/edit_clan.html
2024-01-14 22:08:43 +01:00

97 lines
4.4 KiB
HTML

{{ define "edit_clan" }}
<div class="modal fade" id="editClanModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-3 text-success fw-bold" id="editClanModalLabel">Clan bearbeiten</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="form-floating mb-3">
<input type="text" class="form-control form-control-lg" id="editClanName" placeholder="Clan-Name">
<label for="editClanName">Clan-Name</label>
</div>
<div class="form-floating">
<input type="text" class="form-control form-control-lg" id="editClanTag" placeholder="Clan-Tag">
<label for="editClanTag">Clan-Tag</label>
</div>
<div class="form-check form-check-inline mt-3 fs-5">
<input class="form-check-input" type="checkbox" id="editKeepUpdated" value="keepUpdated">
<label class="form-check-label" for="editKeepUpdated">Immer aktuell halten</label>
</div>
<input type="hidden" id="editClanId" value="">
</div>
<div class="modal-footer">
<button type="submit" name="submit" class="btn btn-lg btn-primary">Speichern</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
const editClanModal = document.getElementById('editClanModal');
const editClanModalBS = new bootstrap.Modal('#editClanModal');
if (editClanModal) {
editClanModal.addEventListener('show.bs.modal', event => {
const button = event.relatedTarget;
const clanListId = button.getAttribute('data-bs-list');
const clanList = document.querySelector(clanListId);
const selectedClanItem = clanList.options[clanList.selectedIndex];
const clanName = editClanModal.querySelector('#editClanName');
const clanTag = editClanModal.querySelector('#editClanTag');
const keepUpdated = editClanModal.querySelector('#editKeepUpdated');
const clanId = parseInt(clanList.value);
const submitButton = editClanModal.querySelector('button[name="submit"]');
fetch("/clan/" + clanId, {
method: "GET",
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then((response) => {
return response.json();
})
.then((result) => {
keepUpdated.checked = result['keep_updated'];
clanName.value = result['name'];
clanTag.value = result['tag'];
})
.catch((error) => {
throw new Error(error);
});
submitButton.addEventListener('click', function () {
fetch("/clan/" + clanId, {
method: "PATCH",
body: JSON.stringify({
name: clanName.value,
tag: clanTag.value,
keep_updated: keepUpdated.checked
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then((response) => {
if (response.ok) {
selectedClanItem.innerText = "[" + clanTag.value + "]" + " " + clanName.value;
editClanModalBS.hide();
clanName.value = "";
clanTag.value = "";
keepUpdated.checked = false;
} else
throw new Error(response.error)
});
})
});
}
});
</script>
{{ end }}