<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/css/slate.min.css">
<style>
.title {
padding: 15px 10px;
text-transform: uppercase;
font-family: "PT Sans", sans-serif;
font-size: 1.2em;
font-weight: 500;
color: 0x888888;
text-align: center;
}
.item-draggable-list .delete-item {
right: 45px;
}
</style>
<script>
function getQueryParam(variable, defaultValue) {
var query = location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] === variable) {
return decodeURIComponent(pair[1]);
}
}
return defaultValue;
}
function onSubmit() {
// Set the return URL depending on the runtime environment
var return_to = getQueryParam("return_to", "pebblejs://close#");
var options = {
"url": document.getElementById("url").value,
"dataField": document.getElementById("dataField").value,
"bundleMax": document.getElementById("bundleMaxSize").value,
"bundleSeparator": encodeURIComponent(document.getElementById("bundleSeparator").value),
}
if (!document.getElementById("bundleEnable").checked) {
options.bundleMax = "1";
}
console.log("returning " + JSON.stringify(options));
document.location = return_to + encodeURIComponent(JSON.stringify(options));
}
function updateBundleVisibility() {
document.getElementById("bundleFields").style.display
= document.getElementById("bundleEnable").checked
? "block" : "none";
}
</script>
</head>
<body>
<div class="item-container">
<h1 class="title">Health Export</h1>
</div>
<div class="item-container">
<div class="item-container-header">Endpoint URL</div>
<div class="item-container-content">
<label class="item">
<input type="text" class="item-input" name="url" id="url" placeholder="http://example.com/post/path">
</label>
</div>
</div>
<div class="item-container">
<div class="item-container-header">Data Field Name</div>
<div class="item-container-content">
<label class="item">
<input type="text" class="item-input" name="dataField" id="dataField">
</label>
</div>
</div>
<div class="item-container">
<div class="item-container-header">Data Bundling</div>
<div class="item-container-content">
<label class="item">
Enable Data Bundling
<input type="checkbox" class="item-toggle" name="bundleEnable" id="bundleEnable" onchange="updateBundleVisibility();">
</label>
<div id=bundleFields>
<label class="item">
Max Bundle Size
<div class="item-input-wrapper item-slider-text">
<input type="text" class="item-input" name="bundleMaxSize" id="bundleMaxSize" value="1">
</div>
</label>
<label class="item">
Line Separator
<div class="item-input-wrapper">
<input type="text" class="item-input" name="bundleSeparator" id="bundleSeparator" placeholder="%0d%0a">
</div>
</label>
</div>
</div>
</div>
<div class="item-container">
<div class="button-container">
<input id="submitButton" type="button" class="item-button" value="SUBMIT" onClick="onSubmit()">
</div>
</div>
<script src="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/js/slate.min.js"></script>
<script>
const versionTag = getQueryParam("v");
if (versionTag) {
document.getElementsByTagName("h1")[0].childNodes[0].nodeValue = "Health Export " + versionTag;
}
var initBundleSize = parseInt(getQueryParam("bundle_max", "1"), 10);
if (!(initBundleSize >= 1)) initBundleSize = 1;
document.getElementById("url").value = getQueryParam("url", "");
document.getElementById("dataField").value = getQueryParam("data_field", "");
document.getElementById("bundleEnable").checked = (initBundleSize > 1);
document.getElementById("bundleMaxSize").value = initBundleSize;
document.getElementById("bundleSeparator").value = encodeURIComponent(getQueryParam("bundle_sep", ""));
updateBundleVisibility();
</script>
</body>
</html>