diff --git a/src/App.vue b/src/App.vue index b43803d..7a60295 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,13 +4,26 @@
{{ eorzeaTime.getPrettyTime() }}
+
+ +
+
@@ -26,16 +39,20 @@ import {nodeTypeFromString} from "@/enums/NodeType"; import SortedNodeList from "@/components/SortedNodeList.vue"; import TimeRange from "@/entities/TimeRange"; import Zone from "@/entities/Zone"; +import FiltersMenu from "@/components/FiltersMenu.vue"; +import Filters from "@/util/Filters"; export default defineComponent({ name: 'App', - components: {SortedNodeList}, + components: {FiltersMenu, SortedNodeList}, data: () => ({ eorzeaTime: new EorzeaTime() as EorzeaTime, nodes: [] as Node[], aetherytes: [] as Aetheryte[], items: {} as { [key: string]: Item }, zones: {} as { [key: string]: Zone }, + filtersActive: false, + filters: new Filters(), }), methods: { findNearestAetheryte(zone: string, x: number, y: number): Aetheryte | null { @@ -172,5 +189,16 @@ nav { .current-eorzea-time { font-size: 3rem; } + + .filters-button { + display: flex; + padding: 0.5rem; + border: 1px solid #fff; + background-color: transparent; + cursor: pointer; + &.active { + background-color: rgba(255, 255, 255, 0.1); + } + } } diff --git a/src/components/FiltersMenu.vue b/src/components/FiltersMenu.vue new file mode 100644 index 0000000..9e51649 --- /dev/null +++ b/src/components/FiltersMenu.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/src/components/GatheringNode.vue b/src/components/GatheringNode.vue index b5f2595..18a6ed4 100644 --- a/src/components/GatheringNode.vue +++ b/src/components/GatheringNode.vue @@ -1,5 +1,8 @@