Skip to content

Commit eeda2db

Browse files
thorstenthorsten
committed
feat(update): added loading spinners (#3321)
1 parent 8390abf commit eeda2db

File tree

2 files changed

+116
-103
lines changed

2 files changed

+116
-103
lines changed

‎phpmyfaq/admin/assets/src/configuration/upgrade.js‎

Lines changed: 99 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -58,137 +58,133 @@ export const handleCheckForUpdates = () => {
5858

5959
// Check Update
6060
if (checkUpdateButton) {
61-
checkUpdateButton.addEventListener('click', (event) => {
61+
checkUpdateButton.addEventListener('click', async (event) => {
6262
event.preventDefault();
63-
fetch('./api/update-check', {
64-
method: 'POST',
65-
headers: {
66-
Accept: 'application/json, text/plain, */*',
67-
'Content-Type': 'application/json',
68-
},
69-
})
70-
.then(async (response) => {
71-
if (response.ok) {
72-
return response.json();
73-
}
74-
throw new Error('Network response was not ok: ', { cause: { response } });
75-
})
76-
.then((response) => {
77-
const dateLastChecked = document.getElementById('dateLastChecked');
78-
const versionLastChecked = document.getElementById('versionLastChecked');
79-
const card = document.getElementById('pmf-update-step-check-versions');
80-
81-
if (dateLastChecked) {
82-
const date = new Date(response.dateLastChecked);
83-
dateLastChecked.innerText = `${date.toLocaleString()}`;
84-
}
63+
const spinner = document.getElementById('spinner-check-versions');
64+
spinner.classList.remove('d-none');
65+
try {
66+
const response = await fetch('./api/update-check', {
67+
method: 'POST',
68+
headers: {
69+
Accept: 'application/json, text/plain, */*',
70+
'Content-Type': 'application/json',
71+
},
72+
});
8573

86-
if (versionLastChecked) {
87-
versionLastChecked.innerText = response.version;
88-
}
74+
if (!response.ok) {
75+
throw new Error('Network response was not ok');
76+
}
8977

90-
const result = document.getElementById('result-check-versions');
91-
if (result) {
92-
card.classList.add('text-bg-success');
93-
if (response.version === 'current') {
94-
result.replaceWith(addElement('p', { innerText: response.message }));
95-
} else {
96-
result.replaceWith(addElement('p', { innerText: response.message }));
97-
}
98-
}
99-
})
100-
.catch((error) => {
101-
console.error(error);
102-
});
78+
const responseData = await response.json();
79+
const dateLastChecked = document.getElementById('dateLastChecked');
80+
const versionLastChecked = document.getElementById('versionLastChecked');
81+
const card = document.getElementById('pmf-update-step-check-versions');
82+
83+
if (dateLastChecked) {
84+
const date = new Date(responseData.dateLastChecked);
85+
dateLastChecked.innerText = `${date.toLocaleString()}`;
86+
}
87+
88+
if (versionLastChecked) {
89+
versionLastChecked.innerText = responseData.version;
90+
}
91+
92+
const result = document.getElementById('result-check-versions');
93+
if (result) {
94+
card.classList.add('text-bg-success');
95+
result.replaceWith(addElement('p', { innerText: responseData.message }));
96+
spinner.classList.add('d-none');
97+
}
98+
} catch (error) {
99+
console.error(error);
100+
}
103101
});
104102
}
105103

106104
// Download package
107105
if (downloadButton) {
108-
downloadButton.addEventListener('click', (event) => {
106+
downloadButton.addEventListener('click', async (event) => {
109107
event.preventDefault();
110108

111109
let version;
112110
const versionLastChecked = document.getElementById('versionLastChecked');
113111
const releaseEnvironment = document.getElementById('releaseEnvironment');
112+
const spinner = document.getElementById('spinner-download-new-version');
113+
spinner.classList.remove('d-none');
114114

115115
if (releaseEnvironment.innerText.toLowerCase() === 'nightly') {
116116
version = 'nightly';
117117
} else {
118118
version = versionLastChecked.innerText;
119119
}
120120

121-
fetch(`./api/download-package/${version}`, {
122-
method: 'POST',
123-
headers: {
124-
Accept: 'application/json, text/plain, */*',
125-
'Content-Type': 'application/json',
126-
},
127-
})
128-
.then(async (response) => {
129-
if (response.ok) {
130-
return response.json();
131-
}
132-
throw new Error('Network response was not ok: ', { cause: { response } });
133-
})
134-
.then((response) => {
135-
const result = document.getElementById('result-download-new-version');
136-
const divExtractPackage = document.getElementById('pmf-update-step-extract-package');
137-
const card = document.getElementById('pmf-update-step-download');
138-
139-
if (result) {
140-
card.classList.add('text-bg-success');
141-
divExtractPackage.classList.remove('d-none');
142-
if (response.version === 'current') {
143-
result.replaceWith(addElement('p', { innerText: response.success }));
144-
} else {
145-
result.replaceWith(addElement('p', { innerText: response.success }));
146-
}
147-
}
148-
})
149-
.catch(async (error) => {
150-
const errorMessage = await error.cause.response.json();
151-
const result = document.getElementById('result-download-new-version');
152-
result.replaceWith(addElement('p', { innerText: errorMessage.error }));
121+
try {
122+
const response = await fetch(`./api/download-package/${version}`, {
123+
method: 'POST',
124+
headers: {
125+
Accept: 'application/json, text/plain, */*',
126+
'Content-Type': 'application/json',
127+
},
153128
});
129+
130+
if (!response.ok) {
131+
throw new Error('Network response was not ok');
132+
}
133+
134+
const responseData = await response.json();
135+
const result = document.getElementById('result-download-new-version');
136+
const divExtractPackage = document.getElementById('pmf-update-step-extract-package');
137+
const card = document.getElementById('pmf-update-step-download');
138+
139+
if (result) {
140+
card.classList.add('text-bg-success');
141+
divExtractPackage.classList.remove('d-none');
142+
result.replaceWith(addElement('p', { innerText: responseData.success }));
143+
spinner.classList.add('d-none');
144+
}
145+
} catch (error) {
146+
const errorMessage = await error.cause.response.json();
147+
const result = document.getElementById('result-download-new-version');
148+
result.replaceWith(addElement('p', { innerText: errorMessage.error }));
149+
spinner.classList.add('d-none');
150+
}
154151
});
155152
}
156153

157154
// Extract package
158155
if (extractButton) {
159-
extractButton.addEventListener('click', (event) => {
156+
extractButton.addEventListener('click', async (event) => {
160157
event.preventDefault();
161-
fetch('./api/extract-package', {
162-
method: 'POST',
163-
headers: {
164-
Accept: 'application/json, text/plain, */*',
165-
'Content-Type': 'application/json',
166-
},
167-
})
168-
.then(async (response) => {
169-
if (response.ok) {
170-
return response.json();
171-
}
172-
throw new Error('Network response was not ok: ', { cause: { response } });
173-
})
174-
.then((response) => {
175-
const result = document.getElementById('result-extract-package');
176-
const divInstallPackage = document.getElementById('pmf-update-step-install-package');
177-
const card = document.getElementById('pmf-update-step-extract-package');
178-
179-
if (result) {
180-
card.classList.add('text-bg-success');
181-
divInstallPackage.classList.remove('d-none');
182-
if (response.success === 'ok') {
183-
result.replaceWith(addElement('p', { innerText: response.message }));
184-
} else {
185-
result.replaceWith(addElement('p', { innerText: response.message }));
186-
}
187-
}
188-
})
189-
.catch((error) => {
190-
console.error(error);
158+
const spinner = document.getElementById('spinner-extract-package');
159+
spinner.classList.remove('d-none');
160+
161+
try {
162+
const response = await fetch('./api/extract-package', {
163+
method: 'POST',
164+
headers: {
165+
Accept: 'application/json, text/plain, */*',
166+
'Content-Type': 'application/json',
167+
},
191168
});
169+
170+
if (!response.ok) {
171+
throw new Error('Network response was not ok');
172+
}
173+
174+
const responseData = await response.json();
175+
const result = document.getElementById('result-extract-package');
176+
const divInstallPackage = document.getElementById('pmf-update-step-install-package');
177+
const card = document.getElementById('pmf-update-step-extract-package');
178+
179+
if (result) {
180+
card.classList.add('text-bg-success');
181+
divInstallPackage.classList.remove('d-none');
182+
result.replaceWith(addElement('p', { innerText: responseData.message }));
183+
spinner.classList.add('d-none');
184+
}
185+
} catch (error) {
186+
console.error(error);
187+
}
192188
});
193189
}
194190

‎phpmyfaq/assets/templates/admin/configuration/upgrade.twig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141
<div class="d-grid gap-2 d-md-flex justify-content-between">
4242
<button type="button" class="btn btn-primary mb-2" id="pmf-button-check-updates">
4343
{{ 'buttonCheckUpdates' | translate }}
44+
<div class="spinner-border spinner-border-sm ms-2 d-none" id="spinner-check-versions" role="status">
45+
<span class="visually-hidden">Loading...</span>
46+
</div>
4447
</button>
4548
<output id="result-check-versions"></output>
4649
</div>
@@ -65,13 +68,21 @@
6568
<div class="d-grid gap-2 d-md-flex justify-content-between">
6669
<button type="button" class="btn btn-primary mb-2" id="pmf-button-download-now">
6770
{{ 'buttonDownloadPackage' | translate }}
71+
<div class="spinner-border spinner-border-sm ms-2 d-none" id="spinner-download-new-version"
72+
role="status">
73+
<span class="visually-hidden">Loading...</span>
74+
</div>
6875
</button>
6976
<output id="result-download-new-version"></output>
7077
</div>
7178
{% else %}
7279
<div class="d-grid gap-2 d-md-flex justify-content-between">
7380
<button type="button" class="btn btn-primary mb-2" id="pmf-button-download-now">
7481
{{ 'buttonDownloadPackage' | translate }}
82+
<div class="spinner-border spinner-border-sm ms-2 d-none" id="spinner-download-new-version"
83+
role="status">
84+
<span class="visually-hidden">Loading...</span>
85+
</div>
7586
</button>
7687
<output id="result-download-new-version"></output>
7788
</div>
@@ -92,6 +103,9 @@
92103
<div class="d-grid gap-2 d-md-flex justify-content-between">
93104
<button type="button" class="btn btn-primary mb-2" id="pmf-button-extract-package">
94105
{{ 'buttonExtractPackage' | translate }}
106+
<div class="spinner-border spinner-border-sm ms-2 d-none" id="spinner-extract-package" role="status">
107+
<span class="visually-hidden">Loading...</span>
108+
</div>
95109
</button>
96110
<output id="result-extract-package"></output>
97111
</div>
@@ -113,6 +127,9 @@
113127
<div>
114128
<button type="button" class="btn btn-primary mb-2" id="pmf-button-install-package">
115129
{{ 'msgInstallDownloadedPackage' | translate }}
130+
<div class="spinner-border spinner-border-sm ms-2 d-none" role="status">
131+
<span class="visually-hidden">Loading...</span>
132+
</div>
116133
</button>
117134
</div>
118135
<div>

0 commit comments

Comments
 (0)