90 lines
2.9 KiB
Vue
90 lines
2.9 KiB
Vue
<template>
|
|
<img id="header-splash" src="../assets/welcome-wood.jpg" />
|
|
<div id="event-proposal" :class="[formState]">
|
|
<header>
|
|
<h1>Propose an Event</h1>
|
|
<h2>Hope Family Fellowship</h2>
|
|
</header>
|
|
<form @submit.prevent="proposeEvent">
|
|
<fieldset :disabled="formState !== 'ready' && formState !== 'invalid'">
|
|
<label>
|
|
<span>Event Name</span>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="e.g. Men's Bible Study"
|
|
v-model="formVal.event.name"
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>Date and time</span>
|
|
<input type="date" name="date" v-model="formVal.event.date" />
|
|
</label>
|
|
<label>
|
|
<span>Department / Event Type</span>
|
|
<select name="department" v-model="formVal.event.department">
|
|
<option value="">--- select a department or type ---</option>
|
|
<option
|
|
v-for="opt in departments"
|
|
:key="opt.value"
|
|
class="color-{{opt.color}}"
|
|
>
|
|
{{ opt.value }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Owner</span>
|
|
<input type="text" name="owner" v-model="formVal.event.owner" />
|
|
</label>
|
|
<label>
|
|
<span>Location</span>
|
|
<textarea v-model="formVal.event.location"></textarea>
|
|
</label>
|
|
<label>
|
|
<span>Purpose</span>
|
|
<textarea v-model="formVal.event.purpose"></textarea>
|
|
</label>
|
|
<label>
|
|
<span>Description</span>
|
|
<textarea v-model="formVal.event.description"></textarea>
|
|
</label>
|
|
<div class="invalid-message" v-if="formState === 'invalid'">
|
|
All fields are required.
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit">
|
|
<span v-if="formState === 'ready' || formState === 'invalid'"
|
|
>Propose Event</span
|
|
>
|
|
<span v-if="formState === 'submitting'">
|
|
<SpinnerIcon class="spin" />
|
|
submitting...
|
|
</span>
|
|
<span v-if="formState === 'loading'">
|
|
<HourGlassIcon class="tumble" />
|
|
Loading...
|
|
</span>
|
|
<span v-if="formState === 'success'">
|
|
<CircleCheckIcon />
|
|
Event Proposed!
|
|
</span>
|
|
<span v-if="formState === 'error'">
|
|
<CircleCheckIcon />
|
|
An error occurred.
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="successes">
|
|
<div v-for="s in successes" :key="s">{{ s }}</div>
|
|
</div>
|
|
<div class="errors">
|
|
<div v-for="e in errors" :key="e">{{ s }}</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" src="./ProposeEvent.ts"></script>
|
|
<style scoped lang="scss" src="./ProposeEvent.scss"></style>
|