iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-30 11:59:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

new type of data pushing

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-08-15 19:42:42 +00:00
parent 90b94f7423
commit bde27a2557
2 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.svelte
View File

@@ -6,10 +6,10 @@
import Card from "./Card.svelte"; import Card from "./Card.svelte";
import Input from "./Input.svelte"; import Input from "./Input.svelte";
// //
let text1 = ""; let incommingText = "";
let text2 = ""; function handleMessage(event) {
const handleChange1 = value => (text1 = value); incommingText = event.detail.text;
const handleChange2 = value => (text2 = value); }
</script> </script>
<main> <main>
@@ -148,12 +148,8 @@
<Route path="/test"> <Route path="/test">
<Card title="Testing card1"> <Card title="Testing card1">
<Input onChange={handleChange1} title="Input text1" /> <Input on:msg1={handleMessage} title="Input text1" />
<h1>{text1}</h1> <h1>{incommingText}</h1>
</Card>
<Card title="Testing card2">
<Input onChange={handleChange2} title="Input text2" />
<h1>{text2}</h1>
</Card> </Card>
</Route> </Route>
</div> </div>

12
src/Input.svelte
View File

@@ -1,11 +1,11 @@
<script> <script>
export let title; export let title;
export let onChange; let text;
const handleBlur = e => { import { createEventDispatcher } from "svelte";
if ('function' === typeof onChange) { const dispatch = createEventDispatcher();
onChange(e.target.value); function sendInputText() {
dispatch("msg1", { text: text });
} }
};
</script> </script>
<div class="container"> <div class="container">
@@ -14,7 +14,7 @@
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">{title}</label> <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">{title}</label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input on:input={handleBlur} class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" /> <input bind:value={text} on:input={sendInputText} class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" />
</div> </div>
</div> </div>
</div> </div>