class EttTask {
constructor(taskElement, onUpdate) {
let self = this
/* data */
const bubbleHourElements = taskElement.querySelectorAll('[role=bubble-hour]')
const taskTotal = taskElement.querySelector('.ett-task-total')
// var lineStart = {x:0,y:0}
var multiSelectFill = false
this.element = taskElement
this.bubbleHours = []
this.bubbles = []
this.bubbleStartIndex = null
/* actions */
const sumTime = ev => {
let total = 0
bubbleHourElements.forEach(bubbleHour => {
total += parseInt(bubbleHour.getAttribute('data-time'))
})
taskElement.setAttribute('data-time', total)
let hours = (total / 60)
taskTotal.innerHTML = hours.toFixed(2) + ' H'
onUpdate()
}
/* init */
bubbleHourElements.forEach(bubbleHourElement => {
let bubbleHour = new BubbleHour(bubbleHourElement, sumTime, self)
self.bubbleHours.push(bubbleHour)
})
taskElement.ett = this
sumTime()
return this
}
}
class BubbleHour {
constructor(hourElement, onUpdate, task) {
let self = this
/* data */
this.element = hourElement
this.bubbleElements = hourElement.querySelectorAll('[role=bubble-15m]')
this.bubbles = []
/* actions */
const sumTime = ev => {
let total = 0
// let bubbles = ev.currentTarget.querySelectorAll('> [role=bubble-15m]')
self.bubbleElements.forEach(bubbleElement => {
total += parseInt(bubbleElement.getAttribute('data-time'))
})
hourElement.setAttribute('data-time', total)
onUpdate()
}
/* init */
this.bubbleElements.forEach(bubbleElement => {
let bubble = new Bubble(bubbleElement, sumTime, task, self)
self.bubbles.push(bubble)
task.bubbles.push(bubble)
})
hourElement.ett = this
sumTime()
return this
}
}
class Bubble3 {
constructor(bubbleElement, onUpdate, task) {
let self = this
/* data */
this.element = bubbleElement
this.bubbles5m = bubbleElement.querySelectorAll('.bubble-5m')
/* actions */
const fillBubble = (time) => {
bubbles5m.forEach(bubble => {
time = parseInt(time)
let minTrigger = parseInt(bubble.getAttribute('data-value')) - 4
if (time > 0 && time >= minTrigger) {
bubble.classList.add('fill')
} else {
bubble.classList.remove('fill')
}
})
}
const sumTime = ev => {
const currentTime = bubbleElement.getAttribute('data-time')
fillBubble(currentTime)
}
const cycleTime = ev => {
let currentTime = parseInt(bubbleElement.getAttribute('data-time'))
if (currentTime >= 15) {
currentTime = 0
} else {
currentTime += 5
}
bubbleElement.setAttribute('data-time', currentTime)
fillBubble(currentTime)
onUpdate()
}
/* init */
bubbleElement.addEventListener('click', cycleTime)
bubbleElement.classList.add('bubble3')
bubbleElement.ett = this
sumTime()
return this
}
}
class Bubble {
constructor(bubbleElement, onUpdate, task, hour) {
let self = this
/* data */
this.element = bubbleElement
/* actions */
this.fillBubble = (time) => {
bubbleElement.setAttribute('data-time', parseInt(time))
if (parseInt(time) > 0) {
bubbleElement.classList.add('fill')
} else {
bubbleElement.classList.remove('fill')
}
onUpdate()
}
const sumTime = ev => {
const currentTime = bubbleElement.getAttribute('data-time')
self.fillBubble(currentTime)
}
const cycleTime = ev => {
var currentTime = parseInt(bubbleElement.getAttribute('data-time'))
if (currentTime > 0) {
currentTime = 0
} else {
currentTime = 15
}
self.fillBubble(currentTime)
document.dispatchEvent(new Event('persist'))
}
/* init */
const preMultiFill = ev => {
bubbleElement.addEventListener('mouseup', cycleTime)
bubbleElement.addEventListener('mouseout', multiSelectActivate)
document.addEventListener('mouseup', multiSelectCancel)
task.bubbleStartIndex = parseInt(bubbleElement.getAttribute('data-task-index'))
}
const multiSelectActivate = ev => {
bubbleElement.removeEventListener('mouseup', cycleTime)
bubbleElement.removeEventListener('mouseout', multiSelectActivate)
task.multiSelectActive = true
const currentTime = parseInt(bubbleElement.getAttribute('data-time'))
if (currentTime > 0) {
task.multiSelectFill = false
self.fillBubble(0)
document.body.style.cursor = 'not-allowed'
} else {
task.multiSelectFill = true
self.fillBubble(15)
document.body.style.cursor = 'copy'
}
}
const multiSelectCancel = ev => {
task.multiSelectActive = false
bubbleElement.removeEventListener('mouseout', multiSelectActivate)
document.removeEventListener('mouseup', multiSelectCancel)
task.bubbleStartIndex = null
document.body.style.cursor = 'default'
document.dispatchEvent(new Event('persist'))
}
const multiFill = ev => {
if (task.multiSelectActive) {
if (task.multiSelectFill) {
self.fillBubble(15)
} else {
self.fillBubble(0)
}
let bubbleIndex = parseInt(bubbleElement.getAttribute('data-task-index'))
let bubbleStartIndex = parseInt(task.bubbleStartIndex)
if (bubbleStartIndex !== null && bubbleStartIndex !== bubbleIndex) {
let startIndex = Math.min(bubbleIndex,task.bubbleStartIndex);
let endIndex = Math.max(bubbleIndex,task.bubbleStartIndex);
for (let i = startIndex; i <= endIndex; i++) {
let betweenBubble = task.element.querySelector('[data-task-index="' + i + '"]')
if ( betweenBubble ) {
if (task.multiSelectFill) {
betweenBubble.ett.fillBubble(15)
} else {
betweenBubble.ett.fillBubble(0)
}
}
}
}
}
}
bubbleElement.addEventListener('mousedown', preMultiFill)
bubbleElement.addEventListener('mouseenter', multiFill)
bubbleElement.ett = this
sumTime()
return this
}
}
export { EttTask, BubbleHour, Bubble, Bubble3 }