Skip to content

Commit 12d233f

Browse files
authored
Remove jQuery from the stopwatch (#29351)
- Switched to plain JavaScript - Tested the stopwatch functionality and it works as before # Demo using JavaScript without jQuery ![action](https://github.com/go-gitea/gitea/assets/20454870/c8e9a401-45e5-4a1d-a683-0d655f1d570e) Signed-off-by: Yarden Shoham <[email protected]>
1 parent b762a1f commit 12d233f

File tree

1 file changed

+21
-17
lines changed

1 file changed

+21
-17
lines changed

web_src/js/features/stopwatch.js

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import $ from 'jquery';
21
import prettyMilliseconds from 'pretty-ms';
32
import {createTippy} from '../modules/tippy.js';
3+
import {GET} from '../modules/fetch.js';
4+
import {hideElem, showElem} from '../utils/dom.js';
45

5-
const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
6+
const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
67

78
export function initStopwatch() {
89
if (!enableTimeTracking) {
@@ -28,7 +29,7 @@ export function initStopwatch() {
2829
});
2930

3031
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
31-
const currSeconds = $('.stopwatch-time').attr('data-seconds');
32+
const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds');
3233
if (currSeconds) {
3334
updateStopwatchTime(currSeconds);
3435
}
@@ -112,29 +113,31 @@ async function updateStopwatchWithCallback(callback, timeout) {
112113
}
113114

114115
async function updateStopwatch() {
115-
const data = await $.ajax({
116-
type: 'GET',
117-
url: `${appSubUrl}/user/stopwatches`,
118-
headers: {'X-Csrf-Token': csrfToken},
119-
});
116+
const response = await GET(`${appSubUrl}/user/stopwatches`);
117+
if (!response.ok) {
118+
console.error('Failed to fetch stopwatch data');
119+
return false;
120+
}
121+
const data = await response.json();
120122
return updateStopwatchData(data);
121123
}
122124

123125
function updateStopwatchData(data) {
124126
const watch = data[0];
125-
const btnEl = $('.active-stopwatch-trigger');
127+
const btnEl = document.querySelector('.active-stopwatch-trigger');
126128
if (!watch) {
127129
clearStopwatchTimer();
128-
btnEl.addClass('gt-hidden');
130+
hideElem(btnEl);
129131
} else {
130132
const {repo_owner_name, repo_name, issue_index, seconds} = watch;
131133
const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`;
132-
$('.stopwatch-link').attr('href', issueUrl);
133-
$('.stopwatch-commit').attr('action', `${issueUrl}/times/stopwatch/toggle`);
134-
$('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`);
135-
$('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`);
134+
document.querySelector('.stopwatch-link')?.setAttribute('href', issueUrl);
135+
document.querySelector('.stopwatch-commit')?.setAttribute('action', `${issueUrl}/times/stopwatch/toggle`);
136+
document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`);
137+
const stopwatchIssue = document.querySelector('.stopwatch-issue');
138+
if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`;
136139
updateStopwatchTime(seconds);
137-
btnEl.removeClass('gt-hidden');
140+
showElem(btnEl);
138141
}
139142
return Boolean(data.length);
140143
}
@@ -151,12 +154,13 @@ function updateStopwatchTime(seconds) {
151154
if (!Number.isFinite(secs)) return;
152155

153156
clearStopwatchTimer();
154-
const $stopwatch = $('.stopwatch-time');
157+
const stopwatch = document.querySelector('.stopwatch-time');
158+
// TODO: replace with <relative-time> similar to how system status up time is shown
155159
const start = Date.now();
156160
const updateUi = () => {
157161
const delta = Date.now() - start;
158162
const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true});
159-
$stopwatch.text(dur);
163+
if (stopwatch) stopwatch.textContent = dur;
160164
};
161165
updateUi();
162166
updateTimeIntervalId = setInterval(updateUi, 1000);

0 commit comments

Comments
 (0)