ds4/src/templates/actor/partials/items-overview.hbs

{{!-- TODO: For items list: only show header, if list is not empty --}}


{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}

{{!--
!-- Render an "add" button for a given data type.
!--
!-- @param datType: hand over the dataType to the partial as hash parameter
--}}
{{#*inline "addItemButton"}}
    <div class="item-controls">
        <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
            <i class="fas fa-plus"></i>
            {{localize 'DS4.UserInteractionAddItem'}}</a>
    </div>
{{/inline}}
{{!--
!-- Render a group of an "edit" and a "delete" button for the current item.
!-- The current item is defined by the data-item-id HTML property of the parent li element.
--}}
{{#*inline "itemControlButtons"}}
    <div class="item-controls">
        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
    </div>
{{/inline}}


{{!--
!-- Render a header row for a given data type.
!-- It is a flexbox with a child for each column head.
!-- An "equipped" heading is rendered except for the case dataType==='equipment'.
!-- The partial assumes a variable dataType to be given in the context.
!-- If the partial is called with a partial block, the partial block
!-- content is inserted before the description heading.

!-- @param datType: hand over the dataType to the partial as hash parameter
!-- @param partial-block: hand over custom children of the flexbox in the partial block.
--}}
{{#*inline "itemListHeader" }}
    <li class="item flexrow item-header">
        {{!-- equipped --}}
        {{#if (ne dataType 'equipment')}}
            <div class="flex05" title="{{localize 'DS4.ItemEquipped'}}">E</div>
        {{/if}}
        {{!-- image --}}
        <div class="flex05 item-image"></div>
        {{!-- amount --}}
        <div class="flex05 item-num-val" title="{{localize 'DS4.Quantity'}}">#</div>
        {{!-- name --}}
        <div class="flex3 item-name">{{localize 'DS4.ItemName'}}</div>
        {{!-- item type specifics --}}
        {{> @partial-block }}
        {{!-- description --}}
        <div class="flex4">{{localize 'DS4.HeadingDescription'}}</div>
        {{!-- add button --}}
        {{> addItemButton dataType=dataType }}
    </li>
{{/inline}}

{{!--
!-- Render a list row from a given item.
!-- It is a flexbox with a child for each item value of interest.
!-- An equipped checkbox is rendered if item.data.data.equipped is defined.
!-- The partial assumes a variable item to be given in the context.
!-- If the partial is called with a partial block, the partial block 
!-- content is inserted before the description.

!-- @param item: hand over the item to the partial as hash parameter
!-- @param partial-block: hand over custom children of the flexbox in the partial block.
--}}
{{#*inline "itemListEntry"}}
    <li class="item flexrow" data-item-id="{{item._id}}">
        {{!-- equipped --}}
        {{#if (ne item.data.data.equipped undefined)}}
            <input class="flex05 item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
                data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
        {{/if}}
        {{!-- image --}}
        <div class="flex05 item-image">
            <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
        </div>
        {{!-- amount --}}
        <input class="flex05 item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}" data-dtype="Number"
            data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
        {{!-- name --}}
        <input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
            data-property="name" title="{{localize 'DS4.ItemName'}}">
        {{!-- item type specifics --}}
        {{> @partial-block}}
        {{!-- description --}}
        <div class="flex4 item-description">{{{item.data.data.description}}}</div>
        {{!-- control buttons --}}
        {{> itemControlButtons}}
    </li>
{{/inline}}


{{!-- ======================================================================== --}}


<div class="tab items" data-group="primary" data-tab="items">

    {{!-- WEAPONS --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeWeapon'}}</h4>
    <ol class="items-list">
        {{#> itemListHeader dataType='weapon'}}
            <div class="flex05 item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
            <div class="flex05 item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
                {{localize 'DS4.WeaponBonusAbbr'}}
            </div>
            <div class="flex05 item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
                {{localize 'DS4.OpponentDefenseAbbr'}}
            </div>
        {{/itemListHeader}}
        {{#each itemsByType.weapon as |item id|}}
            {{#> itemListEntry item=item}}
                <div class="flex05 item-image">
                    <img src="{{lookup ../../config.attackTypesIcons  item.data.data.attackType}}"
                        title="{{lookup ../../config.attackTypes  item.data.data.attackType}}" width="24" height="24" />
                </div>
                <div class="flex05 item-num-val">{{ item.data.data.weaponBonus}}</div>
                <div class="flex05 item-num-val">{{ item.data.data.opponentDefense}}</div>
            {{/itemListEntry}}
        {{/each}}
    </ol>

    {{!-- ARMOR --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeArmor'}}</h4>
    <ol class="items-list">
        {{#> itemListHeader dataType='armor'}}
            <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
            <div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div>
            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
                {{localize 'DS4.ArmorValueAbbr'}}
            </div>
        {{/itemListHeader}}
        {{#each itemsByType.armor as |item id|}}
            {{#> itemListEntry item=item }}
                <div title="{{lookup ../../config.armorMaterialTypes  item.data.data.armorMaterialType}}">
                    {{lookup ../../config.armorMaterialTypesAbbr  item.data.data.armorMaterialType}}
                </div>
                <div title="{{lookup ../../config.armorTypes  item.data.data.armorType}}">
                    {{lookup ../../config.armorTypesAbbr  item.data.data.armorType}}
                </div>
                <div class="flex05 item-num-val">{{ item.data.data.armorValue}}</div>
            {{/itemListEntry}}
        {{/each}}
    </ol>


    {{!-- SHIELD --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeShield'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        {{#> itemListHeader dataType='shield' }}
            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
                {{localize 'DS4.ArmorValueAbbr'}}
            </div>
        {{/itemListHeader}}
        {{#each itemsByType.shield as |item id|}}
            {{#> itemListEntry item=item }}
                <div class="flex05 item-num-val">{{item.data.data.armorValue}}</div> {{!-- SPECIFIC --}}
            {{/itemListEntry}}
        {{/each}}
    </ol>

    {{!-- TRINKET --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeTrinket'}}</h4>
    <ol class="items-list">
        {{#> itemListHeader dataType='trinket'}}
            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
        {{/itemListHeader}}
        {{#each itemsByType.trinket as |item id|}}
            {{#> itemListEntry item=item }}
                <input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
                    data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
            {{/itemListEntry}}
        {{/each}}
    </ol>

    {{!-- EQUIPMENT --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipment'}}</h4>
    <ol class="items-list">
        {{#> itemListHeader dataType='equipment'}}
            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
        {{/itemListHeader}}
        {{#each itemsByType.equipment as |item id|}}
            {{#> itemListEntry item=item }}
                <input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
                    data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
            {{/itemListEntry}}
        {{/each}}
    </ol>
</div>