movitto/rippled.html

## rippled.html
<!--
  Small drop-in webpage to display rippled server status.

  To deploy download the following and place in the same web server directory as this file:
    - https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js
    - https://github.com/ripple/ripple-lib/releases/download/1.0.0/ripple-1.0.0-min.js
    - https://raw.githubusercontent.com/caldwell/renderjson/master/renderjson.js

  Then change RIPPLED_URI below to the location of your rippled server.
-->

<html>
  <head>
    <script src="lodash.js"></script>
    <script src="ripple-1.0.0-min.js"></script>
    <script src="renderjson.js"></script>

    <style>
      .renderjson a              { text-decoration: none; }
      .renderjson .disclosure    { color: crimson; font-size: 150%; }
      .renderjson .syntax        { color: grey; }
      .renderjson .string        { color: red; }
      .renderjson .number        { color: cyan; }
      .renderjson .boolean       { color: plum; }
      .renderjson .key           { color: lightblue; }
      .renderjson .keyword       { color: lightgoldenrodyellow; }
      .renderjson .object.syntax { color: lightseagreen; }
      .renderjson .array.syntax  { color: lightsalmon; }

      #header {
        font-size: 1.2em;
	font-weight: bold;
      }

      #output {
        background-color: #303030;
	padding: 10px;
	border-radius: 5px;
      }

      #loading{
	font-size: 0.8em;
	color: blue;
        margin-left: 10px;
	animation: 0.5s anim infinite alternate;
      }

      @keyframes anim {
        0%{
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div id="header"></div>
    <div id="output"></div>

    <script>
      const RIPPLED_URI = 'wss://s1.ripple.com';
      const SYNC_TIME   = 10; // in seconds

      renderjson.set_show_to_level(2);

      var header = document.getElementById('header');
      var output = document.getElementById('output');

      var parsed_uri = document.createElement('a');
          parsed_uri.href = RIPPLED_URI;
      header.appendChild(document.createTextNode(parsed_uri.hostname + " status:"));

      var loading = document.createElement("span");
          loading.id = "loading";
          loading.appendChild(document.createTextNode("Loading..."));
      header.appendChild(loading);

      const api = new ripple.RippleAPI({
        server: RIPPLED_URI
      });

      api.connect().then(() => {
        api.getServerInfo().then((info) => {
	  output.appendChild(renderjson(info));
	  loading.style.display = "none";

	  setInterval(function(){
	    loading.style.display = "inline";
            api.getServerInfo().then((info) => {

              output.innerHTML = "";
	      output.appendChild(renderjson(info));
	      loading.style.display = "none";
            });
	  }, SYNC_TIME * 1000);
        });
      }).then(() => {
      }).catch(console.error);
    </script>
  </body>
</html>
	<!--
	Small drop-in webpage to display rippled server status.

	To deploy download the following and place in the same web server directory as this file:
	- https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js
	- https://github.com/ripple/ripple-lib/releases/download/1.0.0/ripple-1.0.0-min.js
	- https://raw.githubusercontent.com/caldwell/renderjson/master/renderjson.js

	Then change RIPPLED_URI below to the location of your rippled server.
	-->

	<html>
	<head>
	<script src="lodash.js"></script>
	<script src="ripple-1.0.0-min.js"></script>
	<script src="renderjson.js"></script>

	<style>
	.renderjson a { text-decoration: none; }
	.renderjson .disclosure { color: crimson; font-size: 150%; }
	.renderjson .syntax { color: grey; }
	.renderjson .string { color: red; }
	.renderjson .number { color: cyan; }
	.renderjson .boolean { color: plum; }
	.renderjson .key { color: lightblue; }
	.renderjson .keyword { color: lightgoldenrodyellow; }
	.renderjson .object.syntax { color: lightseagreen; }
	.renderjson .array.syntax { color: lightsalmon; }

	#header {
	font-size: 1.2em;
	font-weight: bold;
	}

	#output {
	background-color: #303030;
	padding: 10px;
	border-radius: 5px;
	}

	#loading{
	font-size: 0.8em;
	color: blue;
	margin-left: 10px;
	animation: 0.5s anim infinite alternate;
	}

	@keyframes anim {
	0%{
	opacity: 0;
	}

	100% {
	opacity: 1;
	}
	}
	</style>
	</head>

	<body>
	<div id="header"></div>
	<div id="output"></div>

	<script>
	const RIPPLED_URI = 'wss://s1.ripple.com';
	const SYNC_TIME = 10; // in seconds

	renderjson.set_show_to_level(2);

	var header = document.getElementById('header');
	var output = document.getElementById('output');

	var parsed_uri = document.createElement('a');
	parsed_uri.href = RIPPLED_URI;
	header.appendChild(document.createTextNode(parsed_uri.hostname + " status:"));

	var loading = document.createElement("span");
	loading.id = "loading";
	loading.appendChild(document.createTextNode("Loading..."));
	header.appendChild(loading);

	const api = new ripple.RippleAPI({
	server: RIPPLED_URI
	});

	api.connect().then(() => {
	api.getServerInfo().then((info) => {
	output.appendChild(renderjson(info));
	loading.style.display = "none";

	setInterval(function(){
	loading.style.display = "inline";
	api.getServerInfo().then((info) => {

	output.innerHTML = "";
	output.appendChild(renderjson(info));
	loading.style.display = "none";
	});
	}, SYNC_TIME * 1000);
	});
	}).then(() => {
	}).catch(console.error);
	</script>
	</body>
	</html>