feat: stack value. closes #66

src/parser/ParsedItem.ts

@@ -25,7 +25,7 @@ export interface ParsedItem {
     linked?: number // only 5 or 6
     white?: number
   }
-  stackSize?: number
+  stackSize?: { value: number, max: number }
   isUnidentified: boolean
   isCorrupted: boolean
   influences: ItemInfluence[]

src/parser/Parser.ts

@@ -298,7 +298,8 @@ function parseStackSize (section: string[], item: ParsedItem) {
   }
   if (section[0].startsWith(_$[C.TAG_STACK_SIZE])) {
     // "Stack Size: 2/9"
-    item.stackSize = parseInt(section[0].substr(_$[C.TAG_STACK_SIZE].length), 10)
+    const [value, max] = section[0].substr(_$[C.TAG_STACK_SIZE].length).split('/').map(Number)
+    item.stackSize = { value, max }
 
     if (item.category === ItemCategory.Seed) {
       parseSeedLevelNested(section, item)

src/web/price-check/CheckedItem.vue

@@ -28,6 +28,7 @@
     <div v-if="!interactedOnce" @mouseenter="interactedOnce = true">
       <button class="btn" @click="interactedOnce = true">{{ $t('Search') }}</button>
     </div>
+    <stack-value :filters="itemFilters" :item="item"/>
   </div>
 </template>
 
@@ -41,6 +42,7 @@ import FiltersBlock from './filters/FiltersBlock'
 import { createFilters } from './filters/create-item-filters'
 import { initUiModFilters } from './filters/create-stat-filters'
 import PricePrediction from './price-prediction/PricePrediction'
+import StackValue from './stack-value/StackValue'
 import FilterName from './filters/FilterName'
 import { CATEGORY_TO_TRADE_ID } from './trade/pathofexile-trade'
 import { Config } from '@/web/Config'
@@ -53,7 +55,8 @@ export default {
     TradeBulk,
     PriceTrend,
     FiltersBlock,
-    FilterName
+    FilterName,
+    StackValue
   },
   created () {
     this.$watch(vm => [vm.item, vm.interactedOnce], (curr, prev) => {

src/web/price-check/filters/create-item-filters.ts

@@ -26,7 +26,7 @@ export function createFilters (item: ParsedItem): ItemFilters {
   }
   if (item.stackSize || tradeTag(item)) {
     filters.stackSize = {
-      value: item.stackSize || 1,
+      value: item.stackSize?.value || 1,
       disabled: true
     }
   }

src/web/price-check/stack-value/StackValue.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="show"
+    class="p-2 border-dashed border border-gray-600 rounded mt-2">
+    <div class="flex text-gray-400 leading-none">
+      <div class="w-1/2"
+        >{{ $t('You have') }} <span class="font-sans">×</span> {{ value.have.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.have.price }}</div>
+      <div class="w-1/2 pl-2" v-if="value.oneStack"
+        >{{ $t('Stack') }} <span class="font-sans">×</span> {{ value.oneStack.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.oneStack.price }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Prices, displayRounding } from '../Prices'
+import { getDetailsId } from '../trends/getDetailsId'
+
+export default {
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    show () {
+      const id = getDetailsId(this.item)
+      return Boolean(this.filters.stackSize && id && Prices.findByDetailsId(id))
+    },
+    value () {
+      return {
+        have: {
+          amount: this.filters.stackSize.value,
+          price: this.getPriceFor(this.filters.stackSize.value)
+        },
+        oneStack: this.item.stackSize ? {
+          amount: this.item.stackSize.max,
+          price: this.getPriceFor(this.item.stackSize.max)
+        } : null
+      }
+    }
+  },
+  methods: {
+    getPriceFor (n) {
+      const one = Prices.findByDetailsId(getDetailsId(this.item))
+
+      const price = (this.item.name === 'Exalted Orb')
+        ? { val: n * one.receive.chaosValue, curr: 'c' }
+        : Prices.autoCurrency(n * one.receive.chaosValue, 'c')
+
+      return `${displayRounding(price.val, true)} ${price.curr === 'c' ? 'chaos' : 'exa'}`
+    }
+  }
+}
+</script>
+
+<i18n>
+{
+  "ru": {
+    "You have": "В наличии",
+    "Stack": "Стак"
+  }
+}
+</i18n>

src/web/price-check/trade/TradeBulk.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!error" class="layout-column flex-grow min-h-0">
+  <div v-if="!error" class="layout-column min-h-0" style="height: auto;">
     <!-- @TODO: fix "Matched" text jumping (min-height: 22px) -->
     <div class="mb-2 flex pl-2 justify-between items-baseline" style="min-height: 1.375rem;">
       <div class="flex items-center text-gray-500">

src/web/price-check/trade/TradeListing.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!error" class="layout-column flex-grow min-h-0">
+  <div v-if="!error" class="layout-column min-h-0" style="height: auto;">
     <div class="mb-2 flex pl-2">
       <div class="flex items-baseline text-gray-500 mr-2">
         <span class="mr-1">{{ $t('Matched:') }}</span>