Telos4/RoboRallyGUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implemented jquery communication with the server to submit commands and wait for them to be processed

Browse Source
This commit is contained in:
Simon Pirkelmann 2020-09-11 22:49:56 +02:00
parent 3b1896d5ab
commit 108c996a0a
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
templates/drag_example.html
View File

@ -12,7 +12,7 @@
</head> </head>
<body> <body>
<h1>Welcome Player {{ player_id }}</h1> <h1>Hallo Spieler {{ player_id + 1 }}</h1>
<!-- container --> <!-- container -->
<div class="container"> <div class="container">
@ -28,12 +28,42 @@
</div><!-- container --> </div><!-- container -->
<input id="btnSubmit" type="submit" value="Click Me" />
<div class="container notification" hidden>
Bitte warten, bis alle Spieler ihre Aktion gewählt haben...
</div>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
var please_wait = $(".notification").hide();
var box = $(".box"); var box = $(".box");
var mainCanvas = $(".main-canvas"); var mainCanvas = $(".main-canvas");
$("#btnSubmit").click(function () {
//alert("button");
for (i = 0; i < 5; i++) {
var c = document.getElementsByClassName("box card" + String(i));
$(c).hide();
}
$(please_wait).show();
$.post("/send_cmds", "", function (data) {
console.log(data);
$(please_wait).hide();
for (i = 0; i < 5; i++) {
var c = document.getElementsByClassName("box card" + String(i));
$(c).show();
}
});
});
box.draggable({ box.draggable({
containment: mainCanvas, containment: mainCanvas,
helper: "clone", helper: "clone",
@ -67,7 +97,8 @@
//console.log(dragPos); //console.log(dragPos);
//console.log(dropPos); //console.log(dropPos);
console.log($(cmds)); //console.log($(cmds));
// notify server that cards have been swapped
$.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')}); $.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
draggable.css({ draggable.css({