go-again/public/index.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>