Make it better.

This commit is contained in:
Klaus-Uwe Mitterer 2017-08-06 20:43:07 +02:00
parent 6e1a199a31
commit 87df493aa6
12 changed files with 75 additions and 836 deletions

2
.gitignore vendored
View file

@ -1 +1 @@
ugly.bat config.php

6
bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

8
config.dist.php Normal file
View file

@ -0,0 +1,8 @@
<?php
$servername = "localhost";
$username = "speedtest";
$password = "";
$dbname = "speedtest";
?>

View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
</head>
<body>
<h1>Speedtest</h1>
<h4>IP Address</h4>
<p id="ip"></p>
<h4>Download</h4>
<p id="download"></p>
<h4>Upload</h4>
<p id="upload"></p>
<h4>Latency</h4>
<p id="ping"></p>
<script type="text/javascript">
var w = new Worker('speedtest_worker.min.js') // create new worker
setInterval(function () { w.postMessage('status') }, 100) // ask for status every 100ms
w.onmessage = function (event) { // when status is received, split the string and put the values in the appropriate fields
var data = event.data.split(';') // string format: status;download;upload;ping (speeds are in mbit/s) (status: 0=not started, 1=downloading, 2=uploading, 3=ping, 4=done, 5=aborted)
document.getElementById('download').textContent = data[1] + ' Mbit/s'
document.getElementById('upload').textContent = data[2] + ' Mbit/s'
document.getElementById('ping').textContent = data[3] + ' ms, ' + data[5] + ' ms jitter'
document.getElementById('ip').textContent = data[4]
}
w.postMessage('start') // start the speedtest (default params. keep garbage.php and empty.dat in the same directory as the js file)
</script>
</body>
</html>

View file

@ -1,91 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
}
div.test {
display: inline-block;
margin: 1em;
text-align: center;
}
div.testName,
div.meterUnit {
font-size: 3vw;
}
div.meter {
font-size: 6vw;
line-height: 1.5em;
height: 1.5em !important;
}
.flash {
animation: flash 0.6s linear infinite;
}
@keyframes flash {
0% { opacity: 0.6; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<h1>Speedtest</h1>
<div class="test">
<div class="testName">Download</div>
<div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">Upload</div>
<div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">Latency</div>
<div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
<div class="meterUnit">ms</div>
</div>
<div class="test">
<div class="testName">Jitter</div>
<div class="meter">&nbsp;<span id="jitter"></span>&nbsp;</div>
<div class="meterUnit">ms</div>
</div>
<div id="ip"></div>
<script type="text/javascript">
var w = new Worker('speedtest_worker.min.js')
var interval = setInterval(function () { w.postMessage('status') }, 100)
w.onmessage = function (event) {
var data = event.data.split(';')
var status = Number(data[0])
var dl = document.getElementById('download')
var ul = document.getElementById('upload')
var ping = document.getElementById('ping')
var ip = document.getElementById('ip')
var jitter = document.getElementById('jitter')
dl.className = status === 1 ? 'flash' : ''
ping.className = status === 2 ? 'flash' : ''
jitter.className = ul.className = status === 3 ? 'flash' : ''
if (status >= 4) {
clearInterval(interval)
}
dl.textContent = data[1]
ul.textContent = data[2]
ping.textContent = data[3]
jitter.textContent = data[5]
ip.textContent = 'Your IP: ' + data[4]
}
w.postMessage('start {"url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "time_dl": "10", "time_ul": "15", "count_ping": "30"}') // start with custom parameters. paths are relative to js file. you can omit parameters that you don't want to change
</script>
</body>
</html>

View file

@ -1,133 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
}
div.test {
display: inline-block;
margin: 1em;
font-size: 2vw;
min-width: 20vw;
text-align: center;
}
div.testName,
div.meterUnit {
font-size: 1em;
}
div.meter {
font-size: 1.5em;
line-height: 1.5em;
height: 2em !important;
}
.flash {
animation: flash 0.6s linear infinite;
}
@keyframes flash {
0% { opacity: 0.6; }
50% { opacity: 1; }
}
a {
display: inline-block;
border: 0.15em solid #000000;
padding: 0.3em 0.5em;
margin: 0.6em;
color: #000000;
text-decoration: none;
}
#ip {
margin: 0.8em 0;
font-size: 1.2em;
}
@media all and (max-width: 50em) {
div.test {
font-size: 2em;
}
}
</style>
<script type="text/javascript">
var w = null
function runTest() {
document.getElementById('startBtn').style.display = 'none'
document.getElementById('testArea').style.display = ''
document.getElementById('abortBtn').style.display = ''
w = new Worker('speedtest_worker.min.js')
var interval = setInterval(function () { w.postMessage('status') }, 100)
w.onmessage = function (event) {
var data = event.data.split(';')
var status = Number(data[0])
var dl = document.getElementById('download')
var ul = document.getElementById('upload')
var ping = document.getElementById('ping')
var ip = document.getElementById('ip')
var jitter = document.getElementById('jitter')
dl.className = status === 1 ? 'flash' : ''
ping.className = status === 2 ? 'flash' : ''
jitter.className = ul.className = status === 3 ? 'flash' : ''
if (status >= 4) {
clearInterval(interval)
document.getElementById('abortBtn').style.display = 'none'
document.getElementById('startBtn').style.display = ''
w = null
}
if (status === 5) {
document.getElementById('testArea').style.display = 'none'
}
dl.textContent = data[1]
ul.textContent = data[2]
ping.textContent = data[3]
jitter.textContent = data[5]
ip.textContent = data[4]
}
w.postMessage('start')
}
function abortTest() {
if (w) w.postMessage('abort')
}
</script>
</head>
<body>
<h1>Speedtest</h1>
<div id="testArea" style="display:none">
<div id="ip">Please wait...</div>
<div class="test">
<div class="testName">Download</div>
<div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">Upload</div>
<div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
<div class="meterUnit">Mbit/s</div>
</div>
<div class="test">
<div class="testName">Latency</div>
<div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
<div class="meterUnit">ms</div>
</div>
<div class="test">
<div class="testName">Jitter</div>
<div class="meter">&nbsp;<span id="jitter"></span>&nbsp;</div>
<div class="meterUnit">ms</div>
</div>
<br/>
<a href="javascript:abortTest()" id="abortBtn">Abort</a>
</div>
<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
</body>
</html>

View file

@ -1,197 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
font-family: 'Open Sans';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
div.meter {
display: inline-block;
height: 300px;
width: 400px;
text-align: center;
font-size: 6vw;
}
div#testArea {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
a {
text-decoration: none;
}
.button {
display: inline-block;
margin: 10px 5px 0 2px;
padding: 16px 40px;
border-radius: 5px;
font-size: 18px;
border: none;
background: #34aadc;
color: white;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
font-family: 'Roboto';
}
#ip {
margin: 1em 0;
font-size: 1.2em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js"></script>
<script type="text/javascript">
var w = null
var ggdl, ggul, ggping
function runTest() {
w = new Worker('speedtest_worker.min.js')
var interval = setInterval(function () { w.postMessage('status') }, 100)
document.getElementById('abortBtn').style.display = ''
document.getElementById('startBtn').style.display = 'none'
w.onmessage = function (event) {
var data = event.data.split(';')
var status = Number(data[0])
if (status >= 4) {
clearInterval(interval)
document.getElementById('abortBtn').style.display = 'none'
document.getElementById('startBtn').style.display = ''
w = null
}
updateGauge(ggdl, data[1])
updateGauge(ggul, data[2])
updateGauge(ggping, data[3])
document.getElementById('ip').textContent = 'Your IP: ' + data[4]
updateGauge(ggjitter, data[5])
}
w.postMessage('start {"time_ul": "10", "time_dl": "10", "count_ping": "50", "url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "url_getIp": "getIP.php"}')
}
function abortTest() {
if (w) w.postMessage('abort')
}
document.addEventListener('DOMContentLoaded', function (event) {
ggdl = new JustGage({
id: 'ggdl',
title: 'Download',
label: 'Mbit/s',
titleFontFamily: 'Open Sans',
valueFontFamily: 'Open Sans',
refreshAnimationTime: 300,
value: 0,
min: 0,
max: 10,
decimals: 2,
formatNumber: true,
humanFriendly: false,
levelColors: [
'#999999',
'#339933'
]
})
ggul = new JustGage({
id: 'ggul',
title: 'Upload',
label: 'Mbit/s',
titleFontFamily: 'Open Sans',
valueFontFamily: 'Open Sans',
refreshAnimationTime: 300,
value: 0,
min: 0,
max: 10,
decimals: 2,
formatNumber: true,
humanFriendly: false,
levelColors: [
'#999999',
'#333399'
]
})
ggping = new JustGage({
id: 'ggping',
title: 'Ping',
label: 'ms',
titleFontFamily: 'Open Sans',
valueFontFamily: 'Open Sans',
refreshAnimationTime: 300,
value: 0,
min: 0,
max: 100,
decimals: 2,
formatNumber: true,
humanFriendly: false,
levelColors: [
'#999999',
'#993333'
]
})
ggjitter = new JustGage({
id: 'ggjitter',
title: 'Jitter',
label: 'ms',
titleFontFamily: 'Open Sans',
valueFontFamily: 'Open Sans',
refreshAnimationTime: 300,
value: 0,
min: 0,
max: 100,
decimals: 2,
formatNumber: true,
humanFriendly: false,
levelColors: [
'#999999',
'#993333'
]
})
})
function updateGauge(gauge, value) {
// Alway use next power of 2 as maximum
var max = Math.max(Math.pow(2, Math.ceil(Math.log2(value))), gauge.config.max)
// Refresh the gauge
gauge.refresh(value, max)
}
</script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Roboto:400,500,700" rel="stylesheet">
</head>
<body>
<h1>Speed Test</h1>
<div id="testArea">
<div class="meter" id="ggdl"></div>
<div class="meter" id="ggul"></div>
<div class="meter" id="ggping"></div>
<div class="meter" id="ggjitter"></div>
</div>
<div id="ip"></div>
<div>
<a href="javascript:runTest()" id="startBtn" class="button">Start</a>
<a href="javascript:abortTest()" id="abortBtn" class="button" style="display:none;">Abort</a>
</div>
<p>Fonts: <a href="https://fonts.google.com/">Google Fonts</a> | Gauges: <a href="http://justgage.com/">justgage.com</a></p>
</body>
</html>

View file

@ -1,256 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#startBtn {
display: inline-block;
border: 0.15em solid #000000;
padding: 0.3em 0.5em;
margin: 0.6em;
color: #000000;
text-decoration: none;
}
#ip {
margin: 0.8em 0;
font-size: 1.2em;
}
#chart1Area,
#chart2Area {
width: 100%;
max-width: 30em;
height: 10em;
display: block;
margin: 0 auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script type="text/javascript">
var w = null
function runTest() {
var chart1ctx = document.getElementById('chart1Area').getContext('2d')
var chart2ctx = document.getElementById('chart2Area').getContext('2d')
var dlDataset = {
label: 'Download',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0],
spanGaps: false
}
var ulDataset = {
label: 'Upload',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(192,192,75,0.4)',
borderColor: 'rgba(192,192,75,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(192,192,75,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(192,192,75,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0],
spanGaps: false
}
var pingDataset = {
label: 'Ping',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,220,75,0.4)',
borderColor: 'rgba(75,220,75,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,220,75,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,220,75,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false
}
var jitterDataset = {
label: 'Jitter',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(220,75,75,0.4)',
borderColor: 'rgba(220,75,75,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(220,75,75,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(220,75,75,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false
}
var chart1Options = {
type: 'line',
data: {
datasets: [dlDataset, ulDataset]
},
options: {
responsive: true,
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true
}
}],
yAxes: [{
display: true,
scaleLabel: 'Speed',
ticks: {
beginAtZero: true
}
}]
}
}
}
var chart2Options = {
type: 'line',
data: {
datasets: [pingDataset, jitterDataset]
},
options: {
responsive: true,
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true
}
}],
yAxes: [{
display: true,
scaleLabel: 'Latency',
ticks: {
beginAtZero: true
}
}]
}
}
}
var chart1 = new Chart(chart1ctx, chart1Options)
var chart2 = new Chart(chart2ctx, chart2Options)
document.getElementById('startBtn').style.display = 'none'
document.getElementById('testArea').style.display = ''
document.getElementById('abortBtn').style.display = ''
w = new Worker('speedtest_worker.min.js')
var interval = setInterval(function () { w.postMessage('status') }, 100)
w.onmessage = function (event) {
var data = event.data.split(';')
var status = Number(data[0])
if (status >= 4) {
clearInterval(interval)
document.getElementById('abortBtn').style.display = 'none'
document.getElementById('startBtn').style.display = ''
w = null
}
if (status === 5) {
document.getElementById('testArea').style.display = 'none'
}
if (status === 1 && Number(data[1]) > 0) {
chart1.data.datasets[0].data.push(Number(data[1]))
chart1.data.labels[chart1.data.datasets[0].data.length - 1] = ''
chart1.update()
}
if (status === 3 && Number(data[2]) > 0) {
chart1.data.datasets[1].data.push(Number(data[2]))
chart1.data.labels[chart1.data.datasets[1].data.length - 1] = ''
chart1.update()
}
if (status === 2 && Number(data[3]) > 0) {
chart2.data.datasets[0].data.push(Number(data[3]))
chart2.data.datasets[1].data.push(Number(data[5]))
chart2.data.labels[chart2.data.datasets[0].data.length - 1] = ''
chart2.data.labels[chart2.data.datasets[1].data.length - 1] = ''
chart2.update()
}
ip.textContent = data[4]
}
w.postMessage('start')
}
function abortTest() {
if (w) w.postMessage('abort')
}
</script>
</head>
<body>
<h1>Speedtest</h1>
<div id="testArea" style="display:none">
<p id="ip">Please wait...</p>
<h2>Speed</h2>
<canvas id="chart1Area"></canvas>
<h2>Latency</h2>
<canvas id="chart2Area"></canvas>
<br/>
<a href="javascript:abortTest()" id="abortBtn">Abort</a>
</div>
<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
<br/><br/> Charts by <a href="http://www.chartjs.org/">Chart.js</a>
</body>
</html>

View file

@ -1,119 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>Speedtest</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.st-block {
text-align: center;
}
.st-btn {
margin-top: -0.5rem;
margin-left: 1.5rem;
}
.st-value>span:empty::before {
content: "0.00";
color: #636c72;
}
#st-ip:empty::before {
content: "___.___.___.___";
color: #636c72;
}
</style>
</head>
<body class="my-4">
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3">
<p class="h1">
Speedtest
<button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button>
<button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
</p>
<p class="lead">
Your IP: <span id="st-ip"></span>
<input type="checkbox" id="st-ip-checkbox">
</p>
</div>
<div class="col-lg-3 col-md-6 mb-3 st-block">
<h3>Download</h3>
<p class="display-4 st-value"><span id="st-download"></span></p>
<p class="lead">Mbit/s</p>
<p><input type="checkbox" id="st-download-checkbox"></p>
</div>
<div class="col-lg-3 col-md-6 mb-3 st-block">
<h3>Upload</h3>
<p class="display-4 st-value"><span id="st-upload"></span></p>
<p class="lead">Mbit/s</p>
<p><input type="checkbox" id="st-upload-checkbox"></p>
</div>
<div class="col-lg-3 col-md-6 mb-3 st-block">
<h3>Ping</h3>
<p class="display-4 st-value"><span id="st-ping"></span></p>
<p class="lead">ms</p>
<p><input type="checkbox" id="st-ping-checkbox" checked></p>
</div>
<div class="col-lg-3 col-md-6 mb-3 st-block">
<h3>Jitter</h3>
<p class="display-4 st-value"><span id="st-jitter"></span></p>
<p class="lead">ms</p>
</div>
</div>
</div>
<script type="text/javascript">
var worker = null
function startTest() {
document.getElementById('st-start').hidden = true
document.getElementById('st-stop').hidden = false
worker = new Worker('speedtest_worker.min.js')
var interval = setInterval(function () { worker.postMessage('status') }, 100)
worker.onmessage = function (event) {
var download = document.getElementById('st-download')
var upload = document.getElementById('st-upload')
var ping = document.getElementById('st-ping')
var jitter = document.getElementById('st-jitter')
var ip = document.getElementById('st-ip')
var data = event.data.split(';')
var status = Number(data[0])
if (status >= 4) {
clearInterval(interval)
document.getElementById('st-start').hidden = false
document.getElementById('st-stop').hidden = true
w = null
}
if (status === 5) {
// speedtest cancelled, clear output data
data = []
}
download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
ping.textContent = data[3]
ip.textContent = data[4]
jitter.textContent = data[5]
}
var ip_checkbox = document.getElementById("st-ip-checkbox")
var dl_checkbox = document.getElementById("st-download-checkbox")
var ul_checkbox = document.getElementById("st-upload-checkbox")
var ping_checkbox = document.getElementById("st-ping-checkbox")
var str_parameters = []
if (!ip_checkbox.checked) {str_parameters.push('"url_getIp": "-1"')}
if (!dl_checkbox.checked) {str_parameters.push('"url_dl": "-1"')}
if (!ul_checkbox.checked) {str_parameters.push('"url_ul": "-1"')}
if (!ping_checkbox.checked) {str_parameters.push('"url_ping": "-1"')}
worker.postMessage('start {' + str_parameters.join(",") + '}')
}
function stopTest() {
if (worker) worker.postMessage('abort')
}
</script>
</body>
</html>

View file

@ -4,9 +4,9 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="referrer" content="no-referrer" /> <meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>Speedtest</title> <title>Kumi's Connection Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="bootstrap.min.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
.st-block { .st-block {
text-align: center; text-align: center;
@ -31,7 +31,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 mb-3"> <div class="col-sm-12 mb-3">
<p class="h1"> <p class="h1">
Speedtest Kumi's Connection Test
<button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button> <button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button>
<button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button> <button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
</p> </p>
@ -78,6 +78,7 @@
var data = event.data.split(';') var data = event.data.split(';')
var status = Number(data[0]) var status = Number(data[0])
console.log(status)
if (status >= 4) { if (status >= 4) {
clearInterval(interval) clearInterval(interval)
document.getElementById('st-start').hidden = false document.getElementById('st-start').hidden = false
@ -87,7 +88,18 @@
if (status === 5) { if (status === 5) {
// speedtest cancelled, clear output data // speedtest cancelled, clear output data
data = [] data = []
} }
if (status === 4) {
var http = new XMLHttpRequest()
p = 'ip='+ip.innerHTML+'&down='+download.innerHTML+'&up='+upload.innerHTML+'&ping='+ping.innerHTML+'&jitter='+jitter.innerHTML
http.open("POST", "store.php", true)
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
http.setRequestHeader("Content-length", p.length)
http.setRequestHeader("Connection", "close")
http.send(p)
}
download.textContent = (status==1&&data[1]==0)?"Starting":data[1] download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2] upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
ping.textContent = data[3] ping.textContent = data[3]

17
setup.php Normal file
View file

@ -0,0 +1,17 @@
<?php
require_once("config.php");
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE TABLE IF NOT EXISTS `speedtest` ( `id` int(11) NOT NULL AUTO_INCREMENT, `ip` text NOT NULL, `ts` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `down` text NOT NULL, `up` text NOT NULL, `ping` text NOT NULL, `jitter` text NOT NULL, `ua` text, PRIMARY KEY (`id`) );"
if (!mysqli_query($conn, $sql)) die('Error: ' . mysqli_error($conn));
mysqli_close($conn);
echo "OK";

27
store.php Normal file
View file

@ -0,0 +1,27 @@
<?php
include("config.php")
if (isset($_POST["ip"]) && isset($_POST["down"]) && isset($_POST["up"]) && isset($_POST["ping"]) && isset($_POST["jitter"])) {
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'INSERT INTO speedtest(ip, down, up, ping, jitter, ua) VALUES ("' . mysqli_real_escape_string($conn, $_POST['ip']) . '", "' . mysqli_real_escape_string($conn, $_POST['down']) . '", "' . mysqli_real_escape_string($conn, $_POST['up']) . '", "' . mysqli_real_escape_string($conn, $_POST['ping']) . '", "' . mysqli_real_escape_string($conn, $_POST['jitter']) . '", "' . mysqli_real_escape_string($conn, $_SERVER['HTTP_USER_AGENT']) . '");';
if (!mysqli_query($conn, $sql)) {
die('Error: ' . mysqli_error($conn));
}
mysqli_close($conn);
echo "OK";
} else {
header('HTTP/1.0 400 Bad Request');
}