167 lines
4.2 KiB
HTML
167 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Go Again</title>
|
|
</head>
|
|
<body>
|
|
<h1>Go Again</h1>
|
|
<h2>Webhooks, on time!</h2>
|
|
|
|
<form class="js-schedules-list">
|
|
<label
|
|
>Token:
|
|
<input class="js-auth-token" type="text" />
|
|
</label>
|
|
<button>See Schedules</button>
|
|
</form>
|
|
|
|
<pre><code class="js-schedules-output"> </code></pre>
|
|
|
|
<div class="js-schedules">
|
|
<h2>Schedules</h2>
|
|
<div class="js-schedule">
|
|
<form class="js-new-schedule">
|
|
<label>Date: <input type="date" required/></label>
|
|
<br />
|
|
<label>Time: <input type="time" step="60" required/></label>
|
|
<br />
|
|
<!-- TODO combo box -->
|
|
<select class="js-schedule-tz">
|
|
<option value="UTC">UTC</option>
|
|
<option disabled>──────────</option>
|
|
</select>
|
|
<br />
|
|
|
|
<div class="doc-webhooks-container">
|
|
<h3>Webhook</h3>
|
|
<div class="js-webhooks">
|
|
<div class="js-webhook">
|
|
<h4>
|
|
<span class="js-comment"></span
|
|
><button class="js-delete" type="button">Delete</button>
|
|
</h4>
|
|
<span class="js-id" hidden></span>
|
|
<span class="js-method"></span>
|
|
<span class="js-url"></span>
|
|
<br />
|
|
<div class="js-headers">
|
|
<div class="js-header">
|
|
<span class="js-key"></span>
|
|
<span class="js-value"></span>
|
|
</div>
|
|
</div>
|
|
<pre><code class="js-body-template"></code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="js-new-webhook">
|
|
<select class="js-template">
|
|
<option value="" selected>Custom</option>
|
|
<option value="dweet-v2">Dweet v2</option>
|
|
</select>
|
|
<br />
|
|
<input
|
|
class="js-comment"
|
|
type="text"
|
|
placeholder="Webhook Name"
|
|
required
|
|
/>
|
|
<br />
|
|
<select class="js-method">
|
|
<option value="POST" selected>POST</option>
|
|
<option value="PUT">PUT</option>
|
|
</select>
|
|
<input
|
|
placeholder="https://example.com/api/v1/updates"
|
|
class="js-url"
|
|
type="url"
|
|
required
|
|
/>
|
|
<div class="js-headers">
|
|
<div class="js-header">
|
|
<input placeholder="Header" class="js-key" type="text" />
|
|
<input placeholder="Value" class="js-value" type="text" />
|
|
<button type="button" class="js-rm-header" hidden>[x]</button>
|
|
<button type="button" class="js-new-header">[+]</button>
|
|
</div>
|
|
</div>
|
|
<div class="js-body">
|
|
<textarea
|
|
placeholder="Body template, use '{{ keyname }}' for template values."
|
|
class="js-body-template"
|
|
></textarea>
|
|
<!-- TODO preview template -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
<button class="js-create">Save Schedule</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./ajquery.js"></script>
|
|
<script>
|
|
'use strict';
|
|
|
|
var allSchedules = [];
|
|
document.body.addEventListener('submit', function(ev) {
|
|
if (ev.target.matches('.js-schedules-list')) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
getSchedules();
|
|
return;
|
|
} else if (ev.target.matches('.js-schedules-new')) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
scheduleTask();
|
|
return;
|
|
}
|
|
});
|
|
|
|
function getToken() {
|
|
return document.querySelector('.js-auth-token').value;
|
|
}
|
|
|
|
function getSchedules() {
|
|
return window
|
|
.fetch('/api/schedules', {
|
|
headers: { Authorization: getToken() }
|
|
})
|
|
.then(function(resp) {
|
|
return resp.json().then(function(schedules) {
|
|
allSchedules = schedules;
|
|
renderSchedules(schedules);
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderSchedules(schedules) {
|
|
document.querySelector(
|
|
'.js-schedules-output'
|
|
).innerText = JSON.stringify(schedules, null, 2);
|
|
}
|
|
|
|
function scheduleTask() {
|
|
return window
|
|
.fetch('/api/schedules/new', {
|
|
method: 'POST',
|
|
headers: {
|
|
Authorization: getToken(),
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(task)
|
|
})
|
|
.then(function(resp) {
|
|
return resp.json().then(function(schedule) {
|
|
console.log('New Schedule:', schedule);
|
|
allSchedules.push(schedule);
|
|
renderSchedules(allSchedules);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
<script src="./hooks.js"></script>
|
|
</body>
|
|
</html>
|