Maxi/InfantrySkillCalculator
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Activity

Sync both clan lists.

Browse Source
This commit is contained in:
MaxJa4
2024-01-15 11:01:51 +01:00
parent fe92068ad3
commit 49a6b8de38
11 changed files with 193 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
templates/components/header.html
View File

@@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infantry Skill Calculator</title>
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<script src="../static/index.js"></script>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

14
templates/components/home_clan_bar.html
View File

@@ -8,9 +8,7 @@
<div class="input-group input-group-lg mb-3">
<select class="form-select form-control border-secondary" id="home-clan" hx-get="/players" hx-target="#home-player-list">
<option disabled selected value>Auswählen...</option>
{{ range .clans }}
<option value="{{ .ID }}">[{{ .Tag }}] {{ .Name }}</option>
{{ end }}
<!-- Options will be loaded dynamically -->
</select>
<button class="btn btn-lg btn-outline-secondary text-danger" type="button" id="home-delete" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" disabled>
<i class="bi bi-trash3"></i>
@@ -27,14 +25,8 @@
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
const dropdownHome = document.getElementById('home-clan');
const deleteButtonHome = document.getElementById('home-delete');
const editButtonHome = document.getElementById('home-edit');
dropdownHome.addEventListener('change', function () {
deleteButtonHome.disabled = !this.value;
editButtonHome.disabled = !this.value;
});
setupClanButtons('home-clan', 'home-delete', 'home-edit');
htmx.ajax('GET', '/clan_options', {target: '#home-clan'});
});
</script>

13
templates/components/opp_clan_bar.html
View File

@@ -8,9 +8,6 @@
<div class="input-group input-group-lg mb-3">
<select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players" hx-target="#opponent-player-list">
<option disabled selected value>Auswählen...</option>
{{ range .clans }}
<option value="{{ .ID }}">[{{ .Tag }}] {{ .Name }}</option>
{{ end }}
</select>
<button class="btn btn-lg btn-outline-secondary text-danger" type="button" id="opponent-delete" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" disabled>
<i class="bi bi-trash3"></i>
@@ -27,14 +24,8 @@
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
const dropdownOpponent = document.getElementById('opponent-clan');
const deleteButtonOpponent = document.getElementById('opponent-delete');
const editButtonOpponent = document.getElementById('opponent-edit');
dropdownOpponent.addEventListener('change', function () {
deleteButtonOpponent.disabled = !this.value;
editButtonOpponent.disabled = !this.value;
});
setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
htmx.ajax('GET', '/clan_options', {target: '#opponent-clan'});
});
</script>

17
templates/modals/add_clan.html
View File

@@ -36,10 +36,11 @@
if (addClanModal) {
addClanModal.addEventListener('shown.bs.modal', event => {
const submitButton = addClanModal.querySelector('button[name="submit"]');
submitButton.addEventListener('click', function () {
const button = event.relatedTarget;
const clanListId = button.getAttribute('data-bs-list');
const clanList = document.querySelector(clanListId);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
submitButton.onclick = function () {}
const [clanList, otherClanList] = getClanLists(event);
const clanName = addClanModal.querySelector('#clanName');
const clanTag = addClanModal.querySelector('#clanTag');
@@ -61,9 +62,15 @@
const opt = document.createElement('option');
opt.innerText = "[" + clanTag.value + "]" + " " + clanName.value;
opt.value = response.json()['ID'];
clanList.appendChild(opt);
clanList.appendChild(opt.cloneNode(true));
clanList.selectedIndex = clanList.children.length - 1;
clanList.dispatchEvent(new Event('change'));
const lastIndex = otherClanList.selectedIndex;
otherClanList.appendChild(opt);
otherClanList.selectedIndex = lastIndex;
addClanModalBS.hide();
clanName.value = "";
clanTag.value = "";

25
templates/modals/delete_clan.html
View File

@@ -26,19 +26,16 @@
const deleteClanModalBS = new bootstrap.Modal('#deleteClanModal');
if (deleteClanModal) {
deleteClanModal.addEventListener('show.bs.modal', event => {
const button = event.relatedTarget;
const clanListId = button.getAttribute('data-bs-list');
const clanList = document.querySelector(clanListId);
const selectedClan = clanList.options[clanList.selectedIndex].text;
const [clanList, otherClanList] = getClanLists(event);
const selectedClan = clanList.options[clanList.selectedIndex].text;
const modalBodyInput = deleteClanModal.querySelector('#clan');
modalBodyInput.innerText = selectedClan;
const submitButton = deleteClanModal.querySelector('button[name="submit"]');
submitButton.addEventListener('click', function () {
const button = event.relatedTarget;
const clanListId = button.getAttribute('data-bs-list');
const clanList = document.querySelector(clanListId);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
submitButton.onclick = function () {}
const clanId = parseInt(clanList.value);
@@ -50,9 +47,19 @@
})
.then((response) => {
if (response.ok) {
clanList.removeChild(clanList.children[clanList.selectedIndex]);
const clanToRemove = clanList.children[clanList.selectedIndex];
const clanIndex = clanToRemove.index;
clanList.removeChild(clanToRemove);
clanList.selectedIndex = 0;
clanList.dispatchEvent(new Event('change'));
const lastOtherIndex = otherClanList.selectedIndex;
otherClanList.children.item(clanIndex).remove();
if (lastOtherIndex === clanIndex) {
otherClanList.selectedIndex = 0;
otherClanList.dispatchEvent(new Event('change'));
}
deleteClanModalBS.hide();
} else
throw new Error(response.error)

18
templates/modals/edit_clan.html
View File

@@ -37,10 +37,11 @@
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 [clanList, otherClanList] = getClanLists(event);
const selectedClanIndex = clanList.selectedIndex;
const selectedClanItem = clanList.options[selectedClanIndex];
const otherSelClanItem = otherClanList.options[selectedClanIndex];
const clanName = editClanModal.querySelector('#editClanName');
const clanTag = editClanModal.querySelector('#editClanTag');
@@ -66,7 +67,9 @@
throw new Error(error);
});
submitButton.addEventListener('click', function () {
submitButton.addEventListener('click', function (e) {
e.preventDefault();
submitButton.onclick = function () {}
fetch("/clan/" + clanId, {
method: "PATCH",
body: JSON.stringify({
@@ -80,7 +83,10 @@
})
.then((response) => {
if (response.ok) {
selectedClanItem.innerText = "[" + clanTag.value + "]" + " " + clanName.value;
const newName = "[" + clanTag.value + "]" + " " + clanName.value;
selectedClanItem.innerText = newName;
otherSelClanItem.innerText = newName;
editClanModalBS.hide();
clanName.value = "";
clanTag.value = "";