mirror of
https://github.com/voltbonn/diversity.volt.link.git
synced 2024-06-28 08:50:56 +00:00
mvp for the team selector
This commit is contained in:
parent
b2f75ffda7
commit
059e403040
|
@ -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"],
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
Loading…
Reference in a new issue