Update todo from items
I Made Setia Baruna
parent
3fcd9f8c88
commit
c16ae71edc
|
|
@ -19,6 +19,10 @@
|
|||
textColor = 'red-400';
|
||||
borderColor = 'red-400';
|
||||
break;
|
||||
case 'green':
|
||||
textColor = 'green-400';
|
||||
borderColor = 'green-400';
|
||||
break;
|
||||
}
|
||||
|
||||
$: switch (size) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<script>
|
||||
import { mdiClose } from '@mdi/js';
|
||||
|
||||
import { itemGroup } from '../data/itemGroup';
|
||||
import { itemList } from '../data/itemList';
|
||||
import Button from './Button.svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
import Input from './Input.svelte';
|
||||
|
||||
export let item;
|
||||
export let addTodo;
|
||||
export let cancel;
|
||||
|
||||
let withRarity = !!itemGroup[item];
|
||||
let selectedItem = withRarity ? itemGroup[item].items[0] : itemList[item];
|
||||
let selected = 0;
|
||||
let amount = 1;
|
||||
|
||||
function select(index, item) {
|
||||
console.log(index, item);
|
||||
selected = index;
|
||||
selectedItem = item;
|
||||
}
|
||||
|
||||
function addAmount(val) {
|
||||
amount += val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if withRarity}
|
||||
<p class="text-white font-bold mb-4 text-lg">Select Rarity</p>
|
||||
<div class="flex items-center mb-4 text-white">
|
||||
{#each itemGroup[item].items as item, index}
|
||||
<div
|
||||
on:click={() => select(index, item)}
|
||||
class={`h-20 w-20 p-2 mr-2 flex items-center justify-center cursor-pointer rounded-xl transition duration-300
|
||||
${selected === index ? 'bg-background border-primary border-2' : ''}`}>
|
||||
<img
|
||||
class="w-full max-h-full object-contain"
|
||||
src={`/images/items/${item.id}.png`}
|
||||
alt={item.name}
|
||||
title={item.name} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center mb-4 text-white">
|
||||
<div class={`h-20 w-20 p-2 flex items-center justify-center`}>
|
||||
<img
|
||||
class="w-full max-h-full object-contain"
|
||||
src={`/images/items/${item}.png`}
|
||||
alt={itemList[item].name}
|
||||
title={itemList[item].name} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<p class="text-white font-bold mb-4 text-lg">Amount</p>
|
||||
<div class="inline-flex mb-4">
|
||||
<Input className="mr-2" type="number" min={1} bind:value={amount} placeholder="Input amount..." />
|
||||
<Button className="mr-2 w-16" on:click={() => addAmount(1)}>+1</Button>
|
||||
<Button className="mr-2 w-16" on:click={() => addAmount(5)}>+5</Button>
|
||||
<Button className="w-16" on:click={() => addAmount(10)}>+10</Button>
|
||||
</div>
|
||||
<div class="text-white font-bold mb-4 text-lg rounded-xl bg-background px-4 py-2 inline-flex items-center">
|
||||
<div class="h-8 w-8 mr-2 flex items-center justify-center flex-shrink-0">
|
||||
<img
|
||||
class="w-full max-h-full object-contain"
|
||||
src={`/images/items/${selectedItem.id}.png`}
|
||||
alt={selectedItem.name}
|
||||
title={selectedItem.name} />
|
||||
</div>
|
||||
<span>{selectedItem.name}</span>
|
||||
<div class="mx-2 w-4 flex-shrink-0">
|
||||
<Icon size={0.5} path={mdiClose} />
|
||||
</div>
|
||||
<span>{amount}</span>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button on:click={cancel}>Cancel</Button>
|
||||
<Button on:click={() => addTodo(selectedItem, amount)} color="green">Add to Todo</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,7 +22,7 @@ export const itemGroup = {
|
|||
items: [itemList.teachings_of_diligence, itemList.guide_to_diligence, itemList.philosophies_of_diligence],
|
||||
},
|
||||
teachings_of_prosperity: {
|
||||
name: 'Prosperrity',
|
||||
name: 'Prosperity',
|
||||
items: [itemList.teachings_of_prosperity, itemList.guide_to_prosperity, itemList.philosophies_of_prosperity],
|
||||
},
|
||||
tile_of_decarabians_tower: {
|
||||
|
|
@ -79,4 +79,171 @@ export const itemGroup = {
|
|||
itemList.chunk_of_aerosiderite,
|
||||
],
|
||||
},
|
||||
agnidus_agate_sliver: {
|
||||
name: 'Agnidus Agate',
|
||||
items: [
|
||||
itemList.agnidus_agate_sliver,
|
||||
itemList.agnidus_agate_fragment,
|
||||
itemList.agnidus_agate_chunk,
|
||||
itemList.agnidus_agate_gemstone,
|
||||
],
|
||||
},
|
||||
brilliant_diamond_sliver: {
|
||||
name: 'Brilliant Diamond',
|
||||
items: [
|
||||
itemList.brilliant_diamond_sliver,
|
||||
itemList.brilliant_diamond_fragment,
|
||||
itemList.brilliant_diamond_chunk,
|
||||
itemList.brilliant_diamond_gemstone,
|
||||
],
|
||||
},
|
||||
prithiva_topaz_sliver: {
|
||||
name: 'Prithiva Topaz',
|
||||
items: [
|
||||
itemList.prithiva_topaz_sliver,
|
||||
itemList.prithiva_topaz_fragment,
|
||||
itemList.prithiva_topaz_chunk,
|
||||
itemList.prithiva_topaz_gemstone,
|
||||
],
|
||||
},
|
||||
shivada_jade_sliver: {
|
||||
name: 'Shivada Jade',
|
||||
items: [
|
||||
itemList.shivada_jade_sliver,
|
||||
itemList.shivada_jade_fragment,
|
||||
itemList.shivada_jade_chunk,
|
||||
itemList.shivada_jade_gemstone,
|
||||
],
|
||||
},
|
||||
vajrada_amethyst_sliver: {
|
||||
name: 'Vajrada Amethyst',
|
||||
items: [
|
||||
itemList.vajrada_amethyst_sliver,
|
||||
itemList.vajrada_amethyst_fragment,
|
||||
itemList.vajrada_amethyst_chunk,
|
||||
itemList.vajrada_amethyst_gemstone,
|
||||
],
|
||||
},
|
||||
varunada_lazurite_sliver: {
|
||||
name: 'Varunada Lazurite',
|
||||
items: [
|
||||
itemList.varunada_lazurite_sliver,
|
||||
itemList.varunada_lazurite_fragment,
|
||||
itemList.varunada_lazurite_chunk,
|
||||
itemList.varunada_lazurite_gemstone,
|
||||
],
|
||||
},
|
||||
vayuda_turquoise_sliver: {
|
||||
name: 'Vayuda Turquoise',
|
||||
items: [
|
||||
itemList.vayuda_turquoise_sliver,
|
||||
itemList.vayuda_turquoise_fragment,
|
||||
itemList.vayuda_turquoise_chunk,
|
||||
itemList.vayuda_turquoise_gemstone,
|
||||
],
|
||||
},
|
||||
chaos_device: {
|
||||
name: 'Chaos',
|
||||
items: [
|
||||
itemList.chaos_device,
|
||||
itemList.chaos_circuit,
|
||||
itemList.chaos_core,
|
||||
],
|
||||
},
|
||||
damaged_mask: {
|
||||
name: 'Mask',
|
||||
items: [
|
||||
itemList.damaged_mask,
|
||||
itemList.stained_mask,
|
||||
itemList.ominous_mask,
|
||||
],
|
||||
},
|
||||
dead_ley_line_branch: {
|
||||
name: 'Dead Ley Line',
|
||||
items: [
|
||||
itemList.dead_ley_line_branch,
|
||||
itemList.dead_ley_line_leaves,
|
||||
itemList.ley_line_sprouts,
|
||||
],
|
||||
},
|
||||
divining_scroll: {
|
||||
name: 'Scroll',
|
||||
items: [
|
||||
itemList.divining_scroll,
|
||||
itemList.sealed_scroll,
|
||||
itemList.forbidden_curse_scroll,
|
||||
],
|
||||
},
|
||||
firm_arrowhead: {
|
||||
name: 'Arrowhead',
|
||||
items: [
|
||||
itemList.firm_arrowhead,
|
||||
itemList.sharp_arrowhead,
|
||||
itemList.weathered_arrowhead,
|
||||
],
|
||||
},
|
||||
fragile_bone_shard: {
|
||||
name: 'Bone Shard',
|
||||
items: [
|
||||
itemList.fragile_bone_shard,
|
||||
itemList.sturdy_bone_shard,
|
||||
itemList.fossilized_bone_shard,
|
||||
],
|
||||
},
|
||||
heavy_horn: {
|
||||
name: 'Horn',
|
||||
items: [
|
||||
itemList.heavy_horn,
|
||||
itemList.black_bronze_horn,
|
||||
itemList.black_crystal_horn,
|
||||
],
|
||||
},
|
||||
hunters_sacrificial_knife: {
|
||||
name: 'Knife',
|
||||
items: [
|
||||
itemList.hunters_sacrificial_knife,
|
||||
itemList.agents_sacrificial_knife,
|
||||
itemList.inspectors_sacrificial_knife,
|
||||
],
|
||||
},
|
||||
mist_grass_pollen: {
|
||||
name: 'Mist Grass',
|
||||
items: [
|
||||
itemList.mist_grass_pollen,
|
||||
itemList.mist_grass,
|
||||
itemList.mist_grass_wick,
|
||||
],
|
||||
},
|
||||
recruits_insignia: {
|
||||
name: 'Insignia',
|
||||
items: [
|
||||
itemList.recruits_insignia,
|
||||
itemList.sergeants_insignia,
|
||||
itemList.lieutenants_insignia,
|
||||
],
|
||||
},
|
||||
slime_condensate: {
|
||||
name: 'Slime',
|
||||
items: [
|
||||
itemList.slime_condensate,
|
||||
itemList.slime_secretions,
|
||||
itemList.slime_concentrate,
|
||||
],
|
||||
},
|
||||
treasure_hoarder_insignia: {
|
||||
name: 'Treasure Hoarder Insignia',
|
||||
items: [
|
||||
itemList.treasure_hoarder_insignia,
|
||||
itemList.silver_raven_insignia,
|
||||
itemList.golden_raven_insignia,
|
||||
],
|
||||
},
|
||||
whopperflower_nectar: {
|
||||
name: 'Nectar',
|
||||
items: [
|
||||
itemList.whopperflower_nectar,
|
||||
itemList.shimmering_nectar,
|
||||
itemList.energy_nectar,
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import { characters } from '../data/characters';
|
||||
import { itemGroup } from '../data/itemGroup';
|
||||
import { itemList } from '../data/itemList';
|
||||
|
|
@ -6,6 +8,10 @@
|
|||
|
||||
import CharacterSelect from '../components/CharacterSelect.svelte';
|
||||
import WeaponSelect from '../components/WeaponSelect.svelte';
|
||||
import TodoAddModal from '../components/TodoAddModal.svelte';
|
||||
import { addTodo } from '../stores/todo';
|
||||
|
||||
const { open: openModal, close: closeModal } = getContext('simple-modal');
|
||||
|
||||
let dayName = {
|
||||
monday_thursday: ['Monday', 'Thursday'],
|
||||
|
|
@ -30,6 +36,31 @@
|
|||
let selectedCharacter = null;
|
||||
let selectedWeapon = null;
|
||||
|
||||
function addTodoItem(item, amount) {
|
||||
addTodo({
|
||||
type: 'item',
|
||||
item,
|
||||
amount,
|
||||
});
|
||||
|
||||
closeModal();
|
||||
}
|
||||
|
||||
function openAddTodo(item) {
|
||||
openModal(
|
||||
TodoAddModal,
|
||||
{
|
||||
item,
|
||||
addTodo: addTodoItem,
|
||||
cancel: closeModal,
|
||||
},
|
||||
{
|
||||
closeButton: false,
|
||||
styleWindow: { background: '#25294A', width: '400px' },
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function parseData() {
|
||||
dayName = {
|
||||
monday_thursday: ['Monday', 'Thursday'],
|
||||
|
|
@ -51,8 +82,6 @@
|
|||
|
||||
allItems = {};
|
||||
|
||||
console.log('parsing', selectedCharacter);
|
||||
|
||||
if (
|
||||
(selectedCharacter === null && selectedWeapon === null) ||
|
||||
(selectedCharacter !== null && selectedWeapon === null) ||
|
||||
|
|
@ -179,6 +208,7 @@
|
|||
<td class="border-gray-700 border-b text-center align-middle py-2">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
on:click={() => openAddTodo(itemName)}
|
||||
class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl
|
||||
inline-flex items-center justify-center align-top">
|
||||
<img
|
||||
|
|
@ -213,6 +243,7 @@
|
|||
<td class="border-gray-700 border-b text-center py-2">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
on:click={() => openAddTodo(itemName)}
|
||||
class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl
|
||||
inline-flex items-center justify-center align-top">
|
||||
<img
|
||||
|
|
@ -260,6 +291,7 @@
|
|||
<td class="border-gray-700 border-b align-middle py-2">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
on:click={() => openAddTodo(itemName)}
|
||||
class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl inline-flex items-center justify-center">
|
||||
<img
|
||||
class="w-full max-h-full object-contain"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { getContext, tick } from 'svelte';
|
||||
import { getContext, onMount, tick } from 'svelte';
|
||||
import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading, mdiPlus } from '@mdi/js';
|
||||
import { todos, loading } from '../stores/todo';
|
||||
import { itemList } from '../data/itemList';
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
let adding = false;
|
||||
let todayOnly = false;
|
||||
let today = getCurrentDay();
|
||||
let summary = [];
|
||||
|
||||
async function reorder(index, pos) {
|
||||
if ((index === 0 && pos === -1) || (index === $todos.length - 1 && pos === 1)) return;
|
||||
|
|
@ -83,19 +84,29 @@
|
|||
});
|
||||
}
|
||||
|
||||
$: summary = $todos.reduce((prev, current) => {
|
||||
for (const [id, amount] of Object.entries(current.resources)) {
|
||||
if (todayOnly && itemList[id].day && !itemList[id].day.includes(today)) continue;
|
||||
async function updateSummary() {
|
||||
summary = $todos.reduce((prev, current) => {
|
||||
for (const [id, amount] of Object.entries(current.resources)) {
|
||||
if (todayOnly && itemList[id].day && !itemList[id].day.includes(today)) continue;
|
||||
|
||||
if (prev[id] === undefined) {
|
||||
prev[id] = 0;
|
||||
if (prev[id] === undefined) {
|
||||
prev[id] = 0;
|
||||
}
|
||||
|
||||
prev[id] += amount;
|
||||
}
|
||||
|
||||
prev[id] += amount;
|
||||
}
|
||||
return prev;
|
||||
}, {});
|
||||
|
||||
return prev;
|
||||
}, {});
|
||||
await tick();
|
||||
refreshLayout();
|
||||
}
|
||||
|
||||
onMount(() => {});
|
||||
|
||||
$: $todos, updateSummary();
|
||||
$: todayOnly, updateSummary();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -177,6 +188,12 @@
|
|||
<p class="font-bold">{todo.character ? todo.character.name : 'Character'}</p>
|
||||
<p class="text-gray-500">Level {`${todo.level.from}-${todo.level.to}`}</p>
|
||||
</div>
|
||||
{:else if todo.type === 'item'}
|
||||
<img class="h-8 inline-block mr-2" src={`/images/items.png`} alt="Item" />
|
||||
<div class="flex-1">
|
||||
<p class="font-bold">Items</p>
|
||||
<p class="text-gray-500">Added from items page</p>
|
||||
</div>
|
||||
{/if}
|
||||
<Button disabled={i === 0} on:click={() => reorder(i, -1)} rounded={false} size="sm" className="rounded-l-xl">
|
||||
<Icon path={mdiChevronLeft} color="white" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,34 @@ export const todos = writable([]);
|
|||
|
||||
export function addTodo(data) {
|
||||
todos.update((value) => {
|
||||
console.log([...value, data]);
|
||||
return [...value, data];
|
||||
if (data.type === 'item') {
|
||||
const itemsIndex = value.findIndex((e) => e.type === 'item');
|
||||
|
||||
if (itemsIndex > -1) {
|
||||
const items = value[itemsIndex].resources;
|
||||
|
||||
if (items[data.item.id] !== undefined) {
|
||||
items[data.item.id] += data.amount;
|
||||
} else {
|
||||
items[data.item.id] = data.amount;
|
||||
}
|
||||
|
||||
value[itemsIndex] = {
|
||||
type: 'item',
|
||||
resources: items,
|
||||
};
|
||||
} else {
|
||||
const items = { [data.item.id]: data.amount };
|
||||
|
||||
value.push({
|
||||
type: 'item',
|
||||
resources: items,
|
||||
});
|
||||
}
|
||||
|
||||
return value;
|
||||
} else {
|
||||
return [...value, data];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue