nik/newdwh2021
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ローディングの共通部品を追加し、生物由来照会画面に適用

Browse Source
This commit is contained in:
shimoda.m@nds-tyo.co.jp 2023-08-17 14:53:47 +09:00
parent c40a1b1b14
commit f0fe43be8d
5 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ecs/jskult-webapp/src/static/css/bioStyle.css
View File

@ -282,25 +282,3 @@ table.tablesorter thead tr .headerSortDown {
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
#loading {
z-index: 10000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
text-align: center;
display: none;
opacity: 0.7;
}
#loading_content {
position: absolute;
top: 50%;
left: 50%;
}

21
ecs/jskult-webapp/src/static/css/loading.css Normal file
View File

@ -0,0 +1,21 @@
#_loading {
z-index: 10000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
text-align: center;
display: none;
opacity: 0.7;
}
#_loading_content {
position: absolute;
top: 50%;
left: 50%;
}

1
ecs/jskult-webapp/src/templates/_header.html
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="/static/css/pagenation.css">
<link rel="stylesheet" href="/static/css/datepicker.css">
<link rel="stylesheet" href="/static/css/loading.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://pagination.js.org/dist/2.5.0/pagination.min.js" crossorigin="anonymous"></script>

5
ecs/jskult-webapp/src/templates/_loading.html Normal file
View File

@ -0,0 +1,5 @@
<div id="_loading">
<div id="_loading_content">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>{{progress_message}}
</div>
</div>

18
ecs/jskult-webapp/src/templates/bioSearchList.html
View File

@ -198,7 +198,7 @@
<!-- CSV/Excelダウンロードボタン。ここはajaxでやってる -->
<script type="text/javascript">
function download(filename, ext) {
$(`#loading`).toggle()
$(`#_loading`).toggle()
// 検索パラメータを取得
const formData = $('#bio_download').serializeArray()
@ -234,7 +234,7 @@
}
// S3の期限付き署名URLがレスポンスされる
window.location.href = data.download_url;
$(`#loading`).toggle();
$(`#_loading`).toggle();
$(`#modal_${ext}`).modal('toggle');
} catch (e) {
alert("エラーが発生しました。:" + e.message);
@ -243,20 +243,20 @@
error: function(jqXHR, textStatus, errorThrown) {
const responseJson = jqXHR.responseJSON
if (responseJson?.detail?.error === 'db_error') {
$(`#loading`).toggle();
$(`#_loading`).toggle();
$(`#modal_${ext}`).modal('toggle');
$(`#ErrorModal_DB`).modal('toggle');
return
}
if (responseJson?.detail?.error === 'aws_error') {
$(`#loading`).toggle();
$(`#_loading`).toggle();
$(`#modal_${ext}`).modal('toggle');
$(`#ErrorModal_AWS`).modal('toggle');
return
}
// 予期せぬエラーが発生した場合
$(`#loading`).toggle();
$(`#_loading`).toggle();
$(`#modal_${ext}`).modal('toggle');
$(`#ErrorModal_Unexpected`).modal('toggle');
return
@ -470,10 +470,8 @@
{% endwith %}
<!-- ローディング -->
<div id="loading">
<div id="loading_content">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>出力中...
</div>
</div>
{% with progress_message = '出力中...'%}
{% include '_loading.html' %}
{% endwith %}
</body>
</html>