From 61beda7734cd637d784e5cced3e8a5b4deb8205c Mon Sep 17 00:00:00 2001
From: Gesina Schwalbe <gesina.schwalbe@pheerai.de>
Date: Sun, 3 Jan 2021 23:27:51 +0100
Subject: [PATCH] added number conversion in HTML value retrieval

Changes:
- number input fields now return numbers
- range elements removed since they are untested

Additions:
- added min and step specifiers to input fields associated to
  item number properties
- added a color hint for invalidity of
  item number input fields in actor sheet
---
 src/module/actor/actor-sheet.ts                 | 14 ++++++++++----
 src/scss/components/_items.scss                 |  5 +++++
 src/templates/actor/partials/items-overview.hbs |  2 +-
 src/templates/item/partials/description.hbs     |  2 +-
 src/templates/item/partials/details.hbs         |  2 +-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts
index 4b2c69d8..51eb9e65 100644
--- a/src/module/actor/actor-sheet.ts
+++ b/src/module/actor/actor-sheet.ts
@@ -131,7 +131,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
      * The value is parsed to:
      * - Checkbox: boolean
      * - Text input: string
-     * - Number, range input: trimmed string
+     * - Number: number
      * @param el the input element to collect the value of
      */
     private getValue(el: HTMLFormElement): boolean | string | number {
@@ -148,12 +148,18 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
             return value;
         }
 
-        // Numbers and ranges:
-        else if (["number", "range"].includes(el.type)) {
-            const value: string = el.value.trim();
+        // Numbers:
+        else if (el.type === "number") {
+            const value = Number(el.value.trim());
             return value;
         }
 
+        // // Ranges:
+        // else if (el.type === "range") {
+        //     const value: string = el.value.trim();
+        //     return value;
+        // }
+
         // // Radio Checkboxes (untested, cf. FormDataExtended.process)
         // else if (el.type === "radio") {
         //     const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss
index 01358b75..4dd97f78 100644
--- a/src/scss/components/_items.scss
+++ b/src/scss/components/_items.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .items-list {
     list-style: none;
     margin: 7px 0;
@@ -52,6 +54,9 @@
         width: 2.5em;
         padding: 0;
     }
+    .item-num-val:invalid {
+        background-color: color.mix(lightcoral, $c-light-grey, 25%);
+    }
 
     .item-description {
         font-size: 75%;
diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs
index dac99439..0cc57faf 100644
--- a/src/templates/actor/partials/items-overview.hbs
+++ b/src/templates/actor/partials/items-overview.hbs
@@ -84,7 +84,7 @@
             <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
         </div>
         {{!-- amount --}}
-        <input class="flex05 item-num-val item-change" type="number" value="{{item.data.data.quantity}}" data-dtype="Number"
+        <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"
diff --git a/src/templates/item/partials/description.hbs b/src/templates/item/partials/description.hbs
index 96b24106..1776f1f2 100644
--- a/src/templates/item/partials/description.hbs
+++ b/src/templates/item/partials/description.hbs
@@ -13,7 +13,7 @@
         </div>
         <div class="side-property">
             <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
-            <input type="number" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
+            <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
         </div>
         <div class="side-property">
             <label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>
diff --git a/src/templates/item/partials/details.hbs b/src/templates/item/partials/details.hbs
index 0e57a780..d4cfb918 100644
--- a/src/templates/item/partials/details.hbs
+++ b/src/templates/item/partials/details.hbs
@@ -4,7 +4,7 @@
     <div class="side-properties">
         <div class="side-property">
                 <label for="data.price">{{localize "DS4.PriceGold"}}</label>
-                <input type="number" data-dtype="Number" name="data.price" value="{{data.price}}" />
+                <input type="number" min="0" data-dtype="Number" name="data.price" value="{{data.price}}" />
             </div>
             <div class="side-property">
                 <label for="data.availability">{{localize "DS4.ItemAvailability"}}</label>