Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <git@yardenshoham.com>
This commit is contained in:
Yarden Shoham 2024-02-23 23:19:54 +02:00 committed by GitHub
parent b762a1f1b1
commit 12d233faf7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web_src/js/features/stopwatch.js
View File

@ -1,8 +1,9 @@
import $ from 'jquery';
import prettyMilliseconds from 'pretty-ms'; import prettyMilliseconds from 'pretty-ms';
import {createTippy} from '../modules/tippy.js'; import {createTippy} from '../modules/tippy.js';
import {GET} from '../modules/fetch.js';
import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config; const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
export function initStopwatch() { export function initStopwatch() {
if (!enableTimeTracking) { if (!enableTimeTracking) {
@ -28,7 +29,7 @@ export function initStopwatch() {
}); });
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used. // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
const currSeconds = $('.stopwatch-time').attr('data-seconds'); const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds');
if (currSeconds) { if (currSeconds) {
updateStopwatchTime(currSeconds); updateStopwatchTime(currSeconds);
} }
@ -112,29 +113,31 @@ async function updateStopwatchWithCallback(callback, timeout) {
} }
async function updateStopwatch() { async function updateStopwatch() {
const data = await $.ajax({ const response = await GET(`${appSubUrl}/user/stopwatches`);
type: 'GET', if (!response.ok) {
url: `${appSubUrl}/user/stopwatches`, console.error('Failed to fetch stopwatch data');
headers: {'X-Csrf-Token': csrfToken}, return false;
}); }
const data = await response.json();
return updateStopwatchData(data); return updateStopwatchData(data);
} }
function updateStopwatchData(data) { function updateStopwatchData(data) {
const watch = data[0]; const watch = data[0];
const btnEl = $('.active-stopwatch-trigger'); const btnEl = document.querySelector('.active-stopwatch-trigger');
if (!watch) { if (!watch) {
clearStopwatchTimer(); clearStopwatchTimer();
btnEl.addClass('gt-hidden'); hideElem(btnEl);
} else { } else {
const {repo_owner_name, repo_name, issue_index, seconds} = watch; const {repo_owner_name, repo_name, issue_index, seconds} = watch;
const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`; const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`;
$('.stopwatch-link').attr('href', issueUrl); document.querySelector('.stopwatch-link')?.setAttribute('href', issueUrl);
$('.stopwatch-commit').attr('action', `${issueUrl}/times/stopwatch/toggle`); document.querySelector('.stopwatch-commit')?.setAttribute('action', `${issueUrl}/times/stopwatch/toggle`);
$('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`); document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`);
$('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`); const stopwatchIssue = document.querySelector('.stopwatch-issue');
if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`;
updateStopwatchTime(seconds); updateStopwatchTime(seconds);
btnEl.removeClass('gt-hidden'); showElem(btnEl);
} }
return Boolean(data.length); return Boolean(data.length);
} }
@ -151,12 +154,13 @@ function updateStopwatchTime(seconds) {
if (!Number.isFinite(secs)) return; if (!Number.isFinite(secs)) return;
clearStopwatchTimer(); clearStopwatchTimer();
const $stopwatch = $('.stopwatch-time'); const stopwatch = document.querySelector('.stopwatch-time');
// TODO: replace with <relative-time> similar to how system status up time is shown
const start = Date.now(); const start = Date.now();
const updateUi = () => { const updateUi = () => {
const delta = Date.now() - start; const delta = Date.now() - start;
const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true}); const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true});
$stopwatch.text(dur); if (stopwatch) stopwatch.textContent = dur;
}; };
updateUi(); updateUi();
updateTimeIntervalId = setInterval(updateUi, 1000); updateTimeIntervalId = setInterval(updateUi, 1000);