11<!DOCTYPE html>
2- < html lang ="en " xmlns ="http://www.w3.org/1999/xhtml " dir ="ltr " class ="uk-height-1-1 ">
2+ < html lang ="en ">
3+
34< head >
4- < meta charset ="utf-8 "/>
5- < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
6- < title > flasktest</ title >
7- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css "/>
8- < script defer src ="https://use.fontawesome.com/releases/v5.3.1/js/all.js "> </ script >
9- < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js "> </ script >
5+ < meta charset ="UTF-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8+ < title > Document</ title >
9+ < style >
10+ /* Add CSS styles here */
11+ .d-flex {
12+ display : flex;
13+ }
14+
15+ .space-between {
16+ justify-content : space-between;
17+ }
18+
19+ .align-items-center {
20+ align-items : center;
21+ }
22+
23+
24+ .request-item {
25+ background : # e2e3e5 ;
26+ border-radius : 4px ;
27+ cursor : pointer;
28+ }
29+
30+ .active-request-item {
31+ background : # d1e7dd ;
32+ }
33+
34+ .headers-wrapper {
35+ background : # e2e3e5 ;
36+ border-radius : 4px ;
37+ }
38+
39+ .page-wrapper {
40+ height : 100vh ;
41+ }
42+
43+ .content-wrapper {
44+ height : 100% ;
45+ }
46+
47+ .left-content {
48+ height : 100% ;
49+ overflow : auto;
50+ position : relative;
51+ }
52+
53+ .request-list-header {
54+ position : sticky;
55+ top : 0 ;
56+ background : white;
57+ }
58+
59+ .right-content {
60+ height : 100% ;
61+ overflow : auto;
62+ position : relative;
63+ }
64+
65+ # selected-request {
66+ position : sticky;
67+ top : 0 ;
68+ background : white;
69+ }
70+ </ style >
71+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css " rel ="stylesheet "
72+ integrity ="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD " crossorigin ="anonymous ">
73+ < script src ="https://code.jquery.com/jquery-3.6.0.min.js "> </ script >
1074</ head >
75+
1176< body >
12- < section class ="section ">
13- < div class ="container ">
14- < div class ="columns is-centered is-mobile ">
15- < div class ="column is-muted notification is-four-fifths ">
16- < h1 class ="title "> SuperServer</ h1 >
17- < h2 class ="subtitle "> Progress example</ h2 >
18- < div id ="progress "> </ div >
77+ < div class ="container py-4 page-wrapper ">
78+ < div class ="row content-wrapper ">
79+ < div class ="col-6 left-content ">
80+ < div class ="d-flex space-between align-items-center mb-3 request-list-header pb-1 ">
81+ < h5 > All Requests</ h5 >
82+ </ div >
83+ < div class ="container " id ="request-list-wrapper ">
84+
1985 </ div >
2086 </ div >
21- </ div >
22- < div class ="container ">
23- < div class ="columns is-centered is-mobile ">
24- < div class ="column is-dark notification is-four-fifths ">
25- < div class ="is-size-7 has-text-warning " id ="display ">
26- < ul id ="display_list ">
27- </ ul >
87+ < div class ="col-6 right-content " id ="right-content ">
88+ < h5 id ="selected-request " class ="py-2 "> </ h5 >
89+ < div >
90+ < h5 class ="mb-2 "> Request</ h5 >
91+ < ul class ="nav nav-tabs " id ="myTab " role ="tablist ">
92+ < li class ="nav-item " role ="presentation ">
93+ < button class ="nav-link active " id ="request-headers-tab " data-bs-toggle ="tab "
94+ data-bs-target ="#request-headers-tab-pane " type ="button " role ="tab "
95+ aria-controls ="request-headers-tab-pane " aria-selected ="true "> Headers
96+ </ button >
97+ </ li >
98+ < li class ="nav-item " role ="presentation ">
99+ < button class ="nav-link " id ="request-body-tab " data-bs-toggle ="tab "
100+ data-bs-target ="#request-body-tab-pane " type ="button " role ="tab "
101+ aria-controls ="request-body-tab-pane " aria-selected ="false "> Body
102+ </ button >
103+ </ li >
104+ </ ul >
105+ < div class ="tab-content " id ="myTabContent ">
106+ < div class ="tab-pane fade show active " id ="request-headers-tab-pane " role ="tabpanel "
107+ aria-labelledby ="request-headers-tab " tabindex ="0 ">
108+ < div class ="headers-wrapper p-3 mt-3 " id ="request-header "> </ div >
109+ </ div >
110+ < div class ="tab-pane fade " id ="request-body-tab-pane " role ="tabpanel "
111+ aria-labelledby ="request-body-tab "
112+ tabindex ="0 ">
113+ < div class ="headers-wrapper p-3 mt-3 " id ="request-body "> </ div >
114+ </ div >
115+ </ div >
116+ < h5 class ="mb-2 mt-2 "> Response</ h5 >
117+ < ul class ="nav nav-tabs " id ="myTab " role ="tablist ">
118+ < li class ="nav-item " role ="presentation ">
119+ < button class ="nav-link active " id ="response-headers-tab " data-bs-toggle ="tab "
120+ data-bs-target ="#response-headers-tab-pane " type ="button " role ="tab "
121+ aria-controls ="response-headers-tab-pane " aria-selected ="true "> Headers
122+ </ button >
123+ </ li >
124+ < li class ="nav-item " role ="presentation ">
125+ < button class ="nav-link " id ="response-body-tab " data-bs-toggle ="tab "
126+ data-bs-target ="#response-body-tab-pane " type ="button " role ="tab "
127+ aria-controls ="response-body-tab-pane " aria-selected ="false "> Body
128+ </ button >
129+ </ li >
130+ </ ul >
131+ < div class ="tab-content " id ="myTabContent ">
132+ < div class ="tab-pane fade show active " id ="response-headers-tab-pane " role ="tabpanel "
133+ aria-labelledby ="response-headers-tab " tabindex ="0 ">
134+ < div class ="headers-wrapper p-3 mt-3 " id ="response-header "> </ div >
135+ </ div >
136+ < div class ="tab-pane fade " id ="response-body-tab-pane " role ="tabpanel "
137+ aria-labelledby ="response-body-tab "
138+ tabindex ="0 ">
139+ < div class ="headers-wrapper p-3 mt-3 " id ="response-body "> </ div >
140+ </ div >
28141 </ div >
29142 </ div >
30143 </ div >
31144 </ div >
32- </ section >
33-
34- < script type ="text/javascript ">
35- $ . get ( "http://127.0.0.1:5002/logs" , function ( data ) {
36- $ ( "body" ) . append ( "<p>" + JSON . stringify ( data ) + "</p>" ) ;
37- } ) ;
145+ </ div >
146+ < script >
147+ $ . ajax ( {
148+ url : `${ window . location . origin } /logs` ,
149+ 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">
154+ <div class="col-3">${ item . request . method } </div>
155+ <div class="col-7">${ item . request . path } </div>
156+ <div class="col-1">${ item . response . status_code } </div>
157+ </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+ } )
38168
39169
170+ $ ( '#request-list-wrapper' ) . append ( requestItem ) ;
171+ if ( index === 0 ) {
172+ requestItem . click ( ) ;
173+ }
174+ } ) ;
175+ }
176+ } ) ;
40177</ script >
178+ < script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js "
179+ integrity ="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN "
180+ crossorigin ="anonymous "> </ script >
41181</ body >
42- </ html >
182+
183+ </ html >
0 commit comments