summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--static/src/index.css15
-rw-r--r--static/src/index.html12
-rw-r--r--static/src/index.js34
3 files changed, 38 insertions, 23 deletions
diff --git a/static/src/index.css b/static/src/index.css
index b0632a3..af4f947 100644
--- a/static/src/index.css
+++ b/static/src/index.css
@@ -2,16 +2,15 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
-#keytext {
- vertical-align: 250%;
+.header {
+ display: table;
}
-#is_connected {
- vertical-align: 250%;
-}
-
-input {
- vertical-align: top;
+.header span {
+ display:table-cell;
+ vertical-align:middle;
+ padding-right: 5px;
+ padding-left: 5px;
}
.graph .axis {
diff --git a/static/src/index.html b/static/src/index.html
index 48a4e31..d6ef941 100644
--- a/static/src/index.html
+++ b/static/src/index.html
@@ -5,11 +5,13 @@
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
- <span id="keytext">Key:</span>
- <input id="keyinput" type="text"></input>
- <input type="button" id="keybutton" value="Connect">
- <span id="slider"></span>
- <span id='is_connected'>Disconnected</span>
+ <div class="header">
+ <span id="keytext">Key:</span>
+ <span><input id="keyinput" type="text"></input></span>
+ <span><input type="button" id="keybutton" value="Connect"></span>
+ <span id="slider"></span>
+ <span id='is_connected'>Disconnected</span>
+ </div>
<div class="graph"></div>
</body>
</html>
diff --git a/static/src/index.js b/static/src/index.js
index 51c49a1..dc65355 100644
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -3,14 +3,24 @@ import Stomp from '@stomp/stompjs';
import style from './index.css';
-const beAPI = `${window.location.protocol}//${window.location.host}/api/`
var client;
var subscription;
-
-d3.select("#keybutton").on("click", start_connection)
+var routing_key;
+
+d3.select("#keybutton").on("click", () => {
+ let rk = d3.select("#keyinput").property("value")
+ if (rk !== routing_key && rk !== "") {
+ if (client) {
+ subscription.unsubscribe()
+ on_connect()
+ } else {
+ start_connection()
+ }
+ }
+})
function start_connection() {
- d3.json(`${beAPI}stomp`)
+ d3.json(`/api/stomp`)
.then((res) => {
client = Stomp.client(res.url)
client.debug = null
@@ -18,6 +28,11 @@ function start_connection() {
on_connect,
(error) => {
console.log(error)
+ },
+ (close_event) => {
+ d3.select("#is_connected").text("Disconnected")
+ client = null
+ routing_key = null
})
})
.catch((err) => {
@@ -26,9 +41,9 @@ function start_connection() {
}
function on_connect() {
- let routing_key = d3.select("#keyinput").property("value")
- d3.select("#is_connected").text(`Connected to ${routing_key}`)
- d3.json(`${beAPI}binding/${Math.floor(Math.random()*1000000000)}`,
+ routing_key = d3.select("#keyinput").property("value")
+ d3.select("#is_connected").text(`Connected to queue (${routing_key})`)
+ d3.json(`/api/binding/${Math.floor(Math.random()*1000000000)}`,
{
'method': 'PUT',
'body': JSON.stringify({'routing_key': routing_key}),
@@ -38,7 +53,6 @@ function on_connect() {
subscription = client
.subscribe(`/amq/queue/${res.queue_name}`,
on_message)
- console.log("Connected to: " + res.queue_name + " Key: " + routing_key)
})
.catch((err) => {
console.log(err)
@@ -155,8 +169,8 @@ var slider = d3.sliderHorizontal()
});
d3.select("#slider").append("svg")
- .attr("width", width/1.8)
- .attr("height", 70)
+ .attr("width", width/2 + 70)
+ .attr("height", 50)
.append("g")
.attr("transform", "translate(30,10)")
.call(slider);