https://cdn.bukowskis.com/assets/src/backoffice/phone_bid_schedule…b3d2544c97bee5eeb6a727ac6b10f7285690094d.js

1import htmx from 'htmx.org'
2import { UUID } from 'src/public/uuid'
3
4export default class PhoneBidSchedule {
5  static init () {
6    const container = document.querySelector('.js-phone-bid-schedule')
7    container && new PhoneBidSchedule(container)
8  }
9
10  constructor (container) {
11    this.schedule = container
12    this.bids = document.querySelectorAll('.js-phone-bid-schedule-bid')
13    this.slots = document.querySelectorAll('.js-phone-bid-schedule-slot')
14    this.table = document.querySelector('.js-push-phone-bid-table')
15    this.setup()
16  }
17
18  loadSchedule (event) {
19    $(this.schedule).load(this.schedule.dataset.url, () => { PhoneBidSchedule.init() })
20  }
21
22  setup () {
23    for (const bid of this.bids) {
24      bid.draggable = 'true';
25      bid.id = UUID.v4.generate();
26      bid.ondragstart = event => this.onDragStart(event)
27      bid.onclick = event => this.highlightBidCard(event)
28    }
29
30    for (const slot of this.slots) {
31      slot.ondragenter = event => this.onDragEnter(event)
32      slot.ondragleave = event => this.onDragExit(event)
33      slot.ondragover = event => event.preventDefault()
34      slot.ondrop = event => this.onDrop(event)
35    }
36
37    this.table.addEventListener(
38      'html-push:after-swap',
39      event => this.loadSchedule(event),
40      { once: true }
41    )
42  }
43
44  accepts(source, target) {
45    return source.dataset.catalogueNumber === target.dataset.catalogueNumber
46  }
47
48  highlightPhoneLine (event) {
49    const target = event.currentTarget
50
51    if (target.classList.contains('c-phone-bid-track__bid--incorrect_assignment')) {
52      const phoneLineId = target.dataset.correctPhoneLineId;
53      const phoneLine = document.querySelector(`.c-phone-bid-track__caller[data-phone-line-id='${phoneLineId}']`)
54      phoneLine.classList.toggle('c-phone-bid-track__caller--highlight')
55    }
56    else {
57      const phoneLine = this.schedule.querySelector('.c-phone-bid-track__caller--highlight')
58      phoneLine.classList.remove('c-phone-bid-track__caller--highlight')
59    }
60  }
61
62  highlightBidCard (event) {
63    const bidCardId = event.currentTarget.dataset.phoneBidCardId
64    if (!bidCardId) { return }
65    event.currentTarget.classList.toggle('js-phone-bid-card-highlight')
66    const toggle = !event.currentTarget.classList.contains('js-phone-bid-card-highlight')
67
68    for (const bid of this.bids) {
69      bid.classList.remove('c-phone-bid-track__bid--understate')
70      if (toggle) {
71        bid.classList.remove('js-phone-bid-card-highlight')
72      }
73      else {
74        if (bid.dataset.phoneBidCardId !== bidCardId) {
75          bid.classList.add('c-phone-bid-track__bid--understate')
76        }
77        else {
78          bid.classList.add('js-phone-bid-card-highlight')
79        }
80      }
81    }
82
83    this.highlightPhoneLine(event)
84  }
85
86  onDragEnter (event) {
87    const source = document.getElementById(event.dataTransfer.types[0])
88    if (this.accepts(source, event.target)) {
89      event.target.classList.add('c-phone-bid-track__free--droppable')
90    }
91    event.preventDefault()
92  }
93
94  onDragExit (event) {
95    event.target.classList.remove('c-phone-bid-track__free--droppable')
96  }
97
98  onDragStart(event) {
99    event.dataTransfer.setData(event.target.id, null)
100  }
101
102  onDrop(event) {
103    const source = document.getElementById(event.dataTransfer.types[0])
104    if (this.accepts(source, event.target)) {
105      $.post(
106        this.schedule.dataset.assignmentUrl,
107        {
108          phone_bid_card_auction_id: source.dataset.phoneBidCardAuctionId,
109          phone_line_id: event.target.dataset.phoneLineId,
110          whole_bid_card: event.altKey
111        }
112      )
113    }
114    event.target.classList.remove('c-phone-bid-track__free--droppable')
115  }
116};