mirror of
https://gitlab.com/animath/si/plateforme.git
synced 2024-12-26 09:02:23 +00:00
a4c7951475
Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
573 lines
24 KiB
JavaScript
573 lines
24 KiB
JavaScript
(async () => {
|
|
// check notification permission
|
|
await Notification.requestPermission()
|
|
})()
|
|
|
|
const tournaments = JSON.parse(document.getElementById('tournaments_list').textContent)
|
|
const sockets = {}
|
|
|
|
const messages = document.getElementById('messages')
|
|
|
|
function abortDraw(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'abort'}))
|
|
}
|
|
|
|
function drawDice(tid, trigram = null) {
|
|
sockets[tid].send(JSON.stringify({'type': 'dice', 'trigram': trigram}))
|
|
}
|
|
|
|
function drawProblem(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'draw_problem'}))
|
|
}
|
|
|
|
function acceptProblem(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'accept'}))
|
|
}
|
|
|
|
function rejectProblem(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'reject'}))
|
|
}
|
|
|
|
function exportDraw(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'export'}))
|
|
}
|
|
|
|
function continueFinal(tid) {
|
|
sockets[tid].send(JSON.stringify({'type': 'continue_final'}))
|
|
}
|
|
|
|
function showNotification(title, body, timeout = 5000) {
|
|
let notif = new Notification(title, {'body': body, 'icon': "/static/tfjm.svg"})
|
|
if (timeout)
|
|
setTimeout(() => notif.close(), timeout)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (document.location.hash) {
|
|
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(elem => {
|
|
if ('#' + elem.innerText.toLowerCase() === document.location.hash.toLowerCase()) {
|
|
elem.click()
|
|
}
|
|
})
|
|
}
|
|
|
|
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(
|
|
elem => elem.addEventListener(
|
|
'click', () => document.location.hash = '#' + elem.innerText.toLowerCase()))
|
|
|
|
for (let tournament of tournaments) {
|
|
let socket = new WebSocket(
|
|
(document.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host
|
|
+ '/ws/draw/' + tournament.id + '/'
|
|
)
|
|
sockets[tournament.id] = socket
|
|
|
|
function addMessage(message, type, timeout = 0) {
|
|
const wrapper = document.createElement('div')
|
|
wrapper.innerHTML = [
|
|
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
|
|
`<div>${message}</div>`,
|
|
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
|
|
].join('\n')
|
|
messages.append(wrapper)
|
|
|
|
if (timeout)
|
|
setTimeout(() => wrapper.remove(), timeout)
|
|
}
|
|
|
|
function setInfo(info) {
|
|
document.getElementById(`messages-${tournament.id}`).innerHTML = info
|
|
}
|
|
|
|
function drawStart(teams) {
|
|
document.getElementById(`banner-not-started-${tournament.id}`).classList.add('d-none')
|
|
document.getElementById(`draw-content-${tournament.id}`).classList.remove('d-none')
|
|
|
|
let dicesDiv = document.getElementById(`dices-${tournament.id}`)
|
|
for (let team of teams) {
|
|
let col = document.createElement('div')
|
|
col.classList.add('col-md-1')
|
|
dicesDiv.append(col)
|
|
|
|
let diceDiv = document.createElement('div')
|
|
diceDiv.id = `dice-${tournament.id}-${team}`
|
|
diceDiv.classList.add('badge', 'rounded-pill', 'text-bg-warning')
|
|
if (document.getElementById(`abort-${tournament.id}`) !== null) {
|
|
// Check if this is a volunteer
|
|
diceDiv.onclick = (e) => drawDice(tournament.id, team)
|
|
}
|
|
diceDiv.textContent = `${team} 🎲 ??`
|
|
col.append(diceDiv)
|
|
}
|
|
}
|
|
|
|
function drawAbort() {
|
|
document.getElementById(`banner-not-started-${tournament.id}`).classList.remove('d-none')
|
|
document.getElementById(`draw-content-${tournament.id}`).classList.add('d-none')
|
|
document.getElementById(`dices-${tournament.id}`).innerHTML = ""
|
|
document.getElementById(`recap-${tournament.id}-round-list`).innerHTML = ""
|
|
document.getElementById(`tables-${tournament.id}`).innerHTML = ""
|
|
updateDiceVisibility(false)
|
|
updateBoxVisibility(false)
|
|
updateButtonsVisibility(false)
|
|
updateExportVisibility(false)
|
|
updateContinueVisibility(false)
|
|
}
|
|
|
|
function updateDiceInfo(trigram, result) {
|
|
let elem = document.getElementById(`dice-${tournament.id}-${trigram}`)
|
|
if (result === null) {
|
|
elem.classList.remove('text-bg-success')
|
|
elem.classList.add('text-bg-warning')
|
|
elem.innerText = `${trigram} 🎲 ??`
|
|
}
|
|
else {
|
|
elem.classList.remove('text-bg-warning')
|
|
elem.classList.add('text-bg-success')
|
|
elem.innerText = `${trigram} 🎲 ${result}`
|
|
}
|
|
}
|
|
|
|
function updateDiceVisibility(visible) {
|
|
let div = document.getElementById(`launch-dice-${tournament.id}`)
|
|
if (visible)
|
|
div.classList.remove('d-none')
|
|
else
|
|
div.classList.add('d-none')
|
|
}
|
|
|
|
function updateBoxVisibility(visible) {
|
|
let div = document.getElementById(`draw-problem-${tournament.id}`)
|
|
if (visible)
|
|
div.classList.remove('d-none')
|
|
else
|
|
div.classList.add('d-none')
|
|
}
|
|
|
|
function updateButtonsVisibility(visible) {
|
|
let div = document.getElementById(`buttons-${tournament.id}`)
|
|
if (visible)
|
|
div.classList.remove('d-none')
|
|
else
|
|
div.classList.add('d-none')
|
|
}
|
|
|
|
function updateExportVisibility(visible) {
|
|
let div = document.getElementById(`export-${tournament.id}`)
|
|
if (visible)
|
|
div.classList.remove('d-none')
|
|
else
|
|
div.classList.add('d-none')
|
|
}
|
|
|
|
function updateContinueVisibility(visible) {
|
|
let div = document.getElementById(`continue-${tournament.id}`)
|
|
if (visible)
|
|
div.classList.remove('d-none')
|
|
else
|
|
div.classList.add('d-none')
|
|
}
|
|
|
|
function updatePoules(round, poules) {
|
|
let roundList = document.getElementById(`recap-${tournament.id}-round-list`)
|
|
let poolListId = `recap-${tournament.id}-round-${round}-pool-list`
|
|
let poolList = document.getElementById(poolListId)
|
|
if (poolList === null) {
|
|
let div = document.createElement('div')
|
|
div.id = `recap-${tournament.id}-round-${round}`
|
|
div.classList.add('col-md-6', 'px-3', 'py-3')
|
|
div.setAttribute('data-tournament', tournament.id)
|
|
|
|
let title = document.createElement('strong')
|
|
title.textContent = 'Tour ' + round
|
|
|
|
poolList = document.createElement('ul')
|
|
poolList.id = poolListId
|
|
poolList.classList.add('list-group', 'list-group-flush')
|
|
|
|
div.append(title, poolList)
|
|
roundList.append(div)
|
|
}
|
|
|
|
let c = 1
|
|
|
|
for (let poule of poules) {
|
|
let teamListId = `recap-${tournament.id}-round-${round}-pool-${poule.letter}-team-list`
|
|
let teamList = document.getElementById(teamListId)
|
|
if (teamList === null) {
|
|
let li = document.createElement('li')
|
|
li.id = `recap-${tournament.id}-round-${round}-pool-${poule.letter}`
|
|
li.classList.add('list-group-item', 'px-3', 'py-3')
|
|
li.setAttribute('data-tournament', tournament.id)
|
|
|
|
let title = document.createElement('strong')
|
|
title.textContent = 'Poule ' + poule.letter + round
|
|
|
|
teamList = document.createElement('ul')
|
|
teamList.id = teamListId
|
|
teamList.classList.add('list-group', 'list-group-flush')
|
|
|
|
li.append(title, teamList)
|
|
poolList.append(li)
|
|
}
|
|
|
|
if (poule.teams.length > 0) {
|
|
for (let team of poule.teams) {
|
|
// Reorder dices
|
|
let diceDiv = document.getElementById(`dice-${tournament.id}-${team}`)
|
|
diceDiv.parentElement.style.order = c.toString()
|
|
c += 1
|
|
|
|
let teamLiId = `recap-${tournament.id}-round-${round}-team-${team}`
|
|
let teamLi = document.getElementById(teamLiId)
|
|
|
|
if (teamLi === null) {
|
|
teamLi = document.createElement('li')
|
|
teamLi.id = teamLiId
|
|
teamLi.classList.add('list-group-item')
|
|
teamLi.setAttribute('data-tournament', tournament.id)
|
|
|
|
teamList.append(teamLi)
|
|
}
|
|
|
|
let acceptedDivId = `recap-${tournament.id}-round-${round}-team-${team}-accepted`
|
|
let acceptedDiv = document.getElementById(acceptedDivId)
|
|
if (acceptedDiv === null) {
|
|
acceptedDiv = document.createElement('div')
|
|
acceptedDiv.id = acceptedDivId
|
|
acceptedDiv.classList.add('badge', 'rounded-pill', 'text-bg-warning')
|
|
acceptedDiv.textContent = `${team} 📃 ?`
|
|
teamLi.append(acceptedDiv)
|
|
}
|
|
|
|
let rejectedDivId = `recap-${tournament.id}-round-${round}-team-${team}-rejected`
|
|
let rejectedDiv = document.getElementById(rejectedDivId)
|
|
if (rejectedDiv === null) {
|
|
rejectedDiv = document.createElement('div')
|
|
rejectedDiv.id = rejectedDivId
|
|
rejectedDiv.classList.add('badge', 'rounded-pill', 'text-bg-danger')
|
|
rejectedDiv.textContent = '🗑️'
|
|
teamLi.append(rejectedDiv)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw tables
|
|
let tablesDiv = document.getElementById(`tables-${tournament.id}`)
|
|
let tablesRoundDiv = document.getElementById(`tables-${tournament.id}-round-${round}`)
|
|
if (tablesRoundDiv === null) {
|
|
let card = document.createElement('div')
|
|
card.classList.add('card', 'col-md-6')
|
|
tablesDiv.append(card)
|
|
|
|
let cardHeader = document.createElement('div')
|
|
cardHeader.classList.add('card-header')
|
|
cardHeader.innerHTML = `<h2>Tour ${round}</h2>`
|
|
card.append(cardHeader)
|
|
|
|
tablesRoundDiv = document.createElement('div')
|
|
tablesRoundDiv.id = `tables-${tournament.id}-round-${round}`
|
|
tablesRoundDiv.classList.add('card-body', 'd-flex', 'flex-wrap')
|
|
card.append(tablesRoundDiv)
|
|
}
|
|
|
|
for (let poule of poules) {
|
|
if (poule.teams.length === 0)
|
|
continue
|
|
|
|
updatePouleTable(round, poule)
|
|
}
|
|
}
|
|
}
|
|
|
|
function updatePouleTable(round, poule) {
|
|
let tablesRoundDiv = document.getElementById(`tables-${tournament.id}-round-${round}`)
|
|
let pouleTable = document.getElementById(`table-${tournament.id}-${round}-${poule.letter}`)
|
|
if (pouleTable === null) {
|
|
// Create table
|
|
let card = document.createElement('div')
|
|
card.classList.add('card', 'w-100', 'my-3', `order-${poule.letter.charCodeAt(0) - 64}`)
|
|
tablesRoundDiv.append(card)
|
|
|
|
let cardHeader = document.createElement('div')
|
|
cardHeader.classList.add('card-header')
|
|
cardHeader.innerHTML = `<h2>Poule ${poule.letter}${round}</h2>`
|
|
card.append(cardHeader)
|
|
|
|
let cardBody = document.createElement('div')
|
|
cardBody.classList.add('card-body')
|
|
card.append(cardBody)
|
|
|
|
pouleTable = document.createElement('table')
|
|
pouleTable.id = `table-${tournament.id}-${round}-${poule.letter}`
|
|
pouleTable.classList.add('table', 'table-stripped')
|
|
cardBody.append(pouleTable)
|
|
|
|
let thead = document.createElement('thead')
|
|
pouleTable.append(thead)
|
|
|
|
let phaseTr = document.createElement('tr')
|
|
thead.append(phaseTr)
|
|
|
|
let teamTh = document.createElement('th')
|
|
teamTh.classList.add('text-center')
|
|
teamTh.rowSpan = poule.teams.length === 5 ? 3 : 2
|
|
teamTh.textContent = "Équipe"
|
|
phaseTr.append(teamTh)
|
|
|
|
for (let i = 1; i <= (poule.teams.length === 4 ? 4 : 3); ++i) {
|
|
let phaseTh = document.createElement('th')
|
|
phaseTh.classList.add('text-center')
|
|
if (poule.teams.length === 5 && i < 3)
|
|
phaseTh.colSpan = 2
|
|
phaseTh.textContent = `Phase ${i}`
|
|
phaseTr.append(phaseTh)
|
|
}
|
|
|
|
if (poule.teams.length === 5) {
|
|
let roomTr = document.createElement('tr')
|
|
thead.append(roomTr)
|
|
|
|
for (let i = 0; i < 5; ++i) {
|
|
let roomTh = document.createElement('th')
|
|
roomTh.classList.add('text-center')
|
|
roomTh.textContent = `Salle ${1 + (i % 2)}`
|
|
roomTr.append(roomTh)
|
|
}
|
|
}
|
|
|
|
let problemTr = document.createElement('tr')
|
|
thead.append(problemTr)
|
|
|
|
for (let team of poule.teams) {
|
|
let problemTh = document.createElement('th')
|
|
problemTh.classList.add('text-center')
|
|
problemTh.innerHTML = `Pb. <span id="table-${tournament.id}-round-${round}-problem-${team}">?</span>`
|
|
problemTr.append(problemTh)
|
|
}
|
|
|
|
let tbody = document.createElement('tbody')
|
|
pouleTable.append(tbody)
|
|
|
|
for (let i = 0; i < poule.teams.length; ++i) {
|
|
let team = poule.teams[i]
|
|
|
|
let teamTr = document.createElement('tr')
|
|
tbody.append(teamTr)
|
|
|
|
let teamTd = document.createElement('td')
|
|
teamTd.classList.add('text-center')
|
|
teamTd.innerText = team
|
|
teamTr.append(teamTd)
|
|
|
|
let defenderTd = document.createElement('td')
|
|
defenderTd.classList.add('text-center')
|
|
defenderTd.innerText = 'Déf'
|
|
|
|
let opponentTd = document.createElement('td')
|
|
opponentTd.classList.add('text-center')
|
|
opponentTd.innerText = 'Opp'
|
|
|
|
let reporterTd = document.createElement('td')
|
|
reporterTd.classList.add('text-center')
|
|
reporterTd.innerText = 'Rap'
|
|
|
|
let emptyTd = document.createElement('td')
|
|
let emptyTd2 = document.createElement('td')
|
|
|
|
|
|
if (poule.teams.length === 3) {
|
|
switch (i) {
|
|
case 0:
|
|
teamTr.append(defenderTd, reporterTd, opponentTd)
|
|
break
|
|
case 1:
|
|
teamTr.append(opponentTd, defenderTd, reporterTd)
|
|
break
|
|
case 2:
|
|
teamTr.append(reporterTd, opponentTd, defenderTd)
|
|
break
|
|
}
|
|
}
|
|
else if (poule.teams.length === 4) {
|
|
switch (i) {
|
|
case 0:
|
|
teamTr.append(defenderTd, emptyTd, reporterTd, opponentTd)
|
|
break
|
|
case 1:
|
|
teamTr.append(opponentTd, defenderTd, emptyTd, reporterTd)
|
|
break
|
|
case 2:
|
|
teamTr.append(reporterTd, opponentTd, defenderTd, emptyTd)
|
|
break
|
|
case 3:
|
|
teamTr.append(emptyTd, reporterTd, opponentTd, defenderTd)
|
|
break
|
|
}
|
|
}
|
|
else if (poule.teams.length === 5) {
|
|
switch (i) {
|
|
case 0:
|
|
teamTr.append(defenderTd, emptyTd, opponentTd, reporterTd, emptyTd2)
|
|
break
|
|
case 1:
|
|
teamTr.append(emptyTd, defenderTd, reporterTd, emptyTd2, opponentTd)
|
|
break
|
|
case 2:
|
|
teamTr.append(opponentTd, emptyTd, defenderTd, emptyTd2, reporterTd)
|
|
break
|
|
case 3:
|
|
teamTr.append(reporterTd, opponentTd, emptyTd, defenderTd, emptyTd2)
|
|
break
|
|
case 4:
|
|
teamTr.append(emptyTd, reporterTd, emptyTd2, opponentTd, defenderTd)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateActiveRecap(round, pool, team) {
|
|
document.querySelectorAll(`div.text-bg-secondary[data-tournament="${tournament.id}"]`)
|
|
.forEach(elem => elem.classList.remove('text-bg-secondary'))
|
|
document.querySelectorAll(`li.list-group-item-success[data-tournament="${tournament.id}"]`)
|
|
.forEach(elem => elem.classList.remove('list-group-item-success'))
|
|
document.querySelectorAll(`li.list-group-item-info[data-tournament="${tournament.id}"]`)
|
|
.forEach(elem => elem.classList.remove('list-group-item-info'))
|
|
|
|
let roundDiv = document.getElementById(`recap-${tournament.id}-round-${round}`)
|
|
if (roundDiv !== null)
|
|
roundDiv.classList.add('text-bg-secondary')
|
|
|
|
let poolLi = document.getElementById(`recap-${tournament.id}-round-${round}-pool-${pool}`)
|
|
if (poolLi !== null)
|
|
poolLi.classList.add('list-group-item-success')
|
|
|
|
let teamLi = document.getElementById(`recap-${tournament.id}-round-${round}-team-${team}`)
|
|
if (teamLi !== null)
|
|
teamLi.classList.add('list-group-item-info')
|
|
}
|
|
|
|
function setProblemAccepted(round, team, problem) {
|
|
let recapDiv = document.getElementById(`recap-${tournament.id}-round-${round}-team-${team}-accepted`)
|
|
recapDiv.classList.remove('text-bg-warning')
|
|
recapDiv.classList.add('text-bg-success')
|
|
recapDiv.textContent = `${team} 📃 ${problem}`
|
|
|
|
let tableSpan = document.getElementById(`table-${tournament.id}-round-${round}-problem-${team}`)
|
|
tableSpan.textContent = problem
|
|
}
|
|
|
|
function setProblemRejected(round, team, rejected) {
|
|
let recapDiv = document.getElementById(`recap-${tournament.id}-round-${round}-team-${team}-rejected`)
|
|
recapDiv.textContent = `🗑️ ${rejected.join(', ')}`
|
|
|
|
if (rejected.length >= 4) {
|
|
// TODO Fix this static value
|
|
let penaltyDiv = document.getElementById(`recap-${tournament.id}-round-${round}-team-${team}-penalty`)
|
|
if (penaltyDiv === null) {
|
|
penaltyDiv = document.createElement('div')
|
|
penaltyDiv.id = `recap-${tournament.id}-round-${round}-team-${team}-penalty`
|
|
penaltyDiv.classList.add('badge', 'rounded-pill', 'text-bg-info')
|
|
recapDiv.parentNode.append(penaltyDiv)
|
|
}
|
|
penaltyDiv.textContent = `❌ ${0.5 * (rejected.length - 3)}`
|
|
}
|
|
}
|
|
|
|
function reorderPoule(round, poule, teams, problems) {
|
|
let table = document.getElementById(`table-${tournament.id}-${round}-${poule}`)
|
|
table.parentElement.parentElement.remove()
|
|
|
|
updatePouleTable(round, {'letter': poule, 'teams': teams})
|
|
|
|
for (let i = 0; i < teams.length; ++i) {
|
|
let team = teams[i]
|
|
let problem = problems[i]
|
|
|
|
setProblemAccepted(round, team, problem)
|
|
}
|
|
}
|
|
|
|
socket.addEventListener('message', e => {
|
|
const data = JSON.parse(e.data)
|
|
console.log(data)
|
|
|
|
switch (data.type) {
|
|
case 'alert':
|
|
addMessage(data.message, data.alert_type)
|
|
break
|
|
case 'notification':
|
|
showNotification(data.title, data.body)
|
|
break
|
|
case 'set_info':
|
|
setInfo(data.information)
|
|
break
|
|
case 'draw_start':
|
|
drawStart(data.trigrams)
|
|
break
|
|
case 'abort':
|
|
drawAbort()
|
|
break
|
|
case 'dice':
|
|
updateDiceInfo(data.team, data.result)
|
|
break
|
|
case 'dice_visibility':
|
|
updateDiceVisibility(data.visible)
|
|
break
|
|
case 'box_visibility':
|
|
updateBoxVisibility(data.visible)
|
|
break
|
|
case 'buttons_visibility':
|
|
updateButtonsVisibility(data.visible)
|
|
break
|
|
case 'export_visibility':
|
|
updateExportVisibility(data.visible)
|
|
break
|
|
case 'continue_visibility':
|
|
updateContinueVisibility(data.visible)
|
|
break
|
|
case 'set_poules':
|
|
updatePoules(data.round, data.poules)
|
|
break
|
|
case 'set_active':
|
|
updateActiveRecap(data.round, data.poule, data.team)
|
|
break
|
|
case 'set_problem':
|
|
setProblemAccepted(data.round, data.team, data.problem)
|
|
break
|
|
case 'reject_problem':
|
|
setProblemRejected(data.round, data.team, data.rejected)
|
|
break
|
|
case 'reorder_poule':
|
|
reorderPoule(data.round, data.poule, data.teams, data.problems)
|
|
break
|
|
}
|
|
})
|
|
|
|
socket.addEventListener('close', e => {
|
|
console.error('Chat socket closed unexpectedly')
|
|
})
|
|
|
|
socket.addEventListener('open', e => {
|
|
socket.send(JSON.stringify({
|
|
'type': 'set_language',
|
|
'language': document.getElementsByName('language')[0].value,
|
|
}))
|
|
})
|
|
|
|
let format_form = document.getElementById('format-form-' + tournament.id)
|
|
if (format_form !== null) {
|
|
format_form.addEventListener('submit', function (e) {
|
|
e.preventDefault()
|
|
|
|
socket.send(JSON.stringify({
|
|
'type': 'start_draw',
|
|
'fmt': document.getElementById('format-' + tournament.id).value
|
|
}))
|
|
})
|
|
}
|
|
}
|
|
})
|