From ca794948d0418d6a7d30ce922326e9429e8be314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:20 +0200
Subject: [PATCH] frontend: updated NumberComponent

- ignoring F1 and F12 keys, as well
- emitting parent_path, as well
- changing Form.Control readOnly -> disabled
- only show buttons when Form isn't read only
---
 frontend/src/components/NumberComponent.tsx | 39 +++++++++++++--------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 42e20f3..81120a7 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -134,7 +134,13 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
   const handleKeyDown = (event) => {
     const { key, target } = event;
-    if (key === 'F5' || key === 'ArrowRight' || key === 'ArrowLeft') {
+    if (
+      key === 'F1' ||
+      key === 'F5' ||
+      key === 'F12' ||
+      key === 'ArrowRight' ||
+      key === 'ArrowLeft'
+    ) {
       return;
     }
     event.preventDefault();
@@ -189,6 +195,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
     // Update the input value and maintain the cursor position
     socket.emit('frontend_update', {
       name: name,
+      parent_path: parent_path,
       value: Number(newValue)
     });
 
@@ -209,24 +216,26 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
             <Form.Control
               type="text"
               value={value}
-              readOnly={readOnly}
+              disabled={readOnly}
               name={name}
               onKeyDown={handleKeyDown}
             />
           </InputGroup>
-          <div className="d-flex flex-column">
-            <Button
-              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
-              // className="mb-1"
-              variant="outline-secondary">
-              +
-            </Button>
-            <Button
-              style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
-              variant="outline-secondary">
-              -
-            </Button>
-          </div>
+          {!readOnly && (
+            <div className="d-flex flex-column">
+              <Button
+                style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
+                // className="mb-1"
+                variant="outline-secondary">
+                +
+              </Button>
+              <Button
+                style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
+                variant="outline-secondary">
+                -
+              </Button>
+            </div>
+          )}
         </div>
       </div>
     </div>