profile json exports/imports

This commit is contained in:
dragonwocky 2021-10-01 16:06:23 +10:00
parent 95621cd029
commit abbfce9af1
2 changed files with 55 additions and 10 deletions

View File

@ -35,7 +35,7 @@ window.addEventListener('beforeunload', (event) => {
const $main = web.html`<main class="main"></main>`,
$sidebar = web.html`<article class="sidebar"></article>`,
$profile = web.html`<button class="profile-button">
$profile = web.html`<button class="profile-trigger">
Profile: ${web.escape(registry.profileName)}
</button>`,
$options = web.html`<div class="options-container">
@ -71,13 +71,50 @@ $profile.addEventListener('click', async (event) => {
value="${web.escape(registry.profileName)}"
pattern="/^[A-Za-z0-9_-]+$/"
>`,
$export = web.html`<button class="profile-export">
${web.icon('download', { class: 'profile-icon-action' })}
</button>`,
$import = web.html`<label class="profile-import">
<input type="file" class="hidden" accept="application/json">
${web.icon('upload', { class: 'profile-icon-action' })}
</label>`,
$save = web.html`<button class="profile-save">
${web.icon('save', { class: 'button-icon' })} Save
${web.icon('save', { class: 'profile-icon-text' })} Save
</button>`,
$delete = web.html`<button class="profile-delete">
${web.icon('trash-2', { class: 'button-icon' })} Delete
${web.icon('trash-2', { class: 'profile-icon-text' })} Delete
</button>`,
$error = web.html`<p class="profile-error"></p>`;
$export.addEventListener('click', async (event) => {
const now = new Date(),
$a = web.html`<a
class="hidden"
download="notion-enhancer_${web.escape($select.value)}_${now.getFullYear()}-${
now.getMonth() + 1
}-${now.getDate()}.json"
href="data:text/plain;charset=utf-8,${encodeURIComponent(
JSON.stringify(await storage.get(['profiles', $select.value], {}), null, 2)
)}"
></a>`;
web.render(document.body, $a);
$a.click();
$a.remove();
});
$import.addEventListener('change', (event) => {
const file = event.target.files[0],
reader = new FileReader();
reader.onload = async (progress) => {
try {
const profileUpload = JSON.parse(progress.currentTarget.result);
if (!profileUpload) throw Error;
await storage.set(['profiles', $select.value], profileUpload);
location.reload();
} catch {
web.render(web.empty($error), 'Invalid JSON uploaded.');
}
};
reader.readAsText(file);
});
$select.addEventListener('change', async (event) => {
if ($select.value === '--') {
$edit.value = '';
@ -91,6 +128,10 @@ $profile.addEventListener('click', async (event) => {
);
return false;
}
if (!$edit.value) {
web.render(web.empty($error), 'Profile names cannot be empty.');
return false;
}
if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
web.render(
web.empty($error),
@ -139,7 +180,7 @@ $profile.addEventListener('click', async (event) => {
$edit,
web.html`${web.icon('type', { class: 'input-icon' })}`
),
web.render(web.html`<p></p>`, $save, $delete),
web.render(web.html`<p class="profile-actions"></p>`, $export, $import, $save, $delete),
$error
);
}

View File

@ -59,14 +59,18 @@ const customClasses = {
'mod-author': apply`flex items-center mb-2`,
'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
'profile-button': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md
hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none)`,
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-3 bg-red-tag text-red-tag-text rounded-md
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text)`,
'profile-actions': apply`flex`,
'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none) text-center`,
'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
'profile-export': apply`profile-save mr-2`,
'profile-import': apply`profile-save mr-2`,
'profile-error': apply`text-xs mt-2 text-red-text`,
'button-icon': apply`w-4 h-4 -mt-1 inline-block mr-1`,
'profile-icon-action': apply`w-4 h-4 -mt-1 inline-block`,
'profile-icon-text': apply`w-4 h-4 -mt-1 inline-block mr-1`,
'options-container': apply`px-4 py-3 shadow-inner rounded-lg bg-notion border border-divider space-y-3`,
'options-placeholder': apply`text-sm text-foreground-secondary`,
'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out cursor-pointer`,