566 lines
21 KiB
HTML
566 lines
21 KiB
HTML
<link rel="icon" href="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
|
|
<title>Mailer</title>
|
|
|
|
<form class="pure-form pure-form-stacked pure-u-11-12 pure-u-lg-3-4 pure-u-xl-2-3">
|
|
<fieldset>
|
|
<legend>Basic Information</legend>
|
|
<div class="gaps pure-g">
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">File Name</span>
|
|
<span class="less ellipsis pure-u-3-4" id="fileLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Subject</span>
|
|
<span class="less ellipsis pure-u-3-4" id="subjectLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">From</span>
|
|
<span class="less ellipsis pure-u-3-4" id="fromLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Recipient</span>
|
|
<span class="less ellipsis pure-u-3-4" id="recipientLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Progress</span>
|
|
<span class="less ellipsis pure-u-3-4" id="progressLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Timezone</span>
|
|
<span class="less ellipsis pure-u-3-4" id="timezoneLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Uptime</span>
|
|
<span class="less ellipsis pure-u-3-4" id="uptimeLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Remaining</span>
|
|
<span class="less ellipsis pure-u-3-4" id="remainingLabel"></span>
|
|
</div>
|
|
<div class="inline-flex pure-u-1 pure-u-sm-1-2">
|
|
<span class="ellipsis pure-u-1-4">Status</span>
|
|
<span class="less ellipsis pure-u-3-4" id="statusLabel"></span>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div id="actions" class="inline-flex">
|
|
<button type="button" class="inline-flex pure-button pure-button-primary" id="send">
|
|
<span class="text">Open</span>
|
|
<span class="icon spin" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-loader">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M12 6l0 -3" />
|
|
<path d="M16.25 7.75l2.15 -2.15" />
|
|
<path d="M18 12l3 0" />
|
|
<path d="M16.25 16.25l2.15 2.15" />
|
|
<path d="M12 18l0 3" />
|
|
<path d="M7.75 16.25l-2.15 2.15" />
|
|
<path d="M6 12l-3 0" />
|
|
<path d="M7.75 7.75l-2.15 -2.15" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="pure-button" id="skip" disabled>
|
|
Skip
|
|
</button>
|
|
<button type="button" class="pure-button" id="cancel" disabled>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<fieldset>
|
|
<legend>Parameters</legend>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="timeout">Timeout</label>
|
|
<input id="timeout" class="pure-u-23-24 params" type="number" min="0"/>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="interval">Interval</label>
|
|
<input id="interval" class="pure-u-23-24 params" type="number" min="0"/>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="occurrence">Max Occurrence</label>
|
|
<input id="occurrence" class="inactive pure-u-23-24" type="number" min="0" value="5" disabled/>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="attempts">Attempts</label>
|
|
<input id="attempts" class="pure-u-23-24 params" type="number" min="1"/>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="locale">Locale</label>
|
|
<select id="locale" class="pure-input-1-2" required>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<label for="greet" class="pure-checkbox">
|
|
<input id="greet" type="checkbox"/> Greet recipients (by proper names if possible)
|
|
</label>
|
|
<label for="force" class="pure-checkbox">
|
|
<input id="force" type="checkbox"/> Ignore address/subject mismatch errors
|
|
</label>
|
|
<label for="slice" class="pure-checkbox">
|
|
<input id="slice" type="checkbox"/> Enable task slicing
|
|
</label>
|
|
<label for="nospam" class="pure-checkbox">
|
|
<input id="nospam" type="checkbox"/> Avoid spamming
|
|
</label>
|
|
<label for="save" class="pure-checkbox">
|
|
<input id="save" type="checkbox" checked/> Save to file
|
|
</label>
|
|
<label for="logs" class="pure-checkbox">
|
|
<input id="logs" class="local-only" type="checkbox"/> Show logs
|
|
</label>
|
|
<textarea id="messages" name="messages" rows="30" hidden readonly></textarea>
|
|
</fieldset>
|
|
<br>
|
|
<fieldset>
|
|
<legend>Columns</legend>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="email">Recipient Address</label>
|
|
<select id="email" class="columns pure-u-23-24" required>
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="recipient">Recipient Name</label>
|
|
<select id="recipient" class="pure-u-23-24 columns">
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="code">Reference Code</label>
|
|
<select id="code" class="pure-u-23-24 columns">
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="region">Region</label>
|
|
<select id="region" class="pure-u-23-24 columns">
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="sent">Sent</label>
|
|
<select id="sent" class="pure-u-23-24 columns">
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="variables">Variables</label>
|
|
<select id="variables" class="pure-u-23-24 columns">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<fieldset>
|
|
<legend>Advanced</legend>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="groupby">Group by</label>
|
|
<select id="groupby" class="slicing local-only pure-u-23-24" disabled>
|
|
<option value="none">None</option>
|
|
<option value="locale">Locale</option>
|
|
<option value="region">Region</option>
|
|
</select>
|
|
<label for="subcategory">Subcategory</label>
|
|
<select id="subcategory" class="slicing inactive local-only pure-u-23-24" multiple disabled>
|
|
</select>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<label for="chunksize">Chunk Size</label>
|
|
<input id="chunksize" class="slicing local-only pure-u-23-24" type="number" min="100" value="1000" disabled/>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<div class="inline-flex">
|
|
<div class="pure-u-1-2">
|
|
<label for="offset">Offset</label>
|
|
<input id="offset" class="slicing local-only pure-u-23-24" type="number" min="0" disabled/>
|
|
</div>
|
|
<div class="pure-u-1-2">
|
|
<label for="limit">Max. (limit)</label>
|
|
<input id="limit" class="slicing local-only pure-u-23-24" type="number" readonly disabled/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<script type="module">
|
|
import { default as $, LogRecord, Rpc2 } from '/';
|
|
if (performance.getEntriesByType('navigation')[0].type === 'reload') await Rpc2.invoke('exit');
|
|
|
|
let limit = 0;
|
|
let length = 0;
|
|
let busy = false;
|
|
let status = null;
|
|
let locale = null;
|
|
let unique = null;
|
|
let writable = null;
|
|
let filereader = null;
|
|
let subcategories = [];
|
|
|
|
let { locales, mapping, parameters } = await Rpc2.invoke('context');
|
|
let account = new String(parameters.account);
|
|
let name = account.split('@', 1).pop();
|
|
name = name.charAt(0).toLocaleUpperCase() + name.slice(1);
|
|
document.title += ` (${name})`;
|
|
|
|
async function handlePrimaryButtonClick() {
|
|
switch (status) {
|
|
case 'IDLE':
|
|
let PickerOptions = {
|
|
types: [
|
|
{
|
|
description: "Excel Spreadsheet",
|
|
accept: {
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": ['.xlsx']
|
|
}
|
|
}
|
|
]
|
|
};
|
|
let [handle] = await showOpenFilePicker(PickerOptions);
|
|
filereader = () => handle.getFile().then(file => new Promise((resolve, reject) => {
|
|
let reader = new FileReader();
|
|
reader.onload = () => resolve([file, reader.result]);
|
|
reader.onerror = () => reject(reader.error);
|
|
reader.readAsArrayBuffer(file);
|
|
}));
|
|
|
|
let [file, buffer] = await filereader().catch(() => []);
|
|
writable = await handle.createWritable().catch(() => null);
|
|
limit = await Rpc2.invoke('ready', file.name, new Uint8Array(buffer).toBase64());
|
|
$.get('#fileLabel').innerText = file.name;
|
|
$.get('#fromLabel').innerText = parameters.account;
|
|
$.all('.columns').forEach(e => e.dispatchEvent(new Event('change')));
|
|
break;
|
|
case 'READY':
|
|
let locale = $('#locale').value;
|
|
let options = { locale, mapping: new Object()};
|
|
|
|
for (let element of $.all("input[type='number'].params")) {
|
|
parameters[element.id] = element.disabled ? null : element.valueAsNumber;
|
|
}
|
|
|
|
for (let element of $.all("input[type='number']:not(.local-only):not(.params)")) {
|
|
options[element.id] = element.disabled ? null : element.valueAsNumber;
|
|
}
|
|
|
|
for (let element of $.all("select:not(.local-only).columns")) {
|
|
options.mapping[element.id] = element.value;
|
|
}
|
|
|
|
for (let element of $.all("select:not(.local-only):not(.columns)")) {
|
|
options[element.id] = element.disabled ? null : element.value;
|
|
}
|
|
|
|
for (let element of $.all("input[type='checkbox']:not([disabled]):not(.local-only)")) {
|
|
options[element.id] = element.checked;
|
|
}
|
|
|
|
if (options.slice) {
|
|
options.start = $('#offset').valueAsNumber * $('#chunksize').valueAsNumber + 2;
|
|
options.limit = length;
|
|
options.subcategories = subcategories.length > 0 ? subcategories: null;
|
|
}
|
|
|
|
await Rpc2.invoke('begin', options, parameters);
|
|
break;
|
|
case 'RUNNING':
|
|
await Rpc2.invoke('pause');
|
|
break;
|
|
case 'STANDBY':
|
|
await Rpc2.invoke('resume');
|
|
break;
|
|
}
|
|
}
|
|
|
|
$.set('#send', 'click', async () => {
|
|
$('#send > span.icon').removeAttribute('hidden');
|
|
$('#send > span.text').innerText = '';
|
|
$('#send').classList.remove('pulse');
|
|
$('#send').disabled = true;
|
|
busy = true;
|
|
busy = await handlePrimaryButtonClick().then(() => false, () => false);
|
|
});
|
|
|
|
$.set('#cancel', 'click', async () => {
|
|
$('#cancel').disabled = true;
|
|
await Rpc2.notify('cancel');
|
|
});
|
|
|
|
$.set('#skip', 'click', async () => {
|
|
$('#skip').disabled = true;
|
|
await Rpc2.notify('skip');
|
|
});
|
|
|
|
$.set('#locale', 'change', (e) => {
|
|
locale = Array.from(locales).find(o => o.name == e.target.value);
|
|
$('#groupby').dispatchEvent(new Event('change'));
|
|
});
|
|
|
|
$.set('#logs', 'change', (e) => {
|
|
if (e.target.checked) $('#messages').removeAttribute('hidden');
|
|
else $('#messages').setAttribute('hidden', '');
|
|
$('#messages').scrollIntoView({ block: 'center' });
|
|
$('#messages').scrollTop = $('#messages').scrollHeight;
|
|
});
|
|
|
|
$.set('#slice', 'change', (e) => {
|
|
for (let element of $.all('.slicing:not(.inactive)')) {
|
|
element.disabled = !e.target.checked;
|
|
}
|
|
});
|
|
|
|
$.set('#nospam', 'change', (e) => {
|
|
$('#occurrence').classList.toggle('inactive');
|
|
$('#occurrence').disabled = !e.target.checked;
|
|
$('#code').required = e.target.checked;
|
|
});
|
|
|
|
$.set('#region', 'change', async (e) => {
|
|
unique = await Rpc2.invoke('unique', e.target.value).catch(() => new Object());
|
|
$('#groupby').dispatchEvent(new Event('change'));
|
|
});
|
|
|
|
$.set('#groupby', 'change', (e) => {
|
|
let countries = Object.assign({}, unique);
|
|
let results = new Object();
|
|
|
|
switch (e.target.value) {
|
|
case 'none':
|
|
case 'region':
|
|
Object.assign(results, countries);
|
|
break;
|
|
case 'locale':
|
|
for (let target of locales.toReversed()) {
|
|
for (let key of Object.keys(countries)) {
|
|
if (target.keywords.length == 0 || target.keywords.includes(key)) {
|
|
if (target.name === locale.name) {
|
|
results[key] = countries[key];
|
|
}
|
|
delete countries[key];
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
switch (e.target.value) {
|
|
case 'none':
|
|
$('#subcategory').classList.add('inactive');
|
|
$('#subcategory').disabled = true;
|
|
break;
|
|
case 'region':
|
|
case 'locale':
|
|
$('#subcategory').classList.remove('inactive');
|
|
$('#subcategory').disabled = false;
|
|
break;
|
|
}
|
|
$('#subcategory').options.length = 0;
|
|
|
|
for (let [key, value] of Object.entries(results)) {
|
|
let option = new Option(`${key} (${value})`, key);
|
|
$('#subcategory').options.add(option);
|
|
}
|
|
$('#subcategory').dispatchEvent(new Event('change'));
|
|
});
|
|
|
|
$.set('#subcategory', 'change', (e) => {
|
|
if (!unique) return;
|
|
subcategories = Array.from(e.target.options).filter(o => o.selected).map(o => o.value);
|
|
length = Object.entries(unique).filter(([k]) => subcategories.includes(k)).reduce((o, [_, v]) => o + v, 0);
|
|
$('#chunksize').dispatchEvent(new Event('change'));
|
|
});
|
|
|
|
$.set('#chunksize', 'change', (e) => {
|
|
let n = length || limit;
|
|
let size = Math.floor(n / e.target.valueAsNumber);
|
|
$('#limit').value = size;
|
|
$('#offset').max = size;
|
|
$('#offset').value = 0;
|
|
$('#offset').dispatchEvent(new Event('change'));
|
|
});
|
|
|
|
$.set('#offset', 'change', (e) => {
|
|
let n = length || limit;
|
|
let size = $('#chunksize').valueAsNumber;
|
|
let offset = n - size * e.target.valueAsNumber;
|
|
length = Math.min(size, offset);
|
|
});
|
|
|
|
for (let item of Array.from(locales)) {
|
|
$('#locale').add(new Option(item.name.toUpperCase(), item.name));
|
|
$('#locale').dispatchEvent(new Event('change'));
|
|
}
|
|
|
|
for (let element of $.all('.columns')) {
|
|
for (let [key, value] of Object.entries(mapping)) {
|
|
element.options.add(new Option(value, value, false, element.id === key));
|
|
}
|
|
}
|
|
|
|
for (let element of $.all('.params')) {
|
|
element.value = parameters[element.id];
|
|
}
|
|
|
|
while (await new Promise(o => setTimeout(o, 1000, true))) {
|
|
let history = await Rpc2.invoke('history').catch(() => []);
|
|
let logs = Array.from(history);
|
|
|
|
for (let record of logs) {
|
|
if ($('#messages').childNodes.length >= 500) $('#messages').childNodes.item(0)?.remove();
|
|
if (record.levelno >= 40) alert(`(${record.levelname}) ` + [record.msg, record.exc_text].filter(Boolean).join('\n'));
|
|
let message = LogRecord.format(record);
|
|
let node = document.createTextNode(new String(message).concat('\n'));
|
|
$('#messages').appendChild(node);
|
|
$('#messages').scrollTop = $('#messages').scrollHeight;
|
|
}
|
|
|
|
if (busy) continue;
|
|
status = await Rpc2.invoke('status').catch(() => null);
|
|
$('#statusLabel').innerText = status ? status.charAt(0).toUpperCase() + status.slice(1).toLowerCase() : '';
|
|
|
|
switch (status) {
|
|
case 'IDLE':
|
|
$('#send > span.text').innerText = 'Open';
|
|
$('#send').classList.remove('pulse');
|
|
await writable?.abort().catch(() => void 0).finally(() => writable = null);
|
|
break;
|
|
case 'READY':
|
|
$('#send > span.text').innerText = 'Send';
|
|
$('#send').classList.remove('pulse');
|
|
$('#progressLabel').innerText = '';
|
|
$('#remainingLabel').innerText = '';
|
|
break;
|
|
case 'CLOSING':
|
|
try {
|
|
if (writable === null) break;
|
|
let data = await filereader().then(([_, b]) => Rpc2.invoke('merge', new Uint8Array(b).toBase64()));
|
|
await writable.write(Uint8Array.fromBase64(data));
|
|
await writable.close();
|
|
await Rpc2.notify('close');
|
|
} catch (e) {
|
|
alert('(ERROR) ' + String(e ?? 'File operation failed'));
|
|
await writable.abort().catch(() => void 0);
|
|
}
|
|
writable = null;
|
|
case 'RUNNING':
|
|
$('#send > span.text').innerText = 'Pause';
|
|
$('#send').classList.add('pulse');
|
|
$('#timezoneLabel').innerText = Temporal.Now.zonedDateTimeISO(locale.timezone).toLocaleString(locale.name);
|
|
|
|
let { done, email, subject, recipient } = await Rpc2.invoke('progress').catch(() => new Object());
|
|
$('#progressLabel').innerText = `${parseFloat(done / (length || limit) * 100).toFixed(2)}% (${done}/${length || limit})`
|
|
$('#subjectLabel').innerText = subject ?? '';
|
|
$('#recipientLabel').innerText = recipient ? `${recipient} <${email}>` : email ?? '';
|
|
|
|
let uptime = await Rpc2.invoke('uptime').catch(() => 0);
|
|
$('#uptimeLabel').innerText = Temporal.Duration.from({ seconds: uptime }).round({ largestUnit: 'hours' }).toLocaleString('en', { style: 'digital' });
|
|
|
|
let rate = done / uptime
|
|
let remaining = done ? Math.floor(((length || limit) - done) / rate) : 0;
|
|
$('#remainingLabel').innerText = remaining ? `${Temporal.Duration.from({ seconds: remaining }).round({ largestUnit: 'hours' }).toLocaleString('en')} (${rate.toFixed(2)}/min)` : '';
|
|
break;
|
|
case 'STANDBY':
|
|
$('#send > span.text').innerText = 'Resume';
|
|
$('#send').classList.remove('pulse');
|
|
break;
|
|
}
|
|
$('#send > span.icon').setAttribute('hidden', '');
|
|
$('#send').disabled = false;
|
|
|
|
let actions = await Rpc2.invoke('actions').catch(() => new Object());
|
|
$('#cancel').disabled = !actions['Cancel'];
|
|
$('#skip').disabled = !actions['Skip'];
|
|
}
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
width: 100%;
|
|
margin: 2em 0 2em 0;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
form {
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
select, option, input[type='checkbox'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
label {
|
|
user-select: none;
|
|
width: fit-content;
|
|
}
|
|
|
|
#actions {
|
|
max-height: 2.5em;
|
|
column-gap: 0.4em;
|
|
}
|
|
|
|
#actions > button {
|
|
height: stretch;
|
|
}
|
|
|
|
#messages {
|
|
resize: none;
|
|
white-space: pre-wrap;
|
|
margin-top: 24px;
|
|
width: 100%;
|
|
}
|
|
|
|
#mesages:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.inline-flex {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gaps {
|
|
row-gap: 0.4em;
|
|
}
|
|
|
|
.icon {
|
|
height: 1em;
|
|
}
|
|
|
|
.less {
|
|
color: #666;
|
|
max-width: 72%;
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
</style>
|