Implement ajax part

aufgabe3/app.js

@@ -42,7 +42,7 @@ app.get("/items", function (req, res) {
 
 app.get("/items/:id", function (req, res) {
     var requested_id = parseInt(req.params.id);
-    var answer = ["No such id " + requested_id + " in database"];
+    var answer = ["Err", "No such id " + requested_id + " in database"];
 
     for (var i = 0; i < json.length; i++) {
         if (json[i].id == requested_id) {
@@ -56,7 +56,7 @@ app.get("/items/:id", function (req, res) {
 app.get("/items/:id1/:id2", function (req, res) {
     var first_requested_id = parseInt(req.params.id1);
     var second_requested_id = parseInt(req.params.id2);
-    var answer = ["Range not possible"];
+    var answer = ["Err", "Range not possible"];
 
     // check that first id is bigger than 0
     // and the second one is the bigger one
@@ -96,7 +96,7 @@ app.get("/properties", function (req, res) {
 
 app.get("/properties/:num", function (req, res) {
     let num = parseInt(req.params.num);
-    var answer = ["No such property available"];
+    var answer = ["Err", "No such property available"];
 
     var i = 0;
 
@@ -137,7 +137,7 @@ app.delete("/items", function (req, res) {
 
 app.delete("/items/id", function (req, res) {
     var requested_id = parseInt(req.params.id);
-    var answer = ["No such id " + requested_id + "in database"];
+    var answer = ["Err", "No such id " + requested_id + "in database"];
 
     for (var i = 0; i < json.length; i++) {
         if (json[i].id == requested_id) {

aufgabe3/public/assets/js/ajax.js

@@ -1,36 +1,174 @@
-
 $("#filter_countries").click(function () {
-    alert("filter");
+    var url = "/items";
+
+    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;
+        }
+
+        // first argument is not a number
+        if (isNaN(id_range[0])) {
+            return false;
+        }
+
+        // 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');
+                });
+            });
+
+            // show table
+            $(`td,th`).show();
+        },
+        error: function (jqXHR, text, err) {
+            alert(err);
+        }
+    })
 
     return false;
 });
 
 $("#show_selected_prop").click(function () {
-    alert("filter");
+    var property = $("#prop_selection").val();
+    var column = val_to_column(property);
 
-    return false;
+    $(`td:nth-child(${column}),th:nth-child(${column})`).show();
 });
 
 $("#hide_selected_prop").click(function () {
-    alert("filter");
+    var property = $("#prop_selection").val();
+    var column = val_to_column(property);
 
-    return false;
+    $(`td:nth-child(${column}),th:nth-child(${column})`).hide();
 });
 
 $("#submit_country").click(function () {
-    alert("properties");
+    var country_name = $("#country_name").val();
+    var birth_rate_per_1000 = $("#country_birth").val();
+    var cell_phones_per_100 = $("#country_cellphone").val();
+
+    $.ajax({
+        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 () {
-    alert("properties");
+    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) { }
+    })
 
     return false;
 });
 
-$("#delete_country").click(function () {
+var props = [];
-    alert("properties");
 
-    return false;
+// 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));
+                });
+            });
+
+            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;
+}