P4pillon/OpenDataAPI
4
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Simon C
2024-01-24 16:29:09 +01:00
parent 1d0f53fb10
commit 5a572c7f4a
18 changed files with 927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
html/css/app.css Normal file
View File

@ -0,0 +1,3 @@
body {
margin-bottom: 40px;
}

11
html/css/pure-min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

43
html/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- css -->
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/app.css">
<!-- javascript -->
<script src="js/app.js"></script>
<title>World Database</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-8"></div>
<div class="pure-u-3-4">
<h1>World Database</h1>
<form class="pure-form" onsubmit="event.preventDefault(); app.searchClick()">
<fieldset>
<input id="city-input" type="text" placeholder="City" required>
<input type="submit" class="pure-button pure-button-primary" value="Search">
</fieldset>
</form>
<table class="pure-table pure-table-bordered pure-table-striped hidden" id="results-table">
<thead>
<th>Name</th>
<th>District</th>
<th>Country</th>
<th>Population</th>
</thead>
<tbody id="results-table-body">
</tbody>
</table>
</div>
<div class="pure-u-1-8"></div>
</div>
</body>
</html>

53
html/js/app.js Normal file
View File

@ -0,0 +1,53 @@
'use strict';
var CITY_QUERY_URL_PREFIX = 'http://localhost:3000/city?name=ilike.'
var app = {};
app.addResultRows = function (rows) {
var rowsString = '';
var rowsLength = rows.length;
if (rowsLength > 0) {
for (var i = 0; i < rowsLength; i++) {
rowsString += app.buildResultRowString(rows[i]);
}
} else {
rowsString = '<tr><td colspan="4">Results not found</td></tr>';
}
document.getElementById('results-table-body').innerHTML = rowsString;
app.showElement('results-table');
}
app.buildResultRowString = function (row) {
return '<tr>' +
'<td>' + row.name + '</td>' +
'<td>' + row.district + '</td>' +
'<td>' + row.countrycode + '</td>' +
'<td>' + row.population + '</td>' +
'</tr>';
}
app.showElement = function (id) {
document.getElementById(id).classList.remove('hidden');
}
app.queryCity = function (cityName) {
var queryURL = CITY_QUERY_URL_PREFIX + '*' + cityName + '*';
fetch(queryURL)
.then(function(response) {
return response.json();
})
.then(function (j) {
console.log(j);
app.addResultRows(j);
})
}
app.searchClick = function () {
var city = document.getElementById('city-input').value;
app.queryCity(city);
}