JourneyJoker/static/frontend/js/inspirations.js

(function($) {
    
    "use strict";

    $(window).on("load", function() {
        $.get("/api/inspirations/country/")
            .done(function(data) {
                $("#countrygroup").empty();

                data.forEach(function(value) {
                    var option = $("<option>")
                        .val(value["code"])
                        .text(value["name"]);

                    $("#countrygroup").append(option);

                    if (value["code"] === "AT") {
                        option.prop("selected", true);
                    };
                });

                $("#country").change();
        });
    });

    $("#country").change(function() {
        $.get("/api/inspirations/country/" + $(this).val() + "/")
            .done(function(data) {
                $("#stategroup").empty();
                $("#regiongroup").empty();

                data.forEach(function(value, index) {
                    var selector = (value["state"] ? "#stategroup" : "#regiongroup");
                    var option = $("<option>")
                        .val(value["id"])
                        .text(value["name"]);
                    
                    $(selector).append(option);

                    if (index == 0) {
                        option.prop("selected", true);
                    };
                });
            
                $("#region").change();
        });

    });

    $("#region").change(function() {
        $.get("/api/inspirations/region/" + $(this).val() + "/")
            .done(function(data) {
                $("#inspirations_container").empty();
                data.forEach(function(value, index) {
                    if (index % 2 == 0) {
                        $("#inspirations_container").append($("<div>")
                            .addClass("row")
                        );
                    };

                    var container = $("#inspirations_container div.row:last");

                    var md6 = $("<div>")
                        .addClass("col-md-6");

                    var a = $("<a>")
                        .addClass("widget")
                        .addClass("widget-image")
                        .attr("href", "javascript:;")
                        .attr("data-toggle", "modal")
                        .attr("data-target", "#inspiration" + value["id"] + "Modal");

                    var imagecover = $("<div>")
                        .addClass("widget-image-cover");

                    imagecover.append($("<img>")
                        .attr("src", value["image"])
                        .attr("alt", value["title"])
                        );

                    var imageinfo = $("<div>")
                        .addClass("widget-image-info");

                    imageinfo.append($("<h5>")
                        .text(value["subtitle"])
                    );

                    imageinfo.append($("<p>")
                        .text(value["title"])
                    );

                    var footrow = $("<div>")
                        .addClass("row");

                    var footmd6left = $("<div>")
                        .addClass("col-md-6");

                    var imageuser = $("<div>")
                        .addClass("widget-image-user");

                    var imageuserimage = $("<div>")
                        .addClass("widget-image-user-image");

                    imageuserimage.append($("<img>")
                        .attr("src", value["sponsor"]["image"])
                        .attr("alt", value["sponsor"]["name"])
                    );

                    var imageuserinfo = $("<div>")
                        .addClass("widget-image-user-info")

                    imageuserinfo.append($("<div>")
                        .text(value["sponsor"]["name"])
                    );

                    imageuserinfo.append($("<span>"));

                    var footmd6right = $("<div>")
                        .addClass("col-md-6");

                    footmd6right.append($("<div>")
                        .addClass("widget-image-rating-text")
                        .text(value["destination"]["name"])
                    );

                    container.append(md6);
                    md6.append(a);
                    a.append(imagecover);
                    a.append(imageinfo);
                    imageinfo.append(footrow);
                    footrow.append(footmd6left);
                    footmd6left.append(imageuser);
                    imageuser.append(imageuserimage);
                    imageuser.append(imageuserinfo);
                    footrow.append(footmd6right);

                    $("#inspirationModals").append($("<div>")
                        .addClass("modal")
			.addClass("fade")
			.attr("id", "inspiration" + value["id"] + "Modal")
			.attr("tabindex", "-1")
			.attr("aria-hidden", "true")
                    );

                    var modal = $("#inspirationModals div.modal:last");

		    var content = $("<div>").addClass("modal-content");

		    var dialog = $("<div>")
			.addClass("modal-dialog")
			.addClass("modal-lg");

		    var mediacontainer = $("<div>")
			.addClass("ratio")
			.addClass("ratio-16x9");

		    var image = $("<img>")
			.attr("src", value["image"])
			.attr("width", "100%");

		    var buttons = $("<div>")
			.addClass("text-center")
			.addClass("py-3");

		    var book = $("<button>")
			.attr("type", "button")
			.addClass("btn")
			.addClass("btn-primary")
			.text("Jetzt Urlaubsangebote in und um " + value["destination"]["name"] + " erhalten!");

		    var close = $("<button>")
			.attr("type", "button")
			.addClass("btn")
			.addClass("btn-secondary")
			.attr("data-dismiss", "modal")
			.text("Schließen");

			mediacontainer.append(image)
			content.append(mediacontainer)
			buttons.append(book)
			buttons.append(close)
			content.append(buttons)
			dialog.append(content)
			modal.append(dialog)

                });            
        });
    });

    $("#country").change();

})(jQuery);