1. const attention_card_template = (self) => {
2.     return `<style>
3.     .attention--attention-card {
4.         border-radius: 22px !important;
5.         box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
6.         z-index: 10;
7.         min-width: 14rem !important;
8.     }
9.  
10.     .attention--attention-card-header {
11.         position: absolute;
12.         z-index: 0;
13.         top: -2rem;
14.         border-radius: 12px 12px 0 0;
15.         width: 100%;
16.  
17.     }
18.     .attention-badge {
19.         border-radius: 22px !important;
20.     }
21.  
22.     .bg-orange {
23.         background-color: #CF9D2B;
24.     }
25. </style>
26. <div class="card position-relative mt-5">
27.     <div class="card-header text-white p-2 attention--attention-card-header ${self.bg_picker()} d-flex justify-content-between">
28.         <p class=" ">Afiliado: ${self.$data.contract}</p>
29.         <p class="text-capitalize">${self.$data.attention_type}</p>
30.     </div>
31.     <div class="card-body attention--attention-card bg-white px-2 pt-2">
32.         <div class="justify-content-between d-flex ">
33.             <i class="uil uil-angle-down font-size-16 text-dark ml-auto" id="collapse_card"></i>
34.             <a href="#"><i class="uil uil-pen font-size-16 text-dark" id=""></i></a>
35.             <div class="dropdown">
36.                 <div class="dropdown">
37.                     <a href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
38.                        aria-expanded="false">
39.                         <i class="uil uil-ellipsis-v font-size-16 text-dark"></i></a>
40.                     <ul class="dropdown-menu multi-level" id="dropdown_options" role="menu"
41.                         aria-labelledby="dropdownMenu">
42.                     </ul>
43.                 </div>
44.             </div>
45.         </div>
46.         <div id="condensed_info" class="d-none flex-column"></div>
47.         <div id="card_body">
48.           <p><b>${self.$data.customer_name}</b></p>
49.           <p><b>Problema:</b> ${self.$data.attention_data['attention_description'].value}</p>
50.         <p class="mt-n3"><b>Dirección de atención:</b> ${self.$data.attention_data['customer_address'].value}</p>
51.         <hr>
52.         <div class="d-flex flex-column px-2" id="badges_container"></div>
53.         </div>
54.     </div>
55. </div>
56. <div class="modal fade" id="remove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
57.      aria-hidden="true">
58.     <div class="modal-dialog modal-lg" role="document">
59.         <div class="modal-content">
60.             <div class="modal-header flex-column">
61.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
62.                     <span aria-hidden="true">&times;</span>
63.                 </button>
64.                 <h5 class="modal-title">Remover caso de</h5>
65.             </div>
66.             <div class="modal-body">
67.                 <div class="form-group">
68.                     <label>Motivo</label>
69.                     <textarea class="form-control"></textarea>
70.                 </div>
71.             </div>
72.             <div class="modal-footer">
73.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
74.                 <button type="button" class="btn btn-danger" id="remove_case_btn" data-dismiss="modal">Remover caso
75.                 </button>
76.             </div>
77.         </div>
78.     </div>
79. </div>
80. <div class="modal fade" id="${self.$data.id}_swap_ambulance" tabindex="-1" role="dialog"
81.      aria-labelledby="exampleModalLabel"
82.      aria-hidden="true">
83.     <div class="modal-dialog modal-lg" role="document">
84.         <div class="modal-content">
85.             <div class="modal-header flex-column">
86.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
87.                     <span aria-hidden="true">&times;</span>
88.                 </button>
89.                 <h5 class="modal-title">Cambiar ambulancia para ${self.$data.customer_name}</h5>
90.             </div>
91.             <div class="modal-body">
92.                 <div class="form-group">
93.                     <label>Ambulancia Actual</label>
94.                     <select class="form-control" id="current_ambulance">
95.                     </select>
96.                 </div>
97.                 <div class="form-group">
98.                     <label>Nueva Ambulancia</label>
99.                     <select class="form-control" id="new_ambulance">
100.                     </select>
101.                 </div>
102.                 <div class="form-group">
103.                     <label>Razón de cambio</label>
104.                     <textarea class="form-control" id="ambulance_swap_reason"></textarea>
105.                 </div>
106.             </div>
107.             <div class="modal-footer">
108.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
109.                 <button type="button" class="btn btn-primary" id="change_ambulance_btn" data-dismiss="modal">
110.                     Cambiar ambulancia
111.                 </button>
112.             </div>
113.         </div>
114.     </div>
115. </div>
116. <div class="modal fade" id="${self.$data.id}_change_attention_date" tabindex="-1" role="dialog"
117.      aria-labelledby="exampleModalLabel"
118.      aria-hidden="true">
119.     <div class="modal-dialog modal-lg" role="document">
120.         <div class="modal-content">
121.             <div class="modal-header flex-column">
122.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
123.                     <span aria-hidden="true">&times;</span>
124.                 </button>
125.                 <h5 class="modal-title">Cambiar fecha de atención para ${self.$data.customer_name}</h5>
126.             </div>
127.             <div class="modal-body">
128.                 <div class="form-group py-2">
129.                     <input type="date"  class="form-control attention-form" id="new_attention_date" placeholder=""
130.                            name="Fecha de atención" maxlength="" minlength="">
131.                 </div>
132.                 <div class="form-group py-2">
133.                     <input type="time" class="form-control attention-form" id="new_attention_hour" placeholder=""
134.                            name="Hora de atención" maxlength="" minlength="">
135.                 </div>
136.             </div>
137.             <div class="modal-footer">
138.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
139.                 <button type="button" class="btn btn-primary" id="change_attention_date_btn" data-dismiss="modal">
140.                     Cambiar fecha de atención
141.                 </button>
142.             </div>
143.         </div>
144.     </div>
145. </div>
146. <div class="modal fade" id="${self.$data.id}_remove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
147.      aria-hidden="true">
148.     <div class="modal-dialog modal-lg" role="document">
149.         <div class="modal-content">
150.             <div class="modal-header flex-column">
151.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
152.                     <span aria-hidden="true">&times;</span>
153.                 </button>
154.                 <h5 class="modal-title">Remover caso de ${self.$data.customer_name}</h5>
155.             </div>
156.             <div class="modal-body">
157.                 <div class="form-group">
158.                     <label>Motivo</label>
159.                     <textarea class="form-control"></textarea>
160.                 </div>
161.             </div>
162.             <div class="modal-footer">
163.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
164.                 <button type="button" class="btn btn-danger" id="remove_attention_btn" data-dismiss="modal">Remover caso
165.                 </button>
166.             </div>
167.         </div>
168.     </div>
169. </div>
170. <div class="modal fade" id="${self.$data.id}_end_attention" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
171.      aria-hidden="true">
172.     <div class="modal-dialog modal-lg" role="document">
173.         <div class="modal-content">
174.             <div class="modal-header flex-column">
175.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
176.                     <span aria-hidden="true">&times;</span>
177.                 </button>
178.                 <h5 class="modal-title">Finalizar caso de ${self.$data.customer_name}</h5>
179.             </div>
180.             <div class="modal-body">
181.                 <div class="form-group">
182.                     <label>Motivo</label>
183.                     <textarea class="form-control"></textarea>
184.                 </div>
185.             </div>
186.             <div class="modal-footer">
187.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
188.                 <button type="button" class="btn btn-danger" id="end_attention_btn" data-dismiss="modal">Finalizar caso
189.                 </button>
190.             </div>
191.         </div>
192.     </div>
193. </div>
194.  
195.  
196.     `;
197. }
198.  
199. class Attention_card extends HTMLElement {
200.     constructor() {
201.         super();
202.     }
203.  
204.     construct() {
205.         this.innerHTML = attention_card_template(this)
206.         this.$states = new State_machine();
207.         this.$badges = {};
208.         this.ambulance_list = {};
209.         this.$badges_container = this.querySelector('#badges_container')
210.         this.cache = JSON.parse(sessionStorage.getItem('que'))[this.$data.id];
211.         this.ambulances = Object.values(JSON.parse(sessionStorage.getItem('ambulance')));
212.         this.$dropdown_options = this.querySelector('#dropdown_options')
213.         this.$data = this.cache
214.         this.$states.current_states = this.cache.status;
215.  
216.         this.$collapsed = false;
217.     }
218.  
219.     create_action_menu() {
220.         console.log(this.$data.que)
221.         this.$dropdown_options.innerHTML = `
222. <li class="dropdown-item"><a href="javascript:void(0);" class="text-dark"><i
223.         class="uil uil-cloud mr-2"></i>Agregar seguimiento</a></li>
224. <li id="change_attention_date_dropdown" class="dropdown-item ${this.$data.que !== "programmed_que" ? "d-none" : ""}"><a href="javascript:void(0);" class="text-dark"><i
225.         class="uil uil-calendar-alt mr-2"></i>Cambiar Fecha de atención</a></li>
226. <li id="swap_ambulance" class="dropdown-item ${!this.$states.contains('ambulance_dispatched') ? "d-none" : ""}"><a href="javascript:void(0);" class="text-dark"><i
227.         class="uil uil-exchange mr-2"></i>Intercambiar Ambulancia</a></li>
228. <li class="dropdown-submenu dropdown-item ${this.$data.que === "programmed_que" ? "d-none" : ""}"><a tabindex="-1" class="text-dark"> <i
229.         class="uil uil-ambulance mr-2"></i>${this.$states.contains('ambulance_dispatched') ? "Despachar Ambulancia de refuerzo" : "Despachar ambulancia"} </a>
230.     <ul class="dropdown-menu" id="ambulance_list_dropdown">
231.         <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
232.     </ul>
233. </li>
234. <li class="dropdown-submenu dropdown-item ${!this.$states.contains('ambulance_dispatched') ? "d-none" : "Despachar ambulancia"}"><a tabindex="-1" class="text-dark"> <i
235.         class="uil uil-location-pin-alt mr-2"></i>Marcar llegada de ambulancia </a>
236.     <ul class="dropdown-menu" id="arrival_list_dropdown">
237.     </ul>
238. </li>
239. <div class="dropdown-divider"></div>
240. <li class="dropdown-item" id="remove_attention"><a href="javascript:void(0);" class="text-danger" id="remove_attention"><i
241.         class="uil uil-times-circle mr-2"></i>Remover Atención</a></li>
242. <li class="dropdown-item" id="end_attention"><a href="javascript:void(0);" class="text-warning" id="remove_attention"><i
243.         class="uil uil-arrow-to-right mr-2"></i>Finalizar Atención</a></li>
244.         `
245.         //action_menu stuff
246.         this.querySelector('#remove_attention').onclick = () => {
247.             this.remove_attention();
248.  
249.         }
250.    
251.     }
252.  
253.     save_data() {
254.         console.log(this.$data)
255.         //add to cache
256.         this.$data.status = this.$states.current_states
257.         //update cache
258.         que_manager.update_client(this.$data.id, this.$data);
259.     }
260.  
261.     create_states(state, value) {
262.         this.$states.set_state(state, value)
263.         //add to cache
264.         this.$data.status = this.$states.current_states
265.         //update cache
266.         que_manager.update_client(this.$data.id, this.$data);
267.         this.parse_badges();
268.     }
269.  
270.     load_cache_from_state() {
271.         if (this.$data.que === "programmed_que" && !this.$states.contains('programmed_attention')) {
272.             this.create_states("programmed_attention", {
273.                 date: this.$data.attention_data['attention_date'].value,
274.                 hour: this.$data.attention_data['attention_hour'].value
275.             })
276.             this.querySelector('#new_attention_date').value = this.$data.attention_data['attention_date'].value
277.             this.querySelector('#new_attention_hour').value = this.$data.attention_data['attention_hour'].value
278.         } else if(this.$data.que === "programmed_que"){
279.             this.querySelector('#new_attention_date').value = this.$states.contains('programmed_attention').value.date
280.             this.querySelector('#new_attention_hour').value = this.$states.contains('programmed_attention').value.hour
281.         }
282.         if (!this.$states.contains('attention_type')) {
283.             this.create_states('attention_type', this.$data.attention_type);
284.  
285.         }
286.         if (!this.$states.contains('attention_wait_ts') && this.$data.que === "wait_que") {
287.             this.create_states('attention_wait_ts', Math.round((new Date()).getTime() / 1000))
288.             this.add_badge('attention_wait_ts', dayjs.unix(this.$data.status.attention_wait_ts.value).fromNow(), "bg-success text-white")
289.  
290.         }
291.         if (this.$states.contains('ambulance_dispatched')) {
292.             let ambulance_data = this.$states.contains('ambulance_dispatched')
293.             ambulance_data.value.forEach(ambulance => {
294.                 this.add_badge(ambulance, `${ambulance} en camino`, 'badge-info')
295.             })
296.             this.create_action_menu();
297.             this.create_ambulance_arrival_list();
298.         }
299.         if (this.$states.contains('attention_arrived')) {
300.             let ambulance_data = this.$states.contains('ambulance_arrived')
301.             ambulance_data.value.forEach(ambulance => {
302.                 this.add_badge(ambulance, `${ambulance} Arrivó`, 'badge-info')
303.             })
304.             this.create_action_menu();
305.             this.create_ambulance_arrival_list();
306.         }
307.         if (this.$states.contains('attention_arrived')) {
308.             let ts = this.$states.contains('attention_arrived').value
309.             this.add_badge('attention_arrived', dayjs.unix(ts).fromNow(), `bg-success text-white`)
310.             this.delete_badge('attention_wait_ts')
311.         }
312.  
313.     }
314.  
315.     on_state() {
316.         this.$states.on_state("ambulance_dispatched", (data) => {
317.             let ambulance_data = this.$states.current_states['ambulance_dispatched']
318.             this.create_action_menu();
319.             //parse_stuff
320.             this.parse_ambulance_in_dropdown();
321.             ambulance_data.value.forEach(ambulance => {
322.                 this.add_badge(ambulance, `${ambulance} en camino`, 'badge-info')
323.             })
324.         })
325.         this.$states.on_state("attention_arrived", (data) => {
326.             let ts = this.$states.contains('attention_arrived').value
327.             this.add_badge('attention_arrived', dayjs.unix(ts).fromNow(), `bg-success text-white`)
328.  
329.         })
330.     }
331.  
332.     //card
333.     bg_picker() {
334.         switch (this.$data.attention_type) {
335.             case 'emergencias':
336.                 return 'bg-danger text-white'
337.                 // code block
338.                 break;
339.             case 'urgencia':
340.                 return 'bg-warning text-white'
341.                 // code block
342.                 break;
343.             case 'consulta medica':
344.                 return 'bg-primary text-white'
345.                 // code block
346.                 break;
347.             case 'accidente de auto':
348.                 return 'bg-orange text-white'
349.                 // code block
350.                 break;
351.             case 'traslado':
352.                 return 'bg-success text-white'
353.                 // code block
354.                 break;
355.             case 'atencion programada':
356.                 return 'bg-success text-white'
357.                 // code block
358.                 break;
359.             default:
360.                 return 'bg-info text-white'
361.             // code block
362.         }
363.     }
364.  
365.     //BADGES
366.     add_badge(name, value, color) {
367.         let badge = document.createElement('span');
368.         badge.innerText = value
369.         badge.className = `badge ${color} attention-badge my-1`
370.         badge.style.fontSize = '.98rem'
371.         this.$badges[name] = {elem: badge, name: name, value: value, color: color}
372.         this.parse_badges()
373.  
374.     }
375.  
376.     delete_badge(name) {
377.         delete this.$badges[name];
378.         this.parse_badges();
379.     }
380.  
381.     parse_badges() {
382.         this.$badges_container.innerHTML = ""
383.         Object.values(this.$badges).forEach(badge => {
384.             this.$badges_container.appendChild(badge.elem)
385.         })
386.     }
387.  
388.     collapse_card() {
389.         let condensed = this.querySelector('#condensed_info')
390.         let collapse_btn = this.querySelector('#collapse_card')
391.         let info_cont = this.querySelector('#card_body');
392.  
393.         collapse_btn.onclick = () => {
394.             info_cont.classList.toggle('d-none')
395.             condensed.classList.toggle('d-none');
396.             condensed.classList.toggle('d-flex');
397.             condensed.innerHTML = `
398.                 <p><b>${this.$data.customer_name}</b></p>
399.                 <span class="badge ${this.timer_color(this.$data.status.attention_wait_ts.value)} text-white attention-badge" style="font-size: .98rem">${
400.                 this.$data.status.attention_wait_ts !== undefined ?
401.                     dayjs.unix(this.$data.status.attention_wait_ts.value).fromNow() : this.get_programmed_attention_date()}</span>
402.             `
403.         }
404.  
405.     }
406.  
407.     //time
408.     timer(cb = new Function()) {
409.         setInterval(() => {
410.             cb()
411.         }, 1000)
412.     }
413.  
414.     get_programmed_attention_date() {
415.         let attention_date = this.$states.contains('programmed_attention')
416.         if (attention_date) {
417.             let date_string = dayjs(`${attention_date.value.date} ${attention_date.value.hour}:00`).format("YYYY-MM-DD HH:mm:ss")
418.             let appoint_date = dayjs(date_string)
419.             return appoint_date.fromNow();
420.         }
421.  
422.     }
423.  
424.     get_programmed_attention_minutes() {
425.         let attention_date = this.$states.contains('programmed_attention')
426.         if (attention_date) {
427.             console.log(attention_date)
428.             let date_string = dayjs(`${attention_date.value.date} ${attention_date.value.hour}:00`).format("YYYY-MM-DD HH:mm:ss")
429.             let appoint_date = dayjs(date_string)
430.             return appoint_date.diff(dayjs(dayjs().format("YYYY-MM-DD HH:mm:ss")), 'minute')
431.         }
432.  
433.     }
434.  
435.     edit_programmed_attention_date() {
436.         let drop_down_btn = this.querySelector('#change_attention_date_dropdown');
437.         let change_attention_date_btn = this.querySelector('#change_attention_date_btn');
438.         drop_down_btn.onclick = () => {
439.             $(`#${this.$data.id}_change_attention_date`).modal('show');
440.         }
441.         change_attention_date_btn.onclick = () => {
442.             this.create_states("programmed_attention", {
443.                 date: this.querySelector('#new_attention_date').value,
444.                 hour: this.querySelector('#new_attention_hour').value
445.             })
446.             this.add_badge('programmed_attention', this.get_programmed_attention_date(), "bg-primary text-white")
447.  
448.         }
449.     }
450.  
451.     put_in_wait_que() {
452.         this.$data.que = "wait_que"
453.         this.save_data();
454.         this.load_cache_from_state();
455.         emitter_events.emit('REPARSE')
456.     }
457.  
458.     timer_color(ts = this.$data.status.attention_wait_ts.value) {
459.         //get minutes
460.         let old_string = dayjs.unix(this.$data.status.attention_wait_ts.value).format("YYYY-MM-DD HH:mm:ss")
461.         let old_time = dayjs(old_string)
462.         let now = dayjs()
463.         let minutes = now.diff(old_time, 'minute')
464.         if (minutes >= 0 && minutes < 9) {
465.             return "bg-success"
466.         } else if (minutes >= 9 && minutes < 19) {
467.             return "bg-warning"
468.         } else if (minutes >= 19) {
469.             return "bg-danger"
470.         }
471.  
472.     }
473.  
474.     //Ambulance
475.     swap_ambulance() {
476.         let swap_btn = this.querySelector('#swap_ambulance')
477.         swap_btn.onclick = () => {
478.             $(`#${this.$data.id}_swap_ambulance`).modal('show')
479.         }
480.     }
481.  
482.  
483.     set_ambulance() {
484.         let ambulances = Array.from(this.querySelectorAll('.ambulance-picker'));
485.         ambulances.forEach(ambulance => {
486.             ambulance.onclick = () => {
487.                 let ambulance_data = this.$states.contains('ambulance_dispatched')
488.                 if (!ambulance_data) {
489.                     this.create_states('ambulance_dispatched', [ambulance.id])
490.                     this.create_ambulance_arrival_list()
491.                     emitter_events.emit("ambulance_dispatched", ambulance.id)
492.                 } else {
493.                     let test_for_dupli = ambulance_data.value.some(el => el === ambulance.id)
494.                     if (test_for_dupli === false) {
495.                         ambulance_data.value.push(ambulance.id);
496.                         this.create_states('ambulance_dispatched', ambulance_data.value)
497.                         this.create_ambulance_arrival_list()
498.                         emitter_events.emit("ambulance_dispatched", ambulance.id)
499.                     }
500.                 }
501.             }
502.         })
503.         this.swap_ambulance();
504.     }
505.  
506.     parse_ambulance_in_dropdown() {
507.         let ambulance_container = this.querySelector('#ambulance_list_dropdown');
508.         ambulance_container.innerHTML = ""
509.         this.ambulances.forEach(ambulance => {
510.             if (ambulance.bussy !== true) {
511.                 if (this.$states.contains('ambulance_dispatched')) {
512.                     let current_ambulances = this.$states.contains('ambulance_dispatched').value
513.                     let test_for_dupli = current_ambulances.some(elem => elem === ambulance.ambulance_name)
514.                     if (test_for_dupli !== true) {
515.                         let dropdown_item = document.createElement('li');
516.                         let dropdown_link = document.createElement('a');
517.                         dropdown_link.innerHTML = `<a href="javascript:void(0);" class="text-dark" id="dispatch_ambulance"><i class="uil uil-ambulance mr-2"></i>${ambulance.ambulance_name}</a></li>`
518.                         dropdown_item.className = "dropdown-item ambulance-picker";
519.                         dropdown_item.id = ambulance.ambulance_name;
520.                         dropdown_link.className = "text-dark";
521.                         dropdown_link.href = "#";
522.                         dropdown_item.appendChild(dropdown_link);
523.                         ambulance_container.appendChild(dropdown_item)
524.                     }
525.                 } else {
526.                     let dropdown_item = document.createElement('li');
527.                     let dropdown_link = document.createElement('a');
528.                     dropdown_link.innerHTML = `<a href="javascript:void(0);" class="text-dark" id="dispatch_ambulance"><i class="uil uil-ambulance mr-2"></i>${ambulance.ambulance_name}</a></li>`
529.                     dropdown_item.className = "dropdown-item ambulance-picker";
530.                     dropdown_item.id = ambulance.ambulance_name;
531.                     dropdown_link.className = "text-dark";
532.                     dropdown_link.href = "#";
533.                     dropdown_item.appendChild(dropdown_link);
534.                     ambulance_container.appendChild(dropdown_item)
535.                 }
536.             }
537.  
538.         })
539.         this.set_ambulance()
540.     }
541.  
542.     create_ambulance_arrival_list() {
543.         let arrival_list = this.querySelector('#arrival_list_dropdown');
544.         arrival_list.innerHTML = ""
545.         this.$states.current_states['ambulance_dispatched'].value.forEach(ambulance => {
546.             let current_ambulances = this.$states.contains('ambulance_arrived').value
547.             let test_for_dupli = current_ambulances ? current_ambulances.some(elem => elem === ambulance) : false
548.             if (test_for_dupli !== true) {
549.                 let dropdown_item = document.createElement('li');
550.                 let dropdown_link = document.createElement('a');
551.  
552.                 dropdown_link.innerHTML = `<a href="javascript:void(0);" class="text-dark" id="dispatch_ambulance"><i class="uil uil-ambulance mr-2"></i>${ambulance}</a></li>`
553.                 dropdown_item.className = "dropdown-item ambulance-arrival";
554.                 dropdown_item.id = ambulance;
555.                 dropdown_link.className = "text-dark";
556.                 dropdown_link.href = "#";
557.                 dropdown_link.onclick = () => {
558.                     this.set_ambulance_arrival(ambulance)
559.                 }
560.  
561.                 dropdown_item.appendChild(dropdown_link);
562.                 arrival_list.appendChild(dropdown_item)
563.             }
564.  
565.  
566.         })
567.     }
568.  
569.     set_ambulance_arrival(ambulance) {
570.         if (!this.$states.contains('ambulance_arrived')) {
571.             this.$data.que = 'attention';
572.             this.create_states('attention_arrived', Math.round((new Date()).getTime() / 1000))
573.             this.create_states('ambulance_arrived', [ambulance])
574.             emitter_events.emit('REPARSE');
575.             this.create_ambulance_arrival_list();
576.  
577.         } else {
578.             let arrived = this.$states.contains('ambulance_arrived').value
579.             arrived.push(ambulance);
580.             this.create_states('ambulance_arrived', arrived)
581.             emitter_events.on('attention_arrived')
582.             this.create_ambulance_arrival_list();
583.  
584.         }
585.  
586.     }
587.  
588.     remove_attention() {
589.         $(`#${this.$data.id}_remove`).modal('toggle')
590.         this.querySelector('#remove_attention_btn').onclick = () => {
591.             console.log('remove')
592.             que_manager.remove_client(this.$data.id);
593.             let ambulances_list = this.$states.contains('ambulance_dispatched');
594.             let ambulance_cache = JSON.parse(sessionStorage.getItem('ambulance'));
595.             //free up ambulances
596.             if (ambulances_list) {
597.                 Object.values(ambulance_cache).forEach(ambulance => {
598.                     ambulances_list.value.forEach(item => {
599.                         if (ambulance.ambulance_name === item) {
600.                             ambulance.bussy = false;
601.                         }
602.                     })
603.                 })
604.  
605.             }
606.             sessionStorage.setItem('ambulance', JSON.stringify(ambulance_cache))
607.             emitter_events.emit('ambulance_busy_state_set')
608.             this.remove()
609.         }
610.  
611.  
612.     }
613.  
614.  
615.     connectedCallback() {
616.         this.construct();
617.         if (this.isConnected) {
618.             this.on_state();
619.             //action_menu
620.             this.create_action_menu();
621.             //initial_states
622.             this.load_cache_from_state();
623.  
624.             this.edit_programmed_attention_date();
625.             //parse dropdown
626.             this.parse_ambulance_in_dropdown();
627.             //React to events
628.             emitter_events.on('AMBULANCE_CREATED', data => {
629.                 this.ambulances = Object.values(JSON.parse(sessionStorage.getItem('ambulance')));
630.                 this.parse_ambulance_in_dropdown();
631.             })
632.             emitter_events.on('ambulance_busy_state_set', (data) => {
633.                 this.ambulances = Object.values(JSON.parse(sessionStorage.getItem('ambulance')));
634.                 this.parse_ambulance_in_dropdown();
635.             })
636.             emitter_events.on('attention_arrived', () => {
637.                 let ambulance_data = this.$states.contains('ambulance_arrived')
638.                 ambulance_data.value.forEach(ambulance => {
639.                     this.add_badge(ambulance, `${ambulance} Arrivó`, 'badge-info')
640.                 })
641.                 this.create_action_menu();
642.                 this.create_ambulance_arrival_list();
643.             })
644.             this.collapse_card()
645.             window.onkeydown = (e) => {
646.                 if (e.key === 'p') {
647.                     this.put_in_wait_que()
648.                 }
649.             }
650.             //clock
651.             this.timer(() => {
652.  
653.                 if (this.$states.contains('attention_wait_ts')) {
654.                     if (this.$states.contains('attention_arrived')) {
655.                         let ts = this.$states.contains('attention_arrived').value
656.                         this.add_badge('attention_arrived', dayjs.unix(ts).fromNow(), `bg-success text-white`)
657.                         this.delete_badge('attention_wait_ts')
658.                     } else {
659.                         //get moment
660.                         this.add_badge('attention_wait_ts', dayjs.unix(this.$data.status.attention_wait_ts.value).fromNow(), `${this.timer_color(this.$data.status.attention_wait_ts)} text-white`)
661.                         this.parse_badges()
662.                     }
663.                 } else if (this.$states.contains('programmed_attention')) {
664.                     this.add_badge('programmed_attention', this.get_programmed_attention_date(), "bg-primary text-white")
665.                     if (this.get_programmed_attention_minutes() < 30) {
666.                         console.log('go to attention')
667.                         this.put_in_wait_que();
668.                     }
669.                 }
670.             })
671.         }
672.     }
673. }
674.  
675. customElements.define('attention-card', Attention_card);