273 lines
8.0 KiB
HTML
Executable File
273 lines
8.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>ts-node-websocket-microservice DEV</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
|
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script
|
|
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
|
|
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #FAFAFA;
|
|
}
|
|
#container {
|
|
display: flex;
|
|
}
|
|
#container .panel {
|
|
position: relative;
|
|
flex: 1;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
margin: 2rem 1rem;
|
|
padding: 2rem;
|
|
height: calc(100vh - 4rem);
|
|
background: #FFF;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
|
|
0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1rem;
|
|
background: rgb(255, 255, 255);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
.header .title {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
line-height: 3rem;
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
.panel .content {
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: 6rem 0;
|
|
}
|
|
.panel .content pre {
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
}
|
|
.message {
|
|
margin: 1rem 1rem;
|
|
}
|
|
.message.sent {
|
|
color: #66C;
|
|
}
|
|
.message.received {
|
|
color: #6C6;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 10;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1rem;
|
|
background: rgb(255, 255, 255);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
.controls > * {
|
|
width: auto;
|
|
margin: 0 0.5rem;
|
|
}
|
|
.controls > input {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<!-- WEBSOCKET -->
|
|
<div id="websocket" class="panel">
|
|
<div id="status" class="header">
|
|
<span id="disconnected" class="when-disconnected label label-default"
|
|
>disconnected</span
|
|
>
|
|
<span
|
|
id="connected"
|
|
style="display:none"
|
|
class="when-connected label label-success"
|
|
>connected</span
|
|
>
|
|
<h2 class="title">Websocket</h2>
|
|
<button
|
|
id="doOpen"
|
|
type="button"
|
|
class="when-disconnected btn btn-success btn-sm"
|
|
>
|
|
open
|
|
</button>
|
|
<button
|
|
id="doClose"
|
|
style="display: none"
|
|
type="button"
|
|
class="when-connected btn btn-danger btn-sm"
|
|
>
|
|
close
|
|
</button>
|
|
</div>
|
|
<div id="ws-responses" class="content"></div>
|
|
<form id="ws-controls" class="controls">
|
|
<select id="ws-type" class="form-control">
|
|
<option value="contribution:disclosure">
|
|
contribution:disclosure
|
|
</option>
|
|
</select>
|
|
<input
|
|
id="ws-payload"
|
|
class="form-control"
|
|
type="text"
|
|
placeholder="Payload JSON, must be valid JSON"
|
|
disabled
|
|
/>
|
|
<button class="btn btn-primary">
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
// let socket = null;
|
|
|
|
// const addMessage = (type, payload) => {
|
|
// $("#ws-responses").prepend(`
|
|
// <div class="message ${type}">
|
|
// <div class="message-info">
|
|
// ${type} at ${new Date().toLocaleTimeString()}
|
|
// </div>
|
|
// <pre>${JSON.stringify(payload, null, 2)}</pre>
|
|
// </div>
|
|
// `);
|
|
// };
|
|
|
|
// const createWebSocket = () => {
|
|
// socket = new WebSocket("ws://localhost:$$WS_PORT", "$$API_SECRET_KEY");
|
|
// $("#ws-payload").prop('disabled', false);
|
|
// socket.addEventListener("open", function(event) {
|
|
// $(".when-connected").show();
|
|
// $(".when-disconnected").hide();
|
|
// });
|
|
// socket.addEventListener("close", function(event) {
|
|
// $(".when-connected").hide();
|
|
// $(".when-disconnected").show();
|
|
// });
|
|
// socket.addEventListener("message", function(event) {
|
|
// const json = JSON.parse(event.data);
|
|
// console.log("Message from server ", event.data);
|
|
// addMessage('received', json);
|
|
// });
|
|
// };
|
|
|
|
// $("#ws-controls").on('submit', (ev) => {
|
|
// ev.preventDefault();
|
|
// const type = $("#ws-type").val();
|
|
// const payload = $("#ws-payload").val();
|
|
// try {
|
|
// const message = {
|
|
// type: type,
|
|
// payload: JSON.parse(payload),
|
|
// };
|
|
// socket.send(JSON.stringify(message));
|
|
// console.log("Sending message to server:", message);
|
|
// addMessage('sent', message);
|
|
// } catch(err) {
|
|
// alert('Error: ' + err.message);
|
|
// }
|
|
// });
|
|
|
|
// $("#ws-close").click(() => {
|
|
// socket.close();
|
|
// });
|
|
|
|
// $("#ws-open").click(() => {
|
|
// socket && socket.close();
|
|
// createWebSocket();
|
|
// });
|
|
// createWebSocket();
|
|
</script>
|
|
|
|
|
|
<!-- REST API -->
|
|
<div id="rest-api" class="panel">
|
|
<div class="header">
|
|
<h2 class="title">REST API</h2>
|
|
</div>
|
|
<div id="rest-response" class="content">
|
|
<pre>Send a request to view the response</pre>
|
|
</div>
|
|
<form id="rest-controls" class="controls">
|
|
<select id="rest-endpoint" class="form-control">
|
|
<option value="GET /contribution/addresses">
|
|
GET /contribution/addresses
|
|
</option>
|
|
<option value="POST /contribution/disclosure">
|
|
POST /contribution/disclosure
|
|
</option>
|
|
</select>
|
|
<input
|
|
id="rest-payload"
|
|
class="form-control"
|
|
type="text"
|
|
placeholder="Payload JSON, must be valid JSON"
|
|
/>
|
|
<button class="btn btn-primary">
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const renderResponse = (res) => {
|
|
$("#rest-response").html(`<pre>${JSON.stringify(res, null, 2)}</pre>`);
|
|
};
|
|
|
|
const sendRequest = (path, method, data) => {
|
|
const base = 'http://localhost:$$REST_PORT';
|
|
let query;
|
|
let body;
|
|
$.ajax(`${base}${path}`, {
|
|
method,
|
|
data,
|
|
headers: { 'Authorization': '$$API_SECRET_KEY' },
|
|
})
|
|
.then(res => renderResponse(res))
|
|
.catch(err => renderResponse(err));
|
|
};
|
|
|
|
$("#rest-api").on('submit', (ev) => {
|
|
ev.preventDefault();
|
|
const endpoint = $("#rest-endpoint").val();
|
|
const payloadJson = $("#rest-payload").val();
|
|
try {
|
|
const [method, path] = endpoint.split(' ');
|
|
const payload = JSON.parse(payloadJson);
|
|
sendRequest(path, method, payload);
|
|
} catch(err) {
|
|
alert('Error: ' + err.message);
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|