Projects/vote-rs
Projects
/
vote-rs
14
0
Fork 0
Code Issues Pull Requests Activity

added some html mocs of the website

This commit is contained in:
Adrian Gunnar Lauterer 2024-05-12 23:52:29 +02:00
parent b2a0f85563
commit f035de1145
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
6 changed files with 561 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/templates/electionCreation.html Normal file
View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Election</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a;
color: #f4f4f4;
}
.container {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #2b2b2b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="datetime-local"],
textarea,
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background-color: #2b2b2b;
color: #f4f4f4;
}
textarea {
height: 100px;
background-color: #2b2b2b;
color: #f4f4f4;
}
input[type="submit"] {
background-color: #1a75ff; /* Darker blue */
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #145cbf; /* Even darker blue */
}
</style>
</head>
<body>
<div class="container">
<h2>Create Election</h2>
<form id="electionForm" action="/elections/create" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter election name" required>
<label for="description">Description:</label>
<textarea id="description" name="description" placeholder="Enter election description" required></textarea>
<label for="start_date">Start Date:</label>
<input type="datetime-local" id="start_date" name="start_date" required>
<label for="end_date">End Date:</label>
<input type="datetime-local" id="end_date" name="end_date" required>
<label for="namespace">Namespace:</label>
<input type="text" id="namespace" name="namespace" placeholder="Enter namespace" required>
<!-- Additional fields for election items can be added here -->
<input type="submit" value="Create Election">
</form>
</div>
</body>
</html>

205
src/templates/electionViewer.html Normal file
View File

@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Elections</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a;
color: #f4f4f4;
}
.container {
width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #2b2b2b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="submit"] {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background-color: #2b2b2b;
color: #f4f4f4;
}
input[type="submit"] {
background-color: #1a75ff; /* Darker blue */
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #145cbf; /* Even darker blue */
}
table {
width: 100%;
border-collapse: collapse;
color: #f4f4f4;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #2b2b2b;
}
button {
padding: 5px 10px;
margin: 0 5px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
#searchForm {
display: flex;
justify-content: space-between;
align-items: center;
}
.go-btn {
background-color: #4CAF50; /* Green */
}
.delete-btn {
background-color: #f44336; /* Red */
}
.results-btn {
background-color: #008CBA; /* Blue */
}
</style>
</head>
<body>
<div class="container">
<h2>View Elections</h2>
<form id="searchForm" action="#">
<label for="search">Search by Name:</label>
<input type="text" id="search" name="search" placeholder="Enter name to search">
<input type="submit" value="Search">
</form>
<table id="electionsTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>User</th>
<th>Namespace</th>
<th>Description</th>
<th>Start Date</th>
<th>End Date</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Election rows will be inserted here dynamically -->
</tbody>
</table>
</div>
<script>
// Dummy data for demonstration
const elections = [
{ id: 1, name: "Election 1", username: "user", namespace: "namespace2", description: "Description 1", start_date: "2024-05-01T08:00", end_date: "2024-05-10T20:00" },
{ id: 2, name: "Election 2", username: "user", namespace: "namespace", description: "Description 2", start_date: "2024-05-05T08:00", end_date: "2024-05-15T20:00" },
{ id: 3, name: "Election 3", username: "user2", namespace: "namespace", description: "Description 3", start_date: "2024-05-10T08:00", end_date: "2024-05-20T20:00" }
];
const currentUsername = "user";
// Function to render election rows
function renderElections(elections) {
const tableBody = document.querySelector("#electionsTable tbody");
tableBody.innerHTML = "";
elections.forEach(election => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${election.id}</td>
<td>${election.name}</td>
<td>${election.username}</td>
<td>${election.namespace}</td>
<td>${election.description}</td>
<td>${new Date(election.start_date).toLocaleString()}</td>
<td>${new Date(election.end_date).toLocaleString()}</td>
<td><button class="go-btn" onclick="goToElection(${election.id})">Go to Election</button></td>
${election.username === currentUsername ?
`<td><button class="results-btn" onclick="if(confirm('Are you sure you want to view the results of this election?')) { viewResults(${election.id}) }">View Results</button></td>
<td><button class="delete-btn" onclick="if(confirm('Are you sure you want to delete this election?')) { deleteElection(${election.id}) }">Delete</button></td>`
: '<td></td><td></td>'}
`;
tableBody.appendChild(row);
});
}
// Get the search form and input field
const searchForm = document.querySelector("#searchForm");
const searchInput = document.querySelector("#search");
// Add an event listener to the form submission event
searchForm.addEventListener("submit", function(event) {
// Prevent the form from being submitted
event.preventDefault();
// Get the search term
const searchTerm = searchInput.value.trim().toLowerCase();
// Filter the elections based on the search term
const filteredElections = elections.filter(election =>
election.name.toLowerCase().includes(searchTerm) ||
election.description.toLowerCase().includes(searchTerm) ||
election.namespace.toLowerCase().includes(searchTerm) ||
election.username.toLowerCase().includes(searchTerm)
);
// Sort the elections so that the ones whose name includes the search term come first
filteredElections.sort((a, b) => {
const aNameIncludes = a.name.toLowerCase().includes(searchTerm);
const bNameIncludes = b.name.toLowerCase().includes(searchTerm);
if (aNameIncludes && !bNameIncludes) {
return -1;
} else if (!aNameIncludes && bNameIncludes) {
return 1;
} else {
return 0;
}
});
// Render the filtered elections
renderElections(filteredElections);
});
function goToElection(id) {
// Implement the logic to go to the election page
}
function deleteElection(id) {
// Implement the logic to delete the election
}
function viewResults(id) {
// Implement the logic to view the results of the election
}
// Initial rendering of elections
renderElections(elections);
</script>
</body>
</html>

65
src/templates/give-authorization.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Give Acces</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a;
color: #f4f4f4;
}
.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #2b2b2b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="datetime-local"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background-color: #2b2b2b;
color: #f4f4f4;
}
input[type="submit"] {
background-color: #1a75ff; /* Darker blue */
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #145cbf; /* Even darker blue */
}
</style>
</head>
<body>
<div class="container">
<h2>Give acces</h2>
<form id="tokenForm" action="/auth/token" method="POST">
<label for="from_date">From Date:</label>
<input type="datetime-local" id="from_date" name="from_date" required>
<label for="to_date">To Date:</label>
<input type="datetime-local" id="to_date" name="to_date" required>
<label for="user">User:</label>
<input type="text" id="user" name="user" placeholder="Enter username" required>
<label for="namespace">Namespace:</label>
<input type="text" id="namespace" name="namespace" placeholder="Enter namespace" required>
<input type="submit" value="Give Acces">
</form>
</div>
</body>
</html>

59
src/templates/login.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a;
color: #f4f4f4;
}
.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #2b2b2b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background-color: #2b2b2b;
color: #f4f4f4;
}
input[type="submit"] {
background-color: #1a75ff; /* Darker blue */
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #145cbf; /* Even darker blue */
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="loginForm" action="/auth/login" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>

37
src/templates/main.html
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Voting List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 5px; padding: 5px; font-size: 1.2em; height: 2em; }
</style>
</head>
<body>
<h2>Vote List</h2>
<ul id="sortable">
<li class="ui-state-default"><input type="checkbox"> Item 1</li>
<li class="ui-state-default"><input type="checkbox"> Item 2</li>
</ul>
<button id="add">Add Item</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
let count = 3;
$('#add').click(function() {
if ($('#sortable li').length < 10) {
$('#sortable').append('<li class="ui-state-default"><input type="checkbox"> Item ' + count++ + '</li>');
} else {
alert('Threshold reached');
}
});
} );
</script>
</body>
</html>

158
src/templates/vote.html Normal file
View File

@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voting Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a;
color: #f4f4f4;
}
.container {
width: 600px;
margin: 100px auto;
padding: 20px;
background-color: #2b2b2b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.election-card {
margin-bottom: 20px;
padding: 10px;
background-color: #3b3b3b;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.item {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.item input[type="checkbox"] {
margin-right: 10px;
background-color: #2b2b2b;
color: #f4f4f4;
}
button {
margin-left: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background-color: #1a75ff; /* Darker blue */
color: white;
cursor: pointer;
}
button:hover {
background-color: #145cbf; /* Even darker blue */
}
</style>
</head>
<body>
<div class="container">
<h2>Voting Page</h2>
<!-- User cards will be inserted here dynamically -->
<div id="usersContainer"></div>
</div>
<script>
const items = [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" }
// Add more items as needed
];
const users = [
{ id: 1, name: "User 1" },
{ id: 2, name: "User 2" },
{ id: 3, name: "User 3" }
// Add more users as needed
];
const usersContainer = document.getElementById("usersContainer");
users.forEach(user => {
const userCard = document.createElement("div");
userCard.className = "election-card";
userCard.innerHTML = `
<h3>${user.name}</h3>
<div class="selectedItemsContainer"></div>
<h3>Unselected Items</h3>
<div class="unselectedItemsContainer">
${items.map(item => `
<div class="item" id="item${user.id}-${item.id}">
<input type="checkbox" id="checkbox${user.id}-${item.id}" onchange="toggleSelection('${user.id}-${item.id}')">
<label for="checkbox${user.id}-${item.id}">${item.name}</label>
</div>
`).join("")}
</div>
<button onclick="submitVote(${user.id})">Submit Vote</button>
`;
usersContainer.appendChild(userCard);
});
function moveUp(itemId) {
const item = document.getElementById(`item${itemId}`);
const previousItem = item.previousElementSibling;
if (previousItem) {
item.parentNode.insertBefore(item, previousItem);
}
}
function moveDown(itemId) {
const item = document.getElementById(`item${itemId}`);
const nextItem = item.nextElementSibling;
if (nextItem) {
item.parentNode.insertBefore(nextItem, item);
}
}
function toggleSelection(itemId) {
const item = document.getElementById(`item${itemId}`);
const checkbox = item.querySelector(`input[type="checkbox"]`);
const userCard = item.parentNode.parentNode;
const selectedItemsContainer = userCard.querySelector('.selectedItemsContainer');
const unselectedItemsContainer = userCard.querySelector('.unselectedItemsContainer');
if (checkbox.checked) {
const upButton = document.createElement('button');
upButton.onclick = function() { moveUp(itemId); };
upButton.textContent = 'Up';
const downButton = document.createElement('button');
downButton.onclick = function() { moveDown(itemId); };
downButton.textContent = 'Down';
item.appendChild(upButton);
item.appendChild(downButton);
selectedItemsContainer.appendChild(item);
} else {
const buttons = item.querySelectorAll('button');
buttons.forEach(button => button.remove());
unselectedItemsContainer.appendChild(item);
}
}
function submitVote(userId) {
const userCard = document.querySelector(`#user${userId}`);
const selectedItemsContainer = userCard.querySelector('.selectedItemsContainer');
const selectedItems = Array.from(selectedItemsContainer.children)
.map(item => item.id.split('-')[1]); // Get the item id
// Implement the logic to submit the vote with the selected items
}
</script>
</body>
</html>