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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
<script lang="ts">
import AddField from "$lib/components/AddField.svelte";
import GenericInput from "$lib/components/GenericInput.svelte";
import DisplayImage from "$lib/components/DisplayImage.svelte";
import { goto } from "$app/navigation";
import { SaveContact, SaveContactImage, PickContactImage, GetContactImage } from "$lib/wailsjs/go/main/App";
import { global } from "$lib/global.svelte.js";
let showJob = $derived(global.contact.Job !== "")
let imageDataUri = $state("");
let pendingImageBase64 = $state("");
$inspect(imageDataUri, pendingImageBase64);
$effect(async () => {
if (global.contact.ID) {
const uri = await GetContactImage(global.contact);
if (uri) imageDataUri = uri;
}
});
async function handle_image_select() {
alert("Sorry I just haven't implemented contact photos.");
return;
const result = await PickContactImage(global.contact);
if (result) {
imageDataUri = result.dataURI;
pendingImageBase64 = result.base64;
}
}
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;
});
if (pendingImageBase64) await SaveContactImage(pendingImageBase64);
goto("/");
}
if (!global.contact.Emails || global.contact.Emails.length == 0) {
add_email();
}
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}>
<div class="flex justify-between">
<h1 class="page-header">Editing Contact</h1>
<a class="text-button" href="/contacts">Manage Contacts</a>
</div>
<section class="flex flex-col gap-8 text-xs w-1/2">
<button type="button" onclick={handle_image_select} class="mb-4 focus:outline-none cursor-pointer text-button">
Set contact Photo
<DisplayImage src={imageDataUri} />
</button>
<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>
|