66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { Button, Splitter, SplitterPanel } from 'primevue'
|
|
import TreeNav from './components/TreeNav.vue'
|
|
import FilterDetail from './components/FilterDetail.vue'
|
|
import Info from './components/Info.vue'
|
|
import { computed, ref, watch } from 'vue'
|
|
import type { TreeNode } from 'primevue/treenode'
|
|
import * as O from 'fp-ts/Option'
|
|
import * as A from 'fp-ts/lib/Array';
|
|
import { pipe } from 'fp-ts/function'
|
|
import * as uuid from 'uuid';
|
|
import type { Filter, FilterConfig } from './models'
|
|
|
|
const darkMode = ref(document.documentElement.classList.contains('dark'))
|
|
|
|
const icon = computed(() => `pi pi-${darkMode.value ? "moon" : "sun"}`)
|
|
|
|
watch(darkMode, (dark) => {
|
|
document.documentElement.classList.toggle(
|
|
'dark',
|
|
dark
|
|
)
|
|
localStorage.theme = dark ? 'dark' : 'light'
|
|
})
|
|
function onNodeSelect(node: TreeNode) {
|
|
}
|
|
|
|
function onNodeUnselect(node: TreeNode) {
|
|
}
|
|
|
|
let defaultFilters: Filter[] = [
|
|
{ type: 'leaf', id: uuid.v4(), name: "", show: true, enabled: true, rule: {} },
|
|
{
|
|
type: 'group', id: uuid.v4(), name: "", enabled: true, rule: {}, filters: [
|
|
{ type: 'leaf', id: uuid.v4(), name: "", show: true, enabled: true, rule: {} }
|
|
]
|
|
}
|
|
]
|
|
const filters = ref(pipe(
|
|
localStorage.getItem("filters"),
|
|
O.fromNullable,
|
|
O.map((value): FilterConfig => JSON.parse(value)),
|
|
O.map(value => value.filters),
|
|
O.getOrElse(() => defaultFilters),
|
|
))
|
|
const selectedFilter = ref<Filter>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-row gap-2 items-center flex-grow-0">
|
|
<article class="prose dark:prose-invert">
|
|
<h1>POE2 Loot Filter Config</h1>
|
|
</article><Button :icon @click="darkMode = !darkMode" severity="secondary" variant="outlined" rounded />
|
|
</div>
|
|
<Splitter class="flex-1 min-h-0">
|
|
<SplitterPanel>
|
|
<TreeNav :filters @nodeSelect="selectedFilter = $event.data" @nodeUnselect="selectedFilter = undefined" />
|
|
</SplitterPanel>
|
|
<SplitterPanel class="flex flex-col">
|
|
<FilterDetail v-if="selectedFilter" :filter="selectedFilter" />
|
|
<Info v-else />
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
|
|
</template>
|