summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAshymad <czilukim@o2.pl>2018-05-17 12:45:42 +0200
committerAshymad <czilukim@o2.pl>2018-05-17 12:45:42 +0200
commitff2d750c46865928aa279e2ebee971c000b3f8a3 (patch)
treec4fd86ad52fc3045785ac4e2b79e6295cc6507bd
parent524b3de0eeef4e2d1b907ccef6a131d64b95ae7d (diff)
Allow to specify key.
-rw-r--r--static/src/index.css8
-rw-r--r--static/src/index.html6
-rw-r--r--static/src/index.js53
3 files changed, 41 insertions, 26 deletions
diff --git a/static/src/index.css b/static/src/index.css
index c6d37ae..a35aded 100644
--- a/static/src/index.css
+++ b/static/src/index.css
@@ -2,6 +2,14 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+#keytext {
+ vertical-align: 250%;
+}
+
+input {
+ vertical-align: top;
+}
+
.graph .axis {
stroke-width: 1;
}
diff --git a/static/src/index.html b/static/src/index.html
index 6fdeb6a..85e1a7f 100644
--- a/static/src/index.html
+++ b/static/src/index.html
@@ -5,8 +5,10 @@
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
- <div id="title">Connecting...</div>
- <div id="slider"></div>
+ <span id="keytext">Key:</span>
+ <input id="keyinput" type="text"></input>
+ <input type="button" id="keybutton" value="Connect">
+ <span id="slider"></span>
<div class="graph"></div>
</body>
</html>
diff --git a/static/src/index.js b/static/src/index.js
index 7df6f28..024ace9 100644
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -8,32 +8,37 @@ const beAPI = `${window.location.protocol}//${window.location.host}/api/`
var client;
var subscription;
-d3.json(`${beAPI}stomp`)
- .then((res) => {
- client = Stomp.client(res.url)
- client.debug = null
- client.connect(res.login, res.passcode,
- on_connect,
- (error) => {
- console.log(error)
- })
- })
- .catch((err) => {
- console.log(err)
- })
+d3.select("#keybutton").on("click", start_connection)
+
+function start_connection() {
+ d3.json(`${beAPI}stomp`)
+ .then((res) => {
+ client = Stomp.client(res.url)
+ client.debug = null
+ client.connect(res.login, res.passcode,
+ on_connect,
+ (error) => {
+ console.log(error)
+ })
+ })
+ .catch((err) => {
+ console.log(err)
+ })
+}
function on_connect() {
- d3.json(`${beAPI}binding/${Math.floor(Math.random()*1000000000)}`, {
- 'method': 'PUT',
- 'body': JSON.stringify({'routing_key': 'pc.251756432899072'}),
- 'headers': {'content-type': 'application/json'}})
+ let routing_key = d3.select("#keyinput").property("value")
+ d3.json(`${beAPI}binding/${Math.floor(Math.random()*1000000000)}`,
+ {
+ 'method': 'PUT',
+ 'body': JSON.stringify({'routing_key': routing_key}),
+ 'headers': {'content-type': 'application/json'}
+ })
.then((res) => {
subscription = client
.subscribe(`/amq/queue/${res.queue_name}`,
on_message)
- document.getElementById("title")
- .textContent = `Reading from: ${res.queue_name}`;
-
+ console.log("Connected to: " + res.queue_name + " Key: " + routing_key)
})
.catch((err) => {
console.log(err)
@@ -53,7 +58,7 @@ const limit = 60 * 5,
var now = new Date(Date.now() - duration)
var width = window.innerWidth - 20,
- height = window.innerHeight - 50
+ height = window.innerHeight - 100
const domain = 2
@@ -150,9 +155,9 @@ var slider = d3s.sliderHorizontal()
});
d3.select("#slider").append("svg")
- .attr("width", width)
- .attr("height", 100)
+ .attr("width", width/1.5)
+ .attr("height", 70)
.append("g")
- .attr("transform", "translate(30,30)")
+ .attr("transform", "translate(30,10)")
.call(slider);