<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>imaginaerraum.de</title> <script src="static/jquery-3.5.1.js"></script> <script src="static/jquery-ui.min.js"></script> <script src="static/bootstrap.min.js"></script> <link rel="stylesheet" href="static/bootstrap.css"> <link rel="stylesheet" href="static/style.css"> </head> <body> <!-- container --> <div class="container"> <!-- current program --> <div class="row top-buffer"> Aktuelles Programm: <div class="cmd-canvas"> {% for cmd in current_program %} <div class="box cmd{{ loop.index0 }}" id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}" style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)"> <img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png"> {{ loop.index0 }} </div> {% endfor %} </div> </div> <!-- possible commands --> <div class="row top-buffer"> Mögliche Befehle: <div class="programmer-canvas"> {% for cmd in valid_commands %} <div class="box programmer_cmd{{ loop.index0 }}" id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}" style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)"> <img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png"> </div> {% endfor %} </div> </div> <div class="row top-buffer center"> <div class="col-sm"> <input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" /> </div> <div class="col-sm"> <div id = "alert_placeholder"></div> </div> </div> </div><!-- container --> <script> $(document).ready(function () { var please_wait = $(".notification").hide(); var box = $(".box"); bootstrap_alert = function() {}; bootstrap_alert.warning = function(message) { $('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') }; $("#btnSubmit").click(function () { //alert("button"); var cmds = { {% for i in range(5) %} "cmd{{ i }}": {"color": document.getElementById("prg_cmd{{ i }}").getAttribute("data-color"), "action": document.getElementById("prg_cmd{{ i }}").getAttribute("data-action")}, {% endfor %} } //bootstrap_alert.warning('Bitte warten bis alle Spieler ihre Aktion gewählt haben!'); //$(please_wait).show(); var cmds_json = JSON.stringify(cmds); $.post("/send_cmds", {"cmds_json": cmds_json}, function (data) { console.log(data); /* if (data === 'OK') { location.reload(); // reload page to get new cards for next round } else { console.log('waiting...') $.get("/send_cmds", "", function (data) { if (data === 'OK') { location.reload(); // reload page to get new cards for next round } }) } */ }); }); var edited_command = null; box.click(function () { //debugger if ( this.id.includes('prg_cmd') ) { // program card clicked -> select clicked card for editing edited_command = this; } else if (this.id.includes('valid_cmd')) { // progamming card clicked -> edit currently selected card var this_card_action = this.getAttribute('data-action'); var this_card_color = this.getAttribute('data-color'); if (!!edited_command) { // only if there is a card selected console.log("editing command " + edited_command); if (this_card_action === "-") { // set color edited_command.setAttribute("data-color", this_card_color); edited_command.style["backgroundColor"] = this.style["backgroundColor"]; } else { // set action edited_command.setAttribute("data-action", this_card_action) var edited_cmd_img = document.getElementById(edited_command.getAttribute("data-img")); var prg_img = document.getElementById(this.getAttribute("data-img")); edited_cmd_img.src = prg_img.src; } } } }); }); </script> </body> </html>