coolaj86
/
go-again
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

show old stuff correctly

This commit is contained in:
AJ ONeal 2019-06-23 00:44:50 -06:00
parent b619b70d22
commit 9db30c7e80
2 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/app.js
View File

@ -33,14 +33,15 @@
// after blanking all inner templates // after blanking all inner templates
$devTpl = $('.js-schedule').outerHTML; $devTpl = $('.js-schedule').outerHTML;
var $form = $('.js-new-schedule');
// Pick a date and time on an even number // Pick a date and time on an even number
// between 10 and 15 minutes in the future // between 10 and 15 minutes in the future
var d = new Date(Date.now() + 10 * 60 * 1000); var d = new Date(Date.now() + 10 * 60 * 1000);
var minutes = d.getMinutes() + (5 - (d.getMinutes() % 5)) - d.getMinutes(); var minutes = d.getMinutes() + (5 - (d.getMinutes() % 5)) - d.getMinutes();
d = new Date(d.valueOf() + minutes * 60 * 1000); d = new Date(d.valueOf() + minutes * 60 * 1000);
$('.js-date').value = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); $('.js-date', $form).value = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
$('.js-time').value = pad(d.getHours()) + ':' + pad(d.getMinutes()); $('.js-time', $form).value = pad(d.getHours()) + ':' + pad(d.getMinutes());
$('.js-url').value = 'https://enfqtbjh5ghw.x.pipedream.net'; $('.js-url', $form).value = 'https://enfqtbjh5ghw.x.pipedream.net';
console.log('hello'); console.log('hello');
@ -49,8 +50,6 @@
newWebhookHeader(ev.target); newWebhookHeader(ev.target);
} else if (ev.target.matches('.js-rm-header')) { } else if (ev.target.matches('.js-rm-header')) {
rmWebhookHeader(ev.target); rmWebhookHeader(ev.target);
} else if (ev.target.matches('.js-delete') && ev.target.closest('.js-grant')) {
deleteGrant(ev.target.closest('.js-grant'));
} else if (ev.target.matches('.js-delete') && ev.target.closest('.js-webhook')) { } else if (ev.target.matches('.js-delete') && ev.target.closest('.js-webhook')) {
deleteWebhook(ev.target.closest('.js-webhook')); deleteWebhook(ev.target.closest('.js-webhook'));
} else { } else {
@ -86,8 +85,8 @@
} }
function newSchedule() { function newSchedule() {
var $hook = $('.js-schedule'); var $hook = $('.js-new-schedule');
//var deviceId = $hook.closest('.js-schedule').querySelector('.js-id').value; //var deviceId = $hook.closest('.js-new-schedule').querySelector('.js-id').value;
var schedule = { var schedule = {
date: $('.js-date', $hook).value, date: $('.js-date', $hook).value,
time: $('.js-time', $hook).value, time: $('.js-time', $hook).value,
@ -211,47 +210,30 @@
console.log(data); console.log(data);
var $devs = $('.js-schedules'); var $devs = $('.js-schedules');
$devs.innerHTML = ''; $devs.innerHTML = '';
data.devices.forEach(function(d) { data.schedules.forEach(function(d) {
var $dev = $.create($devTpl); var $dev = $.create($devTpl);
$('.js-ieme', $dev).innerText = d.id; $('.js-id', $dev).value = d.id;
$('.js-id', $dev).value = d.accessToken; $('.js-date', $dev).value = d.date;
$('.js-update-url', $dev).innerText = d.updateUrl; $('.js-time', $dev).value = d.time;
$('.js-tz', $dev).value = d.tz;
d.webhooks.forEach(function(h) { d.webhooks.forEach(function(h) {
console.log('webhook', h);
var $hook = $.create($webhookTpl); var $hook = $.create($webhookTpl);
$('.js-id', $hook).innerText = h.id; $('.js-id', $hook).innerText = h.id;
$('.js-comment', $hook).innerText = h.comment; $('.js-comment', $hook).innerText = h.comment;
$('.js-method', $hook).innerText = h.method; $('.js-method', $hook).innerText = h.method;
$('.js-url', $hook).innerText = h.url; $('.js-url', $hook).innerText = h.url;
Object.keys(h.headers).forEach(function(k) { Object.keys(h.headers || {}).forEach(function(k) {
var $header = $.create($webhookHeaderTpl); var $header = $.create($webhookHeaderTpl);
var v = h.headers[k]; var v = h.headers[k];
$('.js-key', $header).innerText = k; $('.js-key', $header).innerText = k;
$('.js-value', $header).innerText = v; $('.js-value', $header).innerText = v;
$('.js-headers', $hook).innerHTML += $header.innerHTML; $('.js-headers', $hook).innerHTML += $header.innerHTML;
}); });
$('.js-body-template', $hook).innerText = h.body; $('.js-body-template', $hook).innerText = h.body || '';
$('.js-webhooks', $dev).innerHTML += $hook.innerHTML; $('.js-webhooks', $dev).innerHTML += $hook.innerHTML;
}); });
d.grants.forEach(function(g) { $devs.appendChild($dev);
var $grant = $.create($grantTpl);
$('.js-id', $grant).innerText = g.id;
$('.js-comment', $grant).innerText = g.comment;
$('.js-token', $grant).innerText = g.token;
//TODO Math.floor(Date.now() / 1000);
var url = 'https://test.therootcompany.com/api/v1/devices/' + d.accessToken + '/updates?since=' + 0;
$('.js-example-curl .js-example-url', $grant).innerText = url;
$('.js-example-curl .js-example-token', $grant).innerText = g.token;
$('.js-example-js .js-example-url', $grant).innerText = url;
$('.js-example-js .js-example-id', $grant).innerText = d.accessToken;
$('.js-example-js .js-example-token', $grant).innerText = g.token;
$('.js-grants', $dev).innerHTML += $grant.innerHTML;
});
d.updates.slice(0, 10).forEach(function(u) {
var $update = $.create($updateTpl);
$('.js-update-details', $update).innerText = JSON.stringify(u);
$('.js-updates', $dev).innerHTML += $update.innerHTML;
});
$devs.innerHTML += $dev.innerHTML;
}); });
} }
@ -262,8 +244,8 @@
var tz = Intl.DateTimeFormat().resolvedOptions().timeZone; var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
var options = $$('.js-tz option'); var options = $$('.js-tz option');
var valOpt = options[0].outerHTML; // UTC var valOpt = options[0].outerHTML; // UTC
var spaceOpt = options[1].outerHTML; // ---- //var spaceOpt = options[1].outerHTML; // ----
var innerHTML = $('.js-tz').innerHTML; var innerHTML = $('.js-new-schedule .js-tz').innerHTML;
/* /*
innerHTML = innerHTML =
'<option selected value="' + '<option selected value="' +
@ -297,7 +279,7 @@
}); });
innerHTML += '</optgroup>'; innerHTML += '</optgroup>';
}); });
$('.js-tz').innerHTML = innerHTML; $('.js-new-schedule .js-tz').innerHTML = innerHTML;
console.info('[tzdb] loaded'); console.info('[tzdb] loaded');
run(); run();
@ -327,9 +309,13 @@
.clone() .clone()
.json() .json()
.then(function(schedules) { .then(function(schedules) {
console.log('schedules');
console.log(schedules);
allSchedules = schedules; allSchedules = schedules;
renderSchedules(schedules); renderSchedules(schedules);
$('.js-schedules').hidden = false; state.account.schedules = schedules;
displayAccount(state.account);
$('.js-account').hidden = false;
}) })
.catch(function(e) { .catch(function(e) {
console.error("Didn't parse JSON:"); console.error("Didn't parse JSON:");
@ -372,5 +358,7 @@
}); });
} }
console.log('whatever');
$('.js-auth-token').value = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
//window.addEventListener('load', run); //window.addEventListener('load', run);
})(); })();

98
public/index.html
View File

@ -17,27 +17,19 @@
<pre><code class="js-schedules-output"> </code></pre> <pre><code class="js-schedules-output"> </code></pre>
<div class="js-schedules" hidden> <div class="js-account" hidden>
<h2>Schedules</h2> <h2>Schedules</h2>
<div class="js-schedule"> <div class="js-schedules">
<form class="js-new-schedule"> <div class="js-schedule">
<label>Date: <input type="date" class="js-date" required/></label> <input type="hidden" class="js-id" />
<label>Time: <input type="time" class="js-time" step="300" required/></label> <input type="date" class="js-date" readonly />
<!-- TODO combo box --> <input type="time" class="js-time" readonly />
<label <input type="text" class="js-tz" readonly />
>Location:
<select class="js-tz">
<option value="UTC">UTC</option>
<option disabled>──────────</option>
</select>
</label>
<br />
<div class="doc-webhooks-container"> <div class="doc-webhooks-container">
<h3>Webhook</h3>
<div class="js-webhooks"> <div class="js-webhooks">
<div class="js-webhook"> <div class="js-webhook">
<h4><span class="js-comment"></span><button class="js-delete" type="button">Delete</button></h4> <h4><span class="js-comment"></span></h4>
<span class="js-id" hidden></span> <span class="js-id" hidden></span>
<span class="js-method"></span> <span class="js-method"></span>
<span class="js-url"></span> <span class="js-url"></span>
@ -51,8 +43,28 @@
<pre><code class="js-body-template"></code></pre> <pre><code class="js-body-template"></code></pre>
</div> </div>
</div> </div>
<div class="js-new-webhook"> </div>
<!-- <button class="js-delete" type="button">Delete Schedule</button>
</div>
</div>
<h2>Add Schedule</h2>
<form class="js-new-schedule">
<label>Date: <input type="date" class="js-date" required/></label>
<label>Time: <input type="time" class="js-time" step="300" required/></label>
<!-- TODO combo box -->
<label
>Location:
<select class="js-tz">
<option value="UTC">UTC</option>
<option disabled>──────────</option>
</select>
</label>
<br />
<h3>Webhook</h3>
<div class="js-new-webhook">
<!--
<select class="js-template"> <select class="js-template">
<option value="webhook" selected>Custom Webhook</option> <option value="webhook" selected>Custom Webhook</option>
<option value="requestbin">RequestBin</option> <option value="requestbin">RequestBin</option>
@ -62,35 +74,33 @@
</select> </select>
<br /> <br />
--> -->
<input class="js-comment" type="text" placeholder="Webhook Name" required /> <input class="js-comment" type="text" placeholder="Webhook Name" required />
<br /> <br />
<select class="js-method"> <select class="js-method">
<option value="POST" selected>POST</option> <option value="POST" selected>POST</option>
<option value="PUT">PUT</option> <option value="PUT">PUT</option>
</select> </select>
<input placeholder="https://example.com/api/v1/updates" class="js-url" type="url" required /> <input placeholder="https://example.com/api/v1/updates" class="js-url" type="url" required />
<div class="js-headers"> <div class="js-headers">
<div class="js-header"> <div class="js-header">
<input placeholder="Header" class="js-key" type="text" /> <input placeholder="Header" class="js-key" type="text" />
<input placeholder="Value" class="js-value" 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-rm-header" hidden>[x]</button>
<button type="button" class="js-new-header">[+]</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>
</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>
<br /> <br />
<button class="js-create">Save Schedule</button> <button class="js-create">Save Schedule</button>
</form> </form>
</div>
</div> </div>
<script src="./ajquery.js"></script> <script src="./ajquery.js"></script>