ローカルのjsonファイルを保存・読み込みできるように

This commit is contained in:
tamaina 2022-04-17 21:10:50 +09:00
parent 3d4c09510b
commit 426885bff5
2 changed files with 99 additions and 3 deletions

View File

@ -899,10 +899,12 @@ _plugin:
_preferencesRegistry: _preferencesRegistry:
list: "一覧" list: "一覧"
saveNew: "新規保存" saveNew: "新規保存"
loadFile: "ファイルを読み込み"
apply: "このデバイスに適用" apply: "このデバイスに適用"
delete: "削除" delete: "削除"
save: "上書き保存" save: "上書き保存"
rename: "名称変更" rename: "名称変更"
download: "ダウンロード"
saveNewDescription: "現在のデバイスの状態をサーバーに保存します。" saveNewDescription: "現在のデバイスの状態をサーバーに保存します。"
inputName: "レジストリ名を入力" inputName: "レジストリ名を入力"
cannotSave: "保存できません" cannotSave: "保存できません"
@ -914,6 +916,8 @@ _preferencesRegistry:
noRegistries: "レジストリは登録されていません。「新規保存」で現在のクライアント設定をサーバーに保存できます。" noRegistries: "レジストリは登録されていません。「新規保存」で現在のクライアント設定をサーバーに保存できます。"
createdAt: "作成日時: {date} {time}" createdAt: "作成日時: {date} {time}"
updatedAt: "更新日時: {date} {time}" updatedAt: "更新日時: {date} {time}"
cannotLoad: "読み込みできません"
invalidFile: "ファイル形式が違います。"
_registry: _registry:
scope: "スコープ" scope: "スコープ"

View File

@ -1,6 +1,9 @@
<template> <template>
<div class="_formRoot"> <div class="_formRoot">
<MkButton class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton> <div :class="$style.buttons">
<MkButton inline class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
<MkButton inline class="" @click="loadFile">{{ ts._preferencesRegistry.loadFile }}</MkButton>
</div>
<FormSection> <FormSection>
<template #label>{{ ts._preferencesRegistry.list }}</template> <template #label>{{ ts._preferencesRegistry.list }}</template>
@ -38,6 +41,7 @@ import { unisonReload } from '@/scripts/unison-reload';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { $i } from '@/account'; import { $i } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { version } from '@/config';
const { t, ts } = i18n; const { t, ts } = i18n;
useCssModule(); useCssModule();
@ -46,10 +50,12 @@ const scope = ['clientPreferencesProfiles'];
const connection = $i && stream.useChannel('main'); const connection = $i && stream.useChannel('main');
const registryProps = ['name', 'createdAt', 'updatedAt', 'version', 'defaultStore', 'coldDeviceStorage', 'fontSize', 'useSystemFont', 'wallpaper'];
type Registry = { type Registry = {
name: string; name: string;
createdAt: string; createdAt: string;
updatedAt: string | null; updatedAt: string | null;
version: string;
defaultStore: Partial<typeof defaultStore.state>; defaultStore: Partial<typeof defaultStore.state>;
coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>; coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
fontSize: string | null; fontSize: string | null;
@ -75,6 +81,34 @@ function getDefaultStoreValues() {
}, {} as any); }, {} as any);
} }
function isObject(value: any) {
return value && typeof value === 'object' && !Array.isArray(value);
}
function validate(registry: any): void {
if (!registries) return;
// Check if unnecessary properties exist
if (Object.keys(registry).some(key => !registryProps.includes(key))) throw Error('Unnecessary properties exist');
if (!registry.name) throw Error('Name is falsy');
if (!registry.version) throw Error('Version is falsy');
// Check if createdAt and updatedAt is Date
// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
if (!registry.createdAt || Number.isNaN(new Date(registry.createdAt).getTime())) throw Error('createdAt is falsy or not Date');
if (registry.updatedAt) {
if (Number.isNaN(new Date(registry.updatedAt).getTime())) {
throw Error('updatedAt is not Date');
}
} else if (registry.updatedAt !== null) {
throw Error('updatedAt is not null');
}
if (!registry.defaultStore || !isObject(registry.defaultStore)) throw Error('defaultStore is falsy or not an object');
if (!registry.coldDeviceStorage || !isObject(registry.coldDeviceStorage)) throw Error('coldDeviceStorage is falsy or not an object');
}
async function saveNew() { async function saveNew() {
if (!registries) return; if (!registries) return;
@ -96,6 +130,7 @@ async function saveNew() {
name, name,
createdAt: (new Date()).toISOString(), createdAt: (new Date()).toISOString(),
updatedAt: null, updatedAt: null,
version,
defaultStore: getDefaultStoreValues(), defaultStore: getDefaultStoreValues(),
coldDeviceStorage: ColdDeviceStorage.getAll(), coldDeviceStorage: ColdDeviceStorage.getAll(),
fontSize: localStorage.getItem('fontSize'), fontSize: localStorage.getItem('fontSize'),
@ -103,7 +138,50 @@ async function saveNew() {
wallpaper: localStorage.getItem('wallpaper'), wallpaper: localStorage.getItem('wallpaper'),
}; };
await os.api('i/registry/set', { scope, key: id, value: registry }); await os.api('i/registry/set', { scope, key: id, value: registry });
registries[id] = registry; }
function loadFile() {
const input = document.createElement('input');
input.type = 'file';
input.multiple = false;
input.onchange = async () => {
if (!registries) return;
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
if (file.type !== 'application/json') {
return os.alert({
type: 'error',
title: ts._preferencesRegistry.cannotLoad,
text: ts._preferencesRegistry.invalidFile,
});
}
let registry: Registry;
try {
registry = JSON.parse(await file.text()) as unknown as Registry;
validate(registry);
} catch (e) {
return os.alert({
type: 'error',
title: ts._preferencesRegistry.cannotLoad,
text: e?.message,
});
}
const id = uuid();
await os.api('i/registry/set', { scope, key: id, value: registry });
//
(window as any).__misskey_input_ref__ = null;
};
// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
// iOS Safari
(window as any).__misskey_input_ref__ = input;
input.click();
} }
async function applyRegistry(id: string) { async function applyRegistry(id: string) {
@ -190,6 +268,7 @@ async function save(id: string) {
name, name,
createdAt, createdAt,
updatedAt: (new Date()).toISOString(), updatedAt: (new Date()).toISOString(),
version,
defaultStore: getDefaultStoreValues(), defaultStore: getDefaultStoreValues(),
coldDeviceStorage: ColdDeviceStorage.getAll(), coldDeviceStorage: ColdDeviceStorage.getAll(),
fontSize: localStorage.getItem('fontSize'), fontSize: localStorage.getItem('fontSize'),
@ -197,7 +276,6 @@ async function save(id: string) {
wallpaper: localStorage.getItem('wallpaper'), wallpaper: localStorage.getItem('wallpaper'),
}; };
await os.api('i/registry/set', { scope, key: id, value: registry }); await os.api('i/registry/set', { scope, key: id, value: registry });
registries[id] = registry;
} }
async function rename(id: string) { async function rename(id: string) {
@ -229,10 +307,18 @@ async function rename(id: string) {
} }
function menu(ev: MouseEvent, registryId: string) { function menu(ev: MouseEvent, registryId: string) {
if (!registries) return;
return os.popupMenu([{ return os.popupMenu([{
text: ts._preferencesRegistry.apply, text: ts._preferencesRegistry.apply,
icon: 'fas fa-circle-down', icon: 'fas fa-circle-down',
action: () => applyRegistry(registryId), action: () => applyRegistry(registryId),
}, {
type: 'a',
text: ts._preferencesRegistry.download,
icon: 'fas fa-download',
href: URL.createObjectURL(new Blob([JSON.stringify(registries[registryId], null, 2)], { type: 'application/json' })),
download: `${registries[registryId].name}.json`,
}, { }, {
text: ts._preferencesRegistry.rename, text: ts._preferencesRegistry.rename,
icon: 'fas fa-i-cursor', icon: 'fas fa-i-cursor',
@ -272,6 +358,12 @@ defineExpose({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.buttons {
display: flex;
gap: var(--margin);
flex-wrap: wrap;
}
.registry { .registry {
padding: 20px; padding: 20px;
cursor: pointer; cursor: pointer;