From 096bcebdd862ae6018f9750bcf0bbdf7c2d9a118 Mon Sep 17 00:00:00 2001
From: thomasrosen <thomas.rosen@me.com>
Date: Mon, 21 Nov 2022 17:00:08 +0100
Subject: [PATCH] team selector

---
 frontend/index.css  |  4 ++--
 frontend/index.html | 22 +++++++++---------
 frontend/index.js   | 56 ++++++++++++++++++++++++++++-----------------
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/index.css b/frontend/index.css
index 540d766..061f0c6 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -721,10 +721,10 @@ body.success .submitWrapper {
 }
 
 .chip_box {
-	margin: -5px;
+	margin: -4px;
 }
 .chip_box .chip {
-	margin: 5px;
+	margin: 4px;
 }
 
 body[show=""] .page[page="intro"],
diff --git a/frontend/index.html b/frontend/index.html
index 979be3b..edf8f61 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -151,23 +151,23 @@
 
 					<div
 						id="team_suggestions"
+						class="chip_box"
 						style="
 							white-space: nowrap;
 							overflow: auto;
-							display: flex;
-							gap: 5px;
+							padding-bottom: 16px;
+							margin: 4px 0 -4px 0;
 						"
-					>
-						<div class="chip add">Bonn</div>
-						<div class="chip add">Berlin</div>
-					</div>
+					></div>
 
-					<br />
-					<h3 data-translation-key="metadata_team_search_description-">Ausgewählte Teams:</h3>
+					<div id="selected_teams_wrapper">
+						<br />
+						<h3 data-translation-key="metadata_team_search_description-">Ausgewählte Teams:</h3>
 
-					<div class="chip_box">
-						<span id="teams_selected"></span><!--
-						--><span id="teams_selected_automatically"></span>
+						<div class="chip_box">
+							<span id="teams_selected"></span><!--
+							--><span id="teams_selected_automatically"></span>
+						</div>
 					</div>
 					
 				</div>
diff --git a/frontend/index.js b/frontend/index.js
index d92f1af..9aa77d7 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -38,28 +38,29 @@ function renderTeamSuggestions() {
 
 	const team_suggestions_input_value = team_suggestions_input.value.toLowerCase()
 
+	if (team_suggestions_input_value.length > 0) {
+		// filter out parent_teams that are in the teams array
+		const teams_selected_ids = [...teams_selected]
+			.flatMap(team => [
+				team.id,
+				// ...team.parent_team_ids,
+			])
 
-	// filter out parent_teams that are in the teams array
-	const teams_selected_ids = [...teams_selected]
-		.flatMap(team => [
-			team.id,
-			// ...team.parent_team_ids,
-		])
+		const filtered_teams = teams
+			.filter(team => !teams_selected_ids.includes(team.id))
+			.filter(team => team.name.toLowerCase().includes(team_suggestions_input_value))
+			.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)
 
-	const filtered_teams = teams
-		.filter(team => !teams_selected_ids.includes(team.id))
-		.filter(team => team.name.toLowerCase().includes(team_suggestions_input_value))
-		.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)
-
-	for (const team of filtered_teams) {
-		const team_chip = document.createElement('div')
-		team_chip.classList.add('chip')
-		team_chip.classList.add('add')
-		team_chip.innerHTML = team.name
-		team_chip.addEventListener('click', () => {
-			selectTeam(team)
-		})
-		team_suggestions.appendChild(team_chip)
+		for (const team of filtered_teams) {
+			const team_chip = document.createElement('div')
+			team_chip.classList.add('chip')
+			team_chip.classList.add('add')
+			team_chip.innerHTML = team.name
+			team_chip.addEventListener('click', () => {
+				selectTeam(team)
+			})
+			team_suggestions.appendChild(team_chip)
+		}
 	}
 }
 function renderTeamSelected() {
@@ -71,6 +72,13 @@ function renderTeamSelected() {
 			return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
 		})
 
+	const selected_teams_wrapper_node = document.getElementById('selected_teams_wrapper')
+	if (filtered_teams.length === 0) {
+		selected_teams_wrapper_node.style.display = 'none'
+	} else {
+		selected_teams_wrapper_node.style.display = 'block'
+	}
+
 	for (const team of filtered_teams) {
 		const team_chip = document.createElement('div')
 		team_chip.classList.add('chip')
@@ -127,7 +135,13 @@ function loadTeams() {
 			console.error(error)
 		})
 }
-loadTeams()
+function initTeams() {
+	loadTeams()
+	renderTeamSuggestions()
+	renderTeamSelected()
+	renderTeamSelectedAutomatically()
+}
+initTeams()
 
 const CloudFunctionsPrefix = 'https://us-central1-volt-4eca0.cloudfunctions.net/save_formdata'