Revize 0486d642
Přidáno uživatelem Jan Čarnogurský před více než 4 roky(ů)
| src/main/webapp/WEB-INF/templates/assembly.html | ||
|---|---|---|
| 200 | 200 |
</div> |
| 201 | 201 |
|
| 202 | 202 |
<div class="buttons-wrap"> |
| 203 |
<button type="submit" class="btn btn-secondary mb-2 " name="generateTable">Vygenerovat tabulku</button> |
|
| 204 |
<button type="submit" class="btn btn-secondary mb-2 " name="exportXls">Export do XLS</button> |
|
| 205 |
<button type="submit" class="btn btn-secondary mb-2 " name="exportPdf">Export do PDF</button> |
|
| 203 |
<button type="submit" class="btn btn-secondary mb-2 show-spinner" name="generateTable">Vygenerovat tabulku</button>
|
|
| 204 |
<button type="submit" class="btn btn-secondary mb-2 show-spinner" name="exportXls">Export do XLS</button>
|
|
| 205 |
<button type="submit" class="btn btn-secondary mb-2 show-spinner" name="exportPdf">Export do PDF</button>
|
|
| 206 | 206 |
</div> |
| 207 | 207 |
</div> |
| 208 | 208 |
</div> |
| src/main/webapp/WEB-INF/templates/layouts/layout.html | ||
|---|---|---|
| 28 | 28 |
|
| 29 | 29 |
</head> |
| 30 | 30 |
<body> |
| 31 |
<div th:if="${!#strings.isEmpty(errorText)}" >
|
|
| 31 |
<div id="spinner-overlay"> |
|
| 32 |
<div class="loader"></div> |
|
| 33 |
</div> |
|
| 34 |
|
|
| 35 |
|
|
| 36 |
<div th:if="${!#strings.isEmpty(errorText)}" >
|
|
| 32 | 37 |
<div class="alert alert-danger"> |
| 33 | 38 |
<span th:text="${errorText}"></span>
|
| 34 | 39 |
</div> |
| src/main/webapp/css/style.css | ||
|---|---|---|
| 331 | 331 |
|
| 332 | 332 |
.exported-table {
|
| 333 | 333 |
overflow: auto; |
| 334 |
} |
|
| 335 |
|
|
| 336 |
#spinner-overlay{
|
|
| 337 |
position:fixed; |
|
| 338 |
width:100%; |
|
| 339 |
height:100%; |
|
| 340 |
top:0px; |
|
| 341 |
left:0px; |
|
| 342 |
background: rgba(0,0,0,0.5); |
|
| 343 |
z-index: 9999; |
|
| 344 |
display: none; |
|
| 345 |
} |
|
| 346 |
|
|
| 347 |
.loader {
|
|
| 348 |
color: #ffffff; |
|
| 349 |
font-size: 20px; |
|
| 350 |
top: 50%; |
|
| 351 |
left: 50%; |
|
| 352 |
margin: -15px 0 0 -15px; |
|
| 353 |
width: 30px; |
|
| 354 |
height: 30px; |
|
| 355 |
border-radius: 50%; |
|
| 356 |
position: absolute; |
|
| 357 |
text-indent: -9999em; |
|
| 358 |
-webkit-animation: load4 1.3s infinite linear; |
|
| 359 |
animation: load4 1.3s infinite linear; |
|
| 360 |
-webkit-transform: translateZ(0); |
|
| 361 |
-ms-transform: translateZ(0); |
|
| 362 |
transform: translateZ(0); |
|
| 363 |
} |
|
| 364 |
@-webkit-keyframes load4 {
|
|
| 365 |
0%, |
|
| 366 |
100% {
|
|
| 367 |
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; |
|
| 368 |
} |
|
| 369 |
12.5% {
|
|
| 370 |
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; |
|
| 371 |
} |
|
| 372 |
25% {
|
|
| 373 |
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; |
|
| 374 |
} |
|
| 375 |
37.5% {
|
|
| 376 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; |
|
| 377 |
} |
|
| 378 |
50% {
|
|
| 379 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; |
|
| 380 |
} |
|
| 381 |
62.5% {
|
|
| 382 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; |
|
| 383 |
} |
|
| 384 |
75% {
|
|
| 385 |
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; |
|
| 386 |
} |
|
| 387 |
87.5% {
|
|
| 388 |
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; |
|
| 389 |
} |
|
| 390 |
} |
|
| 391 |
@keyframes load4 {
|
|
| 392 |
0%, |
|
| 393 |
100% {
|
|
| 394 |
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; |
|
| 395 |
} |
|
| 396 |
12.5% {
|
|
| 397 |
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; |
|
| 398 |
} |
|
| 399 |
25% {
|
|
| 400 |
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; |
|
| 401 |
} |
|
| 402 |
37.5% {
|
|
| 403 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; |
|
| 404 |
} |
|
| 405 |
50% {
|
|
| 406 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; |
|
| 407 |
} |
|
| 408 |
62.5% {
|
|
| 409 |
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; |
|
| 410 |
} |
|
| 411 |
75% {
|
|
| 412 |
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; |
|
| 413 |
} |
|
| 414 |
87.5% {
|
|
| 415 |
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; |
|
| 416 |
} |
|
| 334 | 417 |
} |
| src/main/webapp/js/assemblyScripts.js | ||
|---|---|---|
| 36 | 36 |
// init actions |
| 37 | 37 |
initParameters(); |
| 38 | 38 |
|
| 39 |
initSpinnerToButtons(); |
|
| 40 |
|
|
| 39 | 41 |
}); |
| 40 | 42 |
|
| 41 | 43 |
/** |
| ... | ... | |
| 251 | 253 |
if (configurationName.value == null || configurationName.value == "") {
|
| 252 | 254 |
alert("Není vyplněn název šablony !");
|
| 253 | 255 |
} |
| 256 |
} |
|
| 257 |
|
|
| 258 |
/** |
|
| 259 |
* Set up listener to export buttons to show spinner |
|
| 260 |
*/ |
|
| 261 |
function initSpinnerToButtons() {
|
|
| 262 |
hideSpinner(); |
|
| 263 |
|
|
| 264 |
document.querySelectorAll('.show-spinner').forEach(button => {
|
|
| 265 |
button.addEventListener('click', showSpinner);
|
|
| 266 |
}) |
|
| 267 |
} |
|
| 268 |
|
|
| 269 |
function showSpinner() {
|
|
| 270 |
let spinner = document.getElementById('spinner-overlay');
|
|
| 271 |
|
|
| 272 |
spinner.style.display = 'block'; |
|
| 273 |
} |
|
| 274 |
|
|
| 275 |
function hideSpinner() {
|
|
| 276 |
let spinner = document.getElementById('spinner-overlay');
|
|
| 277 |
|
|
| 278 |
spinner.style.display = 'none'; |
|
| 254 | 279 |
} |
Také k dispozici: Unified diff
re #8155 - added spinner after press button to table generation