Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Aufgabe 3: AJAX Requests funktionieren

Browse source
This commit is contained in:
Selina 2019-01-05 17:57:46 +01:00
parent ef4da1695d
commit 80ec221e6a
2 changed files with 119 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

266
aufgabe3/public/assets/js/ajax.js
View file

@ -1,174 +1,124 @@
$("#filter_countries").click(function () {
var url = "/items";
let tableData_global; // fetched date
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) {
var id_range = country_filter_range.split("-");
// tests for wrong input
// wrong arguments
if (id_range.length != 2) {
return false;
const doFetchCountries = (filterId, range) => {
let url_append = "";
if (filterId !== null && filterId !== undefined) {
url_append += "/" + filterId;
}
if (range !== null && range !== undefined) {
url_append += "/" + range;
}
// first argument is not a number
if (isNaN(id_range[0])) {
return false;
$.ajax({url: "/items" + url_append}).done((data) => {
if (data instanceof Array) tableData_global = data;
else {
tableData_global = [];
tableData_global.push(data);
}
// 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');
doTablePrint();
});
};
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({
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",
url: "items",
async: true,
data: `{"name":"${country_name}", "birth_rate_per_1000":"${birth_rate_per_1000}", "cell_phones_per_100":"${cell_phones_per_100}"}`,
contentType: "application/json",
success: function (data) { },
error: function (jqXHR, text, err) {
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) { }
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
name: $("#country_name").val(),
"birth_rate_per_1000": $("#country_birth").val(),
"cell_phones_per_100": $("#country_cellphone").val()
})
return false;
});
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));
}).done(function () {
console.log("Item angelegt!");
});
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) {
for (var i = 0; i < props.length; i++) {
if (value == props[i]) {
return i + 1;
}
}
return -1;
}
$("#hide_selected_prop").click(() => {
propertyToShowMap_global[$("#prop_selection option:selected").text()] = false;
doTablePrint();
});
};
window.onload = () => {
clickListenersInit();
$.ajax({url: "/properties"}).done((data) => {
onLoadedProperties(data);
doFetchCountries(null, null);
});
};

16
aufgabe3/public/index.html
View file

@ -50,17 +50,17 @@
<div class="rest-country">
<div class="rest-api-block">
<h2>Filter Countries</h2>
<form name="country_filter" id="country_filter" method="GET">
<form name="country_filter" id="country_filter">
<p>
<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>
<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 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>
</form>
</div>
@ -78,7 +78,7 @@
<div class="rest-add">
<div class="rest-api-block">
<h2>Add Country</h2>
<form name="country_add" id="country_add" method="POST">
<form>
<p>
<label for="country_name">country name</label>
<input type="text" name="country_name" id="country_name">
@ -92,7 +92,7 @@
<input type="number" name="country_cellphone" id="country_cellphone">
</p>
<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>
</form>
</div>
@ -100,13 +100,13 @@
<div class="rest-delete">
<div class="rest-api-block">
<h2>Delete Country</h2>
<form name="country_delete" id="country_delete" method="DELETE">
<form name="country_delete" id="country_delete">
<p>
<label for="country_delete_id">Country ID to delete</label>
<input type="text" name="country_delete_id" id="country_delete_id">
</p>
<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>
</form>
</div>