-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart_box.js
92 lines (80 loc) · 3.09 KB
/
chart_box.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
class ChartBox extends HTMLElement {
constructor() {
super();
this.id = Date.now();
this.value = "A";
}
// component attributes
static get observedAttributes() {
return ["id", "value"];
}
connectedCallback() {
if (this.value == "" || this.value == null || this.value == undefined) {
this.innerHTML = `<p class="tw-font-semibold">N/A</p>`;
} else {
const aaRatings = ["F", "E", "D", "C", "B", "A", "AA"];
// const extraAaRatings = ["(149)", "(81)", "AB"];
const extraXxRatings = ["XX147", "XXX148"];
const xxRatings = ["X", "XX", "XXX", "XXXX"];
const htmlstring = ['<div class="tw-flex tw-grow tw-gap-0.5">'];
let chosenRating = null;
const combinedxRating = xxRatings.concat(extraXxRatings);
if (combinedxRating.indexOf(this.value.toUpperCase()) >= 0) {
chosenRating = xxRatings;
} else {
chosenRating = aaRatings;
}
// xating can be also XX147 (XX-xxx) and XXX148 (xx-XXX)
// Paydescription can be (149) (81) and AB as well
// Add either F E D selected C B A AA
// or X XX XXX selected XXXX
chosenRating.forEach((element) => {
const css =
element.toLowerCase() +
(element == this.value.toUpperCase() ? " selected" : "");
htmlstring.push(`<span class="${css}">${element}</span>`);
});
htmlstring.push("</div>");
// DO NOT DELETE THIS COMMENT
// TAILWIND WILL NOT MAKE CSS IF HTML DOES NOT EXIST
// <span class="aa b c d e f xxxx xxx xx x selected xxx tw-border tw-border-2 tw-border-border-red">F</span>
this.innerHTML = htmlstring.join("");
// Edge cases
if (this.value.toUpperCase() == "XX147") {
this.innerHTML += `
<br>
<span class="tw-font-semibold">147</span> - Have conflicting reports – some report better than XX experience.
<br>
`;
this.querySelector(".xx").classList.add("selected");
this.querySelector(".xxx").classList.add("partial");
} else if (this.value.toUpperCase() == "XXX148") {
this.innerHTML += `
<br>
<span class="tw-font-semibold">148</span> - Have conflicting reports – some report less than XXX experience.
<br>
`;
this.querySelector(".xxx").classList.add("selected");
this.querySelector(".xx").classList.add("partial");
} else if (this.value.toUpperCase() == "(81)") {
this.innerHTML += `
<br>
<span class="tw-font-semibold">81</span> - Pay reported as variable; specific pay description not assignable.
<br>
`;
} else if (this.value.toUpperCase() == "(149)") {
this.innerHTML += `
<br>
<span class="tw-font-semibold">149</span> - Reports received indicating pay variable and/or beyond terms with vendors, suppliers, and/or transportation firms.
<br>
`;
}
}
}
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[property] = newValue;
}
}
customElements.define("chart-box", ChartBox);