Aufgabe 3: AJAX Requests funktionieren
This commit is contained in:
Selina
parent
ef4da1695d
commit
80ec221e6a
2 changed files with 119 additions and 169 deletions
|
|
@ -1,174 +1,124 @@
|
||||||
$("#filter_countries").click(function () {
|
let tableData_global; // fetched date
|
||||||
var url = "/items";
|
let range_global = null;
|
||||||
|
let filterId_global = null;
|
||||||
|
let propertyToShowMap_global = {};
|
||||||
|
let properties_global;
|
||||||
|
// true/false-map für properties
|
||||||
|
|
||||||
var country_filter_range = $("#country_filter_range").val();
|
|
||||||
var country_filter_id = $("#country_filter_id").val();
|
|
||||||
|
|
||||||
if (country_filter_range.length != 0) {
|
const doFetchCountries = (filterId, range) => {
|
||||||
var id_range = country_filter_range.split("-");
|
let url_append = "";
|
||||||
|
if (filterId !== null && filterId !== undefined) {
|
||||||
// tests for wrong input
|
url_append += "/" + filterId;
|
||||||
|
}
|
||||||
// wrong arguments
|
if (range !== null && range !== undefined) {
|
||||||
if (id_range.length != 2) {
|
url_append += "/" + range;
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// first argument is not a number
|
$.ajax({url: "/items" + url_append}).done((data) => {
|
||||||
if (isNaN(id_range[0])) {
|
if (data instanceof Array) tableData_global = data;
|
||||||
return false;
|
else {
|
||||||
|
tableData_global = [];
|
||||||
|
tableData_global.push(data);
|
||||||
}
|
}
|
||||||
|
doTablePrint();
|
||||||
// second argument is not a number
|
|
||||||
if (isNaN(id_range[1])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var first_id = parseInt(id_range[0]);
|
|
||||||
var second_id = parseInt(id_range[1]);
|
|
||||||
|
|
||||||
// bounds checks
|
|
||||||
if (first_id < 1) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (first_id > second_id) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// assemble url
|
|
||||||
url += "/" + first_id.toString() + "/" + second_id.toString();
|
|
||||||
} else if (country_filter_id.length != 0) {
|
|
||||||
// assemble url
|
|
||||||
url += "/" + country_filter_id;
|
|
||||||
}
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
type: "GET",
|
|
||||||
url: url,
|
|
||||||
async: true,
|
|
||||||
success: function (data) {
|
|
||||||
if (data[0] == "Err") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// clear table
|
|
||||||
$("#table_body").empty();
|
|
||||||
|
|
||||||
// refill table
|
|
||||||
$(function () {
|
|
||||||
$.each(data, function (i, item) {
|
|
||||||
$('<tr>').append(
|
|
||||||
$('<td>').addClass("colID").text(item.id),
|
|
||||||
$('<td>').addClass("colName").text(item.name),
|
|
||||||
$('<td>').addClass("colBirth").text(item.birth_rate_per_1000),
|
|
||||||
$('<td>').addClass("colCell").text(item.cell_phones_per_100),
|
|
||||||
$('<td>').addClass("colChildren").text(item.children_per_woman),
|
|
||||||
$('<td>').addClass("colElectricity").text(item.electricity_consumption_per_capita),
|
|
||||||
$('<td>').addClass("colGDP").text(item.gdp_per_capita),
|
|
||||||
$('<td>').addClass("colGDPGrowth").text(item.gdp_per_capita_growth),
|
|
||||||
$('<td>').addClass("colInflation").text(item.inflation_annual),
|
|
||||||
$('<td>').addClass("colInternet").text(item.internet_user_per_100),
|
|
||||||
$('<td>').addClass("colLife").text(item.life_expectancy),
|
|
||||||
$('<td>').addClass("colMilitary").text(item.military_expenditure_percent_of_gdp),
|
|
||||||
$('<td>').addClass("colGPSLat").text(item.gps_lat),
|
|
||||||
$('<td>').addClass("colGPSLong").text(item.gps_long)
|
|
||||||
).appendTo('#table_body');
|
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onLoadedProperties = (props) => {
|
||||||
|
properties_global = props;
|
||||||
|
properties_global.forEach(function (prop) {
|
||||||
|
propertyToShowMap_global[prop] = true;
|
||||||
|
});
|
||||||
|
// standardmäßig alle properties anzeigen; map aufbauen
|
||||||
|
|
||||||
|
// options im select
|
||||||
|
let html1 = "";
|
||||||
|
properties_global.forEach(function (prop) {
|
||||||
|
html1 += "<option value=\"" + prop + "\">" + prop + "</option>"
|
||||||
|
});
|
||||||
|
$("#prop_selection").html(html1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const doTablePrint = () => {
|
||||||
|
// thead
|
||||||
|
let html = "";
|
||||||
|
properties_global.forEach((prop) => {
|
||||||
|
if (propertyToShowMap_global[prop]) {
|
||||||
|
html += "<th>" + prop + "</th>";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("#table_head").html(html);
|
||||||
|
// tbody
|
||||||
|
html = "";
|
||||||
|
tableData_global.forEach(row => {
|
||||||
|
html += "<tr>";
|
||||||
|
properties_global.forEach((key) => {
|
||||||
|
if (propertyToShowMap_global[key]) {
|
||||||
|
html += "<td>" + row[key] + "</td>";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
html += "</tr>";
|
||||||
|
});
|
||||||
|
$("#table_body").html(html);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickListenersInit = () => {
|
||||||
|
|
||||||
|
$("#country_filter_submit").click(() => {
|
||||||
|
// Filterung
|
||||||
|
filterId_global = $("#country_filter_id").val();
|
||||||
|
range_global = $("#country_filter_range").val();
|
||||||
|
if (range_global === "") {
|
||||||
|
doFetchCountries(filterId_global, null);
|
||||||
|
} else {
|
||||||
|
doFetchCountries(filterId_global, range_global);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// show table
|
|
||||||
$(`td,th`).show();
|
|
||||||
},
|
|
||||||
error: function (jqXHR, text, err) {
|
|
||||||
alert(err);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#show_selected_prop").click(function () {
|
|
||||||
var property = $("#prop_selection").val();
|
|
||||||
var column = val_to_column(property);
|
|
||||||
|
|
||||||
$(`td:nth-child(${column}),th:nth-child(${column})`).show();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#hide_selected_prop").click(function () {
|
|
||||||
var property = $("#prop_selection").val();
|
|
||||||
var column = val_to_column(property);
|
|
||||||
|
|
||||||
$(`td:nth-child(${column}),th:nth-child(${column})`).hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#submit_country").click(function () {
|
|
||||||
var country_name = $("#country_name").val();
|
|
||||||
var birth_rate_per_1000 = $("#country_birth").val();
|
|
||||||
var cell_phones_per_100 = $("#country_cellphone").val();
|
|
||||||
|
|
||||||
|
$("#rm_submit").click(() => { // Löschen
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
url: '/items/' + $("#country_delete_id").val(), type: 'DELETE'
|
||||||
|
}).done(() => {
|
||||||
|
console.log("Item mit ID " + $("#country_delete_id").val() + " gelöscht!");
|
||||||
|
});
|
||||||
|
doFetchCountries(filterId_global, range_global);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#add_submit").click(() => {
|
||||||
|
$.ajax({
|
||||||
|
url: "/items",
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: "items",
|
contentType: "application/json; charset=utf-8",
|
||||||
async: true,
|
dataType: "json",
|
||||||
data: `{"name":"${country_name}", "birth_rate_per_1000":"${birth_rate_per_1000}", "cell_phones_per_100":"${cell_phones_per_100}"}`,
|
data: JSON.stringify({
|
||||||
contentType: "application/json",
|
name: $("#country_name").val(),
|
||||||
success: function (data) { },
|
"birth_rate_per_1000": $("#country_birth").val(),
|
||||||
error: function (jqXHR, text, err) {
|
"cell_phones_per_100": $("#country_cellphone").val()
|
||||||
alert(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#rm_submit").click(function () {
|
|
||||||
var url = "/items";
|
|
||||||
var id = $("#country_delete_id").val();
|
|
||||||
|
|
||||||
if (id.length != 0) {
|
|
||||||
url += "/" + id;
|
|
||||||
}
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
type: "DELETE",
|
|
||||||
url: url,
|
|
||||||
async: true,
|
|
||||||
success: function (data) { },
|
|
||||||
error: function (jqXHR, text, err) { }
|
|
||||||
})
|
})
|
||||||
|
}).done(function () {
|
||||||
return false;
|
console.log("Item angelegt!");
|
||||||
});
|
|
||||||
|
|
||||||
var props = [];
|
|
||||||
|
|
||||||
// fill properties
|
|
||||||
$("document").ready(function () {
|
|
||||||
$.ajax({
|
|
||||||
type: "GET",
|
|
||||||
url: "/properties",
|
|
||||||
async: true,
|
|
||||||
success: function (data) {
|
|
||||||
$(function () {
|
|
||||||
$.each(data, function (i, item) {
|
|
||||||
$('#prop_selection').append($("<option />").val(item).text(item));
|
|
||||||
});
|
});
|
||||||
|
doFetchCountries(filterId_global, range_global);
|
||||||
|
});
|
||||||
|
$("#show_selected_prop").click(() => {
|
||||||
|
propertyToShowMap_global[$("#prop_selection option:selected").text()] = true;
|
||||||
|
doTablePrint();
|
||||||
});
|
});
|
||||||
|
|
||||||
props = data;
|
|
||||||
},
|
|
||||||
error: function (jqXHR, text, err) {
|
|
||||||
alert(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function val_to_column(value) {
|
$("#hide_selected_prop").click(() => {
|
||||||
for (var i = 0; i < props.length; i++) {
|
propertyToShowMap_global[$("#prop_selection option:selected").text()] = false;
|
||||||
if (value == props[i]) {
|
doTablePrint();
|
||||||
return i + 1;
|
});
|
||||||
}
|
};
|
||||||
}
|
|
||||||
return -1;
|
|
||||||
}
|
window.onload = () => {
|
||||||
|
clickListenersInit();
|
||||||
|
$.ajax({url: "/properties"}).done((data) => {
|
||||||
|
onLoadedProperties(data);
|
||||||
|
doFetchCountries(null, null);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -50,17 +50,17 @@
|
||||||
<div class="rest-country">
|
<div class="rest-country">
|
||||||
<div class="rest-api-block">
|
<div class="rest-api-block">
|
||||||
<h2>Filter Countries</h2>
|
<h2>Filter Countries</h2>
|
||||||
<form name="country_filter" id="country_filter" method="GET">
|
<form name="country_filter" id="country_filter">
|
||||||
<p>
|
<p>
|
||||||
<label for="country_filter_id">country id</label>
|
<label for="country_filter_id">country id</label>
|
||||||
<input type="text" name="country_filter_id" id="country_filter_id">
|
<input type="text" id="country_filter_id">
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="country_filter_range">country id range (eg: 2-5)</label>
|
<label for="country_filter_range">country id range (eg: 2-5)</label>
|
||||||
<input type="text" name="country_filter_range" id="country_filter_range">
|
<input type="text" id="country_filter_range">
|
||||||
</p>
|
</p>
|
||||||
<p class="submit">
|
<p class="submit">
|
||||||
<input type="submit" name="submit" id="add_submit" value="Filter Countries">
|
<button type="button" class="green_btn" id="country_filter_submit">Filter Countries</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
<div class="rest-add">
|
<div class="rest-add">
|
||||||
<div class="rest-api-block">
|
<div class="rest-api-block">
|
||||||
<h2>Add Country</h2>
|
<h2>Add Country</h2>
|
||||||
<form name="country_add" id="country_add" method="POST">
|
<form>
|
||||||
<p>
|
<p>
|
||||||
<label for="country_name">country name</label>
|
<label for="country_name">country name</label>
|
||||||
<input type="text" name="country_name" id="country_name">
|
<input type="text" name="country_name" id="country_name">
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
<input type="number" name="country_cellphone" id="country_cellphone">
|
<input type="number" name="country_cellphone" id="country_cellphone">
|
||||||
</p>
|
</p>
|
||||||
<p class="submit">
|
<p class="submit">
|
||||||
<input type="submit" name="submit" id="add_submit" value="Add Country">
|
<button type="button" name="submit" class="green_btn" id="add_submit">Add Country</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -100,13 +100,13 @@
|
||||||
<div class="rest-delete">
|
<div class="rest-delete">
|
||||||
<div class="rest-api-block">
|
<div class="rest-api-block">
|
||||||
<h2>Delete Country</h2>
|
<h2>Delete Country</h2>
|
||||||
<form name="country_delete" id="country_delete" method="DELETE">
|
<form name="country_delete" id="country_delete">
|
||||||
<p>
|
<p>
|
||||||
<label for="country_delete_id">Country ID to delete</label>
|
<label for="country_delete_id">Country ID to delete</label>
|
||||||
<input type="text" name="country_delete_id" id="country_delete_id">
|
<input type="text" name="country_delete_id" id="country_delete_id">
|
||||||
</p>
|
</p>
|
||||||
<p class="submit">
|
<p class="submit">
|
||||||
<input type="submit" name="submit" id="rm_submit" value="Remove Country">
|
<button type="button" name="submit" class="green_btn" id="rm_submit">Remove Country</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue