Add "Hit send" button

The button doesn't actually do anything yet, but hopefully it will,
very soon!
This commit is contained in:
Badri Sunderarajan 2021-05-28 21:37:22 +05:30
parent a56e9cd9c2
commit 66056cbf0b

View file

@ -191,6 +191,10 @@
function next() {
step += 1
}
function prev() {
step -= 1
}
</script>
<main>
@ -198,8 +202,8 @@
<h1>Chip <span class="highlight">Choc</span></h1>
<h2>Cookie-cutter emails made easy.</h2>
{#if step != 0}
<h3 class="mt-3">Step {step}</h3>
{#if step >= 1}
<h3 class="mt-3">Step 1</h3>
{/if}
{#if step == 0}
@ -224,6 +228,7 @@
{/if}
{#if step >= 2}
<h3 class="mt-3">Step 1</h3>
<div class="instructions">
<p>Now, fill in the fields for each user. (You can also copy-paste rows and columns directly from Air, if the ordering is right!)</p>
</div>
@ -239,11 +244,39 @@
<div id="editor" bind:this={editor}></div>
{#if step == 2 && !!cookiePreviewText}
{#if step >= 2 && !!cookiePreviewData}
<h4 class="mt-3">Preview</h4>
<div class="cookie-preview">{@html converter.makeHtml(cookiePreviewText)}</div>
<div class="cookie-preview">
<div class="preview-header">
<p>From: {fromEmail || '[NOBODY!!!]'}</p>
<p>To: {cookiePreviewData.email || '[NOBODY!!!]'}</p>
<hr />
</div>
{@html converter.makeHtml(cookiePreviewData.text)}
</div>
<button on:click={decrementPreviewRow}>&lt; Prev</button>
<button on:click={incrementPreviewRow}>Next &gt;</button>
<h3>Step 3</h3>
{#if step == 2}
<div class="instructions">
<p>If everything looks okay, then we're done! Click on the button below to put the cutter in action.</p>
</div>
<button on:click={next}>Yup, send 'em out!</button>
{/if}
{#if step == 3}
<div class="instructions">
<p>Are you <strong>sure</strong> you want to send them out?</p>
<p>Are you ready?</p>
<p>Did you look through all the previews?</p>
<p>Have you double-checked the names and email IDs to make sure they match?</p>
</div>
<button>Hit send!</button> <button on:click={prev}>Ummmm..</button>
{/if}
{/if}
</main>