Please disable Adblockers and enable JavaScript for domain CEWebS.cs.univie.ac.at! We have NO ADS, but they may interfere with some of our course material.
Name: tests/vote_test.html
1: | <html> |
2: | <head> |
3: | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
4: | <title>Vote for freedom!</title> |
5: | <link rel="stylesheet" type="text/css" href="./vote.css"> |
6: | <script type="text/javascript" src="http://gruppe.wst.univie.ac.at/js_libs/jquery.min.js"></script> |
7: | <!-- the one from google does not work. XML not well formed --> |
8: | <script type="text/javascript"> |
9: | $.parseQuery = function(querystring) { <!--{{{--> |
10: | var ret = []; |
11: | querystring.replace(/#.*$/,''); |
12: | querystring.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) { |
13: | ret.push( { 'key': key, 'value': value }); |
14: | }); |
15: | return ret; |
16: | } <!--}}}--> |
17: | $(document).ready(function() { <!--{{{--> |
18: | var url = "http://leonardo.wst.univie.ac.at:9398/Virtual Business 1/notifications/subscriptions/"; |
19: | $.ajax({ |
20: | type: "POST", |
21: | url: url, |
22: | data: "topic=task&votes=add", |
23: | success: function(ret){ |
24: | var Socket = "MozWebSocket" in window ? MozWebSocket : WebSocket; |
25: | var subscription = $.parseQuery(ret)[0].value; |
26: | ws = new Socket(url.replace(/http/,'ws') + subscription + "/ws/"); |
27: | ws.onmessage = function(e) { |
28: | data = $.parseXML(e.data); |
29: | if ($('vote > topic',data).length > 0) { |
30: | switch($('vote > topic',data).text()) { |
31: | case 'task': |
32: | json = JSON.parse($('vote > notification',data).text()); |
33: | var vote_container = document.importNode(document.querySelector('#vote').content,true); |
34: | vote_container.querySelector('#vote-id').innerHTML=$('vote > callback',data).text(); |
35: | json.user.forEach(function(uname){ |
36: | var clone = document.importNode(document.querySelector('#user').content,true); |
37: | clone.querySelector('input').value=uname; |
38: | vote_container.querySelector('.flex-container').appendChild(clone); |
39: | }); |
40: | document.querySelector('#votes').appendChild(vote_container); |
41: | break; |
42: | } |
43: | } |
44: | }; |
45: | }, |
46: | error: function(){ |
47: | console.log("Subscribing for votes failed. There will be no democracy."); |
48: | } |
49: | }); |
50: | }); <!--}}}--> |
51: | function voting(test){ <!--{{{--> |
52: | var user = $(test) |
53: | console.log("<vote id='"+user.parent().parent().find('#vote-id').text()+"'>"+user.value+"</vote>"); |
54: | ws.send("<vote id='"+user.parent().parent().find('#vote-id').text()+"'>"+user.attr('value')+"</vote>"); |
55: | user.parent().parent().parent().empty(); |
56: | } <!--}}}--> |
57: | </script> |
58: | </head> |
59: | <body> |
60: | <template id="user"> |
61: | <div class="flex-item"> |
62: | <input onClick=voting(this) type="button" class="voter"></input> |
63: | </div> |
64: | </template> |
65: | <template id="vote"> |
66: | <div id="vote-div"> |
67: | <div class="flex-container"> |
68: | <div class="flex-item"> |
69: | <span>Vote-ID: </span> |
70: | <span id="vote-id"> Hier wird sie stehen</span> |
71: | </div> |
72: | </div> |
73: | </div> |
74: | </template> |
75: | <div id="votes"> |
76: | |
77: | <div id="vote-div"></div> |
78: | </body> |
79: | </html> |