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 (
|
return (
|
||||||
<main class="template-page">
|
<main class="template-page">
|
||||||
<section class="form-container2">
|
<section class="form-container">
|
||||||
<h1>Template Management Page</h1>
|
<h1>Template Management Page</h1>
|
||||||
|
|
||||||
<form onsubmit={submitForm}>
|
<form onsubmit={submitForm}>
|
||||||
<div class="create-template">Create Template </div>
|
<label>
|
||||||
<div>
|
<div class="create-template">Create HTML Template </div>
|
||||||
<div>HTML Template:</div>
|
<div>
|
||||||
<textarea
|
<textarea
|
||||||
value={htmlBody()}
|
value={htmlBody()}
|
||||||
class="textarea"
|
class="textarea"
|
||||||
onInput={(e) => setHtmlBody(e.target.value)}
|
onInput={(e) => setHtmlBody(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
<div>Subject:</div>
|
<div>Subject:</div>
|
||||||
|
@ -54,13 +55,73 @@ export const TemplateManagement = () => {
|
||||||
<input class="btn" type="submit" value="Submit" />
|
<input class="btn" type="submit" value="Submit" />
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
<section class="template-list">
|
<section class="template-list-container">
|
||||||
<h2>Templates</h2>
|
<h2>Templates</h2>
|
||||||
|
|
||||||
<ul>
|
<ul class="template-list">
|
||||||
<For each={templates()}>
|
<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>}
|
{(template) => <li>{template}</li>}
|
||||||
</For>
|
</For> */}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -74,54 +74,58 @@ export const MailManagement = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main class="mail-management-page">
|
<main class="mail-management-page">
|
||||||
<section class="form-container">
|
<div class="mail-management-container flex-center flex-column">
|
||||||
<h1>Mail Management Page</h1>
|
<section class="form-container">
|
||||||
|
<h1>Mail Management Page</h1>
|
||||||
|
|
||||||
<form onsubmit={sendMail} class="mail-management-form">
|
<form onsubmit={sendMail} class="mail-management-form">
|
||||||
<label>
|
<label>
|
||||||
<div>Sender</div>
|
<div>Sender</div>
|
||||||
<input type="text" />
|
<input type="text" />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
<div>Template Name:</div>
|
<div>Template Name:</div>
|
||||||
<input type="text" />
|
<input type="text" />
|
||||||
</label>
|
</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
|
<input
|
||||||
type="file"
|
type="submit"
|
||||||
accept=".csv"
|
value="Send"
|
||||||
onChange={onCsvSubmit}
|
class="btn btn-send"
|
||||||
class="input-file"
|
|
||||||
/>
|
/>
|
||||||
</label>
|
</form>
|
||||||
|
</section>
|
||||||
{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>
|
|
||||||
<section>
|
<section>
|
||||||
<table border={1} class="the-table">
|
<table class="the-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<For each={variables()}>
|
<For each={variables()}>
|
||||||
|
|
|
@ -5,18 +5,7 @@ nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/* -------testing--------- */
|
|
||||||
/* position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0; */
|
|
||||||
/* -------testing--------- */
|
|
||||||
}
|
}
|
||||||
main {
|
|
||||||
/* margin-top: 64px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-list {
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
|
|
|
@ -1,9 +1,21 @@
|
||||||
.template-list {
|
.template-list-container {
|
||||||
border: 2px solid red;
|
border: 2px solid gray;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
min-width: 350px;
|
min-width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.template-list {
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-list-container > h2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.template-page {
|
.template-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -11,5 +23,9 @@
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
.form-container {
|
.form-container {
|
||||||
|
max-width: 600px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
.template-list > li {
|
||||||
|
margin-block: 0.5rem;
|
||||||
|
}
|
||||||
|
|
|
@ -20,15 +20,22 @@ body {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* -----------Homepage----------------- */
|
/* -----------Homepage----------------- */
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------------------- */
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------- */
|
||||||
|
|
||||||
input,
|
input,
|
||||||
.textarea {
|
.textarea {
|
||||||
|
|
|
@ -7,7 +7,7 @@ main {
|
||||||
}
|
}
|
||||||
.form-container {
|
.form-container {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
max-width: 900px;
|
max-width: 600px;
|
||||||
border-radius: 0.3rem;
|
border-radius: 0.3rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
|
|
||||||
|
@ -24,22 +24,20 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-file {
|
.input-file {
|
||||||
|
display: none;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 6px 12px;
|
/* padding: 6px 12px; */
|
||||||
|
|
||||||
outline: none;
|
outline: none;
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
.input-file-label {
|
.input-file-label {
|
||||||
outline: 2px solid grey;
|
/* outline: 2px solid grey; */
|
||||||
height: 100px;
|
/* height: 100px; */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue