2025-01-13 10:56:36 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Create New Election</title>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<script src="/static/js/tailwind.min.js"></script>
|
|
|
|
|
|
<script src="/static/js/alpine.min.js" defer></script>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</head>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
|
|
|
|
|
|
<div x-data="electionForm" class="container mx-auto p-6 bg-white rounded-lg shadow-lg">
|
2025-01-13 10:56:36 +01:00
|
|
|
|
<main>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<h1 class="text-3xl font-bold mb-6">Create New Election</h1>
|
|
|
|
|
|
<form @submit.prevent="createElection" class="space-y-6">
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Election Name</label>
|
|
|
|
|
|
<input type="text" id="name" x-model="election.name" required
|
|
|
|
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="tokens" class="block text-sm font-medium text-gray-700">Tokens per Voter</label>
|
|
|
|
|
|
<input type="number" id="tokens" x-model.number="election.tokens" min="1" required
|
|
|
|
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div>
|
|
|
|
|
|
<label for="areVotersKnown" class="block text-sm font-medium text-gray-700">Voter Access</label>
|
|
|
|
|
|
<select id="areVotersKnown" x-model="election.areVotersKnown" required
|
|
|
|
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
2025-01-13 19:58:42 +01:00
|
|
|
|
<option :value="true">Known voters only</option>
|
|
|
|
|
|
<option :value="false">Open to anyone</option>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</select>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<p class="text-sm text-gray-500 mt-1">Known voters only = codes will be generated for distribution.</p>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div>
|
|
|
|
|
|
<label for="maxVoters" class="block text-sm font-medium text-gray-700">Maximum Number of Voters</label>
|
|
|
|
|
|
<input type="number" id="maxVoters" x-model.number="election.maxVoters" min="1"
|
|
|
|
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
|
|
|
|
|
<p class="text-sm text-gray-500">0 = unlimited</p>
|
2025-01-14 12:35:32 +01:00
|
|
|
|
<template x-if="election.areVotersKnown && election.maxVoters <= 0">
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<span class="text-red-500 text-sm">Maximum number of voters must be greater than 0 if voters are known.</span>
|
2025-01-14 12:35:32 +01:00
|
|
|
|
</template>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div>
|
|
|
|
|
|
<label for="expiresAt" class="block text-sm font-medium text-gray-700">Expiration Date</label>
|
|
|
|
|
|
<input type="datetime-local" id="expiresAt" x-model="election.expiresAt" required
|
|
|
|
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm font-medium text-gray-700">Choices</label>
|
|
|
|
|
|
<div class="space-y-2 mt-2">
|
2025-01-14 12:35:32 +01:00
|
|
|
|
<template x-for="(choice, index) in election.choices" :key="index">
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div class="flex space-x-2 items-center">
|
|
|
|
|
|
<input type="text" x-model="election.choices[index]" required
|
|
|
|
|
|
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
|
|
|
|
|
<button type="button" class="text-red-500 hover:text-red-700"
|
|
|
|
|
|
@click="removeChoice(index)" x-show="election.choices.length > 2">×</button>
|
2025-01-14 12:35:32 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<button type="button" @click="addChoice"
|
|
|
|
|
|
class="mt-3 inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
|
|
|
|
Add Another Choice
|
|
|
|
|
|
</button>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div>
|
|
|
|
|
|
<button type="submit"
|
|
|
|
|
|
class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
|
|
|
|
Create Election
|
|
|
|
|
|
</button>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</div>
|
2025-01-14 13:31:33 +01:00
|
|
|
|
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</form>
|
2025-01-13 19:58:42 +01:00
|
|
|
|
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div x-show="errorMessage || Object.keys(errorDetails).length > 0" class="mt-6 bg-red-100 p-4 rounded-md">
|
|
|
|
|
|
<h2 class="text-red-700 font-bold" x-text="errorMessage"></h2>
|
|
|
|
|
|
<ul class="text-red-600 mt-2 space-y-1">
|
2025-01-14 12:51:29 +01:00
|
|
|
|
<template x-for="(message, field) in errorDetails" :key="field">
|
|
|
|
|
|
<li><strong x-text="field"></strong>: <span x-text="message"></span></li>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-01-14 12:35:32 +01:00
|
|
|
|
<template x-if="createdElectionId > 0">
|
2025-01-14 13:31:33 +01:00
|
|
|
|
<div class="mt-6 bg-green-100 p-4 rounded-md">
|
|
|
|
|
|
<h2 class="text-green-700 font-bold">Election Created Successfully</h2>
|
|
|
|
|
|
<p class="mt-2">Election ID: <span class="font-mono" x-text="createdElectionId"></span></p>
|
2025-01-13 19:58:42 +01:00
|
|
|
|
</div>
|
2025-01-14 12:35:32 +01:00
|
|
|
|
</template>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</main>
|
|
|
|
|
|
</div>
|
2025-01-13 19:58:42 +01:00
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-01-14 12:51:29 +01:00
|
|
|
|
document.addEventListener("alpine:init", () => {
|
|
|
|
|
|
Alpine.data("electionForm", () => ({
|
2025-01-14 12:35:32 +01:00
|
|
|
|
election: {
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
tokens: 100,
|
|
|
|
|
|
areVotersKnown: true,
|
|
|
|
|
|
maxVoters: 0,
|
|
|
|
|
|
expiresAt: "",
|
2025-01-14 12:51:53 +01:00
|
|
|
|
choices: ["", ""]
|
2025-01-14 12:35:32 +01:00
|
|
|
|
},
|
|
|
|
|
|
createdElectionId: 0,
|
2025-01-14 12:51:29 +01:00
|
|
|
|
errorMessage: "",
|
|
|
|
|
|
errorDetails: {},
|
2025-01-14 12:35:32 +01:00
|
|
|
|
|
2025-01-13 19:58:42 +01:00
|
|
|
|
addChoice() {
|
2025-01-14 12:51:53 +01:00
|
|
|
|
this.election.choices.push("");
|
2025-01-13 19:58:42 +01:00
|
|
|
|
},
|
2025-01-14 12:35:32 +01:00
|
|
|
|
|
2025-01-13 19:58:42 +01:00
|
|
|
|
removeChoice(index) {
|
2025-01-14 12:51:53 +01:00
|
|
|
|
this.election.choices.splice(index, 1);
|
2025-01-13 19:58:42 +01:00
|
|
|
|
},
|
2025-01-14 12:35:32 +01:00
|
|
|
|
|
2025-01-14 12:51:29 +01:00
|
|
|
|
async createElection() {
|
|
|
|
|
|
this.errorMessage = "";
|
|
|
|
|
|
this.errorDetails = {};
|
2025-01-13 19:58:42 +01:00
|
|
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
|
|
...this.election,
|
2025-01-14 12:51:29 +01:00
|
|
|
|
expiresAt: this.election.expiresAt + ":00Z",
|
|
|
|
|
|
choices: this.election.choices.filter(choice => choice.trim() !== "")
|
2025-01-13 19:58:42 +01:00
|
|
|
|
};
|
|
|
|
|
|
|
2025-01-14 12:51:29 +01:00
|
|
|
|
try {
|
|
|
|
|
|
const response = await fetch("/api/election", {
|
|
|
|
|
|
method: "POST",
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
"Content-Type": "application/json"
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify(payload)
|
2025-01-13 19:58:42 +01:00
|
|
|
|
});
|
2025-01-14 12:51:29 +01:00
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
|
const errorData = await response.json();
|
|
|
|
|
|
this.errorMessage = errorData.message || "An error occurred.";
|
|
|
|
|
|
this.errorDetails = errorData.details?.fields || {};
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const locationHeader = response.headers.get("Location");
|
|
|
|
|
|
this.createdElectionId = locationHeader.replace("/election/", "");
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
this.errorMessage = "Failed to create election.";
|
|
|
|
|
|
}
|
2025-01-13 19:58:42 +01:00
|
|
|
|
}
|
2025-01-14 12:35:32 +01:00
|
|
|
|
}));
|
2025-01-13 19:58:42 +01:00
|
|
|
|
});
|
|
|
|
|
|
</script>
|
2025-01-13 10:56:36 +01:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
