From 4ea94d6d9b5e3eee5ae784c8dfa351a6b16cf96d Mon Sep 17 00:00:00 2001
From: Tnze <cjd001113@outlook.com>
Date: Mon, 30 Dec 2024 22:20:14 +0800
Subject: [PATCH] Improve BOM UI

---
 src/assets/locales/ja-JP.ftl |  1 +
 src/assets/locales/zh-CN.ftl |  1 -
 src/pages/Bom.vue            | 21 ++++++++++++++++++++-
 src/stores/bom.ts            | 18 ++++++++----------
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/assets/locales/ja-JP.ftl b/src/assets/locales/ja-JP.ftl
index ffc347d7..7ab39161 100644
--- a/src/assets/locales/ja-JP.ftl
+++ b/src/assets/locales/ja-JP.ftl
@@ -101,3 +101,4 @@ update-done = 更新ダウンロード終了
 attributes = 属性
 settings = 設定
 title = { $recipe } （模拟器模式）
+bill-of-material = 材料リスト
diff --git a/src/assets/locales/zh-CN.ftl b/src/assets/locales/zh-CN.ftl
index b03556ce..dd95da76 100644
--- a/src/assets/locales/zh-CN.ftl
+++ b/src/assets/locales/zh-CN.ftl
@@ -155,5 +155,4 @@ attributes = 装备属性
 select-recipe = 选择配方
 custom-recipe = 自定义配方
 bill-of-material = 物料清单
-
 settings = 设置
diff --git a/src/pages/Bom.vue b/src/pages/Bom.vue
index f5a863fe..a0af7d14 100644
--- a/src/pages/Bom.vue
+++ b/src/pages/Bom.vue
@@ -194,7 +194,15 @@ function calcLines() {
             <el-divider content-position="left">
                 <el-text>
                     <template v-if="calculating">
-                        {{ $t('calculating') }}
+                        <el-text v-if="store.fetchingItem" type="info">
+                            {{
+                                store.fetchingItem != undefined
+                                    ? $t('fetching-item', {
+                                          itemName: store.fetchingItem,
+                                      })
+                                    : $t('calculating')
+                            }}
+                        </el-text>
                         <el-icon class="is-loading">
                             <Loading />
                         </el-icon>
@@ -293,12 +301,23 @@ function calcLines() {
 <fluent locale="zh-CN">
 ings = 材料
 calculating = 计算中
+fetching-item = 正在查询 { $itemName }
 add = 添加
 clear = 清空
 </fluent>
 
 <fluent locale="en-US">
+ings = Ingredients
+calculating = Calculating
+fetching-item = Fetching { $itemName }
+add = Add
+clear = Clear
 </fluent>
 
 <fluent locale="ja-JP">
+ings = コンポーネント
+calculating = ずるい
+fetching-item = つかむ { $itemName }
+add = 追加
+clear = パージ
 </fluent>
diff --git a/src/stores/bom.ts b/src/stores/bom.ts
index 42e6780d..bc40ca3f 100644
--- a/src/stores/bom.ts
+++ b/src/stores/bom.ts
@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import { markRaw } from 'vue';
 import { defineStore } from 'pinia';
 
 import useSettingStore from '@/stores/settings';
@@ -74,6 +73,8 @@ export default defineStore('bom', {
         ingredientsCache: new Map<RecipeID, ItemWithAmount[]>(),
         itemInfoCache: new Map<ItemID, Item>(),
         ingredients: <Slot[]>[],
+
+        fetchingItem: <string | undefined>undefined,
     }),
 
     actions: {
@@ -103,6 +104,8 @@ export default defineStore('bom', {
                 const v = queue.shift()!;
                 ings.set(v.item.id, v);
 
+                this.fetchingItem = v.item.name;
+
                 const recipes = await this.findRecipe(
                     ds,
                     v.item.id,
@@ -111,7 +114,7 @@ export default defineStore('bom', {
                 if (recipes.length == 0) continue;
 
                 const r = recipes[0];
-                const subIngs = await this.findIngredients(ds, r.id);
+                const subIngs = await this.fetchIngredients(ds, r.id);
 
                 for (const subIng of subIngs) {
                     let slot = ings.get(subIng.ingredient_id);
@@ -130,6 +133,7 @@ export default defineStore('bom', {
                     subIngs.map(v => v.ingredient_id),
                 );
             }
+            this.fetchingItem = undefined;
 
             // Sorting with Kahn's algorithm
             const indegrees = new Map<ItemID, number>();
@@ -165,10 +169,6 @@ export default defineStore('bom', {
             if (sorted.length != ings.size) {
                 throw new Error('Topology sorting failed');
             }
-            console.debug(
-                'Topology sorting result',
-                sorted.map(v => v.item.name).join(' -> '),
-            );
 
             // Calculate amounts
             const holdings = new Map(this.holdingItems);
@@ -182,7 +182,6 @@ export default defineStore('bom', {
                 const n = r - use; // needs
                 slot.type =
                     r > 0 ? (n > 0 ? 'required' : 'completed') : 'not-required';
-
                 // find recipe
                 const recipes = await this.findRecipe(
                     ds,
@@ -199,8 +198,7 @@ export default defineStore('bom', {
                 const crafts = Math.ceil(n / recipe.item_amount);
                 slot.wasted = recipe.item_amount * crafts - n;
 
-                // TODO: cache the recipe ingredients
-                for (const ing of await this.findIngredients(ds, recipe.id)) {
+                for (const ing of await this.fetchIngredients(ds, recipe.id)) {
                     const subSlot = ings.get(ing.ingredient_id)!;
                     subSlot.addRequiredBy(slot.item.id, crafts * ing.amount);
 
@@ -251,7 +249,7 @@ export default defineStore('bom', {
             return result;
         },
 
-        async findIngredients(dataSource: DataSource, recipeId: RecipeID) {
+        async fetchIngredients(dataSource: DataSource, recipeId: RecipeID) {
             let result = this.ingredientsCache.get(recipeId);
             if (result == undefined) {
                 result = await dataSource.recipesIngredients(recipeId);