Skip to content
Permalink
Browse files

WebUI: Use Mustache.jl templates (#164)

  • Loading branch information...
nkottary committed May 21, 2019
1 parent 45a6ae9 commit 9a35bf28d80a5c6538cf1116da01ee70dbc68599
Showing with 159 additions and 119 deletions.
  1. +31 −2 Manifest.toml
  2. +1 −0 Project.toml
  3. +2 −0 src/webui/WebUI.jl
  4. +6 −84 src/webui/routes/select.jl
  5. +31 −0 src/webui/templates/index.tpl
  6. +77 −0 src/webui/templates/select.tpl
  7. +11 −33 src/webui/webutils.jl
@@ -87,6 +87,11 @@ version = "0.5.0"
deps = ["Markdown"]
uuid = "b77e0a4c-d291-57a0-90e8-8db25a27a240"

[[IteratorInterfaceExtensions]]
git-tree-sha1 = "a3f24677c21f5bbe9d2a714f95dcd58337fb2856"
uuid = "82899510-4779-5014-852e-03e436cf321d"
version = "1.0.0"

[[JSON]]
deps = ["Dates", "Distributed", "Mmap", "Sockets", "Test", "Unicode"]
git-tree-sha1 = "1f7a25b53ec67f5e9422f1f551ee216503f4a0fa"
@@ -137,6 +142,12 @@ version = "0.6.8"
[[Mmap]]
uuid = "a63ad114-7e13-5084-954f-fe012c677804"

[[Mustache]]
deps = ["Printf", "Tables"]
git-tree-sha1 = "d27b8b8b99c052ea1fdd40c678bfb2dfaec4e96e"
uuid = "ffc61752-8dc7-55ee-8c37-f3e9cdd09e70"
version = "0.5.12"

[[Mux]]
deps = ["AssetRegistry", "Base64", "HTTP", "Hiccup", "Lazy", "Pkg", "Sockets", "Test", "WebSockets"]
git-tree-sha1 = "5b41f03d63400c290bab4e1a49fb9ac36de1084a"
@@ -151,9 +162,9 @@ version = "1.1.0"

[[Parsers]]
deps = ["Dates", "Test"]
git-tree-sha1 = "e2e65679cc0b70f2baeb504c8d99c2fc6d1a5cdc"
git-tree-sha1 = "eaed2db080700f1013f0fc05667ecb2a082265a1"
uuid = "69de0a69-1ddd-5017-9359-2bf0b02dc9f0"
version = "0.3.3"
version = "0.3.5"

[[Pidfile]]
deps = ["FileWatching", "Test"]
@@ -177,6 +188,12 @@ uuid = "3fa0cd96-eef1-5676-8a61-b3b8758bbffb"
deps = ["Serialization"]
uuid = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"

[[Requires]]
deps = ["Test"]
git-tree-sha1 = "f6fbf4ba64d295e146e49e021207993b6b48c7d1"
uuid = "ae029012-a4dd-5104-9daa-d747884805df"
version = "0.5.2"

[[SHA]]
uuid = "ea8e919c-243c-51af-8825-aaa63cd721ce"

@@ -198,6 +215,18 @@ uuid = "2f01184e-e22b-5df5-ae63-d93ebab69eaf"
deps = ["LinearAlgebra", "SparseArrays"]
uuid = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"

[[TableTraits]]
deps = ["IteratorInterfaceExtensions"]
git-tree-sha1 = "b1ad568ba658d8cbb3b892ed5380a6f3e781a81e"
uuid = "3783bdb8-4a98-5b6b-af9a-565f29a5fe9c"
version = "1.0.0"

[[Tables]]
deps = ["IteratorInterfaceExtensions", "LinearAlgebra", "Requires", "TableTraits", "Test"]
git-tree-sha1 = "83b4a0261e5d01274f12b35d4c2212386fb15569"
uuid = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
version = "0.2.3"

[[Test]]
deps = ["Distributed", "InteractiveUtils", "Logging", "Random"]
uuid = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
@@ -16,6 +16,7 @@ JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
LibGit2 = "76f85450-5226-5b5a-8eaa-529ad045b433"
Logging = "56ddb016-857b-54e1-b83d-db4d58db5568"
MbedTLS = "739be429-bea8-5141-9913-cc70e7f3736d"
Mustache = "ffc61752-8dc7-55ee-8c37-f3e9cdd09e70"
Mux = "a975b10e-0019-58db-a62f-e48ff68538c9"
Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
Serialization = "9e88b42a-f829-5b0c-bbe9-9e923198166b"
@@ -12,6 +12,8 @@ using Pkg, Pkg.TOML
using Sockets
using TimeToLive
using Logging
using Mustache

using ..Messaging

const ROUTES = Dict(
@@ -1,88 +1,10 @@
# Step 4: Select a package.
function select(::HTTP.Request)
body = """
<script>
function poll_status(id) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '$(ROUTES[:STATUS])?id='+encodeURIComponent(id));
xhr.setRequestHeader('Content-Type', 'text/json');
xhr.onload = function() {
data = JSON.parse(xhr.responseText);
div = document.getElementById("reg-form");
var text = ""
if (xhr.status === 200) {
st = data["state"];
if (st == "success") {
console.log("Registration is done");
text = data["message"];
} else if (st == "errored") {
console.log("Registration errored");
text = "ERROR: " + data["message"];
} else if (st == "pending") {
console.log("Registration pending");
text = data["message"];
setTimeout(function () {poll_status(id);}, 5000);
} else {
console.log("Registration unknown state");
text = "Unknown state returned";
}
} else {
text = "ERROR: " + data["error"];
}
div.innerHTML = "<h4>" + text + "</h4>";
};
xhr.send();
}
/* Call /register and poll for status */
function do_register() {
var package = document.getElementById("package").value;
var ref = document.getElementById("ref").value;
var notes = document.getElementById("notes").value;
var button = document.getElementById("submitButton");
button.disabled = true;
button.value = "Please wait...";
var xhr = new XMLHttpRequest();
xhr.open('POST', '$(ROUTES[:REGISTER])');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
data = JSON.parse(xhr.responseText);
div = document.getElementById("reg-form");
if (xhr.status === 200) {
console.log("Success sending registration request. Polling for status");
div.innerHTML = "<h4>" + data["message"] + "</h4>";
poll_status(data["id"]);
} else {
console.log("Error occured while making registration request");
div.innerHTML = "<h4>ERROR: " + data["error"] + "</h4>";
}
};
xhr.send('package='+encodeURIComponent(package)+'&ref='+ref+'&notes='+encodeURIComponent(notes));
}
</script>
<div id="reg-form">
URL of package to register: <input type="text" size="50" id="package">
<br>
Git reference (branch/tag/commit): <input type="text" size="20" id="ref" value="master">
<br>
"""

if REGISTRY[].enable_release_notes
body *= """
Release notes (optional):
<br>
<textarea cols="80" rows="10" id="notes"></textarea>
<br>
"""
end

body *= """
<button id="submitButton" onclick="do_register()">Submit</button>
</div>
"""

body = render_from_file(
SELECT_TPL,
route_status=ROUTES[:STATUS],
route_register=ROUTES[:REGISTER],
enable_release_notes=REGISTRY[].enable_release_notes,
)
return html(body)
end
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registrator</title>
<style>
body {
background-color: #ddd;
text-align: center;
margin: auto;
max-width: 50em;
font-family: Helvetica, sans-serif;
line-height: 1.8;
color: #333;
}
a {
color: inherit;
}
h3, h4 {
color: #555;
}
</style>
</head>
<body>
<h1><a href="{{{:route_index}}}">Registrator</a></h1>
<h4>Registry URL: <a href="{{{:registry_url}}}" target="_blank">{{{:registry_url}}}</a></h3>
<h3>Click <a href="{{{:docs_url}}}" target="_blank">here</a> for usage instructions</h3>
<br>
{{{:body}}}
</body>
</html>
@@ -0,0 +1,77 @@
<div id="reg-form">
URL of package to register: <input type="text" size="50" id="package" />
<br />
Git reference (branch/tag/commit): <input type="text" size="20" id="ref" value="master" />
<br />

{{#:enable_release_notes}}
Release notes (optional):
<br />
<textarea cols="80" rows="10" id="notes"></textarea>
<br />
{{/:enable_release_notes}}

<button id="submitButton" onclick="do_register()">Submit</button>
</div>
<script>
function poll_status(id) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '{{{:route_status}}}?id='+encodeURIComponent(id));
xhr.setRequestHeader('Content-Type', 'text/json');
xhr.onload = function() {
data = JSON.parse(xhr.responseText);
div = document.getElementById("reg-form");
var text = ""
if (xhr.status === 200) {
st = data["state"];
if (st == "success") {
console.log("Registration is done");
text = data["message"];
} else if (st == "errored") {
console.log("Registration errored");
text = "ERROR: " + data["message"];
} else if (st == "pending") {
console.log("Registration pending");
text = data["message"];
setTimeout(function () {poll_status(id);}, 5000);
} else {
console.log("Registration unknown state");
text = "Unknown state returned";
}
} else {
text = "ERROR: " + data["error"];
}
div.innerHTML = "<h4>" + text + "</h4>";
};
xhr.send();
}
/* Call /register and poll for status */
function do_register() {
var package = document.getElementById("package").value;
var ref = document.getElementById("ref").value;
var notes = document.getElementById("notes").value;
var button = document.getElementById("submitButton");
button.disabled = true;
button.value = "Please wait...";
var xhr = new XMLHttpRequest();
xhr.open('POST', '{{{:route_register}}}');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
data = JSON.parse(xhr.responseText);
div = document.getElementById("reg-form");
if (xhr.status === 200) {
console.log("Success sending registration request. Polling for status");
div.innerHTML = "<h4>" + data["message"] + "</h4>";
poll_status(data["id"]);
} else {
console.log("Error occured while making registration request");
div.innerHTML = "<h4>ERROR: " + data["error"] + "</h4>";
}
};
xhr.send('package='+encodeURIComponent(package)+'&ref='+ref+'&notes='+encodeURIComponent(notes));
}
</script>
@@ -13,43 +13,21 @@ function getcookie(r::HTTP.Request, key::AbstractString, default="")
return ind === nothing ? default : cookies[ind].value
end

tplpath(tpl::AbstractString) = joinpath(@__DIR__, "templates", tpl)
const INDEX_TPL = tplpath("index.tpl")
const SELECT_TPL = tplpath("select.tpl")

# Return an HTML response.
html(body::AbstractString) = html(200, body)
function html(status::Int, body::AbstractString)
registry = REGISTRY[].url
doc = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registrator</title>
<style>
body {
background-color: #ddd;
text-align: center;
margin: auto;
max-width: 50em;
font-family: Helvetica, sans-serif;
line-height: 1.8;
color: #333;
}
a {
color: inherit;
}
h3, h4 {
color: #555;
}
</style>
</head>
<body>
<h1><a href="$(ROUTES[:INDEX])">Registrator</a></h1>
<h4>Registry URL: <a href="$registry" target="_blank">$registry</a></h3>
<h3>Click <a href="$DOCS" target="_blank">here</a> for usage instructions</h3>
<br>
$body
</body>
</html>
"""
doc = render_from_file(
INDEX_TPL,
route_index=ROUTES[:INDEX],
registry_url=registry,
docs_url=DOCS,
body=body,
)
return HTTP.Response(status, ["Content-Type" => "text/html"]; body=doc)
end

0 comments on commit 9a35bf2

Please sign in to comment.
You can’t perform that action at this time.