Umstellung auf Tab-Container

main.go

@@ -427,7 +427,7 @@ const htmlTemplate = `
 	</div>
 		<h1 class="mb-4">Beitrag zur Community vom Mitglied der Trading-Staffel ({{.Member}})</h1>
 
-		<div class="alert alert-light">
+		<div class="alert alert-info">
 			<strong>Folgender Wert wurde erwirtschaftet und wird bald zur Verfügung gestellt:</strong> {{formatNumber .OffeneSumme}} UEC
 		</div>
 
@@ -523,15 +523,31 @@ const htmlTemplate = `
 
 		<hr />
 
-		<div class="mt-4">
+		<h4 class="mt-5">Auswertungen</h4>
-			<p>
+
-				<a class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#monatsUebersicht" role="button" aria-expanded="false" aria-controls="monatsUebersicht">
+		<ul class="nav nav-tabs" id="auswertungTabs" role="tablist">
-					Monatliche Übersicht anzeigen
+			<li class="nav-item" role="presentation">
-				</a>
+				<button class="nav-link active" id="monat-tab" data-bs-toggle="tab" data-bs-target="#monat" type="button" role="tab" aria-controls="monat" aria-selected="true">
-			</p>
+					Monatliche Übersicht
-			<div class="collapse" id="monatsUebersicht">
+				</button>
-				<div class="card card-body">
+			</li>
-					<h4 class="mb-3">Monatliche Übersicht</h4>
+			<li class="nav-item" role="presentation">
+				<button class="nav-link" id="abteilung-tab" data-bs-toggle="tab" data-bs-target="#abteilung" type="button" role="tab" aria-controls="abteilung" aria-selected="false">
+					Verteilung auf Abteilungen
+				</button>
+			</li>
+			<li class="nav-item" role="presentation">
+				<button class="nav-link" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab" aria-controls="items" aria-selected="false">
+					Gegenwert in Items
+				</button>
+			</li>
+		</ul>
+
+		<div class="tab-content border border-top-0 p-4 bg-white" id="auswertungTabsContent">
+
+			<!-- Monatliche Übersicht -->
+			<div class="tab-pane fade show active" id="monat" role="tabpanel" aria-labelledby="monat-tab">
+				<h5 class="mb-3">Monatliche Übersicht</h5>
 				<table class="table table-bordered">
 					<thead>
 						<tr>
@@ -551,27 +567,14 @@ const htmlTemplate = `
 					</tbody>
 				</table>
 			</div>
-			</div>
-		</div>
 
-		<hr />
+			<!-- Verteilung auf Abteilungen -->
-
+			<div class="tab-pane fade" id="abteilung" role="tabpanel" aria-labelledby="abteilung-tab">
-		
-
-		<div class="mt-4">
-			<p>
-				<a class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#verteilungAbteilungen" role="button" aria-expanded="false" aria-controls="verteilungAbteilungen">
-					Verteilung auf Abteilungen anzeigen
-				</a>
-			</p>
-			<div class="collapse" id="verteilungAbteilungen">
-				<div class="card card-body">
 				<div class="alert alert-info">
 					<strong>Die tatsächlichen Werte können abweichen.</strong> Die dargestellten Werte sind meine Vorstellung einer sinnvollen Verteilung.<br>
 					Die Summe wird an die Orga-Leitung entrichtet. Die endgültige Entscheidung über die Verteilung obliegt der Orga-Leitung.
 				</div>
-
+				<h5 class="mb-3">Verteilung auf Abteilungen:</h5>
-					<h4 class="mb-3">Verteilung auf Abteilungen:</h4>
 				<table class="table table-striped table-bordered">
 					<thead>
 						<tr>
@@ -593,18 +596,10 @@ const htmlTemplate = `
 					</tbody>
 				</table>
 			</div>
-			</div>
-		</div>
 
-		<div class="mt-4">
+			<!-- Gegenwert in Items -->
-			<p>
+			<div class="tab-pane fade" id="items" role="tabpanel" aria-labelledby="items-tab">
-				<a class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#gegenwertItems" role="button" aria-expanded="false" aria-controls="gegenwertItems">
+				<h5 class="mb-3">Gegenwert in Items:</h5>
-					Gegenwert in Items anzeigen
-				</a>
-			</p>
-			<div class="collapse" id="gegenwertItems">
-				<div class="card card-body">
-					<h4 class="mb-3">Gegenwert in Items:</h4>
 				<table class="table table-bordered">
 					<thead>
 						<tr>
@@ -635,7 +630,6 @@ const htmlTemplate = `
 				</table>
 			</div>
 		</div>
-		</div>
 		
 		{{if .LoggedIn}}
 		<form action="/reset" method="POST" onsubmit="return confirm('Alle Einträge wirklich löschen?')">