Skip to content

Commit 656da52

Browse files
mpociotmpociot
committed
Store dashboard settings in local storge
1 parent 473e420 commit 656da52

File tree

1 file changed

+58
-20
lines changed

1 file changed

+58
-20
lines changed

‎resources/views/client/dashboard.twig

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@
152152
</div>
153153
<div class="flex items-center pb-4 justify-between">
154154
<span
155-
@click.prevent="followLogs = !followLogs"
155+
@click.prevent="setFollowLogs(!followLogs)"
156156
class="mr-3 cursor-pointer" id="annual-billing-label">
157157
<span class="text-sm font-medium dark:text-gray-200 text-gray-900">Follow Requests:</span>
158158
</span>
@@ -161,7 +161,7 @@
161161
'bg-pink-500': followLogs,
162162
'dark:bg-gray-700 bg-gray-200': ! followLogs,
163163
}"
164-
@click.prevent="followLogs = !followLogs"
164+
@click.prevent="setFollowLogs(!followLogs)"
165165
class=" relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
166166
<span class="sr-only">Follow Request</span>
167167
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
@@ -175,7 +175,7 @@
175175
</div>
176176
<div class="flex items-center pb-4 justify-between">
177177
<span
178-
@click.prevent="sideBySide = !sideBySide"
178+
@click.prevent="setSideBySide(!sideBySide)"
179179
class="mr-3 cursor-pointer" id="annual-billing-label">
180180
<span class="text-sm font-medium dark:text-gray-200 text-gray-900">Show Request/Response in individual tabs:</span>
181181
</span>
@@ -184,7 +184,7 @@
184184
'bg-pink-500': sideBySide,
185185
'dark:bg-gray-700 bg-gray-200': ! sideBySide,
186186
}"
187-
@click.prevent="sideBySide = !sideBySide"
187+
@click.prevent="setSideBySide(!sideBySide)"
188188
class=" relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
189189
<span class="sr-only">Follow Request</span>
190190
<span aria-hidden="true"
@@ -393,13 +393,13 @@
393393
<div class="flex">
394394
<svg
395395
v-if="postParametersVisible"
396-
@click="postParametersVisible = false"
396+
@click="setPostParametersVisible(false)"
397397
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
398398
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
399399
</svg>
400400
<svg
401401
v-if="! postParametersVisible"
402-
@click="postParametersVisible = true"
402+
@click="setPostParametersVisible(true)"
403403
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
404404
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
405405
</svg>
@@ -434,13 +434,13 @@
434434
<div class="flex">
435435
<svg
436436
v-if="requestHeadersVisible"
437-
@click="requestHeadersVisible = false"
437+
@click="setRequestHeadersVisible(false)"
438438
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
439439
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
440440
</svg>
441441
<svg
442442
v-if="! requestHeadersVisible"
443-
@click="requestHeadersVisible = true"
443+
@click="setRequestHeadersVisible(true)"
444444
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
445445
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
446446
</svg>
@@ -458,7 +458,7 @@
458458
</span>
459459
</div>
460460
<div
461-
v-if="requestHeadersVisible"
461+
v-if="requestHeadersVisible && currentLog.request"
462462
v-for="(value, header) in currentLog.request.headers"
463463
:key="header"
464464
class="even:bg-gray-50 bg-gray-50 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -512,13 +512,13 @@
512512

513513
<svg
514514
v-if="responseHeadersVisible"
515-
@click="responseHeadersVisible = false"
515+
@click="setResponseHeadersVisible(false)"
516516
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
517517
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
518518
</svg>
519519
<svg
520520
v-if="! responseHeadersVisible"
521-
@click="responseHeadersVisible = true"
521+
@click="setResponseHeadersVisible(true)"
522522
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cursor-pointer w-6 h-6 mr-4">
523523
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
524524
</svg>
@@ -530,7 +530,7 @@
530530
</div>
531531
<div
532532
v-if="responseHeadersVisible"
533-
v-for="(value, header) in currentLog.response.headers"
533+
v-for="(value, header) in responseHeaders"
534534
:key="header"
535535
class="even:bg-gray-50 odd:bg-gray-50 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
536536
<dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
@@ -586,7 +586,7 @@
586586
</nav>
587587
</h3>
588588
</div>
589-
<div v-if="activeTab === 'raw'">
589+
<div v-if="activeTab === 'raw' && currentLog.response">
590590
<json-viewer
591591
v-if="responseIsJson()"
592592
:expand-depth="2"
@@ -598,7 +598,7 @@
598598
class="p-6 text-sm whitespace-pre-wrap break-all">@{ currentLog.response.body }</pre>
599599
</div>
600600
<div v-if="activeTab === 'preview'">
601-
<iframe v-else :srcdoc="currentLog.response.body" style="height: 500px;" class="w-full h-full"></iframe>
601+
<iframe :srcdoc="currentLog.response.body" style="height: 500px;" class="w-full h-full"></iframe>
602602
</div>
603603
</div>
604604
</div>
@@ -627,21 +627,23 @@
627627
logs: [],
628628
maxLogs: {{ max_logs }},
629629
highlightNextLog: false,
630-
followLogs: true,
631-
sideBySide: false,
632-
useDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
633-
postParametersVisible: true,
634-
requestHeadersVisible: true,
635-
responseHeadersVisible: true,
630+
followLogs: window.localStorage.getItem('followLogs') !== null ? window.localStorage.getItem('followLogs') === 'true' : true,
631+
sideBySide: window.localStorage.getItem('sideBySide') === 'true',
632+
useDarkMode: window.localStorage.getItem('useDarkMode') !== null ? window.localStorage.getItem('useDarkMode') === 'true' : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches),
633+
postParametersVisible: window.localStorage.getItem('postParametersVisible') !== null ? window.localStorage.getItem('postParametersVisible') === 'true' : true,
634+
requestHeadersVisible: window.localStorage.getItem('requestHeadersVisible') !== null ? window.localStorage.getItem('requestHeadersVisible') === 'true' : true,
635+
responseHeadersVisible: window.localStorage.getItem('responseHeadersVisible') !== null ? window.localStorage.getItem('responseHeadersVisible') === 'true' : true,
636636
},
637637
638638
watch: {
639639
useDarkMode: {
640640
handler: function(value) {
641641
if (value) {
642642
document.querySelector('html').classList.add('dark')
643+
window.localStorage.setItem('useDarkMode', 'true')
643644
} else {
644645
document.querySelector('html').classList.remove('dark')
646+
window.localStorage.setItem('useDarkMode', 'false')
645647
}
646648
},
647649
immediate: true,
@@ -654,6 +656,15 @@
654656
return log.id === this.currentLogId;
655657
});
656658
},
659+
660+
responseHeaders: function() {
661+
if (this.currentLog && this.currentLog.response) {
662+
return this.currentLog.response.headers;
663+
}
664+
665+
return [];
666+
},
667+
657668
filteredLogs: function() {
658669
if (this.search === '') {
659670
return this.logs;
@@ -665,14 +676,41 @@
665676
},
666677
667678
methods: {
679+
setFollowLogs: function(value) {
680+
this.followLogs = value;
681+
window.localStorage.setItem('followLogs', value);
682+
},
683+
684+
setSideBySide: function(value) {
685+
this.sideBySide = value;
686+
window.localStorage.setItem('sideBySide', value);
687+
},
688+
689+
setPostParametersVisible: function(value) {
690+
this.postParametersVisible = value;
691+
window.localStorage.setItem('postParametersVisible', value);
692+
},
693+
694+
setRequestHeadersVisible: function(value) {
695+
this.requestHeadersVisible = value;
696+
window.localStorage.setItem('requestHeadersVisible', value);
697+
},
698+
699+
setResponseHeadersVisible: function(value) {
700+
this.responseHeadersVisible = value;
701+
window.localStorage.setItem('responseHeadersVisible', value);
702+
},
703+
668704
setActiveTab: function(tab) {
669705
this.activeTab = tab;
670706
},
707+
671708
clearLogs: function() {
672709
fetch('/api/logs/clear');
673710
this.logs = []
674711
this.currentLog = null;
675712
},
713+
676714
responseIsJson: function() {
677715
if (! this.currentLog || ! this.currentLog.response || ! this.currentLog.response.headers) {
678716
return false;

0 commit comments

Comments
 (0)