* Complete add-player modal

* New player listing
* New player action layout
This commit is contained in:
MaxJa4
2024-01-15 21:26:46 +01:00
parent 04a2a2815d
commit 80d0489b41
16 changed files with 308 additions and 107 deletions

View File

@@ -6,7 +6,7 @@
</div>
<div class="col">
<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">
<select class="form-select form-control border-secondary" id="home-clan" hx-get="/players_html" hx-target="#home-player-list" hx-vals='js:{"id": getSelectedClanId("home-clan")}'>
<option disabled selected value>Auswählen...</option>
<!-- Options will be loaded dynamically -->
</select>
@@ -26,7 +26,7 @@
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupClanButtons('home-clan', 'home-delete', 'home-edit');
htmx.ajax('GET', '/clan_options', {target: '#home-clan'});
htmx.ajax('GET', '/clans_html', {target: '#home-clan'});
});
</script>

View File

@@ -1,34 +0,0 @@
{{ define "home_player_bar" }}
<div class="row mt-3 justify-content-between align-items-center">
<div class="col-auto">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-secondary-emphasis py-1 px-3"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-secondary-emphasis py-1 px-3"><i class="bi bi-square fs-4"></i></button>
</div>
</div>
<div class="col px-0">
<span class="badge fs-5 w-100 text-secondary-emphasis">0 von 0 ausgewählt</span>
</div>
<div class="col-auto">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-danger py-1 px-3" id="home-player-delete" disabled>
<i class="bi bi-person-dash fs-4"></i>
</button>
<button type="button" class="btn btn-outline-secondary text-primary py-1 px-3" id="home-player-edit" disabled>
<i class="bi bi-person-gear fs-4"></i>
</button>
<button type="button" class="btn btn-outline-secondary text-success py-1 px-3" id="home-player-add" data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-target="#addPlayerModal" disabled>
<i class="bi bi-person-add fs-4"></i>
</button>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('home-clan', 'home-player-list', 'home-player-delete', 'home-player-edit', 'home-player-add');
});
</script>
{{ end }}

View File

@@ -1,8 +1,32 @@
{{ define "home_player_list" }}
<label for="home-player-list" class="col-form-label col-form-label-lg pt-0">Spieler:</label>
<select multiple class="form-control form-control-lg overflow-auto border-secondary" id="home-player-list" size="10">
<!-- Player list items go here -->
</select>
<div class="row">
<div class="col">
<div id="home-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">
</div>
</div>
<div class="col-auto ps-0">
<div class="btn-group-vertical btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-square fs-4"></i></button>
</div>
<br>
<button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="home-player-add" data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-target="#addPlayerModal" disabled>
<i class="bi bi-person-add fs-4"></i>
</button>
<br>
<div class="vstack text-center border border-secondary rounded mt-2">
<i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
<span class="badge fs-5 mb-2">0</span>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('home-clan', 'home-player-list', 'home-player-add');
});
</script>
{{ end }}

View File

@@ -6,7 +6,7 @@
</div>
<div class="col">
<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">
<select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"id": getSelectedClanId("opponent-clan")}'>
<option disabled selected value>Auswählen...</option>
</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>
@@ -25,7 +25,7 @@
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
htmx.ajax('GET', '/clan_options', {target: '#opponent-clan'});
htmx.ajax('GET', '/clans_html', {target: '#opponent-clan'});
});
</script>

View File

@@ -1,34 +0,0 @@
{{ define "opp_player_bar" }}
<div class="row mt-3 justify-content-between align-items-center">
<div class="col-auto">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-secondary-emphasis py-1 px-3"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-secondary-emphasis py-1 px-3"><i class="bi bi-square fs-4"></i></button>
</div>
</div>
<div class="col px-0">
<span class="badge fs-5 w-100 text-secondary-emphasis">0 von 0 ausgewählt</span>
</div>
<div class="col-auto">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-danger py-1 px-3" id="opponent-player-delete" disabled>
<i class="bi bi-person-dash fs-4"></i>
</button>
<button type="button" class="btn btn-outline-secondary text-primary py-1 px-3" id="opponent-player-edit" disabled>
<i class="bi bi-person-gear fs-4"></i>
</button>
<button type="button" class="btn btn-outline-secondary text-success py-1 px-3" id="opponent-player-add" data-bs-toggle="modal" data-bs-list="#opponent-player-list" data-bs-target="#addPlayerModal" disabled>
<i class="bi bi-person-add fs-4"></i>
</button>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-delete', 'opponent-player-edit', 'opponent-player-add');
});
</script>
{{ end }}

View File

@@ -1,8 +1,32 @@
{{ define "opp_player_list" }}
<label for="opponent-player-list" class="col-form-label col-form-label-lg pt-0">Spieler:</label>
<select multiple class="form-control form-control-lg overflow-auto border-secondary" id="opponent-player-list" size="10">
<!-- Player list items go here -->
</select>
<div class="row">
<div class="col">
<div id="opponent-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">
</div>
</div>
<div class="col-auto ps-0">
<div class="btn-group-vertical btn-group-lg" role="group">
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-square fs-4"></i></button>
</div>
<br>
<button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="opponent-player-add" data-bs-toggle="modal" data-bs-list="#opponent-player-list" data-bs-target="#addPlayerModal" disabled>
<i class="bi bi-person-add fs-4"></i>
</button>
<br>
<div class="vstack text-center border border-secondary rounded mt-2">
<i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
<span class="badge fs-5 mb-2">0</span>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
});
</script>
{{ end }}