frontend/src/routes/contact/+page.svelte (view raw)
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 |
<script lang="ts">
import AddField from "$lib/components/AddField.svelte";
import GenericInput from "$lib/components/GenericInput.svelte";
import { goto } from "$app/navigation";
import { SaveContact } from "$lib/wailsjs/go/main/App";
import { global } from "$lib/global.svelte.js";
let showJob = $derived(global.contact.Job !== "")
async function preventDefault(event) {
event.preventDefault();
global.contact.Emails = (global.contact.Emails || []).filter(x => x.Key && x.Value);
global.contact.PhoneNumbers = (global.contact.PhoneNumbers || []).filter(x => x.Key && x.Value);
global.contact.Urls = (global.contact.Urls || []).filter(x => x.Key && x.Value);
global.contact.StreetAddresses = (global.contact.StreetAddresses || []).filter(x => x.Key && (x.Street1 || x.Street2 || x.City || x.State || x.ZipCode || x.Country));
global.contact.Dates = (global.contact.Dates || []).filter(x => x.Key && x.Value);
global.contact.Other = (global.contact.Other || []).filter(x => x.Key && x.Value);
await SaveContact(global.contact).catch(err => {
alert(err);
return;
});
goto("/");
}
function add_email() {
global.contact.Emails = global.contact.Emails || [];
global.contact.Emails.push({});
}
function add_phone() {
global.contact.PhoneNumbers = global.contact.PhoneNumbers || [];
global.contact.PhoneNumbers.push({});
}
function add_url() {
global.contact.Urls = global.contact.Urls || [];
global.contact.Urls.push({});
}
function add_address() {
global.contact.StreetAddresses = global.contact.StreetAddresses || [];
global.contact.StreetAddresses.push({});
}
function add_date() {
global.contact.Dates = global.contact.Dates || [];
global.contact.Dates.push({});
}
function add_other() {
global.contact.Other = global.contact.Other || [];
global.contact.Other.push({});
}
</script>
<form class=" h-full w-full p-4 overflow-scroll flex flex-col" onsubmit={preventDefault}>
<section class="flex flex-col gap-8 text-xs w-1/2">
<fieldset class="field-group">
<fieldset>
<label>First Name <GenericInput bind:value={global.contact.Firstname} placeholder="Mailey" /></label>
<label>Last Name <GenericInput bind:value={global.contact.Lastname} placeholder="Franklin" /></label>
</fieldset>
<label>Association <GenericInput bind:value={global.contact.Association} placeholder="Coworker" /></label>
{#if showJob}
<label>Job <GenericInput bind:value={global.contact.Job} placeholder="Postmaster General" /></label>
{:else}
<AddField fieldName="Job" onclick={() => showJob = true} />
{/if}
</fieldset>
<fieldset class="field-group">
{#each global.contact.Emails as email, index}
<fieldset>
<label><GenericInput fallback="Personal" bind:value={global.contact.Emails[index].Key} /></label>
<label>Email <GenericInput bind:value={global.contact.Emails[index].Value} placeholder="mailey@femail.sh" /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Email" onclick={add_email} />
<fieldset class="field-group">
{#each global.contact.PhoneNumbers as phone, index}
<fieldset>
<label><GenericInput fallback="Mobile" bind:value={global.contact.PhoneNumbers[index].Key} /></label>
<label>Phone <GenericInput bind:value={global.contact.PhoneNumbers[index].Value} placeholder="225-000-0000" /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Phone" onclick={add_phone} />
<fieldset class="field-group">
{#each global.contact.Urls as url, index}
<fieldset>
<label><GenericInput fallback="website" bind:value={global.contact.Urls[index].Key} /></label>
<label>Url <GenericInput bind:value={global.contact.Urls[index].Value} placeholder="https://emessage.machinetele.com" /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Url" onclick={add_url} />
<fieldset class="field-group">
{#each global.contact.StreetAddresses as address, index}
<fieldset>
<label><GenericInput fallback="Home" bind:value={global.contact.StreetAddresses[index].Key} /></label>
<label>Street1 <GenericInput bind:value={global.contact.StreetAddresses[index].Street1} placeholder="123 Main St" /></label>
<label>Street2 <GenericInput bind:value={global.contact.StreetAddresses[index].Street2} placeholder="Apt 4B" /></label>
<label>City <GenericInput bind:value={global.contact.StreetAddresses[index].City} placeholder="Springfield" /></label>
<label>State <GenericInput bind:value={global.contact.StreetAddresses[index].State} placeholder="IL" /></label>
<label>ZipCode <GenericInput bind:value={global.contact.StreetAddresses[index].ZipCode} placeholder="62701" /></label>
<label>Country <GenericInput bind:value={global.contact.StreetAddresses[index].Country} placeholder="USA" /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Address" onclick={add_address} />
<fieldset class="field-group">
{#each global.contact.Dates as date, index}
<fieldset>
<label><GenericInput fallback="Birthday" bind:value={global.contact.Dates[index].Key} /></label>
<label>Date <input type="date" bind:value={global.contact.Dates[index].Value} /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Date" onclick={add_date} />
<fieldset class="field-group">
{#each global.contact.Other as other, index}
<fieldset>
<label><GenericInput fallback="Custom" bind:value={global.contact.Other[index].Key} /></label>
<label>Value <GenericInput bind:value={global.contact.Other[index].Value} placeholder="any text" /></label>
</fieldset>
{/each}
</fieldset>
<AddField fieldName="Other" onclick={add_other} />
</section>
<input class="ml-auto text-button" type="submit" value="Done" />
</form>
|