Add filter to item list

2024-12-22 22:46:41 +01:00 · 2021-01-08 18:01:49 +08:00 · 2021-01-08 18:01:49 +08:00 · 3fcd9f8c88
commit 3fcd9f8c88
parent fd09da952d
3 changed files with 126 additions and 39 deletions
--- a/src/components/CharacterSelect.svelte
+++ b/src/components/CharacterSelect.svelte
@ -2,7 +2,7 @@
  import { createEventDispatcher } from 'svelte';
  import VirtualList from './VirtualList.svelte';
  import { fade } from 'svelte/transition';
-  import { mdiChevronDown } from '@mdi/js';
+  import { mdiChevronDown, mdiCloseCircle } from '@mdi/js';

  import Icon from './Icon.svelte';
  import { characters as characterList } from '../data/characters';
@ -29,6 +29,7 @@
  }

  function select(val) {
+    console.log('select', val);
    selected = val;
    focused = false;
    hoveredIndex = -1;
@ -132,7 +133,19 @@
      {placeholder}
      value={nothingSelected || focused ? search : label}
      on:input={onInput} />
-    <Icon path={mdiChevronDown} color="white" className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
+    {#if selected}
+      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
+        <Icon
+          path={mdiCloseCircle}
+          color="white"
+          className={`${iconClasses}`} />
+      </div>
+    {:else}
+      <Icon
+        path={mdiChevronDown}
+        color="white"
+        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
+    {/if}
  </div>
  {#if focused}
    <div
--- a/src/components/WeaponSelect.svelte
+++ b/src/components/WeaponSelect.svelte
@ -2,7 +2,7 @@
  import { createEventDispatcher } from 'svelte';
  import VirtualList from './VirtualList.svelte';
  import { fade } from 'svelte/transition';
-  import { mdiChevronDown } from '@mdi/js';
+  import { mdiChevronDown, mdiCloseCircle } from '@mdi/js';

  import Icon from './Icon.svelte';
  import { weaponList } from '../data/weaponList';
@ -134,7 +134,16 @@
      {placeholder}
      value={nothingSelected || focused ? search : label}
      on:input={onInput} />
-    <Icon path={mdiChevronDown} color="white" className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
+    {#if selected}
+      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
+        <Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
+      </div>
+    {:else}
+      <Icon
+        path={mdiChevronDown}
+        color="white"
+        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
+    {/if}
  </div>
  {#if focused}
    <div
--- a/src/routes/items.svelte
+++ b/src/routes/items.svelte
@ -4,6 +4,9 @@
  import { itemList } from '../data/itemList';
  import { weaponList } from '../data/weaponList';

+  import CharacterSelect from '../components/CharacterSelect.svelte';
+  import WeaponSelect from '../components/WeaponSelect.svelte';
+
  let dayName = {
    monday_thursday: ['Monday', 'Thursday'],
    tuesday_friday: ['Tuesday', 'Friday'],
@ -24,8 +27,40 @@

  let allItems = {};

+  let selectedCharacter = null;
+  let selectedWeapon = null;
+
  function parseData() {
+    dayName = {
+      monday_thursday: ['Monday', 'Thursday'],
+      tuesday_friday: ['Tuesday', 'Friday'],
+      wednesday_saturday: ['Wednesday', 'Saturday'],
+    };
+
+    charactersDays = {
+      monday_thursday: {},
+      tuesday_friday: {},
+      wednesday_saturday: {},
+    };
+
+    weaponsDays = {
+      monday_thursday: {},
+      tuesday_friday: {},
+      wednesday_saturday: {},
+    };
+
+    allItems = {};
+
+    console.log('parsing', selectedCharacter);
+
+    if (
+      (selectedCharacter === null && selectedWeapon === null) ||
+      (selectedCharacter !== null && selectedWeapon === null) ||
+      (selectedCharacter !== null && selectedWeapon !== null)
+    ) {
      for (const [_, character] of Object.entries(characters)) {
+        if (selectedCharacter !== null && selectedCharacter.id !== character.id) continue;
+
        const item = character.material.book[0];
        if (charactersDays[item.day.join('_')][item.id] === undefined) {
          charactersDays[item.day.join('_')][item.id] = [];
@ -42,9 +77,16 @@
          }
        }
      }
+    }

+    if (
+      (selectedCharacter === null && selectedWeapon === null) ||
+      (selectedCharacter === null && selectedWeapon !== null) ||
+      (selectedCharacter !== null && selectedWeapon !== null)
+    ) {
      for (const [_, weapon] of Object.entries(weaponList)) {
-      if (weapon.rarity < 4) continue;
+        if (selectedWeapon !== null && selectedWeapon.id !== weapon.id) continue;
+
        const items = weapon.ascension[0].items;
        for (const itemData of items) {
          const item = itemData.item;
@ -61,11 +103,15 @@
          }
        }
      }
+    }

    console.log(allItems);
  }

  parseData();
+
+  $: selectedCharacter, parseData();
+  $: selectedWeapon, parseData();
 </script>

 <style>
@ -88,6 +134,12 @@
      @apply overflow-y-hidden;
    }
  }
+
+  tr:last-child {
+    td {
+      @apply border-b-0;
+    }
+  }
 </style>

 <svelte:head>
@ -98,6 +150,10 @@
  <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
    ※ Click the item image to add it to the todo list
  </p>
+  <div class="pb-4 px-4 md:px-8 grid grid-cols-1 md:grid-cols-2 gap-2 max-w-screen-md">
+    <CharacterSelect bind:selected={selectedCharacter} placeholder="Search character" />
+    <WeaponSelect bind:selected={selectedWeapon} placeholder="Search weapon" />
+  </div>
  <div class="block overflow-x-auto whitespace-no-wrap pb-8">
    <div class="px-4 md:px-8 table max-w-full">
      <table class="w-full block p-4 bg-item rounded-xl">
@ -109,14 +165,15 @@
            Materials
          </th>
          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
-            Characters
+            Characters & Weapons
          </th>
        </thead>
        <tbody>
          {#each Object.entries(dayName) as [day, dayArr]}
            {#each Object.entries(charactersDays[day]) as [itemName, chars], index}
              <tr>
-                <td class="py-2">
+                <td
+                  class={index === Object.entries(charactersDays[day]).length - 1 && Object.entries(weaponsDays[day]).length === 0 ? 'border-gray-700 border-b py-2' : 'py-2'}>
                  {#if index === 0}{dayArr[0]}<br />{dayArr[1]}{/if}
                </td>
                <td class="border-gray-700 border-b text-center align-middle py-2">
@ -137,7 +194,11 @@
                    <div
                      class="h-12 w-12 md:h-14 md:w-14 cursor-pointer mr-2 hover:bg-background rounded-xl 
                       inline-flex items-center justify-center align-top">
-                      <img class="w-full max-h-full object-contain" src={`/images/characters/${char}.png`} alt={char} />
+                      <img
+                        class="w-full max-h-full object-contain"
+                        src={`/images/characters/${char}.png`}
+                        alt={char}
+                        title={characters[char].name} />
                    </div>
                  {/each}
                </td>
@ -146,7 +207,9 @@
            {#each Object.entries(weaponsDays[day]) as [itemName, weapons], index}
              <tr>
                <td
-                  class={index === Object.entries(charactersDays[day]).length - 1 ? 'border-gray-700 border-b py-2' : 'py-2'} />
+                  class={index === Object.entries(weaponsDays[day]).length - 1 || Object.entries(charactersDays[day]).length === 0 ? 'border-gray-700 border-b py-2' : 'py-2'}>
+                  {#if index === 0 && Object.entries(charactersDays[day]).length === 0}{dayArr[0]}<br />{dayArr[1]}{/if}
+                </td>
                <td class="border-gray-700 border-b text-center py-2">
                  <div class="flex items-center">
                    <div
@ -157,7 +220,7 @@
                        src={`/images/items/${itemName}.png`}
                        alt={itemName} />
                    </div>
-                    <span class="whitespace-normal text-left w-0">{itemGroup[itemName].name}</span>
+                    <span class="whitespace-normal text-left w-20">{itemGroup[itemName].name}</span>
                  </div>
                </td>
                <td class="border-gray-700 border-b weapon-cell pt-2">
@ -168,7 +231,8 @@
                      <img
                        class="w-full max-h-full object-contain"
                        src={`/images/weapons/${weapon}.png`}
-                        alt={weapon} />
+                        alt={weapon}
+                        title={weaponList[weapon].name} />
                    </div>
                  {/each}
                </td>
@ -187,7 +251,7 @@
            Material
          </th>
          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
-            Characters
+            Characters & Weapons
          </th>
        </thead>
        <tbody>
@ -213,7 +277,8 @@
                    <img
                      class="w-full max-h-full object-contain"
                      src={`/images/${type}/${charName}.png`}
-                      alt={charName} />
+                      alt={charName}
+                      title={type === 'characters' ? characters[charName].name : weaponList[charName].name} />
                  </div>
                {/each}
              </td>