All files / Scripts/ui ViolationUI.ts

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { RuleViolation, ViolationGroup } from "../rules/types/AnalysisTypes";
 
export class ViolationUI {
    static createInlineViolation(violation: RuleViolation): HTMLElement {
        const template = document.getElementById("violation-inline-template") as HTMLTemplateElement;
        if (!template) {
            throw new Error("Template not found: violation-inline-template");
        }
 
        const container = template.content.cloneNode(true) as DocumentFragment;
        const element = container.firstElementChild as HTMLElement;
 
        const badge = element.querySelector(".severity-badge") as HTMLElement;
        badge.setAttribute("data-severity", violation.rule.severity);
        badge.textContent = violation.rule.severity.toUpperCase();
 
        const message = element.querySelector(".violation-message") as HTMLElement;
        message.setAttribute("data-severity", violation.rule.severity);
        message.textContent = " " + violation.rule.errorMessage;
 
        return element;
    }
 
    static createViolationCard(violation: RuleViolation, isGrouped = false): HTMLElement {
        const template = document.getElementById("violation-card-template") as HTMLTemplateElement;
        if (!template) {
            throw new Error("Template not found: violation-card-template");
        }
 
        const container = template.content.cloneNode(true) as DocumentFragment;
        const card = container.firstElementChild as HTMLElement;
        card.setAttribute("data-severity", violation.rule.severity);
 
        const header = card.querySelector(".violation-card-header") as HTMLElement;
        if (isGrouped && header) {
            // Remove the header with badge and message when displayed in a group
            header.remove();
        } else if (header) {
            // Populate the header for individual violations
            const badge = header.querySelector(".severity-badge") as HTMLElement;
            badge.setAttribute("data-severity", violation.rule.severity);
            badge.textContent = violation.rule.severity.toUpperCase();
 
            const message = header.querySelector(".violation-message") as HTMLElement;
            message.setAttribute("data-severity", violation.rule.severity);
            message.textContent = " " + violation.rule.errorMessage;
        }
 
        const sectionInfo = card.querySelector(".violation-rule") as HTMLElement;
        const ruleInfo = `${violation.rule.checkSection || ""} / ${violation.rule.errorPattern || ""}`.trim();
        sectionInfo.textContent = ruleInfo;
 
        const parent = card.querySelector(".violation-parent-message") as HTMLElement;
        if (violation.parentMessage) {
            parent.textContent = `Part of: ${violation.parentMessage}`;
        } else {
            parent.remove();
        }
 
        return card;
    }
 
    static buildDiagnosticsSection(violationGroups: ViolationGroup[]): HTMLElement | null {
        if (!violationGroups || violationGroups.length === 0) return null;
 
        const sectionTemplate = document.getElementById("diagnostics-section-template") as HTMLTemplateElement;
        const accordionTemplate = document.getElementById("diagnostics-accordion-template") as HTMLTemplateElement;
        const itemTemplate = document.getElementById("diagnostic-accordion-item-template") as HTMLTemplateElement;
 
        if (!itemTemplate) return null;
 
        // Build container: section template (mobile), accordion template (desktop), or plain div (classic)
        let container: HTMLElement;
        let accordion: HTMLElement;
 
        if (sectionTemplate) {
            const section = sectionTemplate.content.cloneNode(true) as DocumentFragment;
            accordion = section.querySelector(".diagnostics-accordion")!;
            container = section.firstElementChild as HTMLElement;
        } else if (accordionTemplate) {
            const accordionClone = accordionTemplate.content.cloneNode(true) as DocumentFragment;
            accordion = accordionClone.querySelector("fluent-accordion")!;
            container = accordion;
        } else {
            accordion = document.createElement("div");
            container = accordion;
        }
 
        // Build each accordion item
        violationGroups.forEach((group) => {
            const itemClone = itemTemplate.content.cloneNode(true) as DocumentFragment;
 
            // Set badge
            const badge = itemClone.querySelector(".severity-badge")!;
            badge.setAttribute("data-severity", group.severity);
            badge.textContent = group.severity.toUpperCase();
 
            // Set message
            const message = itemClone.querySelector(".violation-message")!;
            message.setAttribute("data-severity", group.severity);
            message.textContent = group.displayName;
 
            // Add violation cards
            const content = itemClone.querySelector(".diagnostic-content")!;
            const isGrouped = group.violations.length > 1;
            group.violations.forEach((violation) => {
                content.appendChild(this.createViolationCard(violation, isGrouped));
            });
 
            accordion.appendChild(itemClone);
        });
 
        return container;
    }
}