91 lines
2.9 KiB
HTML
91 lines
2.9 KiB
HTML
{% load staticfiles %} <!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
|
|
/>
|
|
<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-warning" v-on:click="clean()">
|
|
Clean all content
|
|
</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">
|
|
<h2>Headers</h2>
|
|
<table>
|
|
<thead>
|
|
<th>Header</th>
|
|
<th>Content</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="header in request.headers">
|
|
<td>[[header.name]]</td>
|
|
<td>[[header.value]]</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Query Params</h2>
|
|
<div class="box">[[request.query_params]]</div>
|
|
|
|
<h2>Body</h2>
|
|
<div class="box">[[request.body]]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<script src="{% static 'js/viewer.js' %}"></script>
|
|
</body>
|
|
</html>
|