Change DataBase inside svelte to DBState for performance
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
import Button from "src/lib/UI/GUI/Button.svelte";
|
||||
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
|
||||
import type { RisuModule } from "src/ts/process/modules";
|
||||
import { DataBase } from "src/ts/storage/database";
|
||||
import { DBState } from "src/ts/storage/database.svelte";
|
||||
import { selectedCharID } from "src/ts/stores";
|
||||
import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
|
||||
interface Props {
|
||||
@@ -16,7 +16,7 @@
|
||||
let moduleSearch = $state('')
|
||||
|
||||
function sortModules(modules:RisuModule[], search:string){
|
||||
const db = $DataBase
|
||||
const db = DBState.db
|
||||
return modules.filter((v) => {
|
||||
if(search === '') return true
|
||||
return v.name.toLowerCase().includes(search.toLowerCase())
|
||||
@@ -48,15 +48,15 @@
|
||||
<TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
|
||||
|
||||
<div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md">
|
||||
{#if $DataBase.modules.length === 0}
|
||||
{#if DBState.db.modules.length === 0}
|
||||
<div class="text-textcolor2 p-3">{language.noModules}</div>
|
||||
{:else}
|
||||
{#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
|
||||
{#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
|
||||
{#if i !== 0}
|
||||
<div class="border-t-1 border-selected"></div>
|
||||
{/if}
|
||||
<div class="pl-3 py-3 text-left flex">
|
||||
{#if !alertMode && $DataBase.enabledModules.includes(rmodule.id)}
|
||||
{#if !alertMode && DBState.db.enabledModules.includes(rmodule.id)}
|
||||
<span class="text-textcolor2">{rmodule.name}</span>
|
||||
{:else}
|
||||
<span class="">{rmodule.name}</span>
|
||||
@@ -71,23 +71,23 @@
|
||||
}}>
|
||||
<CheckCircle2Icon size={18}/>
|
||||
</button>
|
||||
{:else if $DataBase.enabledModules.includes(rmodule.id)}
|
||||
{:else if DBState.db.enabledModules.includes(rmodule.id)}
|
||||
<button class="mr-2 text-textcolor2 cursor-not-allowed">
|
||||
</button>
|
||||
{:else}
|
||||
<button class={(!$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
|
||||
<button class={(!DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
|
||||
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
|
||||
"mr-2 cursor-pointer text-blue-500"
|
||||
} onclick={async (e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
if($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.splice($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
|
||||
if(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.splice(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
|
||||
}
|
||||
else{
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
|
||||
}
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules
|
||||
}}>
|
||||
<CheckCircle2Icon size={18}/>
|
||||
</button>
|
||||
|
||||
@@ -4,18 +4,15 @@
|
||||
import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
|
||||
import type { RisuModule } from "src/ts/process/modules";
|
||||
import { DownloadIcon, FolderUpIcon, PlusIcon, TrashIcon } from "lucide-svelte";
|
||||
import { alertConfirm } from "src/ts/alert";
|
||||
import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
|
||||
import TriggerList from "src/lib/SideBars/Scripts/TriggerList.svelte";
|
||||
import Check from "src/lib/UI/GUI/CheckInput.svelte";
|
||||
import Help from "src/lib/Others/Help.svelte";
|
||||
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
|
||||
import Button from "src/lib/UI/GUI/Button.svelte";
|
||||
import { getFileSrc, openURL, saveAsset } from "src/ts/storage/globalApi";
|
||||
import { hubURL } from "src/ts/characterCards";
|
||||
import { exportRegex, importRegex } from "src/ts/process/scripts";
|
||||
import { selectMultipleFile } from "src/ts/util";
|
||||
import { DataBase } from 'src/ts/storage/database';
|
||||
import { DBState } from 'src/ts/storage/database.svelte';
|
||||
|
||||
let submenu = $state(0)
|
||||
interface Props {
|
||||
@@ -27,7 +24,7 @@
|
||||
let assetFilePath:string[] = $state([])
|
||||
|
||||
$effect.pre(() => {
|
||||
if($DataBase.useAdditionalAssetsPreview){
|
||||
if(DBState.db.useAdditionalAssetsPreview){
|
||||
if(currentModule?.assets){
|
||||
for(let i = 0; i < currentModule.assets.length; i++){
|
||||
if(currentModule.assets[i].length > 2 && currentModule.assets[i][2]) {
|
||||
@@ -202,7 +199,7 @@
|
||||
{#each currentModule.assets as assets, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate">
|
||||
{#if assetFilePath[i] && $DataBase.useAdditionalAssetsPreview}
|
||||
{#if assetFilePath[i] && DBState.db.useAdditionalAssetsPreview}
|
||||
{#if assetFileExtensions[i] === 'mp4'}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { language } from "src/lang";
|
||||
import { DataBase } from "src/ts/storage/database";
|
||||
import { DBState } from "src/ts/storage/database.svelte";
|
||||
import Button from "src/lib/UI/GUI/Button.svelte";
|
||||
import ModuleMenu from "src/lib/Setting/Pages/Module/ModuleMenu.svelte";
|
||||
import { exportModule, importModule, type RisuModule } from "src/ts/process/modules";
|
||||
@@ -9,7 +9,7 @@
|
||||
import { tooltip } from "src/ts/gui/tooltip";
|
||||
import { alertCardExport, alertConfirm, alertError } from "src/ts/alert";
|
||||
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
|
||||
import { ShowRealmFrameStore } from "src/ts/stores";
|
||||
import { ShowRealmFrameStore } from "src/ts/stores";
|
||||
let tempModule:RisuModule = $state({
|
||||
name: '',
|
||||
description: '',
|
||||
@@ -20,7 +20,6 @@
|
||||
let moduleSearch = $state('')
|
||||
|
||||
function sortModules(modules:RisuModule[], search:string){
|
||||
const db = $DataBase
|
||||
return modules.filter((v) => {
|
||||
if(search === '') return true
|
||||
return v.name.toLowerCase().includes(search.toLowerCase())
|
||||
@@ -37,10 +36,10 @@
|
||||
<TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
|
||||
|
||||
<div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md flex-1 overflow-y-auto">
|
||||
{#if $DataBase.modules.length === 0}
|
||||
{#if DBState.db.modules.length === 0}
|
||||
<div class="text-textcolor2 p-3">{language.noModules}</div>
|
||||
{:else}
|
||||
{#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
|
||||
{#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
|
||||
{#if i !== 0}
|
||||
<div class="border-t-1 border-selected"></div>
|
||||
{/if}
|
||||
@@ -48,18 +47,18 @@
|
||||
<div class="pl-3 pt-3 text-left flex">
|
||||
<span class="text-lg">{rmodule.name}</span>
|
||||
<div class="flex-grow flex justify-end">
|
||||
<button class={(!$DataBase.enabledModules.includes(rmodule.id)) ?
|
||||
<button class={(!DBState.db.enabledModules.includes(rmodule.id)) ?
|
||||
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
|
||||
"mr-2 cursor-pointer text-blue-500"
|
||||
} use:tooltip={language.enableGlobal} onclick={async (e) => {
|
||||
e.stopPropagation()
|
||||
if($DataBase.enabledModules.includes(rmodule.id)){
|
||||
$DataBase.enabledModules.splice($DataBase.enabledModules.indexOf(rmodule.id), 1)
|
||||
if(DBState.db.enabledModules.includes(rmodule.id)){
|
||||
DBState.db.enabledModules.splice(DBState.db.enabledModules.indexOf(rmodule.id), 1)
|
||||
}
|
||||
else{
|
||||
$DataBase.enabledModules.push(rmodule.id)
|
||||
DBState.db.enabledModules.push(rmodule.id)
|
||||
}
|
||||
$DataBase.enabledModules = $DataBase.enabledModules
|
||||
DBState.db.enabledModules = DBState.db.enabledModules
|
||||
}}>
|
||||
<Globe size={18}/>
|
||||
</button>
|
||||
@@ -71,7 +70,7 @@
|
||||
</button>
|
||||
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} onclick={async (e) => {
|
||||
e.stopPropagation()
|
||||
const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
|
||||
const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
|
||||
tempModule = rmodule
|
||||
editModuleIndex = index
|
||||
mode = 2
|
||||
@@ -82,9 +81,9 @@
|
||||
e.stopPropagation()
|
||||
const d = await alertConfirm(`${language.removeConfirm}` + rmodule.name)
|
||||
if(d){
|
||||
const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
|
||||
$DataBase.modules.splice(index, 1)
|
||||
$DataBase.modules = $DataBase.modules
|
||||
const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
|
||||
DBState.db.modules.splice(index, 1)
|
||||
DBState.db.modules = DBState.db.modules
|
||||
}
|
||||
}}>
|
||||
<TrashIcon size={18}/>
|
||||
@@ -110,7 +109,7 @@
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.createModule}</h2>
|
||||
<ModuleMenu bind:currentModule={tempModule}/>
|
||||
<Button className="mt-6" onclick={() => {
|
||||
$DataBase.modules.push(tempModule)
|
||||
DBState.db.modules.push(tempModule)
|
||||
mode = 0
|
||||
}}>{language.createModule}</Button>
|
||||
{:else if mode === 2}
|
||||
@@ -118,7 +117,7 @@
|
||||
<ModuleMenu bind:currentModule={tempModule}/>
|
||||
{#if tempModule.name !== ''}
|
||||
<Button className="mt-6" onclick={() => {
|
||||
$DataBase.modules[editModuleIndex] = tempModule
|
||||
DBState.db.modules[editModuleIndex] = tempModule
|
||||
mode = 0
|
||||
}}>{language.editModule}</Button>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user