Massive changes but I have to go to sleep now

This commit is contained in:
2020-12-05 06:05:56 +01:00
parent 525074af15
commit a642ea9890
17 changed files with 1104 additions and 1147 deletions
+38 -9
View File
@@ -5,14 +5,14 @@
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/styles/voting.css}" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="center-screen">
<script>
function setColor(button) {
groupButtons = document.querySelectorAll('[id^= ' + button.id.split("_")[0] + ']');
groupButtons = document.querySelectorAll('[id^=' + button.id.split("_")[0] + ']');
groupButtons.forEach(button => {
button.style.background = 'transparent';
button.style.fontWeight = 'normal';
@@ -43,19 +43,48 @@
input = document.getElementById("voteValues");
input.value = voteIds;
}
var q = 1,
qMax = 0;
$(function() {
qMax = $('#votingButtons div.voteDiv').length;
$('#votingButtons div.voteDiv').hide();
$('#votingButtons div.voteDiv:nth-child(1)').show();
$('#btnNext').on('click', function(event) {
event.preventDefault();
handleClick();
});
});
function handleClick() {
if (q < qMax) {
$('#votingButtons div.voteDiv:nth-child(' + q + ')').hide();
$('#votingButtons div.voteDiv:nth-child(' + (q + 1) + ')').show();
if (q == (qMax - 1)) {
$('#btnNext').html('Submit Answers');
}
q++;
} else {
getVotes();
document.getElementById("myForm").submit();
}
}
</script>
<div class="centered">
<h1>Wähle deine Kandidaten:</h1>
<div th:each="category,iter : ${categories}">
<h2 class="categoryHeader" th:text="${category.name}"></h2>
<div th:each="candidate : ${category.candidateList}" class="voteDiv">
<button class="inputButton" th:id="|category${category.id}_candidate${candidate.id}|" th:text="${candidate.name}" th:onclick="|setColor(category${category.id}_candidate${candidate.id})|"></button>
<div id="votingButtons">
<div th:each="category,iter : ${categories}" class="voteDiv">
<h2 class="categoryHeader" th:text="${category.name}"></h2>
<div th:each="candidate : ${category.candidateList}">
<button class="inputButton" th:id="|category${category.id}_candidate${candidate.id}|" th:text="${candidate.name}" th:onclick="|setColor(category${category.id}_candidate${candidate.id})|"></button>
</div>
</div>
</div>
<form action="#" th:action="@{/processVote}" method="post">
<button class="submitButton" id="btnNext" type="submit">Nächste Frage</button>
<form action="#" th:action="@{/processVote}" method="post" id="myForm">
<input id="voteValues" type="hidden" name="voteValues" value="" />
<input id="voterName" type="hidden" name="voterEmail" th:value="${name}" />
<button type="submit" id="submitButton" onclick="getVotes()">Auswahl bestätigen</button>
<input id="voterName" type="hidden" name="name" th:value="${name}" />
</form>
</div>
</body>