Use TailwindCSS
This commit is contained in:
@ -4,70 +4,85 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Create New Election</title>
|
||||
<link rel="stylesheet" href="/static/css/styles.css">
|
||||
<script src="https://unpkg.com/alpinejs@3" defer></script>
|
||||
<script src="/static/js/tailwind.min.js"></script>
|
||||
<script src="/static/js/alpine.min.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div x-data="electionForm" class="container">
|
||||
<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">
|
||||
<main>
|
||||
<h1>Create New Election</h1>
|
||||
<form @submit.prevent="createElection" class="form">
|
||||
<div class="form-group">
|
||||
<label for="name">Election Name</label>
|
||||
<input type="text" id="name" x-model="election.name" required>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="tokens">Tokens per Voter</label>
|
||||
<input type="number" id="tokens" x-model.number="election.tokens" min="1" required>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="areVotersKnown">Voter Access</label>
|
||||
<select id="areVotersKnown" x-model="election.areVotersKnown" required>
|
||||
<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">
|
||||
<option :value="true">Known voters only</option>
|
||||
<option :value="false">Open to anyone</option>
|
||||
</select>
|
||||
<small>Known voters only = codes will be generated and you must give those to your voters</small>
|
||||
<p class="text-sm text-gray-500 mt-1">Known voters only = codes will be generated for distribution.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="maxVoters">Maximum Number of Voters</label>
|
||||
<input type="number" id="maxVoters" x-model.number="election.maxVoters" min="1">
|
||||
<small>0 = unlimited</small>
|
||||
<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>
|
||||
<template x-if="election.areVotersKnown && election.maxVoters <= 0">
|
||||
<span class="error-text">Maximum number of voters must be greater than 0 if voters are known</span>
|
||||
<span class="text-red-500 text-sm">Maximum number of voters must be greater than 0 if voters are known.</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="expiresAt">Expiration Date</label>
|
||||
<input type="datetime-local" id="expiresAt" x-model="election.expiresAt" required>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Choices</label>
|
||||
<div id="choices-container">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Choices</label>
|
||||
<div class="space-y-2 mt-2">
|
||||
<template x-for="(choice, index) in election.choices" :key="index">
|
||||
<div class="choice-input">
|
||||
<input type="text" x-model="election.choices[index]" required>
|
||||
<button type="button" class="remove-choice" @click="removeChoice(index)" x-show="election.choices.length > 2">×</button>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button type="button" id="add-choice" @click="addChoice">Add Another Choice</button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit">Create Election</button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div x-show="errorMessage || Object.keys(errorDetails).length > 0" class="error-container">
|
||||
<h2 x-text="errorMessage"></h2>
|
||||
<ul>
|
||||
<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">
|
||||
<template x-for="(message, field) in errorDetails" :key="field">
|
||||
<li><strong x-text="field"></strong>: <span x-text="message"></span></li>
|
||||
</template>
|
||||
@ -75,37 +90,9 @@
|
||||
</div>
|
||||
|
||||
<template x-if="createdElectionId > 0">
|
||||
<div class="election-info">
|
||||
<h2>Election Created Successfully</h2>
|
||||
<div class="info-container">
|
||||
<span class="info-label">Election ID:</span>
|
||||
<span class="info-value" x-text="createdElectionId"></span>
|
||||
<button @click="copyElectionId" class="copy-btn">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="voterIdentities.length > 0">
|
||||
<div class="voter-codes">
|
||||
<h2>Voter Access Codes</h2>
|
||||
<div class="codes-container">
|
||||
<button @click="copyAllCodes" class="copy-all-btn">
|
||||
Copy All Codes
|
||||
</button>
|
||||
<div class="codes-list">
|
||||
<template x-for="(code, index) in voterIdentities" :key="code">
|
||||
<div class="code-item">
|
||||
<span class="code-number" x-text="index + 1"></span>.
|
||||
<span class="code-text" x-text="code"></span>
|
||||
<button @click="copyCode(code)" class="copy-btn">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
@ -123,7 +110,6 @@
|
||||
choices: ["", ""]
|
||||
},
|
||||
createdElectionId: 0,
|
||||
voterIdentities: [],
|
||||
errorMessage: "",
|
||||
errorDetails: {},
|
||||
|
||||
@ -135,27 +121,9 @@
|
||||
this.election.choices.splice(index, 1);
|
||||
},
|
||||
|
||||
async copyCode(code) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy code:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async copyAllCodes() {
|
||||
try {
|
||||
const allCodes = this.voterIdentities.join("\n");
|
||||
await navigator.clipboard.writeText(allCodes);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy codes:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async createElection() {
|
||||
this.errorMessage = "";
|
||||
this.errorDetails = {};
|
||||
this.voterIdentities = [];
|
||||
|
||||
const payload = {
|
||||
...this.election,
|
||||
@ -181,12 +149,8 @@
|
||||
|
||||
const locationHeader = response.headers.get("Location");
|
||||
this.createdElectionId = locationHeader.replace("/election/", "");
|
||||
|
||||
const data = await response.json();
|
||||
this.voterIdentities = data.voterIdentities;
|
||||
} catch (error) {
|
||||
this.errorMessage = "Failed to create election.";
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user