From b96b65aedd83735adeccd03ebed85f2d7d73a6a5 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Sun, 17 Oct 2021 20:03:47 +0800
Subject: [PATCH] progress change color

---
 src/App.svelte           |  3 +++
 src/widgets/Input.svelte | 10 ++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1150ec2..ce67208 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -199,6 +199,9 @@
     .widget-input-indigo {
       @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
     }
+    .widget-input-red {
+      @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white border-red-500;
+    }
     .widget-after {
       @apply pr-4 block text-gray-500 font-bold md:text-right;
     }
diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte
index d3a6d0d..1b7e8b3 100644
--- a/src/widgets/Input.svelte
+++ b/src/widgets/Input.svelte
@@ -3,9 +3,7 @@
 </script>
 
 <script>
-  export let value;
   export let widget;
-  //style="min-width:50%; max-width:100%; width:{value.length * 10}px" on:change={(WSpush(ws, topic, value), console.log(value.length))}
 </script>
 
 <div class="card-items">
@@ -16,16 +14,16 @@
   <div class="md:w-1/3 lg:w-1/3 2xl:w-1/3">
     <!-- on:change={WSpush(ws, topic, value)} -->
     {#if widget.type == "number"}
-      <input class="widget-input-indigo text-right" step="0.1" on:change={WSpush(widget.ws, widget.topic, value)} bind:value type="number" />
+      <input class="widget-input-indigo widget-input-red={widget['send'] == true} text-right" step="0.1" on:change={((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="number" />
     {/if}
     {#if widget.type == "text"}
-      <input class="widget-input-indigo text-right" on:change={WSpush(widget.ws, widget.topic, value)} bind:value type="text" />
+      <input class="widget-input-indigo text-right" on:change={((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
     {/if}
     {#if widget.type == "date"}
-      <input class="widget-input-indigo text-right" on:change={WSpush(widget.ws, widget.topic, value)} bind:value type="date" />
+      <input class="widget-input-indigo text-right" on:change={((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
     {/if}
     {#if widget.type == "time"}
-      <input class="widget-input-indigo text-right" on:change={WSpush(widget.ws, widget.topic, value)} bind:value type="time" />
+      <input class="widget-input-indigo text-right" on:change={((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />
     {/if}
   </div>
 </div>