First try AJAX

This commit is contained in:
d3m1g0d
2019-04-06 15:18:43 +02:00
parent 2e4c7e2683
commit fc112d997b
3 changed files with 147 additions and 137 deletions

View File

@@ -1,4 +1,7 @@
function kebab () {
$('#values').html('kebab');
console.log('yeet');
$('#update').click(updateData())
function updateData () {
const url = 'http:' + window.location.hostname + ':5000/data'
$.get(url, function (data, status) {
$('#debug').text(data)
})
}

View File

@@ -1,56 +1,56 @@
#A {
background-color: #7e00db;
color: white;
background-color: #7e00db;
color: white;
}
#B {
background-color: #2300ff;
color: white;
background-color: #2300ff;
color: white;
}
#C {
background-color: #007bff;
color: white;
background-color: #007bff;
color: white;
}
#D {
background-color: #00eaff;
background-color: #00eaff;
}
#E {
background-color: #00ff00;
background-color: #00ff00;
}
#F {
background-color: #70ff00;
background-color: #70ff00;
}
#G {
background-color: #c3ff00;
background-color: #c3ff00;
}
#H {
background-color: #ffef00;
background-color: #ffef00;
}
#R {
background-color: #ff9b00;
background-color: #ff9b00;
}
#I, #S {
background-color: #ff0000;
background-color: #ff0000;
}
#J {
background-color: #f60000;
background-color: #f60000;
}
#T {
background-color: #c80000;
color: white;
background-color: #c80000;
color: white;
}
#U {
background-color: #8d0000;
color: white;
background-color: #8d0000;
color: white;
}

View File

@@ -1,119 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
<title>TeraHz</title>
</head>
<body>
<div class="container text-center"><h1>TeraHz</h1></div>
<div class="container">
<h3>Vrednosti:</h3><br>
<button class="btn btn-primary m-1 float-right">Get data</button>
<table class="table table-sm">
<thead class="thead-dark">
<tr>
<th>Band</th>
<th>Wavelength [nm]</th>
<th>Irradiance [μW/cm²]</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>410 nm</td>
<td id="A">---</td>
</tr>
<tr>
<td>B</td>
<td>435 nm</td>
<td id="B">---</td>
</tr>
<tr>
<td>C</td>
<td>460 nm</td>
<td id="C">---</td>
</tr>
<tr>
<td>D</td>
<td>485 nm</td>
<td id="D">---</td>
</tr>
<tr>
<td>E</td>
<td>510 nm</td>
<td id="E">---</td>
</tr>
<tr>
<td>F</td>
<td>535 nm</td>
<td id="F">---</td>
</tr>
<tr>
<td>G</td>
<td>560 nm</td>
<td id="G">---</td>
</tr>
<tr>
<td>H</td>
<td>585 nm</td>
<td id="H">---</td>
</tr>
<tr>
<td>R</td>
<td>610 nm</td>
<td id="R">---</td>
</tr>
<tr>
<td>I</td>
<td>645 nm</td>
<td id="I">---</td>
</tr>
<tr>
<td>S</td>
<td>680 nm</td>
<td id="S">---</td>
</tr>
<tr>
<td>J</td>
<td>705 nm</td>
<td id="J">---</td>
</tr>
<tr>
<td>T</td>
<td>730 nm</td>
<td id="T">---</td>
</tr>
<tr>
<td>U</td>
<td>760 nm</td>
<td id="U">---</td>
</tr>
<tr class="table-secondary">
<td>V</td>
<td>810 nm</td>
<td id="V">---</td>
</tr>
<tr class="table-secondary">
<td>W</td>
<td>860 nm</td>
<td id="W">---</td>
</tr>
<tr class="table-secondary">
<td>K</td>
<td>900 nm</td>
<td id="K">---</td>
</tr>
<tr class="table-secondary">
<td>L</td>
<td>940 nm</td>
<td id="L">---</td>
</tr>
</table>
</div>
<script src="lib/bootstrap.bundle.min.js"></script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="frontend.js"></script>
</body>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
<title>TeraHz</title>
</head>
<body>
<div class="container text-center">
<h1>TeraHz</h1>
</div>
<div class="container">
<h3>Vrednosti:</h3><br>
<button id="update" class="btn btn-primary m-1 float-right">Get data</button>
<p id="debug">
</p>
<table class="table table-sm">
<thead class="thead-dark">
<tr>
<th>Band</th>
<th>Wavelength [nm]</th>
<th>Irradiance [μW/cm²]</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>410 nm</td>
<td id="A">---</td>
</tr>
<tr>
<td>B</td>
<td>435 nm</td>
<td id="B">---</td>
</tr>
<tr>
<td>C</td>
<td>460 nm</td>
<td id="C">---</td>
</tr>
<tr>
<td>D</td>
<td>485 nm</td>
<td id="D">---</td>
</tr>
<tr>
<td>E</td>
<td>510 nm</td>
<td id="E">---</td>
</tr>
<tr>
<td>F</td>
<td>535 nm</td>
<td id="F">---</td>
</tr>
<tr>
<td>G</td>
<td>560 nm</td>
<td id="G">---</td>
</tr>
<tr>
<td>H</td>
<td>585 nm</td>
<td id="H">---</td>
</tr>
<tr>
<td>R</td>
<td>610 nm</td>
<td id="R">---</td>
</tr>
<tr>
<td>I</td>
<td>645 nm</td>
<td id="I">---</td>
</tr>
<tr>
<td>S</td>
<td>680 nm</td>
<td id="S">---</td>
</tr>
<tr>
<td>J</td>
<td>705 nm</td>
<td id="J">---</td>
</tr>
<tr>
<td>T</td>
<td>730 nm</td>
<td id="T">---</td>
</tr>
<tr>
<td>U</td>
<td>760 nm</td>
<td id="U">---</td>
</tr>
<tr class="table-secondary">
<td>V</td>
<td>810 nm</td>
<td id="V">---</td>
</tr>
<tr class="table-secondary">
<td>W</td>
<td>860 nm</td>
<td id="W">---</td>
</tr>
<tr class="table-secondary">
<td>K</td>
<td>900 nm</td>
<td id="K">---</td>
</tr>
<tr class="table-secondary">
<td>L</td>
<td>940 nm</td>
<td id="L">---</td>
</tr>
</table>
</div>
<script src="lib/bootstrap.bundle.min.js"></script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="frontend.js"></script>
</body>
</html>