Utilities/mailer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: pivot to gui, removed wx

Browse Source
This commit is contained in:
break27
2025-08-28 13:13:01 +08:00
parent f04ec0eee7
commit bf54ad9316
11 changed files with 1117 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

566
index.html Normal file
View File

@@ -0,0 +1,566 @@
<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">
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/duration.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
<title>Python Application</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>
<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>
</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" 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" type="number" min="0"/>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="max_occurrence">Max Occurrence</label>
<input id="max_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="retry">Retry</label>
<input id="retry" class="pure-u-23-24" type="number" min="0"/>
</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="slice" class="pure-checkbox">
<input id="slice" type="checkbox"/> Enable task slicing
</label>
<label for="greet" class="pure-checkbox">
<input id="greet" type="checkbox"/> Greet recipients (by proper names if possible)
</label>
<label for="save" class="pure-checkbox">
<input id="save" type="checkbox" checked/> Save to file upon exit
</label>
<label for="nospam" class="pure-checkbox">
<input id="nospam" type="checkbox"/> Avoid spamming
</label>
</fieldset>
<br>
<fieldset>
<legend>Columns</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="column_address">Receipient Address</label>
<select id="column_address" class="columns pure-u-23-24" required>
<option value="">&nbsp;</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="column_name">Receipient Name</label>
<select id="column_name" class="columns pure-u-23-24">
<option value="">&nbsp;</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="column_code">Reference Code</label>
<select id="column_code" class="columns pure-u-23-24">
<option value="">&nbsp;</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="column_pays">Country</label>
<select id="column_pays" class="columns pure-u-23-24">
<option value="">&nbsp;</option>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="column_sent">Remarks</label>
<select id="column_sent" class="columns pure-u-23-24">
<option value="">&nbsp;</option>
</select>
</div>
</div>
</fieldset>
<br>
<fieldset>
<legend>Slicing</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="group_by">Group by</label>
<select id="group_by" class="slicing localonly pure-u-23-24" disabled>
<option value="none">None</option>
<option value="locale">Locale</option>
<option value="country">Country</option>
</select>
<label for="subcategory">Subcategory</label>
<select id="subcategory" class="slicing inactive localonly pure-u-23-24" multiple disabled>
</select>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="chunk_size">Chunk Size</label>
<input id="chunk_size" class="slicing 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 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 localonly pure-u-23-24" type="number" readonly disabled/>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript">
const $ = (selectors) => {
return document.querySelector(selectors);
};
const $$ = (selectors) => {
return document.querySelectorAll(selectors);
};
const $$$ = (selectors, event, listener) => {
$(selectors).addEventListener(event, listener);
};
let Limit = null;
let Status = null;
let Columns = null;
let Locales = null;
let Connection = null;
$$$('#send', 'click', async (e) => {
switch (Status) {
case 'STANDBY':
Connection.send('RESUME');
$('#send > span.text').innerHTML = 'Pause';
$('#send > span.icon').classList.remove('hidden');
$('#send').disabled = true;
break;
case 'RUNNING':
Connection.send('ONHOLD');
$('#send > span.text').innerHTML = 'Resume';
$('#send > span.icon').classList.add('hidden');
$('#send').disabled = true;
break;
case 'READY':
let parameters = {};
for (let element of $$("input[type='number']:not([disabled]):not(.localonly)")) {
parameters[element.id] = element.valueAsNumber;
}
for (let element of $$("select:not([disabled]):not(.localonly)")) {
parameters[element.id] = element.value || element.dataset.default;
}
for (let element of $$("input[type='checkbox']:not([disabled])")) {
parameters[element.id] = element.checked;
}
if (parameters.slice && $('#subcategory').dataset.values) {
parameters.subcategory = $('#subcategory').dataset.values.split(',');
}
for (let element of $$("input:not(.inactive), select:not(.inactive)")) {
element.disabled = true;
}
Connection.send(JSON.stringify(parameters));
Status = 'RUNNING';
$('#send > span.text').innerHTML = 'Pause';
$('#send > span.icon').classList.remove('hidden');
$('#skip').disabled = false;
break;
default:
try {
$('#send > span.icon').classList.remove('hidden');
let [handle] = await showOpenFilePicker();
let file = await handle.getFile();
let buffer = await new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsArrayBuffer(file);
});
Connection.send(file.name);
Connection.send(buffer);
Status = 'READY';
$('#fileLabel').innerHTML = file.name;
$('#uptimeLabel').dataset.timestamp = dayjs().unix();
$('#send > span.text').innerHTML = 'Send';
$('#cancel').disabled = false;
$('#send').disabled = true;
} finally {
$('#send > span.icon').classList.add('hidden');
}
}
});
$$$('#skip', 'click', (e) => {
Connection.send('BYPASS');
if (Status === 'STANDBY') Connection.send('ONHOLD');
$('#skip').disabled = true;
});
$$$('#cancel', 'click', (e) => {
Connection.send('CANCEL');
$('#cancel').disabled = true;
});
$$$('#locale', 'change', (e) => {
$('#group_by').dispatchEvent(new Event('change'));
$('#timezoneLabel').dataset.timezone = Locales.find((x) => x.locale == e.target.value).timezone;
});
$$$('#slice', 'change', (e) => {
for (let element of $$('.slicing:not(.inactive)')) {
element.disabled = !e.target.checked;
}
$('#subcategory').dispatchEvent(new Event('change'));
});
$$$('#nospam', 'change', (e) => {
$('#max_occurrence').classList.toggle('inactive');
$('#max_occurrence').disabled = !e.target.checked;
$('#column_code').required = e.target.checked;
});
$$$('#column_pays', 'change', (e) => {
$('#group_by').dispatchEvent(new Event('change'));
});
$$$('#group_by', 'change', (e) => {
let columns = Columns ? Columns[$('#column_pays').value] : null;
let countries = Object.assign({}, columns);
let results = {};
switch (e.target.value) {
case 'none':
case 'country':
results = countries;
break;
case 'locale':
let locale = $('#locale').value;
let targets = Locales.toReversed();
for (let target of targets) {
for (let key of Object.keys(countries)) {
if (target.predicate == null || target.predicate.includes(key)) {
if (target.locale === locale) {
results[key] = countries[key];
}
delete countries[key];
}
}
}
break;
}
switch (e.target.value) {
default:
$('#subcategory').options.length = 0;
case 'none':
$('#subcategory').classList.add('inactive');
$('#subcategory').disabled = true;
break;
case 'country':
case 'locale':
$('#subcategory').classList.remove('inactive');
$('#subcategory').disabled = false;
break;
}
for (let [key, value] of Object.entries(results)) {
let option = new Option(`${key} (${value})`, key);
option.dataset.count = value;
$('#subcategory').options.add(option);
}
$('#subcategory').dispatchEvent(new Event('change'));
});
$$$('#subcategory', 'change', (e) => {
let options = Array.from(e.target.options).filter((v) => v.selected);
let values = options.map((o) => o.value).join(',');
let limit = options.reduce((i, v) => i + Number(v.dataset.count), 0);
$('#subcategory').dataset.limit = limit;
$('#subcategory').dataset.values = values;
$('#chunk_size').dispatchEvent(new Event('change'));
});
$$$('#chunk_size', 'change', (e) => {
let limit = $('#subcategory').disabled ? Limit : Number(subcategory.dataset.limit);
let size = Math.floor(limit / e.target.value);
$('#limit').value = size;
$('#offset').max = size;
$('#offset').value = 0;
});
function main(url, parameters, locales) {
Connection = new WebSocket(url);
Locales = JSON.parse(locales);
for (let [key, value] of Object.entries(parameters)) {
$(`input#${key}`)?.setAttribute('value', value);
}
for (let item of Locales) {
$('#locale').add(new Option(item.locale.toUpperCase(), item.locale));
$('#locale').dispatchEvent(new Event('change'))
}
Connection.addEventListener('message', (e) => {
let command = JSON.parse(e.data);
let {name, args} = command;
switch (name) {
case 'setAddress':
let [person, address] = args;
document.title = `${person} (${address})`;
$('#fromLabel').innerText = address;
break;
case 'setSubject':
let [subject] = args;
$('#subjectLabel').innerHTML = subject;
break;
case 'setMetadata':
[Limit, Columns] = args;
for (let element of $$('.columns')) {
let options = element.options;
options.length = 1;
for (let column of Object.keys(Columns)) {
options.add(new Option(column, column, false, column === parameters[element.id]));
}
element.dataset.default = parameters[element.id];
element.dispatchEvent(new Event('change'));
}
$('#send').disabled = false;
$('#cancel').disabled = false;
break;
case 'setProgress':
let [sent, name, recipient] = args;
let label = name ? `${name} <${recipient}>` : recipient;
$('#recipientLabel').innerHTML = label;
$('#progressLabel').dataset.sent = sent;
break;
case 'setStatus':
switch (args[0]) {
case 'RESUME':
case 'BYPASS':
Status = 'RUNNING';
$('#send').disabled = false;
$('#skip').disabled = false;
break;
case 'ONHOLD':
Status = 'STANDBY';
$('#send').disabled = false;
break;
case 'FAILED':
Status = 'STANDBY';
$('#send > span.text').innerHTML = 'Resume';
$('#send > span.icon').classList.add('hidden');
break;
case 'FINISH':
alert('任务结束')
case 'CANCEL':
Status = null;
$('#send > span.text').innerHTML = 'Open';
$('#send > span.icon').classList.add('hidden');
$('#cancel').disabled = true;
$('#skip').disabled = true;
for (let element of $$("input:not(.inactive):not(.slicing)")) {
element.disabled = false;
}
for (let element of $$("select:not(.inactive):not(.slicing)")) {
element.disabled = false;
}
for (let element of $$("input[type='checkbox']")) {
element.dispatchEvent(new Event('change'));
}
break;
}
break;
case 'tell':
let [message, level] = args;
let prefix = level === 0 ? 'ERROR' : level === 1 ? 'WARNING' : 'INFO';
console.log(`[${prefix}] ${message}`);
if (level === 0) alert(message);
break;
}
});
dayjs.extend(dayjs_plugin_utc);
dayjs.extend(dayjs_plugin_timezone);
dayjs.extend(dayjs_plugin_duration);
dayjs.extend(dayjs_plugin_relativeTime);
let clock = setInterval(() => {
let timezone = $('#timezoneLabel').dataset.timezone;
let city = timezone.split('/')[1];
let date = dayjs().tz(timezone).format("YYYY-MM-DD HH:mm:ss");
$('#timezoneLabel').innerHTML = `${date} (${city})`;
$('#statusLabel').innerHTML = Status ? Status.charAt(0).toUpperCase() + Status.slice(1).toLowerCase() : 'Idle';
if (Status === 'RUNNING') {
let sent = Number($('#progressLabel').dataset.sent) || 0;
let limit = Number($('#subcategory').dataset.limit) || Limit;
let percentage = parseFloat((sent / limit * 100).toFixed(2));
$('#progressLabel').innerHTML = `${sent} / ${limit} (${percentage} %)`;
let timestamp = Number($('#uptimeLabel').dataset.timestamp);
let uptime = dayjs.duration(dayjs().diff(dayjs.unix(timestamp)));
let rate = sent / uptime.asSeconds();
let spm = parseFloat(Number(rate*60).toFixed(2));
let speed = spm >= 1 ? `${spm} per minute` : null;
let remaining = rate > 0 ? dayjs.duration((limit - sent) / rate, 'second').humanize() : null;
$('#remainingLabel').innerHTML = [remaining, speed].filter((x) => x).join(' - ');
$('#uptimeLabel').innerHTML = uptime.format("HH:mm:ss");
}
}, 1000);
}
</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;
}
label {
user-select: none;
width: fit-content;
}
.inline-flex {
display: inline-flex;
align-items: center;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hidden {
display: none;
}
.gaps {
row-gap: 0.4em;
}
.icon {
height: 1em;
}
.less {
color: #666;
max-width: 72%;
}
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>