Files
InfantrySkillCalculator/templates/modals/edit_clan.html
2024-01-16 20:54:49 +01:00

113 lines
5.2 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-primary 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 [clanList, otherClanList] = getClanLists(event);
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(() => {
const lastIndex = clanList.selectedIndex;
const otherLastIndex = otherClanList.selectedIndex;
fetch('/clans_html')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
clanList.innerHTML = data;
otherClanList.innerHTML = data;
clanList.selectedIndex = lastIndex;
otherClanList.selectedIndex = otherLastIndex;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
editClanModalBS.hide();
clanName.value = "";
clanTag.value = "";
keepUpdated.checked = false;
})
.catch((error) => {
throw new Error(error)
});
}, { once: true });
});
}
});
</script>
{{ end }}