-
Notifications
You must be signed in to change notification settings - Fork 4
/
+page.svelte
153 lines (143 loc) · 4.35 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<script lang="ts">
import { applyAction, enhance } from '$app/forms';
import { LoaderIcon, PlusIcon } from '$lib';
interface ChoicesType {
name: string;
value: string;
}
export let form: { ok: boolean; message: string; deleteId: string };
let choices: ChoicesType[] = [
{ name: 'choice_0', value: '' },
{ name: 'choice_1', value: '' }
];
let choicesCount: number = 2;
let isSubmitting = false;
function addChoice(ev: Event) {
ev.preventDefault();
if (choicesCount < 10) {
choices = [...choices, { name: `choice_${choicesCount}`, value: '' }];
choicesCount++;
return;
}
console.log("Can't have more than 10 choices");
}
function validateLength(index: number) {
if (choices[index].value.length >= 20) {
choices[index].value = choices[index].value.slice(0, 20);
}
}
</script>
<h1 class="text-2xl tect-center flex justify-center">New Poll</h1>
<form
method="post"
class="p-2 lg:p-8 flex flex-col gap-4 max-w-xl mx-auto"
use:enhance={() => {
isSubmitting = true;
return async ({ result }) => {
await applyAction(result);
isSubmitting = false;
};
}}
>
<div>
{#if form?.ok}
<div class="p-2 bg-green-200 rounded text-green-700 flex gap-2">
<span>{form.message}</span> <span>(deleteId: {form.deleteId})</span>
</div>
{:else if !form?.ok && form?.message}
<div class="p-2 bg-red-200 rounded text-red-700 mx-auto w-fit">{form.message}</div>
{/if}
</div>
<div class="flex flex-col gap-2">
<label for="">Question</label>
<textarea name="question" required rows="3" />
</div>
<div class="flex flex-col gap-2">
{#each choices as choice, i}
<div class="flex flex-col gap-2">
<div>
<label for=""
>Choice {i + 1} <span class="text-gray-400">{i > 1 ? '(Optional)' : ''}</span></label
>
</div>
<div class="flex gap-4">
<div class="flex w-full relative">
<input
class="w-full grow"
type="text"
name={choice.name}
bind:value={choice.value}
max="20"
required={i < 2}
on:input={() => validateLength(i)}
/>
<span class="absolute right-2 h-full flex items-center justify-center text-gray-400"
>({choice.value.length} / 20)</span
>
</div>
{#if choicesCount === i + 1}
<button
type="button"
class="shrink-0 w-8 flex items-center justify-center"
on:click={addChoice}
>
<PlusIcon styles="w-5 h-5 fill-blue-600 hover:fill-blue-700" />
</button>
{/if}
</div>
</div>
{/each}
<div>
<label for="">Poll Duration</label>
<div class="grid grid-cols-3 gap-4">
<div class="flex flex-col gap-2">
<label class="text-gray-500 text-sm" for="">Days</label>
<select name="days">
{#each { length: 10 } as _, i}
<option value={i}>{i}</option>
{/each}
</select>
</div>
<div class="flex flex-col gap-2">
<label class="text-gray-500 text-sm" for="">Hours</label>
<select name="hours">
{#each { length: 24 } as _, i}
<option selected={i === 1} value={i}>{i}</option>
{/each}
</select>
</div>
<div class="flex flex-col gap-2">
<label class="text-gray-500 text-sm" for="">Minutes</label>
<select name="minutes">
{#each { length: 60 } as _, i}
<option value={i}>{i}</option>
{/each}
</select>
</div>
</div>
</div>
<input type="hidden" name="choices_count" value={choicesCount} />
</div>
<div class="flex justify-center">
<button
type="submit"
class=" w-32 p-2 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded text-white flex justify-center items-center gap-1"
>
{#if isSubmitting}
<LoaderIcon styles="w-3 h-3 fill-white" />
{/if} <span>Add Poll</span></button
>
</div>
</form>
<style>
input {
@apply outline outline-1 outline-gray-400 rounded p-2;
}
select,
textarea {
@apply p-2 rounded bg-transparent outline outline-1 outline-gray-400;
}
textarea {
@apply resize-none;
}
</style>