move the button to retry on the list

This commit is contained in:
Simon Vieille 2023-05-26 14:19:05 +02:00
parent c1fdabeb2c
commit 957e3ed211
Signed by: deblan
GPG key ID: 579388D585F70417

View file

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html ng-app="app">
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
@ -113,7 +112,7 @@
.list-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-columns: auto 1fr auto auto auto;
gap: .5rem;
font-size: 1.2em;
padding: 1rem;
@ -239,6 +238,20 @@
background: var(--btn-hover);
}
.retry {
padding: 0;
}
.retry svg {
width: 16px;
height: 16px;
stroke: #9a9996;
}
.retry:hover svg * {
stroke: #fff;
}
.welcome {
display: grid;
position: absolute;
@ -309,9 +322,7 @@
</head>
<body>
<div class="dashboard" id="app" v-cloak>
<div class="list">
<div class="controls">
<button :disabled="items.length == 0" @click="clearDashboard">clear</button>
@ -322,8 +333,12 @@
<span class="method" :class="item.method">{{item.method}}</span>
<span class="path">&lrm;{{item.path}}&lrm;</span>
<span class="time">{{item.elapsed}}ms</span>
<span class="status" :class="statusColor(item)">{{item.status == 999 ? 'failed' :
item.status}}</span>
<span class="status" :class="statusColor(item)">
{{item.status == 999 ? 'failed' : item.status}}
</span>
<button class="retry" @click="retry(item.id)">
<svg stroke-width="3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.888 13.5C21.164 18.311 17.013 22 12 22 6.477 22 2 17.523 2 12S6.477 2 12 2c4.1 0 7.625 2.468 9.168 6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 8h4.4a.6.6 0 00.6-.6V3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</button>
</div>
</div>
</div>
@ -332,7 +347,6 @@
<div class="controls">
<button :disabled="!canPrettifyBody('request')" @click="prettifyBody('request')">prettify</button>
<button :disabled="selectedItem.id == null" @click="copyCurl($event)" data-text="curl">curl</button>
<button :disabled="selectedItem.id == null" @click="retry">retry</button>
</div>
<div class="req-inner">
<div class="corner">req</div>
@ -351,7 +365,8 @@
</div>
<div class="welcome" v-show="items.length == 0">
<p>Waiting for requests on http://localhost:{{proxyPort}}/<br>
<p>
Waiting for requests on http://localhost:{{proxyPort}}/<br>
<span>Proxying {{targetURL}}</span>
</p>
</div>
@ -422,9 +437,12 @@
document.execCommand('copy');
document.body.removeChild(e);
},
async retry() {
await fetch('/retry/' + this.selectedItem.id,
{ headers: { 'Cache-Control': 'no-cache' } });
async retry(id) {
await fetch(`/retry/${id}`, {
headers: {
'Cache-Control': 'no-cache'
}
});
this.show(this.items[0]);
},
changeText(event) {
@ -437,5 +455,4 @@
});
</script>
</body>
</html>