poi-plugin-equips-farm 1.0.2

package/views/components/EquipmentList.es

@@ -0,0 +1,273 @@
+import React, { Component, useState, useEffect } from 'react'
+import { Card, Button, InputGroup, Tag, Collapse, Divider, NumericInput, Classes, ControlGroup } from '@blueprintjs/core'
+import { Avatar } from 'views/components/etc/avatar' 
+import { SlotitemIcon } from 'views/components/etc/icon'
+import { checkQuota } from '../../lib/data-processor'
+import { matchesSearch } from '../../lib/search-utils'
+
+// Robust Control for Redux-bound Inputs
+const TargetControl = ({ id, count, onUpdate }) => {
+    const [val, setVal] = useState(String(count || 0))
+
+    useEffect(() => {
+        setVal(String(count || 0))
+    }, [count])
+
+    const handleConfirm = (newValStr) => {
+        let finalVal = parseInt(newValStr)
+        if (isNaN(finalVal) || finalVal < 0) finalVal = 0
+        setVal(String(finalVal))
+        onUpdate(id, finalVal)
+    }
+
+    return (
+        <ControlGroup style={{ marginLeft: 10 }}>
+            <Button 
+                icon="minus" 
+                onClick={() => handleConfirm(String((parseInt(val) || 0) - 1))} 
+                disabled={(parseInt(val) || 0) <= 0}
+            />
+            <InputGroup 
+                value={val}
+                onChange={(e) => setVal(e.target.value)}
+                onBlur={(e) => handleConfirm(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleConfirm(e.currentTarget.value)
+                }}
+                style={{ width: 50, textAlign: 'center', zIndex: 0 }}
+            />
+            <Button 
+                icon="plus" 
+                onClick={() => handleConfirm(String((parseInt(val) || 0) + 1))} 
+            />
+        </ControlGroup>
+    )
+}
+
+export default class EquipmentList extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            filterType: 'All', // All, Marked, Unmarked
+            search: '',
+            expandedId: null,
+            selectedTypeIds: new Set()
+        }
+    }
+
+    handleToggleExpand = (id) => {
+        this.setState(prev => ({ expandedId: prev.expandedId === id ? null : id }))
+    }
+
+    handleTypeToggle = (typeId) => {
+        this.setState(prev => {
+            const newSet = new Set(prev.selectedTypeIds)
+            if (newSet.has(typeId)) {
+                newSet.delete(typeId)
+            } else {
+                newSet.add(typeId)
+            }
+            return { selectedTypeIds: newSet }
+        })
+    }
+
+    render() {
+        // Props contain full equip list + master data
+        const { equipments, targets, onAdd, onRemove, userEquips, userShips, farmingMap, $equipTypes, $ships } = this.props
+        const { filterType, search, expandedId } = this.state
+
+        // 1. Initial Filter (Search & Status)
+        let filtered = equipments.filter(eq => {
+            const isMarked = !!targets[eq.id]
+            if (filterType === 'Marked' && !isMarked) return false
+            if (filterType === 'Unmarked' && isMarked) return false
+            // Enhanced multi-language search: supports Chinese, Japanese, Pinyin, Romaji
+            if (search && !matchesSearch(search, eq)) return false
+            return true
+        })
+
+        // 2. Prepare Types Data for Grid Filter (Dynamic based on available equipment)
+        const availableTypesMap = {}
+        equipments.forEach(eq => {
+            const tId = eq.typeId || 999
+            if (!availableTypesMap[tId]) {
+                const typeInfo = $equipTypes[tId]
+                availableTypesMap[tId] = {
+                    id: tId,
+                    name: typeInfo ? typeInfo.api_name : 'Others',
+                    iconId: eq.iconId 
+                }
+            }
+        })
+        const availableTypes = Object.values(availableTypesMap).sort((a,b) => a.id - b.id)
+
+        // 3. Apply Type Filter
+        const { selectedTypeIds } = this.state
+        if (selectedTypeIds.size > 0) {
+            filtered = filtered.filter(eq => selectedTypeIds.has(eq.typeId || 999))
+        }
+
+        // 4. Group by Category
+        const groups = {}
+        filtered.forEach(eq => {
+            const typeId = eq.typeId || 999
+            if (!groups[typeId]) groups[typeId] = []
+            groups[typeId].push(eq)
+        })
+
+        const sortedTypeIds = Object.keys(groups).sort((a,b) => parseInt(a) - parseInt(b))
+
+        return (
+            <div className="equipment-list-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+                {/* Top Controls */}
+                <div className="filters" style={{ marginBottom: 10, flexShrink: 0, padding: 2 }}>
+                    <div style={{ display: 'flex', marginBottom: 10 }}>
+                        <InputGroup 
+                            leftIcon="search" 
+                            placeholder="Search equipment..." 
+                            value={search}
+                            onChange={(e) => this.setState({ search: e.target.value })}
+                            style={{ flex: 1, marginRight: 10 }}
+                        />
+                        <div className="bp3-button-group">
+                            <Button active={filterType === 'All'} onClick={() => this.setState({ filterType: 'All' })} className="bp3-small">All</Button>
+                            <Button active={filterType === 'Marked'} intent={filterType === 'Marked' ? "primary" : "none"} onClick={() => this.setState({ filterType: 'Marked' })} className="bp3-small">Marked</Button>
+                            <Button active={filterType === 'Unmarked'} onClick={() => this.setState({ filterType: 'Unmarked' })} className="bp3-small">Unmarked</Button>
+                        </div>
+                    </div>
+
+                    {/* Type Filter Grid */}
+                    <div className="type-filter-grid" style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(60px, 1fr))', // Auto grid
+                        gap: '8px',
+                        padding: '10px 0', // Remove horizontal padding if bg is gone
+                        // background: 'rgba(33, 33, 33, 0.3)', // Removed
+                        maxHeight: '150px', 
+                        overflowY: 'auto',
+                        marginBottom: '10px'
+                    }}>
+                        {availableTypes.map(t => {
+                            const isSelected = selectedTypeIds.has(t.id)
+                            return (
+                                <div 
+                                    key={t.id} 
+                                    onClick={() => this.handleTypeToggle(t.id)}
+                                    title={t.name}
+                                    style={{ 
+                                        display: 'flex', 
+                                        alignItems: 'center', 
+                                        cursor: 'pointer',
+                                        opacity: isSelected ? 1 : 0.6,
+                                        justifyContent: 'flex-start' // Align left in grid cell
+                                    }}
+                                >
+                                    {/* Custom Checkbox Look */}
+                                    <div style={{
+                                        width: '14px',
+                                        height: '14px',
+                                        border: '1px solid #888',
+                                        background: isSelected ? '#2196F3' : 'transparent',
+                                        marginRight: '6px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        borderRadius: '2px',
+                                        flexShrink: 0
+                                    }}>
+                                        {isSelected && <div style={{ width: '8px', height: '8px', background: '#fff' }} />}
+                                    </div>
+                                    <SlotitemIcon slotitemId={t.iconId} style={{ width: 24, height: 24 }} />
+                                </div>
+                            )
+                        })}
+                        {availableTypes.length === 0 && <span className="bp3-text-muted">Loading types...</span>}
+                    </div>
+                </div>
+
+                {/* List Content */}
+                <div className="list-content" style={{ flex: 1, overflowY: 'auto', paddingRight: 5 }}>
+                    {sortedTypeIds.map(typeId => {
+                        const groupItems = groups[typeId]
+                        // const typeInfo = $equipTypes[typeId]
+                        // const typeName = typeInfo ? typeInfo.api_name : 'Others'
+                        
+                        return (
+                            <div key={typeId} className="type-group" style={{ marginBottom: 0 }}>
+                                {/* Header Removed per user request */}
+                                
+                                {groupItems.map(eq => {
+                                    const targetCount = targets[eq.id] || 0
+                                    const isMarked = targetCount > 0
+                                    const isExpanded = expandedId === eq.id
+                                    const quota = checkQuota(targetCount, eq.id, userEquips, userShips, farmingMap)
+
+                                    return (
+                                        <Card key={eq.id} elevation={0} style={{ marginBottom: 8, border: '1px solid #ddd', padding: 8 }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+
+                                                 <div 
+                                                    style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', flex: 1 }} 
+                                                    onClick={() => this.handleToggleExpand(eq.id)}
+                                                >
+                                                    <SlotitemIcon slotitemId={eq.iconId} style={{ marginRight: 10, width: 30, height: 30 }} />
+                                                    <div style={{ lineHeight: '1.2' }}>
+                                                        <div style={{ fontWeight: 'bold' }}>{eq.name}</div>
+                                                    </div>
+                                                </div>
+
+                                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                    {isMarked && (
+                                                        <div style={{ marginRight: 10, textAlign: 'right', fontSize: '0.8em', lineHeight: 1.1 }}>
+                                                            <div className={quota.isSatisfied ? "bp3-text-success" : "bp3-text-warning"}>
+                                                                {quota.current}/{targetCount}
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                     <TargetControl 
+                                                        id={parseInt(eq.id)} 
+                                                        count={targetCount}
+                                                        onUpdate={(id, c) => {
+                                                            if (c <= 0) onRemove(id)
+                                                            else onAdd(id, c)
+                                                        }}
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            <Collapse isOpen={isExpanded}>
+                                                <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid #eee' }}>
+                                                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                                                        {eq.ships.map((s, idx) => {
+                                                            return (
+                                                                <div key={idx} style={{ 
+                                                                    display: 'flex', 
+                                                                    alignItems: 'center', 
+                                                                    background: 'rgba(0, 0, 0, 0.2)', 
+                                                                    padding: '4px 8px', 
+                                                                    borderRadius: '4px',
+                                                                    border: '1px solid rgba(255, 255, 255, 0.1)'
+                                                                }}>
+                                                                    <Avatar mstId={s.providerId} height={20} style={{ marginRight: 5 }} />
+                                                                    <div style={{ fontSize: '0.9em' }}>
+                                                                        <span>{s.providerName}</span>
+                                                                        <Tag minimal={true} style={{ marginLeft: 5 }}>Lv.{s.level}</Tag>
+                                                                    </div>
+                                                                </div>
+                                                            )
+                                                        })}
+                                                    </div>
+                                                </div>
+                                            </Collapse>
+                                        </Card>
+                                    )
+                                })}
+                            </div>
+                        )
+                    })}
+                    {sortedTypeIds.length === 0 && <div className="bp3-text-muted" style={{ textAlign: 'center', marginTop: 20 }}>No items match filter.</div>}
+                </div>
+            </div>
+        )
+    }
+}

package/views/components/ShipList.es

@@ -0,0 +1,145 @@
+import React, { Component } from 'react'
+import { Card, Button, InputGroup, Tag, Collapse } from '@blueprintjs/core'
+import { Avatar } from 'views/components/etc/avatar'
+import { matchesSearch } from '../../lib/search-utils'
+
+export default class ShipList extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            search: '',
+            filterMarked: false
+        }
+    }
+
+    render() {
+        // Consolidated Data passed from index.es (via equipmentList construction)
+        // Or we reconstruct it here?
+        // Let's rely on logic similar to index.es: 
+        // equipmentList contains: { ships: [ { shipId (Base), providerId, providerName, level, ... } ] }
+        
+        const { equipmentList, targets, $ships, wctf } = this.props
+        const { search, filterMarked } = this.state
+
+        // WCTF ships data contains chinese_name
+        const wctfShips = (wctf && wctf.ships) || {}
+
+        const shipMap = {}
+        
+        equipmentList.forEach(eq => {
+            const targetCount = targets[eq.id] || 0
+            const isTarget = targetCount > 0
+            
+            eq.ships.forEach(s => {
+                // s.shipId is BASE ID
+                if (!shipMap[s.shipId]) {
+                    // Get full ship data from master data for enhanced search
+                    const masterShip = $ships[s.shipId] || {}
+                    const wctfShip = wctfShips[s.shipId] || {}
+                    
+                    // WCTF data structure: name is an object with language variants
+                    const chineseName = wctfShip.name && (wctfShip.name.zh_cn || wctfShip.name.chs || wctfShip.name.chinese)
+                    const yomiName = wctfShip.name && wctfShip.name.yomi
+                    
+                    shipMap[s.shipId] = {
+                        baseId: s.shipId,
+                        name: s.shipName,
+                        // Add fields for enhanced search
+                        api_name: masterShip.api_name,
+                        chinese_name: chineseName || masterShip.chinese_name,
+                        yomi: yomiName || masterShip.yomi,
+                        api_yomi: masterShip.api_yomi,
+                        filename: wctfShip.filename || masterShip.filename,
+                        wiki_id: wctfShip.wiki_id || masterShip.wiki_id,
+                        items: [],
+                        hasActiveTarget: false
+                    }
+                }
+
+                shipMap[s.shipId].items.push({
+                    equipName: eq.name,
+                    equipId: eq.id,
+                    level: s.level, 
+                    isTarget: isTarget,
+                    providerName: s.providerName,
+                    providerId: s.providerId
+                })
+
+                if (isTarget) shipMap[s.shipId].hasActiveTarget = true
+            })
+        })
+
+        let ships = Object.values(shipMap)
+
+        // Sort items per ship by Level Ascending
+        ships.forEach(ship => {
+            ship.items.sort((a, b) => a.level - b.level)
+        })
+
+        ships = ships.filter(s => {
+            // Enhanced multi-language search: supports Chinese, Japanese, Pinyin, Romaji
+            if (search && !matchesSearch(search, s)) return false
+            if (filterMarked && !s.hasActiveTarget) return false
+            return true
+        })
+
+        ships.sort((a,b) => a.baseId - b.baseId)
+
+        return (
+            <div className="ship-list-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+                 <div className="filters" style={{ marginBottom: 10, display: 'flex', gap: 10, flexShrink: 0, padding: 2 }}>
+                     <InputGroup 
+                        leftIcon="search" 
+                        placeholder="Search ship..." 
+                        value={search}
+                        onChange={(e) => this.setState({ search: e.target.value })}
+                        fill={true}
+                    />
+                     <Button 
+                        active={filterMarked} 
+                        intent={filterMarked ? "primary" : "none"}
+                        onClick={() => this.setState({ filterMarked: !filterMarked })}
+                    >
+                        Marked Only
+                    </Button>
+                </div>
+
+                <div className="list-content" style={{ flex: 1, overflowY: 'auto', paddingRight: 5 }}>
+                    {ships.map(ship => (
+                        <Card key={ship.baseId} elevation={1} style={{ marginBottom: 8, padding: 10 }}>
+                             <div style={{ display: 'flex', alignItems: 'center' }}>
+                                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginRight: 15, width: 130 }}>
+                                    <Avatar mstId={ship.baseId} height={30} />
+                                    <div style={{ fontWeight: 'bold', marginTop: 5, textAlign: 'center', fontSize: '1.1em' }}>{ship.name}</div>
+                                </div>
+                                <div style={{ flex: 1 }}>
+                                    {ship.items.map((item, idx) => (
+                                        <div key={idx} style={{ 
+                                            marginBottom: 4, 
+                                            padding: '4px 8px', 
+                                            background: item.isTarget ? 'rgba(16, 107, 163, 0.25)' : 'rgba(0, 0, 0, 0.15)',
+                                            borderRadius: 4,
+                                            borderLeft: item.isTarget ? '3px solid #106ba3' : '3px solid transparent',
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center'
+                                        }}>
+                                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                                <span style={{ fontWeight: '600' }}>{item.equipName}</span>
+                                                <span className="bp3-text-muted" style={{ fontSize: '0.85em' }}>
+                                                     via {item.providerName}
+                                                </span>
+                                            </div>
+                                            <Tag minimal={true} className={item.isTarget ? "bp3-intent-primary" : ""}>Lv.{item.level}</Tag>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </Card>
+                    ))}
+                    {ships.length === 0 && <div className="bp3-text-muted" style={{ textAlign: 'center', marginTop: 20 }}>No ships found.</div>}
+                </div>
+            </div>
+        )
+    }
+}

package/views/index.es

@@ -0,0 +1,179 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Tab, Tabs } from '@blueprintjs/core'
+import { addTarget, removeTarget } from '../redux/actions'
+import { targetsSelector, masterShipsSelector, masterEquipmentsSelector, masterShipTypesSelector, masterEquipTypesSelector, wctfDataSelector, userEquipsSelector, userShipsSelector, constSelector } from '../redux/selectors'
+import { getFarmingMap } from '../lib/data-processor'
+
+import EquipmentList from './components/EquipmentList'
+import ShipList from './components/ShipList'
+
+// Main UI
+class FarmingAssistant extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      activeTab: 'equipment',
+    }
+  }
+
+  handleTabChange = (newTabId) => {
+      this.setState({ activeTab: newTabId })
+  }
+
+  render() {
+    const { 
+        targets, 
+        addTarget, 
+        removeTarget,
+        $ships,
+        $equipments, 
+        $shipTypes,
+        $equipTypes,
+        wctf,
+        userEquips,
+        userShips
+    } = this.props
+    
+    // 1. Generate Farming Map from WCTF (Consolidated by Base ID)
+    const farmingMap = getFarmingMap(wctf)
+    
+    // 2. Convert Map to List for UI
+    const equipmentMap = {}
+    
+    // WCTF items data contains chinese_name
+    const wctfItems = (wctf && wctf.items) || {}
+
+    Object.keys(farmingMap).forEach(baseShipIdStr => {
+        const baseShipId = parseInt(baseShipIdStr)
+        const info = farmingMap[baseShipIdStr]
+        
+        // Name Fix: Lookup Base Ship Name
+        const baseShipMaster = $ships[baseShipId] || {}
+        const baseShipName = baseShipMaster.api_name || `Ship#${baseShipId}`
+
+        info.provides.forEach(p => {
+             const equipId = p.equipId
+             
+             if (!equipmentMap[equipId]) {
+                 const masterEquip = $equipments[equipId] || {}
+                 const wctfItem = wctfItems[equipId] || {}
+                 const typeId = (masterEquip.api_type && masterEquip.api_type[2]) || 0
+                 
+                 // WCTF data structure: name is an object with language variants
+                 const chineseName = wctfItem.name && (wctfItem.name.zh_cn || wctfItem.name.chs || wctfItem.name.chinese)
+                 const yomiName = wctfItem.name && wctfItem.name.yomi
+                 
+                 equipmentMap[equipId] = {
+                     id: equipId,
+                     name: masterEquip.api_name || `Equip#${equipId}`,
+                     // Add fields for enhanced search
+                     api_name: masterEquip.api_name,
+                     chinese_name: chineseName || masterEquip.chinese_name,
+                     yomi: yomiName,
+                     filename: wctfItem.filename,
+                     wiki_id: wctfItem.wiki_id,
+                     iconId: (masterEquip.api_type && masterEquip.api_type[3]) || 0,
+                     typeName: ($equipTypes[typeId] || {}).api_name || 'Unknown',
+                     typeId: typeId,
+                     ships: []
+                 }
+             }
+             
+             // Get Provider (Evolution) Name
+             const providerMaster = $ships[p.providerId] || {}
+             const providerName = providerMaster.api_name || `Form#${p.providerId}`
+
+             equipmentMap[equipId].ships.push({
+                 shipId: baseShipId, // Use BASE ID for grouping
+                 shipName: baseShipName,
+                 providerId: p.providerId,
+                 providerName: providerName,
+                 level: p.level, 
+                 remodel: true
+             })
+             
+             // Sort by Level Ascending (Low -> High)
+             equipmentMap[equipId].ships.sort((a, b) => a.level - b.level)
+        })
+    })
+
+        const equipmentList = Object.values(equipmentMap)
+
+    return (
+      <div className="farming-assistant-root" style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '0 10px' }}>
+         <style>{`
+            .farming-tabs {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+            .farming-tabs .bp3-tab-list {
+                flex-shrink: 0;
+            }
+            .farming-tabs .bp3-tab-panel {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+                margin-top: 10px; 
+                overflow: hidden;
+                position: relative; /* Anchor for absolute child */
+            }
+        `}</style>
+        <div style={{ flex: 1, minHeight: 0 }}>
+            <Tabs 
+                id="farming-tabs" 
+                className="farming-tabs"
+                onChange={this.handleTabChange} 
+                selectedTabId={this.state.activeTab} 
+                animate={true} 
+                renderActiveTabPanelOnly={true}
+            >
+                        <Tab id="equipment" title="Equipments" panel={
+                            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                                <EquipmentList 
+                                    equipments={equipmentList} 
+                                    targets={targets} 
+                                    onAdd={addTarget} 
+                                    onRemove={removeTarget}
+                                    userEquips={userEquips}
+                                    userShips={userShips}
+                                    farmingMap={farmingMap}
+                                    $equipTypes={$equipTypes}
+                                    $ships={$ships}
+                                    wctf={wctf}
+                                />
+                            </div>
+                        } />
+                        <Tab id="ships" title="Ships" panel={
+                            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                                <ShipList 
+                                    equipmentList={equipmentList} 
+                                    targets={targets} 
+                                    $ships={$ships}
+                                    wctf={wctf}
+                                />
+                            </div>
+                        } />
+                    </Tabs>
+                </div>
+            </div>
+        )
+  }
+}
+
+export const reactClass = connect(
+  (state) => ({
+    const: constSelector(state), 
+    targets: targetsSelector(state),
+    $ships: masterShipsSelector(state),
+    $equipments: masterEquipmentsSelector(state),
+    $shipTypes: masterShipTypesSelector(state),
+    $equipTypes: masterEquipTypesSelector(state),
+    wctf: wctfDataSelector(state),
+    userEquips: userEquipsSelector(state),
+    userShips: userShipsSelector(state),
+  }),
+  { addTarget, removeTarget }
+)(FarmingAssistant)