1
- import $ from 'jquery' ;
2
1
import prettyMilliseconds from 'pretty-ms' ;
3
2
import { createTippy } from '../modules/tippy.js' ;
3
+ import { GET } from '../modules/fetch.js' ;
4
+ import { hideElem , showElem } from '../utils/dom.js' ;
4
5
5
- const { appSubUrl, csrfToken , notificationSettings, enableTimeTracking, assetVersionEncoded} = window . config ;
6
+ const { appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window . config ;
6
7
7
8
export function initStopwatch ( ) {
8
9
if ( ! enableTimeTracking ) {
@@ -28,7 +29,7 @@ export function initStopwatch() {
28
29
} ) ;
29
30
30
31
// 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' ) ;
32
33
if ( currSeconds ) {
33
34
updateStopwatchTime ( currSeconds ) ;
34
35
}
@@ -112,29 +113,31 @@ async function updateStopwatchWithCallback(callback, timeout) {
112
113
}
113
114
114
115
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 ( ) ;
120
122
return updateStopwatchData ( data ) ;
121
123
}
122
124
123
125
function updateStopwatchData ( data ) {
124
126
const watch = data [ 0 ] ;
125
- const btnEl = $ ( '.active-stopwatch-trigger' ) ;
127
+ const btnEl = document . querySelector ( '.active-stopwatch-trigger' ) ;
126
128
if ( ! watch ) {
127
129
clearStopwatchTimer ( ) ;
128
- btnEl . addClass ( 'gt-hidden' ) ;
130
+ hideElem ( btnEl ) ;
129
131
} else {
130
132
const { repo_owner_name, repo_name, issue_index, seconds} = watch ;
131
133
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 } ` ;
136
139
updateStopwatchTime ( seconds ) ;
137
- btnEl . removeClass ( 'gt-hidden' ) ;
140
+ showElem ( btnEl ) ;
138
141
}
139
142
return Boolean ( data . length ) ;
140
143
}
@@ -151,12 +154,13 @@ function updateStopwatchTime(seconds) {
151
154
if ( ! Number . isFinite ( secs ) ) return ;
152
155
153
156
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
155
159
const start = Date . now ( ) ;
156
160
const updateUi = ( ) => {
157
161
const delta = Date . now ( ) - start ;
158
162
const dur = prettyMilliseconds ( secs * 1000 + delta , { compact : true } ) ;
159
- $ stopwatch. text ( dur ) ;
163
+ if ( stopwatch ) stopwatch . textContent = dur ;
160
164
} ;
161
165
updateUi ( ) ;
162
166
updateTimeIntervalId = setInterval ( updateUi , 1000 ) ;
0 commit comments