leonliuy/poe2-loot-filter-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Leon Liu 2025-01-02 03:28:00 +09:00
parent a23e3c2e60
commit 323d9e3339
7 changed files with 105 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
)
</script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<title>Vite App</title>
<title>Path of Exile 2 Loot Filter Config</title>
</head>
<body>

5
src/App.vue
View File

@ -58,12 +58,13 @@ function onDelete() {
<template>
<div class="flex flex-row gap-2 items-center flex-grow-0">
<article class="prose dark:prose-invert p-4">
<h1>POE2 Loot Filter Config</h1>
<h1>Path of Exile 2 Loot Filter Config</h1>
</article><Button :icon @click="darkMode = !darkMode" severity="secondary" variant="outlined" rounded />
</div>
<Splitter class="flex-1 min-h-0">
<SplitterPanel class="flex flex-col">
<TreeNav :nodes @nodeSelect="selectedFilter = $event" @nodeUnselect="selectedFilter = undefined" />
<TreeNav :nodes :selectedNode="selectedFilter" @nodeSelect="selectedFilter = $event"
@nodeUnselect="selectedFilter = undefined" />
</SplitterPanel>
<SplitterPanel class="flex flex-col">
<FilterDetail v-if="selectedFilter" :node="selectedFilter" @delete="onDelete" />

12
src/components/FilterDetail.vue
View File

@ -56,18 +56,6 @@ const BASE_TYPES = [
'Orb of Transmutation', 'Scroll of Wisdom', 'Portal Scroll'
];
// const search_class = (event) => {
// setTimeout(() => {
// if (!event.query.trim().length) {
// filteredCountries.value = [...countries.value];
// } else {
// filteredCountries.value = countries.value.filter((country) => {
// return country.name.toLowerCase().startsWith(event.query.toLowerCase());
// });
// }
// }, 250);
// }
const filter = computed(() => props.node.data)
</script>

2
src/components/Info.vue
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
</script>
<template>
<article class="prose dark:prose-invert">
<article class="prose dark:prose-invert px-5 pt-4">
<h2>How to use:</h2>
</article>
</template>

96
src/components/TreeNav.vue
View File

@ -1,14 +1,15 @@
<script setup lang="ts">
import { onUpdated, ref } from 'vue'
import { computed, onUpdated, ref } from 'vue'
import { defaultGroup, defaultLeaf, type Filter, type FilterNode as FilterNodeType } from '../models';
import FilterNode from './FilterNode.vue';
import { Tree, Button, Menu, ScrollPanel } from 'primevue'
import { match } from 'ts-pattern';
import FilterNode from './FilterNode.vue';
import type { TreeNode } from 'primevue/treenode';
import { filterToTreeNode } from '@/services/filter';
const props = defineProps<{
nodes: TreeNode[]
nodes: FilterNodeType[]
selectedNode?: FilterNodeType
}>()
const emit = defineEmits(['nodeSelect', 'nodeUnselect'])
const selectedKey = ref()
@ -53,6 +54,80 @@ const toggle = (event: MouseEvent) => {
menu.value.toggle(event);
};
function moveToTop() {
if (!props.selectedNode || !selectedPosition.value) {
return
}
let index = selectedPosition.value[0]
let list: FilterNodeType[];
if (props.selectedNode.parent) {
list = props.selectedNode.parent.children!
} else {
list = props.nodes
}
list.splice(index, 1)
list.unshift(props.selectedNode)
}
function moveUp() {
if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] <= 0) {
return
}
let index = selectedPosition.value[0]
let list: FilterNodeType[];
if (props.selectedNode.parent) {
list = props.selectedNode.parent.children!
} else {
list = props.nodes
}
list[index] = list[index - 1]
list[index - 1] = props.selectedNode
}
function moveDown() {
if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] >= selectedPosition.value[1] - 1) {
return
}
let index = selectedPosition.value[0]
let list: FilterNodeType[];
if (props.selectedNode.parent) {
list = props.selectedNode.parent.children!
} else {
list = props.nodes
}
list[index] = list[index + 1]
list[index + 1] = props.selectedNode
}
function moveToBottom() {
if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] >= selectedPosition.value[1] - 1) {
return
}
let index = selectedPosition.value[0]
let list: FilterNodeType[];
if (props.selectedNode.parent) {
list = props.selectedNode.parent.children!
} else {
list = props.nodes
}
list.splice(index, 1)
list.push(props.selectedNode)
}
const selectedPosition = computed(() => {
if (!props.selectedNode) {
return undefined
} else {
if (props.selectedNode.parent) {
let r = [props.selectedNode.parent.children!.findIndex(item => item === props.selectedNode), props.selectedNode.parent.children!.length]
console.dir(r)
return r
} else {
let r = [props.nodes.findIndex(item => item === props.selectedNode), props.nodes.length];
console.dir(r)
return r
}
}
})
</script>
<template>
@ -60,6 +135,21 @@ const toggle = (event: MouseEvent) => {
<article class="prose dark:prose-invert flex-1">
<h2>List of Rules:</h2>
</article>
<Button class="flex-shrink-0" :disabled="selectedPosition == undefined || selectedPosition[0] <= 0"
v-tooltip.top="'Move to top'" severity="secondary" variant="text" rounded icon="pi pi-angle-double-up"
size="small" @click="moveToTop" />
<Button class="flex-shrink-0" :disabled="selectedPosition == undefined || selectedPosition[0] <= 0"
v-tooltip.top="'Move up'" severity="secondary" variant="text" rounded icon="pi pi-angle-up" size="small"
@click="moveUp" />
<Button class="flex-shrink-0"
:disabled="selectedPosition == undefined || selectedPosition[0] >= selectedPosition[1] - 1"
v-tooltip.top="'Move down'" severity="secondary" variant="text" rounded icon="pi pi-angle-down" size="small"
@click="moveDown" />
<Button class="flex-shrink-0"
:disabled="selectedPosition == undefined || selectedPosition[0] >= selectedPosition[1] - 1"
v-tooltip.top="'Move to bottom'" severity="secondary" variant="text" rounded icon="pi pi-angle-double-down"
size="small" @click="moveToBottom" />
<Button class="flex-shrink-0" icon="pi pi-plus" rounded variant="text" size="small" @click="toggle" />
<Menu ref="menu" :model="items" :popup="true" />
</div>

4
src/main.ts
View File

@ -7,11 +7,13 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import Tooltip from 'primevue/tooltip';
const app = createApp(App)
app.use(createPinia())
app.use(PrimeVue, {
theme: 'none'
})
app.directive('tooltip', Tooltip);
app.mount('#app')

8
src/services/filter.ts
View File

@ -1,12 +1,12 @@
import type { Filter } from '@/models'
import type { Filter, FilterNode } from '@/models'
import type { TreeNode } from 'primevue/treenode'
export function filterToTreeNode(filter: Filter, parent?: TreeNode): TreeNode {
let node: TreeNode = {
export function filterToTreeNode(filter: Filter, parent?: TreeNode): FilterNode {
let node = {
key: filter.id,
data: filter,
parent
}
} as FilterNode
if (filter.type === 'group' ) {
node.children = filter.filters.map(f => filterToTreeNode(f, node))
}