mirror of
https://github.com/regmicmahesh/ses-mailer.git
synced 2024-08-14 22:57:18 +00:00
almost done
This commit is contained in:
parent
cdf7a087e3
commit
7c443ed8d4
6 changed files with 157 additions and 82 deletions
|
@ -19,19 +19,20 @@ export const TemplateManagement = () => {
|
|||
|
||||
return (
|
||||
<main class="template-page">
|
||||
<section class="form-container2">
|
||||
<section class="form-container">
|
||||
<h1>Template Management Page</h1>
|
||||
|
||||
<form onsubmit={submitForm}>
|
||||
<div class="create-template">Create Template </div>
|
||||
<div>
|
||||
<div>HTML Template:</div>
|
||||
<textarea
|
||||
value={htmlBody()}
|
||||
class="textarea"
|
||||
onInput={(e) => setHtmlBody(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<label>
|
||||
<div class="create-template">Create HTML Template </div>
|
||||
<div>
|
||||
<textarea
|
||||
value={htmlBody()}
|
||||
class="textarea"
|
||||
onInput={(e) => setHtmlBody(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<div>Subject:</div>
|
||||
|
@ -54,13 +55,73 @@ export const TemplateManagement = () => {
|
|||
<input class="btn" type="submit" value="Submit" />
|
||||
</form>
|
||||
</section>
|
||||
<section class="template-list">
|
||||
<section class="template-list-container">
|
||||
<h2>Templates</h2>
|
||||
|
||||
<ul>
|
||||
<For each={templates()}>
|
||||
<ul class="template-list">
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
<li>Hi, I am Abhishek</li>
|
||||
{/* <For each={templates()}>
|
||||
{(template) => <li>{template}</li>}
|
||||
</For>
|
||||
</For> */}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
@ -74,54 +74,58 @@ export const MailManagement = () => {
|
|||
|
||||
return (
|
||||
<main class="mail-management-page">
|
||||
<section class="form-container">
|
||||
<h1>Mail Management Page</h1>
|
||||
<div class="mail-management-container flex-center flex-column">
|
||||
<section class="form-container">
|
||||
<h1>Mail Management Page</h1>
|
||||
|
||||
<form onsubmit={sendMail} class="mail-management-form">
|
||||
<label>
|
||||
<div>Sender</div>
|
||||
<input type="text" />
|
||||
</label>
|
||||
<form onsubmit={sendMail} class="mail-management-form">
|
||||
<label>
|
||||
<div>Sender</div>
|
||||
<input type="text" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<div>Template Name:</div>
|
||||
<input type="text" />
|
||||
</label>
|
||||
<label>
|
||||
<div>Template Name:</div>
|
||||
<input type="text" />
|
||||
</label>
|
||||
|
||||
<div>Recipient List (CSV Only Accepted):</div>
|
||||
<label class="input-file-label">
|
||||
{/* <div>Enter .csv file here</div> */}
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={onCsvSubmit}
|
||||
class="input-file"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{variables().length > 0 && (
|
||||
<>
|
||||
<div>
|
||||
Receiver Email Column: <br />
|
||||
<select onchange={onChangeReceiverColumn}>
|
||||
<For each={variables()}>
|
||||
{(variable) => (
|
||||
<option value={variable}>
|
||||
{variable}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div>Recipient List (CSV Only Accepted):</div>
|
||||
<label class="input-file-label">
|
||||
{/* <div>Enter .csv file here</div> */}
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={onCsvSubmit}
|
||||
class="input-file"
|
||||
type="submit"
|
||||
value="Send"
|
||||
class="btn btn-send"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{variables().length > 0 && (
|
||||
<>
|
||||
<div>
|
||||
Receiver Email Column: <br />
|
||||
<select onchange={onChangeReceiverColumn}>
|
||||
<For each={variables()}>
|
||||
{(variable) => (
|
||||
<option value={variable}>
|
||||
{variable}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<input type="submit" value="Send" class="btn btn-send" />
|
||||
</form>
|
||||
</section>
|
||||
<div>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<table border={1} class="the-table">
|
||||
<table class="the-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<For each={variables()}>
|
||||
|
|
|
@ -5,18 +5,7 @@ nav {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/* -------testing--------- */
|
||||
/* position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0; */
|
||||
/* -------testing--------- */
|
||||
}
|
||||
main {
|
||||
/* margin-top: 64px; */
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
|
|
|
@ -1,9 +1,21 @@
|
|||
.template-list {
|
||||
border: 2px solid red;
|
||||
.template-list-container {
|
||||
border: 2px solid gray;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
align-self: center;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
max-height: 500px;
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
|
||||
.template-list-container > h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.template-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -11,5 +23,9 @@
|
|||
gap: 2rem;
|
||||
}
|
||||
.form-container {
|
||||
max-width: 600px;
|
||||
flex: 1;
|
||||
}
|
||||
.template-list > li {
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
|
|
@ -20,15 +20,22 @@ body {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* -----------Homepage----------------- */
|
||||
|
||||
|
||||
/* ---------------------------- */
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
|
||||
input,
|
||||
.textarea {
|
||||
|
|
|
@ -7,7 +7,7 @@ main {
|
|||
}
|
||||
.form-container {
|
||||
min-width: 400px;
|
||||
max-width: 900px;
|
||||
max-width: 600px;
|
||||
border-radius: 0.3rem;
|
||||
padding: 1.5rem;
|
||||
|
||||
|
@ -24,22 +24,20 @@ label {
|
|||
}
|
||||
|
||||
.input-file {
|
||||
display: none;
|
||||
border: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
/* padding: 6px 12px; */
|
||||
|
||||
outline: none;
|
||||
display: none;
|
||||
}
|
||||
.input-file-label {
|
||||
outline: 2px solid grey;
|
||||
height: 100px;
|
||||
/* outline: 2px solid grey; */
|
||||
/* height: 100px; */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue