Rework catalog and add trash
This commit is contained in:
kwaroran
@@ -1,12 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { characterFormatUpdate, getCharImage } from "../../ts/characters";
|
||||
import { DataBase } from "../../ts/storage/database";
|
||||
import { characterFormatUpdate, getCharImage, removeChar } from "../../ts/characters";
|
||||
import { DataBase, type Database } from "../../ts/storage/database";
|
||||
import BarIcon from "../SideBars/BarIcon.svelte";
|
||||
import { User, Users } from "lucide-svelte";
|
||||
import { ArrowLeft, User, Users, Inspect, TrashIcon, Undo2Icon } from "lucide-svelte";
|
||||
import { selectedCharID } from "../../ts/stores";
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import { language } from "src/lang";
|
||||
import { parseMultilangString } from "src/ts/util";
|
||||
import { checkCharOrder } from "src/ts/storage/globalApi";
|
||||
export let endGrid = () => {}
|
||||
let search = ''
|
||||
let selected = 0
|
||||
|
||||
function changeChar(index = -1){
|
||||
characterFormatUpdate(index)
|
||||
@@ -14,59 +19,123 @@
|
||||
endGrid()
|
||||
}
|
||||
|
||||
function formatChars(search:string){
|
||||
function formatChars(search:string, db:Database, trash = false){
|
||||
let charas:{
|
||||
image:string
|
||||
index:number
|
||||
type:string
|
||||
type:string,
|
||||
name:string
|
||||
desc:string
|
||||
}[] = []
|
||||
|
||||
for(let i=0;i<$DataBase.characters.length;i++){
|
||||
const c = $DataBase.characters[i]
|
||||
for(let i=0;i<db.characters.length;i++){
|
||||
const c = db.characters[i]
|
||||
if(c.trashTime && !trash){
|
||||
continue
|
||||
}
|
||||
if(!c.trashTime && trash){
|
||||
continue
|
||||
}
|
||||
if(c.name.replace(/ /g,"").toLocaleLowerCase().includes(search.toLocaleLowerCase().replace(/ /g,""))){
|
||||
charas.push({
|
||||
image: c.image,
|
||||
index: i,
|
||||
type: c.type
|
||||
type: c.type,
|
||||
name: c.name,
|
||||
desc: c.creatorNotes ?? 'No description'
|
||||
})
|
||||
}
|
||||
}
|
||||
return charas
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="h-full w-full flex justify-center">
|
||||
<div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
|
||||
<h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
|
||||
<TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="flex flex-wrap gap-2 mx-auto container">
|
||||
{#each formatChars(search) as char}
|
||||
<div class="flex items-center text-textcolor">
|
||||
{#if char.image}
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
|
||||
{#if char.type === 'group'}
|
||||
<Users />
|
||||
{:else}
|
||||
<User/>
|
||||
{/if}
|
||||
</BarIcon>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<div class="h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto">
|
||||
<h1 class="text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2">
|
||||
<button class="mr-2 hover:text-textcolor text-textcolor2"><ArrowLeft /></button>
|
||||
<span>Catalog</span>
|
||||
</h1>
|
||||
<div class="mx-4 mb-6 flex flex-col">
|
||||
<TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off"/>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<Button selected={selected === 0} size="sm" on:click={() => {selected = 0}}>
|
||||
{language.grid}
|
||||
</Button>
|
||||
<Button selected={selected === 1} size="sm" on:click={() => {selected = 1}}>
|
||||
{language.list}
|
||||
</Button>
|
||||
<Button selected={selected === 2} size="sm" on:click={() => {selected = 2}}>
|
||||
{language.trash}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{#if selected === 0}
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="flex flex-wrap gap-2 w-full justify-center">
|
||||
{#each formatChars(search, $DataBase) as char}
|
||||
<div class="flex items-center text-textcolor">
|
||||
{#if char.image}
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
|
||||
{#if char.type === 'group'}
|
||||
<Users />
|
||||
{:else}
|
||||
<User/>
|
||||
{/if}
|
||||
</BarIcon>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if selected === 1}
|
||||
{#each formatChars(search, $DataBase) as char}
|
||||
<div class="flex p-2 border border-darkborderc rounded-md mb-2">
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
|
||||
<div class="flex-1 flex flex-col ml-2">
|
||||
<h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
|
||||
<span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
changeChar(char.index)
|
||||
}}>
|
||||
<Inspect />
|
||||
</button>
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
removeChar(char.index, char.name)
|
||||
}}>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else if selected === 2}
|
||||
<span class="text-textcolor2 text-sm mb-2">{language.trashDesc}</span>
|
||||
{#each formatChars(search, $DataBase, true) as char}
|
||||
<div class="flex p-2 border border-darkborderc rounded-md mb-2">
|
||||
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
|
||||
<div class="flex-1 flex flex-col ml-2">
|
||||
<h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
|
||||
<span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
$DataBase.characters[char.index].trashTime = undefined
|
||||
checkCharOrder()
|
||||
}}>
|
||||
<Undo2Icon />
|
||||
</button>
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
removeChar(char.index, char.name, 'permanent')
|
||||
}}>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
Reference in New Issue
Block a user