first widget

This commit is contained in:
Dmitry Borisenko
2021-08-16 19:59:58 +00:00
parent bde27a2557
commit 97568a4add
3 changed files with 1722 additions and 18 deletions

View File

@@ -5,10 +5,41 @@
//router.mode.memory(); // enables in-memory navigation method
import Card from "./Card.svelte";
import Input from "./Input.svelte";
//
let incommingText = "";
function handleMessage(event) {
incommingText = event.detail.text;
let wigets = [];
wigets = [
{
widget: "input",
status: "30",
type: "",
page: "",
order: "1",
descr: "Temperature1",
topic: "/prefix/00000-00000/temp1",
},
{
widget: "input",
status: "31",
type: "",
page: "",
order: "1",
descr: "Temperature2",
topic: "/prefix/00000-00000/temp2",
},
{
widget: "input",
status: "32",
type: "",
page: "",
order: "1",
descr: "Temperature3",
topic: "/prefix/00000-00000/temp3",
},
];
function WSpush(ws, uri, val) {
console.log(ws + " " + uri + " " + val);
}
</script>
@@ -51,7 +82,13 @@
<ul class="menu__main">
<div class="bg-cover bg-gray-50 pt-16">
<Route path="/">
<Card title="Здесь будет dashboard" />
<Card title="Testing card1">
{#each wigets as widget, i}
{#if widget.widget === "input"}
<Input title={widget.descr} value={widget.status} />
{/if}
{/each}
</Card>
</Route>
<Route path="/config">
@@ -146,12 +183,7 @@
</Card>
</Route>
<Route path="/test">
<Card title="Testing card1">
<Input on:msg1={handleMessage} title="Input text1" />
<h1>{incommingText}</h1>
</Card>
</Route>
<Route path="/test" />
</div>
</ul>
</main>

View File

@@ -1,11 +1,7 @@
<script>
export let title;
let text;
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
function sendInputText() {
dispatch("msg1", { text: text });
}
export let value;
//on:input={sendInputText}
</script>
<div class="container">
@@ -14,7 +10,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>
</div>
<div class="md:w-2/3">
<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" />
<input bind:value 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>