7676< body >
7777< div class ="container py-4 page-wrapper ">
7878 < div class ="row content-wrapper ">
79- < div class ="col-6 left-content ">
79+ < div class ="col-6 left-content " id =" left-content " >
8080 < div class ="d-flex space-between align-items-center mb-3 request-list-header pb-1 ">
8181 < h5 > All Requests</ h5 >
8282 </ div >
@@ -144,40 +144,64 @@ <h5 class="mb-2 mt-2">Response</h5>
144144 </ div >
145145</ div >
146146< script >
147+ let offset = 0 ;
148+ const limit = 20 ;
149+ const path = `${ window . location . origin } /logs` ;
147150 $ . ajax ( {
148- url : `${ window . location . origin } /logs ` ,
151+ url : `${ path } ?limit= ${ limit } ` ,
149152 dataType : "text" ,
150- success : function ( data ) {
151- var jsondata = $ . parseJSON ( data ) ;
152- $ . each ( jsondata . data , function ( index , item ) {
153- const requestItem = jQuery ( `<div class="row p-2 mb-2 request-item">
153+ success : ( data ) => renderLogs ( data )
154+ } ) ;
155+
156+ $ ( '#left-content' ) . scroll ( function ( ) {
157+ if ( this . scrollTop === ( this . scrollHeight - this . offsetHeight ) && offset ) {
158+ $ . ajax ( {
159+ url : `${ path } ?limit=${ limit } &offset=${ offset } ` ,
160+ dataType : "text" ,
161+ success : ( data ) => renderLogs ( data )
162+ } ) ;
163+
164+ }
165+ }
166+ ) ;
167+
168+ function renderLogs ( data ) {
169+ let jsondata = $ . parseJSON ( data ) ;
170+ if ( ! jsondata . data . length ) {
171+ offset = null ;
172+ return ;
173+ }
174+
175+ $ . each ( jsondata . data , function ( index , item ) {
176+ const requestItem = jQuery ( `<div class="row p-2 mb-2 request-item">
154177 <div class="col-3">${ item . request . method } </div>
155178 <div class="col-7">${ item . request . path } </div>
156179 <div class="col-1">${ item . response . status_code } </div>
157180 </div>` )
158- requestItem . click ( function ( ) {
159- $ ( this ) . siblings ( 'div.request-item' ) . removeClass ( 'active-request-item' ) ;
160- $ ( this ) . addClass ( 'active-request-item' ) ;
161- $ ( '#selected-request' ) . empty ( ) . append ( `${ item . request . method } ${ item . request . path } ` ) ;
162- $ ( '#request-header' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . request . headers , null , 4 ) } </pre>` ) ;
163- $ ( '#response-header' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . response . headers , null , 4 ) } </pre>` ) ;
164- $ ( '#request-body' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . request . data , null , 4 ) } </pre>` ) ;
165- $ ( '#response-body' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . response . data , null , 4 ) } </pre>` ) ;
166- $ ( "#right-content" ) . animate ( { scrollTop : 0 } , "fast" ) ;
167- } )
168-
169-
170- $ ( '#request-list-wrapper' ) . append ( requestItem ) ;
171- if ( index === 0 ) {
172- requestItem . click ( ) ;
173- }
174- } ) ;
175- }
176- } ) ;
181+ requestItem . click ( function ( ) {
182+ $ ( this ) . siblings ( 'div.request-item' ) . removeClass ( 'active-request-item' ) ;
183+ $ ( this ) . addClass ( 'active-request-item' ) ;
184+ $ ( '#selected-request' ) . empty ( ) . append ( `${ item . request . method } ${ item . request . path } ` ) ;
185+ $ ( '#request-header' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . request . headers , null , 4 ) } </pre>` ) ;
186+ $ ( '#response-header' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . response . headers , null , 4 ) } </pre>` ) ;
187+ $ ( '#request-body' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . request . data , null , 4 ) } </pre>` ) ;
188+ $ ( '#response-body' ) . empty ( ) . append ( `<pre>${ JSON . stringify ( item . response . data , null , 4 ) } </pre>` ) ;
189+ $ ( "#right-content" ) . animate ( { scrollTop : 0 } , "fast" ) ;
190+ } )
191+
192+
193+ $ ( '#request-list-wrapper' ) . append ( requestItem ) ;
194+ if ( index === 0 && offset === 0 ) {
195+ requestItem . click ( ) ;
196+ }
197+
198+ offset = jsondata . offset
199+ } ) ;
200+ }
177201</ script >
178202< script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js "
179203 integrity ="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN "
180204 crossorigin ="anonymous "> </ script >
181205</ body >
182206
183- </ html >
207+ </ html >
0 commit comments