WIP
This commit is contained in:
3
html/css/app.css
Normal file
3
html/css/app.css
Normal file
@ -0,0 +1,3 @@
|
||||
body {
|
||||
margin-bottom: 40px;
|
||||
}
|
11
html/css/pure-min.css
vendored
Normal file
11
html/css/pure-min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
43
html/index.html
Normal file
43
html/index.html
Normal 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
53
html/js/app.js
Normal 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);
|
||||
}
|
Reference in New Issue
Block a user