master2

4 years ago · a2dc894643
2 changed files with 76 additions and 30 deletions
--- a/css.css
+++ b/css.css
@ -0,0 +1,3 @@
 body{
    margin: 10px;
 }
--- a/index.html
+++ b/index.html
@ -5,42 +5,85 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>api test</title>
    <link rel="stylesheet" href="css.css">
    <title>Api test</title>
 </head>
 <body>
    <div id="mista">
        <ul>
            <li>Pošta</li>
            <li>PPL</li>
            <li>Osobni odber</li>
        </ul>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="mista"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zavřít</button>
                </div>
            </div>
        </div>
    </div>
    <h1>
        Volba Dopravy
    </h1>
    <ul class="list-group">
        <li class="list-group-item">
            <input type="radio" name="volba" id="posta"> <label for="posta">Česká Pošta</label>
        </li>
        <li class="list-group-item">
            <input type="radio" name="volba" id="ppl"> <label for="ppl">PPL</label>
        </li>
        <li class="list-group-item">
            <input type="radio" name="volba" id="odber"> <label for="odber" data-bs-toggle="modal" data-bs-target="#exampleModal">Osobní odběr   <span id="misto"></span></label>
        </li>
    </ul>
 <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
 </script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>  
 <script>
    $.ajax({
        dataType: "json",
        url: "http://pak.asgard.odbornaskola.cz/paks/",
        headers: {
            Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
        }
    })
        .done(function(data) {
            console.log(data);
            for (let index = 0; index < data.length; index++) {
                const item = data[index];
                $("#mista").append("<p>" + item.name + "</p>");
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script>
        $.ajax({
            dataType: "json",
            url: "http://pak.asgard.odbornaskola.cz/paks/",
            headers: {
                Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
            }
        })
        .fail(function() {
            console.log("chyba...");
        });
 </script>
            .done(function(data){
                console.log(data);
                for (let index = 0; index < data.length; index++) {
                    const item = data[index];
                    $("#mista").append("<input type='radio' name='mista' data-nazev='" + item.name + "' id='misto" + item.id + "'> <label for='misto" + item.id +"'>" + item.name + "</label><br>");
                }
            let radia = document.querySelectorAll("input[name='mista']");    
            console.log(radia);
            for (let index = 0; index < radia.length; index++) {
                const element = radia[index];
                element.addEventListener("change", function() {
                    console.log(this);
                    $("#misto").html($(this).data("nazev"));
                    $('#exampleModal').modal('hide');
                });
            }
            })
            .fail(function(){
                console.log("chyba ...");
            });
    </script>
 </body>
 </html>