added a footer and a visual separation between requests
This commit is contained in:
parent
e835a99b43
commit
29a8b79d7f
|
|
@ -0,0 +1,24 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
margin-bottom: -168px;
|
||||
}
|
||||
|
||||
.main:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer,
|
||||
.main:after {
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -8,85 +8,96 @@
|
|||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}"></link>
|
||||
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}"></link>
|
||||
<title>Webhook Logger</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Webhook Logger</h1>
|
||||
<h2 class="subtitle">
|
||||
Easily test and inspect
|
||||
<a href="https://en.wikipedia.org/wiki/Webhook">webhooks</a>
|
||||
</h2>
|
||||
<p>Use the following URL as your webhook callback:</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
id="callback-uuid-field"
|
||||
class="input is-large is-info"
|
||||
type="text"
|
||||
placeholder="Large input"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="app">
|
||||
<div class="container">
|
||||
<div v-if="requests.length < 1" class="has-text-centered">
|
||||
No requests received yet
|
||||
</div>
|
||||
<div
|
||||
v-if="requests.length >= 1"
|
||||
class="box is-shadowless has-text-centered"
|
||||
>
|
||||
<a class="button is-link" v-on:click="download()">
|
||||
Download contents
|
||||
</a>
|
||||
<a class="button is-warning" v-on:click="clean()">
|
||||
Clean contents
|
||||
</a>
|
||||
</div>
|
||||
<div class="card" v-for="(request, index) in requests">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title" v-on:click="toggleDetail(index)">
|
||||
<span class="tag is-info">[[request.method]]</span>
|
||||
<span> from: [[request.ip_address]]</span>
|
||||
</p>
|
||||
<p class="card-header-icon">
|
||||
<span class="tag"
|
||||
>[[new Date(request.received_at).toLocaleString()]]</span
|
||||
>
|
||||
<button class="delete" v-on:click="removeItem(index)"></button>
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content" v-if="request.displayFull">
|
||||
<div class="content">
|
||||
<table class="table is-striped is-fullwidth">
|
||||
<thead>
|
||||
<th>Header</th>
|
||||
<th>Content</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(value, header) in request.headers">
|
||||
<td>[[header]]</td>
|
||||
<td>[[value]]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Query Params</h3>
|
||||
<div class="box">[[request.query_params]]</div>
|
||||
|
||||
<h3>Body</h3>
|
||||
<div class="box">[[request.body]]</div>
|
||||
<div class="main">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Webhook Logger</h1>
|
||||
<h2 class="subtitle">
|
||||
Easily test and inspect
|
||||
<a href="https://en.wikipedia.org/wiki/Webhook">webhooks</a>
|
||||
</h2>
|
||||
<p>Use the following URL as your webhook callback:</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
id="callback-uuid-field"
|
||||
class="input is-large is-info"
|
||||
type="text"
|
||||
placeholder="Large input"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="app">
|
||||
<div class="container">
|
||||
<div v-if="requests.length < 1" class="has-text-centered">
|
||||
No requests received yet
|
||||
</div>
|
||||
<div
|
||||
v-if="requests.length >= 1"
|
||||
class="box is-shadowless has-text-centered"
|
||||
>
|
||||
<a class="button is-link" v-on:click="download()">
|
||||
Download contents
|
||||
</a>
|
||||
<a class="button is-warning" v-on:click="clean()">
|
||||
Clean contents
|
||||
</a>
|
||||
</div>
|
||||
<div class="card" v-for="(request, index) in requests">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title" v-on:click="toggleDetail(index)">
|
||||
<span class="tag is-info">[[request.method]]</span>
|
||||
<span> from: [[request.ip_address]]</span>
|
||||
</p>
|
||||
<p class="card-header-icon">
|
||||
<span class="tag"
|
||||
>[[new Date(request.received_at).toLocaleString()]]</span
|
||||
>
|
||||
<button class="delete" v-on:click="removeItem(index)"></button>
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content" v-if="request.displayFull">
|
||||
<div class="content">
|
||||
<table class="table is-striped is-fullwidth">
|
||||
<thead>
|
||||
<th>Header</th>
|
||||
<th>Content</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(value, header) in request.headers">
|
||||
<td>[[header]]</td>
|
||||
<td>[[value]]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Query Params</h3>
|
||||
<div class="box">[[request.query_params]]</div>
|
||||
|
||||
<h3>Body</h3>
|
||||
<div class="box">[[request.body]]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Webhook Logger</strong> by <a href="https://ovalerio.net">Gonçalo Valério</a>. The source code is licensed
|
||||
<a href="https://github.com/dethos/webhook_logger/blob/master/LICENSE">GPL-3.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
<a
|
||||
href="https://github.com/dethos/webhook_logger"
|
||||
class="github-corner"
|
||||
|
|
|
|||
Loading…
Reference in New Issue