|
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 6 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
7 | 7 | <title>HTML report for Conceptual Mappings Diff</title> |
| 8 | + <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> |
8 | 9 | <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"> |
9 | 10 | <style> |
10 | 11 | body { |
11 | 12 | font-family: Arial, sans-serif; |
12 | 13 | margin: 25px auto; |
13 | 14 | width: 80%; |
14 | 15 | } |
15 | | - body>table.display td, |
16 | | - body>table.display th { |
| 16 | + body table.display td, |
| 17 | + body table.display th { |
17 | 18 | vertical-align: top; |
18 | 19 | text-align: left; |
19 | 20 | } |
20 | 21 | table td { |
21 | 22 | width: auto |
22 | 23 | } |
23 | 24 |
|
| 25 | + table.heading { |
| 26 | + border: 0; |
| 27 | + } |
24 | 28 | table.heading td, |
25 | 29 | table.heading th { |
26 | | - border: 1px solid #ddd; |
| 30 | + border: 1px solid #ddd !important; |
| 31 | + vertical-align: top; |
| 32 | + overflow-wrap: anywhere; |
27 | 33 | } |
28 | 34 | table.heading th { |
29 | 35 | background-color: #eee; |
30 | 36 | text-align: left; |
| 37 | + width: 18%; |
31 | 38 | } |
32 | 39 | table.heading thead td { |
33 | 40 | text-align: left; |
34 | 41 | font-weight: bold; |
35 | | - width: 50%; |
| 42 | + width: 41%; |
36 | 43 | } |
37 | 44 | table.heading tbody th { |
38 | | - white-space: nowrap; |
| 45 | + /*white-space: nowrap;*/ |
| 46 | + } |
| 47 | + .tab { |
| 48 | + font-weight: bold; |
39 | 49 | } |
40 | 50 | </style> |
41 | 51 | </head> |
|
49 | 59 | <h2> |
50 | 60 | Conceptual Mappings |
51 | 61 | </h2> |
52 | | - <table class="heading"> |
| 62 | + <table class="heading dataTable"> |
53 | 63 | <thead> |
54 | 64 | <tr> |
55 | 65 | <th></th> |
|
88 | 98 | </table> |
89 | 99 | <hr> |
90 | 100 | <h2>Report details: </h2> |
91 | | - {% if data %} |
92 | | - {{ data }} |
| 101 | + {% if data.original %} |
| 102 | + {% set tabs = data.transformed.tabs %} |
| 103 | + {% set fields_labels = data.transformed.labels.fields %} |
| 104 | + {% set actions_labels = data.transformed.labels.actions %} |
| 105 | + {% set tabs_labels = data.transformed.labels.tabs %} |
| 106 | + <div class="tabs"> |
| 107 | + <ul> |
| 108 | + {% for tab in tabs %} |
| 109 | + {% if tabs[tab] %} |
| 110 | + <li><a href="#tabs-{{ tab }}" class="tab">{{ tabs_labels[tab] }}</a></li> |
| 111 | + {% endif %} |
| 112 | + {% endfor %} |
| 113 | + <li style="float:right"><a href="#tabs-raw">Source</a></li> |
| 114 | + </ul> |
| 115 | + {% for tab in tabs %} |
| 116 | + {% if tabs[tab] %} |
| 117 | + <div id="tabs-{{ tab }}" class="tabs"> |
| 118 | + <ul> |
| 119 | + {% for action in tabs[tab] %} |
| 120 | + {% if tabs[tab][action] %} |
| 121 | + <li><a href="#tabs-{{ tab }}-{{ action }}">{{ actions_labels[action] }}</a></li> |
| 122 | + {% endif %} |
| 123 | + {% endfor %} |
| 124 | + </ul> |
| 125 | + {% for action in tabs[tab] %} |
| 126 | + {% if tabs[tab][action] %} |
| 127 | + <div id="tabs-{{ tab }}-{{ action }}" class="ui-widget"> |
| 128 | + <table class="dataTable heading"> |
| 129 | + <tbody> |
| 130 | + {% for field0 in tabs[tab][action] %} |
| 131 | + {% set field0_value = tabs[tab][action][field0] %} |
| 132 | + {% if field0|int(-1) != -1 %} {% set is_field0_int = True %} {% endif %} |
| 133 | + <tr> |
| 134 | + <th> |
| 135 | + {% if is_field0_int %}Item {% endif %}{{ fields_labels[field0] or field0 }} |
| 136 | + </th> |
| 137 | + <td> |
| 138 | + {% if "old_value" in field0_value %} |
| 139 | + <table class="dataTable heading"> |
| 140 | + <tbody> |
| 141 | + <tr> |
| 142 | + <th>{{ fields_labels["old_value"] }}</th> |
| 143 | + <td>{{ field0_value['old_value'] }}</td> |
| 144 | + </tr> |
| 145 | + <tr> |
| 146 | + <th>{{ fields_labels["new_value"] }}</th> |
| 147 | + <td>{{ field0_value['new_value'] }}</td> |
| 148 | + </tr> |
| 149 | + </tbody> |
| 150 | + </table> |
| 151 | + {% else %} |
| 152 | + {% if field0_value and field0_value is mapping %} |
| 153 | + <table class="dataTable heading"> |
| 154 | + <tbody> |
| 155 | + {% for field1 in field0_value %} |
| 156 | + {% set field1_value = field0_value[field1] %} |
| 157 | + {% if field1|int(-1) != -1 %} {% set is_field1_int = True %} {% endif %} |
| 158 | + <tr> |
| 159 | + <th> |
| 160 | + {% if is_field1_int %}Sub-Item {% endif %}{{ fields_labels[field1] or field1 }} |
| 161 | + </th> |
| 162 | + <td> |
| 163 | + {% if field1_value and "old_value" in field1_value %} |
| 164 | + <table class="dataTable heading"> |
| 165 | + <tbody> |
| 166 | + <tr> |
| 167 | + <th>{{ fields_labels["old_value"] }}</th> |
| 168 | + <td>{{ field1_value['old_value'] }}</td> |
| 169 | + </tr> |
| 170 | + <tr> |
| 171 | + <th>{{ fields_labels["new_value"] }}</th> |
| 172 | + <td>{{ field1_value['new_value'] }}</td> |
| 173 | + </tr> |
| 174 | + </tbody> |
| 175 | + </table> |
| 176 | + {% else %} |
| 177 | + {% if field1_value and field1_value is mapping %} |
| 178 | + <table class="dataTable heading"> |
| 179 | + <tbody> |
| 180 | + {% for field2 in field1_value %} |
| 181 | + {% set field2_value = field1_value[field2] %} |
| 182 | + {% if field2|int(-1) != -1 %} {% set is_field2_int = True %} {% endif %} |
| 183 | + <tr> |
| 184 | + <th> |
| 185 | + {% if is_field2_int %}Sub-Item {% endif %}{{ fields_labels[field2] or field2 }} |
| 186 | + </th> |
| 187 | + <td> |
| 188 | + {% if field2_value and "old_value" in field2_value %} |
| 189 | + <table class="dataTable heading"> |
| 190 | + <tbody> |
| 191 | + <tr> |
| 192 | + <th>{{ fields_labels["old_value"] }}</th> |
| 193 | + <td>{{ field2_value['old_value'] }}</td> |
| 194 | + </tr> |
| 195 | + <tr> |
| 196 | + <th>{{ fields_labels["new_value"] }}</th> |
| 197 | + <td>{{ field2_value['new_value'] }}</td> |
| 198 | + </tr> |
| 199 | + </tbody> |
| 200 | + </table> |
| 201 | + {% else %} |
| 202 | + {{ field2_value }} |
| 203 | + {% endif %} |
| 204 | + </td> |
| 205 | + </tr> |
| 206 | + {% endfor %} |
| 207 | + </tbody> |
| 208 | + </table> |
| 209 | + {% else %} |
| 210 | + {{ field1_value }} |
| 211 | + {% endif %} |
| 212 | + {% endif %} |
| 213 | + </td> |
| 214 | + </tr> |
| 215 | + {% endfor %} |
| 216 | + </tbody> |
| 217 | + </table> |
| 218 | + {% else %} |
| 219 | + {{ field0_value }} |
| 220 | + {% endif %} |
| 221 | + {% endif %} |
| 222 | + </td> |
| 223 | + </tr> |
| 224 | + {% endfor %} |
| 225 | + </tbody> |
| 226 | + </table> |
| 227 | + </div> |
| 228 | + {% endif %} |
| 229 | + {% endfor %} |
| 230 | + </div> |
| 231 | + {% endif %} |
| 232 | + {% endfor %} |
| 233 | + <div id="tabs-raw"> |
| 234 | + {{ data.html }} |
| 235 | + </div> |
| 236 | + </div> |
93 | 237 | {% else %} |
94 | 238 | <h3>NO DIFF</h3> |
95 | 239 | {% endif %} |
| 240 | + |
| 241 | + <script src="https://code.jquery.com/jquery-3.6.0.js"></script> |
| 242 | + <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> |
96 | 243 | <script> |
97 | | - const tables = document.querySelectorAll('body>table'); |
| 244 | + const tables = document.querySelectorAll('body table.dataTable'); |
98 | 245 | console.log(tables); |
99 | 246 | for (const table of tables) { |
100 | 247 | table.classList.add('dataTable'); |
101 | 248 | } |
| 249 | +
|
| 250 | + $( function() { |
| 251 | + $( ".tabs" ).tabs(); |
| 252 | + } ); |
102 | 253 | </script> |
103 | 254 | </body> |
104 | 255 | </html> |
0 commit comments