mvp for the team selector

frontend/index.css

@@ -668,12 +668,15 @@ body.success .submitWrapper {
   border-radius: 100px;
   display: inline-block;
   margin: 5px 0 0 0;
+	font-weight: bold;
+	flex-shrink: 0;
 }
 .chip.add,
 .chip.remove {
   padding-right: 40px;
 	cursor: pointer;
 }
+
 .chip.add::after,
 .chip.remove::after {
   content: '+';
@@ -685,6 +688,12 @@ body.success .submitWrapper {
   top: -5px;
   right: 10px;
 }
+.chip.remove::after {
+	transform: rotateZ(45deg);
+	color: var(--volt-red);
+	margin-top: 2px;
+}
+
 .chip.add::before,
 .chip.remove::before {
   content: '';
@@ -705,16 +714,19 @@ body.success .submitWrapper {
 .chip.remove:hover::before {
 	opacity: 0.1;
 }
-.chip.remove::after {
-	content: '+';
-	transform: rotateZ(45deg);
-	color: var(--volt-red);
-}
+
 .chip.automatic {
   opacity: 0.6;
 	cursor: not-allowed;
 }
 
+.chip_box {
+	margin: -5px;
+}
+.chip_box .chip {
+	margin: 5px;
+}
+
 body[show=""] .page[page="intro"],
 body[show="intro"] .page[page="intro"],
 body[show="privacy"] .page[page="privacy"],

frontend/index.html

@@ -143,25 +143,31 @@
 
 					<input
 						type="text"
-						id="team_search"
+						id="team_suggestions_input"
 						placeholder="Bonn"
 						style="border-color: currentColor;"
+						oninput="renderTeamSuggestions()"
 					/>
 
-					<div id="team_suggestions">
+					<div
+						id="team_suggestions"
+						style="
+							white-space: nowrap;
+							overflow: auto;
+							display: flex;
+							gap: 5px;
+						"
+					>
 						<div class="chip add">Bonn</div>
 						<div class="chip add">Berlin</div>
 					</div>
 
 					<br />
+					<h3 data-translation-key="metadata_team_search_description-">Ausgewählte Teams:</h3>
 
-					<div id="teams_selected">
-						<div class="chip remove">Bonn</div>
-						<div class="chip remove">Berlin</div>
-					</div>
-					<div id="teams_selected_automaticly">
-						<div class="chip automatic">Bonn</div>
-						<div class="chip automatic">Berlin</div>
+					<div class="chip_box">
+						<span id="teams_selected"></span><!--
+						--><span id="teams_selected_automatically"></span>
 					</div>
 					
 				</div>

frontend/index.js

@@ -16,12 +16,118 @@ console.info('%c \n Be yourself! \n\n', `
     8px 8px #8f008f;
 `)
 
-const teams = []
-const teams_selected = []
-const teams_selected_automatically = []
+let teams = []
+let teams_selected = new Set()
+
+function selectTeam(team) {
+	teams_selected.add(team)
+	renderTeamSuggestions()
+	renderTeamSelected()
+	renderTeamSelectedAutomatically()
+}
+function deselectTeam(team) {
+	teams_selected = new Set([...teams_selected].filter(team_selected => team_selected.id !== team))
+	renderTeamSuggestions()
+	renderTeamSelected()
+	renderTeamSelectedAutomatically()
+}
+function renderTeamSuggestions() {
+	const team_suggestions_input = document.getElementById('team_suggestions_input')
+	const team_suggestions = document.getElementById('team_suggestions')
+	team_suggestions.innerHTML = ''
+
+	const team_suggestions_input_value = team_suggestions_input.value.toLowerCase()
 
 
+	// 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)
+
+	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() {
+	const teams_selected_node = document.getElementById('teams_selected')
+	teams_selected_node.innerHTML = ''
+
+	const filtered_teams = [...teams_selected]
+		.sort((a, b) => {
+			return 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('remove')
+		team_chip.innerHTML = team.name
+		team_chip.addEventListener('click', () => {
+			deselectTeam(team.id)
+		})
+		teams_selected_node.appendChild(team_chip)
+	}
+}
+function getParentTeams(parent_team_ids) {
+	let parent_teams = []
+
+	for (const parent_team_id of parent_team_ids) {
+		const team = teams.find(team => team.id === parent_team_id)
+		if (team) {
+			parent_teams.push(team)
+		}
+	}
+
+	// filter out parent_teams that are in the teams array
+	const teams_selected_ids = [...teams_selected].map(team => team.id)
+	parent_teams = parent_teams.filter(parent_team => !teams_selected_ids.includes(parent_team.id))
+
+	return parent_teams
+}
+function renderTeamSelectedAutomatically() {
+	const teams_selected_node = document.getElementById('teams_selected_automatically')
+	teams_selected_node.innerHTML = ''
+
+	const parent_teams = getParentTeams([...new Set([...teams_selected].flatMap(team => team.parent_team_ids))])
+		.sort((a, b) => {
+			return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
+		})
+
+	for (const team of parent_teams) {
+		const team_chip = document.createElement('div')
+		team_chip.classList.add('chip')
+		team_chip.classList.add('automatic')
+		team_chip.innerHTML = team.name
+		teams_selected_node.appendChild(team_chip)
+	}
+}
+function loadTeams() {
+	// load teams from ./teams.json
+	fetch('./teams.json')
+		.then(response => response.json())
+		.then(data => {
+			teams = data.teams
+			renderTeamSuggestions()
+		})
+		.catch(error => {
+			console.error(error)
+		})
+}
+loadTeams()
 
 const CloudFunctionsPrefix = 'https://us-central1-volt-4eca0.cloudfunctions.net/save_formdata'