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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<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 !== "")
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);
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" type="submit" value="Done" />
</form>
<style>
fieldset {
display: flex;
flex-direction: row;
gap: 16px;
align-items: end;
}
.field-group {
background-color: var(--color-header);
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: start !important;
}
.field-group:empty {
display: none;
}
</style>
|