structure-comparer/service/src/structure_comparer/files/template.html.j2 at 99a16ae3ca374ea8456e6aaac08dc283e7ee72e5 · gematik/structure-comparer · GitHub

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
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>

<head>
    <title>Mapping: {% for profile in source_profiles %}{{ profile['key'] }}{% if not loop.last %}, {% endif %}{% endfor %} in {{ target_profile['key'] }}</title>
    <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
    <style>
        {{ inline_css | safe }}
    </style>
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js'></script>
</head>

<body>
    <h2>Mapping: {% for profile in source_profiles %}{{ profile['name'] ~ "|" ~ profile['version'] }}{% if not loop.last %}, {% endif %}{% endfor %} in {{ target_profile['name'] ~ "|" ~ target_profile['version'] }}</h2>

    <div style="display: flex; justify-content: space-between;">
        <div style="flex: 1;">
            {% if source_profiles|length > 1 %}
            <p>Source Profiles:</p>
            <ul>
                {% for profile in source_profiles %}
                <li><a href="{{ profile['url'] }}" target="_blank">{{ profile['name'] ~ "|" ~ profile['version'] }}</a></li>
                {% endfor %}
            </ul>
            {% else %}
            <p>Source Profile:
            <a href="{{ source_profiles[0]['url'] }}" target="_blank">{{ source_profiles[0]['name'] ~ "|" ~ source_profiles[0]['version'] }}</a></p>
            {% endif %}

            <p>Target Profile: <a href="{{ target_profile['url'] }}" target="_blank">{{ target_profile['name'] ~ "|" ~ target_profile['version'] }}</a></p>
            <p>Version: {{version}}, Status: {{status}}</p>
            <p>Last updated on: {{last_updated}}</p>
        </div>
        <div style="flex: 1; display: flex; justify-content: flex-end;">
            <div>
                <h3>Color Legend:</h3>
                <ul style="list-style: none; padding: 0;">
                    <li><span style="background-color: #DCF6E9;">&nbsp;&nbsp;&nbsp;&nbsp;</span> Information present in the source will be retained in the target mapping</li>
                    <li><span style="background-color: #FFEBE6;">&nbsp;&nbsp;&nbsp;&nbsp;</span> Information will be removed or left empty in the target mapping</li>
                    <li><span style="background-color: #FFFAE6;">&nbsp;&nbsp;&nbsp;&nbsp;</span> Special action is required for this mapping</li>
                </ul>
            </div>
        </div>
    </div>

    <table id='resultsTable' class='display' style='width:100%'>
        <thead>
            <tr>
                <th rowspan="2">Property</th>
                {% if source_profiles|length > 1 %}
                <th colspan="{{ source_profiles|length }}" style="text-align: center;">Source Profiles</th>
                {% else %}
                <th style="text-align: center;">Source Profile</th>
                {% endif %}
                <th style="text-align: center;">Target Profile</th>
                <th rowspan="2" class="warning-column">Warning</th>
                {% if show_remarks %}
                    <th rowspan="2">Remarks</th>
                {% endif %}
            </tr>
            <tr>
                {% for profile in source_profiles %}
                <th style="text-align: center;">{{ profile['name'] ~ "|" ~ profile['version'] }}</th>
                {% endfor %}
                <th style="text-align: center;">{{ target_profile['name'] ~ "|" ~ target_profile['version'] }}</th>
            </tr>
        </thead>
        <tbody>
            {% for prop, entry in entries.items() %}
            <tr class="{{ entry.css_class }}">
                <td>{{ prop }}
                    {% if entry.extension is not none %}<br>({{ entry.extension | format_links }}){% endif %}
                </td>
                {% for profile in source_profiles + [target_profile] %}
                <td style="text-align: center;">
                    {% if entry.profiles[profile['key']] %}
                        {{ entry.profiles[profile['key']].min }}..{{ entry.profiles[profile['key']].max | format_cardinality }}
                    {% endif %}
                </td>
                {% endfor %}
                <td class="warning-column">
                    {% if entry.warning %}
                    <ul>
                        {% for warning in entry.warning %}
                        <li>{{ warning }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </td>
                {% if show_remarks %}
                    <td>{{ entry.remark | format_links }}</td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            var warningsVisible = false;
            var numberOfWarnings = {{ number_of_warnings }};

            $('#resultsTable').DataTable({
                'pageLength': -1,
                'lengthMenu': [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
                'dom': '<"top"f>rt<"bottom"ilp><"clear">',
                'initComplete': function() {
                    var buttonHtml = '<button id="toggleWarnings"><i class="fas fa-exclamation-triangle"></i> show warnings (' + numberOfWarnings + ')</button>';
                    $('#resultsTable_filter').prepend(buttonHtml);

                    $('.warning-column').hide(); // Hide warnings by default

                    $('#toggleWarnings').click(function () {
                        $('.warning-column').toggle();
                        warningsVisible = !warningsVisible;
                        $(this).html('<i class="fas fa-exclamation-triangle"></i> ' + (warningsVisible ? 'hide warnings (' + numberOfWarnings + ')' : 'show warnings (' + numberOfWarnings + ')'));
                    });
                }
            });
        });
    </script>
</body>

</html>