Skip to content

Commit

Permalink
Merge pull request #56 from Blue-Bash/ft-frontEnd_2
Browse files Browse the repository at this point in the history 
Ft front end 2
  • Loading branch information
@lAngelP
lAngelP authored Jan 15, 2019
2 parents 9133b79 + 15613c2 commit c233ea2
Show file tree
Hide file tree
Showing 6 changed files with 286 additions and 89 deletions.
4 changes: 2 additions & 2 deletions demo/src/main/java/urlshortener/demo/repository/impl/StatsRepositoryHook.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ public V get(K key) {
@Override
public void remove(K key) {
if(repo != null) repo.remove(key);
metrics.counter(this.key + ".deleted").increment();
metrics.counter(this.key + ".removed").increment();
metrics.counter(this.key + ".now").increment(-1.0);
}

@Override
public void removeAll() {
metrics.counter(key + ".deleted").increment(getCount());
metrics.counter(key + ".removed").increment(getCount());
metrics.counter(key + ".now").increment(getCount());
if(repo != null) repo.removeAll();
}
Expand Down
50 changes: 47 additions & 3 deletions demo/src/main/resources/static/css/landing-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/

body {
html,body
{
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

h1,
Expand All @@ -18,6 +24,8 @@ h6 {
font-weight: 700;
}



header.masthead {
position: relative;
background-color: #294028;
Expand Down Expand Up @@ -178,6 +186,42 @@ header.masthead h1 {


footer.footer {
padding-top: 4rem;
padding-bottom: 4rem;
padding-top: 1rem;
padding-bottom: 1rem;
}

.stats {
position: relative;
background-color: #366344;
background-size: cover;
padding-top: 7rem;
padding-bottom: 0rem;
}

.stats .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}

.check-uri {
position: relative;
background-color: #454645;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem;
}

.check-uri .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
71 changes: 33 additions & 38 deletions demo/src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@

</head>

<body>
<body >

<!-- Navigation -->
<nav class="navbar navbar-light bg-light static-top">
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">TinyURI</a>
<a class="btn btn-primary" href="/stats">Stats</a>
<a class="btn btn-primary" href="/stats.html">Stats</a>
</div>
</nav>

Expand Down Expand Up @@ -65,39 +65,6 @@ <h1 class="mb-5">Generate a short URI and a QR for your webpage</h1>
<input id="customName" type="text" class="center-block form-control input-lg"
title="Enter custom name" placeholder="Custom name">
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="qr-now"></span>&nbsp;QRs now<br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="qr-created"></span>&nbsp;QRs created <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="qr-removed"></span>&nbsp;QRs removed <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="qr-accessed"></span>&nbsp;QRs accessed <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="uris-now"></span>&nbsp;URIs now<br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="uris-created"></span>&nbsp;URIs created <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="uris-removed"></span>&nbsp;URIs removed <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="uris-accessed"></span>&nbsp;URIs accessed <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="cpu-usage"></span>% CPU usage <br />
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="system-cpu-usage"></span>% system CPU usage <br/>
</div>
<div class="input-group input-group-lg col-lg-12">
<span id="system-memory-usage"></span>&nbsp;MB of memory used.<br/>
</div>
</form>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
Expand Down Expand Up @@ -128,12 +95,12 @@ <h1 class="mb-5">Generate custom QR</h1>
</div>
<div class="form-group">
<label for="qrWidthInput">QR Width</label>
<input type="number" id="qrWidthInput" class="form-control form-control-lg" >
<input type="number" id="qrWidthInput" class="form-control form-control-lg" placeholder="500" >
<small class="form-text text-muted">Must be a integer number o left empty for default.</small>
</div>
<div class="form-group">
<label for="qrHeightInput">QR Height</label>
<input type="number" id="qrHeightInput" class="form-control form-control-lg" >
<input type="number" id="qrHeightInput" class="form-control form-control-lg" placeholder="500" >
<small class="form-text text-muted">Must be a integer number o left empty for default.</small>
</div>
<button type="submit" class="btn btn-primary btn-primary">Generate QR</button>
Expand All @@ -149,6 +116,34 @@ <h1 class="mb-5">Generate custom QR</h1>
</div>
</header>

<!-- Check URI -->
<section class="check-uri text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Check availability of your URI</h2>
</div>
<div class="col-md-10 col-lg-8 col-xl-6 mx-auto">
<form id="check">
<div class="form-group">
<label for="checkUriInput">Your shortened URI code</label>
<input type="text" id="checkUriInput" class="form-control form-control-lg" placeholder="http://tinyuri.xyz/uri/######">
<small class="form-text text-muted">After "http://tinyuri.xyz/".</small>
</div>
<button type="submit" class="btn btn-primary btn-light">Check</button>
</form>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<div class="col-sm-12 text-center">
<br />
<div id="checkUriResult"></div>
</div>
</div>
</div>
</div>
</section>

<!-- Edit URI -->
<section class="call-to-action text-white text-center">
<div class="overlay"></div>
Expand Down
64 changes: 18 additions & 46 deletions demo/src/main/resources/static/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,3 @@
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
}

function updateField(json, key, multiplier, decimals){
if(decimals === undefined) decimals = 0;
if(multiplier === undefined) multiplier = 1;
var htmlID = key.replaceAll(".", "-");
$("#" + htmlID).text((multiplier * Number(json[key])).toLocaleString(undefined,{minimumFractionDigits:decimals}));
}

function startSockJS(){
var socket = new SockJS('/live-stats');
var stompClient = Stomp.over(socket);
var sessionId = "";

stompClient.connect({}, function (frame) {
var url = stompClient.ws._transport.url;
url = url.replace(
"ws://localhost:8080/live-stats", "");
url = url.replace("/websocket", "");
url = url.replace(/^[0-9]+\//, "");
console.log("Your current session is: " + url);
sessionId = url;

stompClient.subscribe('/stats/live', function (msgOut) {
//handle messages
var json = $.parseJSON(msgOut.body);
updateField(json, "uris.created");
updateField(json, "uris.now");
updateField(json, "uris.accessed");
updateField(json, "uris.removed");
updateField(json, "qr.created");
updateField(json, "qr.now");
updateField(json, "qr.accessed");
updateField(json, "qr.removed");
updateField(json, "cpu.usage", 100, 2);
updateField(json, "system.cpu.usage", 100, 2);
updateField(json, "system.memory.usage", 1/(1048576), 2);
});
});

}

$(document).ready(
function () {
$("#shortener").submit(
Expand Down Expand Up @@ -157,5 +112,22 @@ $(document).ready(
}
});
});
startSockJS();

$("#check").submit(
function (event) {
event.preventDefault();
$.ajax({
type: "GET",
url: "/check/" + $("#checkUriInput").val(),
success: function () {
$("#checkUriResult").html(
"<div class='alert alert-success lead'><p>URI is available</p></div>");
},
error: function () {
$("#checkUriResult").html(
"<div class='alert alert-danger lead'>URI not available.</div>");
}
});
});

});
51 changes: 51 additions & 0 deletions demo/src/main/resources/static/js/stats.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
}

function updateField(json, key, multiplier, decimals){
if(decimals === undefined) decimals = 0;
if(multiplier === undefined) multiplier = 1;
var htmlID = key.replaceAll(".", "-");
$("#" + htmlID).text((multiplier * Number(json[key])).toLocaleString(undefined,{minimumFractionDigits:decimals}));
}

function startSockJS(){
var socket = new SockJS('/live-stats');
var stompClient = Stomp.over(socket);
var sessionId = "";

stompClient.connect({}, function (frame) {
var url = stompClient.ws._transport.url;
url = url.replace(
"ws://" + window.location.origin + "/live-stats", "");
url = url.replace("/websocket", "");
url = url.replace(/^[0-9]+\//, "");
console.log("Your current session is: " + url);
sessionId = url;

stompClient.subscribe('/stats/live', function (msgOut) {
//handle messages
var json = $.parseJSON(msgOut.body);
updateField(json, "uris.created");
updateField(json, "uris.now");
updateField(json, "uris.accessed");
updateField(json, "uris.removed");
updateField(json, "qr.created");
updateField(json, "qr.now");
updateField(json, "qr.accessed");
updateField(json, "qr.removed");
updateField(json, "cpu.usage", 100, 2);
updateField(json, "system.cpu.usage", 100, 2);
updateField(json, "system.memory.usage", 1/(1048576), 2);
$("#disconnectAlert").hide();
});
});

}

$(document).ready(
function () {
$("#disconnectAlert").hide();
startSockJS();
});
Loading

0 comments on commit c233ea2

Please sign in to comment.