profxadke/marinea
1
0
Fork 0
mirror of https://github.com/regmicmahesh/ses-mailer.git synced 2024-08-14 22:57:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

almost done

Browse source
This commit is contained in:
abh1sh3kk 2023-03-31 23:21:13 +05:45
parent cdf7a087e3
commit 7c443ed8d4
6 changed files with 157 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
client/src/createTemplate.tsx
View file

@ -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>

88
client/src/sendMail.tsx
View file

@ -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()}>

11
client/src/styles/Navbar.css
View file

@ -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;

20
client/src/styles/TemplateManagement.css
View file

@ -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;
}

19
client/src/styles/index.css
View file

@ -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 {

12
client/src/styles/sendMail.css
View file

@ -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;
} }