From f035de1145504f393b5b42f8ded57790b5e43517 Mon Sep 17 00:00:00 2001
From: Adrian Gunnar Lauterer <adrian@lauterer.it>
Date: Sun, 12 May 2024 23:52:29 +0200
Subject: [PATCH] added some html mocs of the website

---
 src/templates/electionCreation.html   |  74 ++++++++++
 src/templates/electionViewer.html     | 205 ++++++++++++++++++++++++++
 src/templates/give-authorization.html |  65 ++++++++
 src/templates/login.html              |  59 ++++++++
 src/templates/main.html               |  37 -----
 src/templates/vote.html               | 158 ++++++++++++++++++++
 6 files changed, 561 insertions(+), 37 deletions(-)
 create mode 100644 src/templates/electionCreation.html
 create mode 100644 src/templates/electionViewer.html
 create mode 100644 src/templates/give-authorization.html
 create mode 100644 src/templates/login.html
 delete mode 100644 src/templates/main.html
 create mode 100644 src/templates/vote.html
diff --git a/src/templates/electionCreation.html b/src/templates/electionCreation.html
new file mode 100644
index 0000000..463655f
--- /dev/null
+++ b/src/templates/electionCreation.html
@@ -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>
\ No newline at end of file
diff --git a/src/templates/electionViewer.html b/src/templates/electionViewer.html
new file mode 100644
index 0000000..e9dc97f
--- /dev/null
+++ b/src/templates/electionViewer.html
@@ -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>
\ No newline at end of file
diff --git a/src/templates/give-authorization.html b/src/templates/give-authorization.html
new file mode 100644
index 0000000..0776f1a
--- /dev/null
+++ b/src/templates/give-authorization.html
@@ -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>
\ No newline at end of file
diff --git a/src/templates/login.html b/src/templates/login.html
new file mode 100644
index 0000000..607ab87
--- /dev/null
+++ b/src/templates/login.html
@@ -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>
\ No newline at end of file
diff --git a/src/templates/main.html b/src/templates/main.html
deleted file mode 100644
index 57db19a..0000000
--- a/src/templates/main.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/templates/vote.html b/src/templates/vote.html
new file mode 100644
index 0000000..3347e61
--- /dev/null
+++ b/src/templates/vote.html
@@ -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>
\ No newline at end of file
