iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-29 08:22:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

last change

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-08-18 05:01:01 +08:00
parent 640822037c
commit 6eac876a6e
3 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.svelte
View File

@@ -68,7 +68,7 @@
</script> </script>
<main> <main>
<div class="fixed h-10 w-full bg-gray-100 shadow-md"> <div class="fixed m-0 h-10 w-full bg-gray-100 shadow-md">
<b class="text-center" /> <b class="text-center" />
</div> </div>
@@ -109,7 +109,7 @@
<Card title="Редактор JSON"> <Card title="Редактор JSON">
<textarea on:input={SuperDuperFunction} rows="10" class="input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea> <textarea on:input={SuperDuperFunction} rows="10" class="input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
</Card> </Card>
<Card title="Testing card1"> <Card title="Dashboard">
{#each wigets as widget, i} {#each wigets as widget, i}
{#if widget.widget === "input"} {#if widget.widget === "input"}
<Input title={widget.descr} bind:value={widget.status} /> <Input title={widget.descr} bind:value={widget.status} />
@@ -127,7 +127,7 @@
<Input title={"Сеть"} value={"your SSID"} /> <Input title={"Сеть"} value={"your SSID"} />
<Input title={"Пароль"} value={"your PASS"} /> <Input title={"Пароль"} value={"your PASS"} />
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<label class="md:w-2/3 block text-gray-500 font-bold"> <label class="md:w-2/3 block text-gray-500 font-bold">
<input class="mr-2 leading-tight" type="checkbox" /> <input class="mr-2 leading-tight" type="checkbox" />
<span class="text-sm"> Включить светодиод статуса подключения </span> <span class="text-sm"> Включить светодиод статуса подключения </span>
@@ -141,45 +141,45 @@
</Card> </Card>
<Card title="Подключение к MQTT серверу"> <Card title="Подключение к MQTT серверу">
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<label class="lable-gray" for="inline-full-name"> Сервер </label> <label class="descr-gray" for="inline-full-name"> Сервер </label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input class="input-indigo" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<label class="lable-gray" for="inline-full-name"> Порт </label> <label class="descr-gray" for="inline-full-name"> Порт </label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input class="input-indigo" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<label class="lable-gray" for="inline-full-name"> Префикс </label> <label class="descr-gray" for="inline-full-name"> Префикс </label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input class="input-indigo" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<label class="lable-gray" for="inline-full-name"> Пользователь </label> <label class="descr-gray" for="inline-full-name"> Пользователь </label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input class="input-indigo" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<label class="lable-gray" for="inline-password"> Пароль </label> <label class="descr-gray" for="inline-password"> Пароль </label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input class="input-indigo" type="password" placeholder="******************" /> <input class="input-indigo" type="password" placeholder="******************" />
@@ -212,17 +212,20 @@
.input-indigo { .input-indigo {
@apply 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-indigo-500; @apply 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-indigo-500;
} }
.lable-gray { .descr-gray {
@apply block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4; @apply block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4;
} }
.heading-gray { .head-gray {
@apply text-center text-lg text-gray-500 font-bold pb-6; @apply text-center text-lg text-gray-500 font-bold pb-6;
} }
.block-psn-center { .block-psn-center {
@apply grid place-items-center mx-2 sm:my-auto; @apply grid place-items-center mx-2 sm:my-auto;
} }
.card-normal { .block-psn-center-when-md {
@apply w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-6 py-10 my-5 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg; @apply md:flex md:items-center mb-6;
}
.card-normal-size {
@apply w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-2 py-2 my-2 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg;
} }
} }

4
src/Card.svelte
View File

@@ -4,8 +4,8 @@
<div class="container"> <div class="container">
<div class="block-psn-center"> <div class="block-psn-center">
<div class="card-normal"> <div class="card-normal-size">
<h1 class="heading-gray">{title}</h1> <h1 class="head-gray">{title}</h1>
<slot /> <slot />
</div> </div>
</div> </div>

4
src/Input.svelte
View File

@@ -8,10 +8,10 @@
</script> </script>
<div class="container"> <div class="container">
<div class="md:flex md:items-center mb-6"> <div class="block-psn-center-when-md">
<div class="md:w-1/3"> <div class="md:w-1/3">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="lable-gray">{title}</label> <label class="descr-gray">{title}</label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input bind:value on:change={WSpush(value)} class="input-indigo" type="text" /> <input bind:value on:change={WSpush(value)} class="input-indigo" type="text" />