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

Changes

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-09-17 23:18:06 +08:00
parent 95cb6c3167
commit 887fb35fe7
5 changed files with 97 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,5 @@
{
"recommendations": [
"platformio.platformio-ide"
]
}

4
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "svelte-app", "name": "iotm-web",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
@@ -29,4 +29,4 @@
"daisyui": "^1.11.0", "daisyui": "^1.11.0",
"sirv-cli": "^1.0.0" "sirv-cli": "^1.0.0"
} }
} }

95
src/App.svelte
View File

@@ -35,6 +35,20 @@
wigets = JSON.parse(document.getElementById("text1").value); wigets = JSON.parse(document.getElementById("text1").value);
} }
let pages = [];
pages = [
{
widget: "input",
type: "time",
status: "12:00",
page: "Inputs",
order: "3",
descr: "Switch on boiler time",
topic: "/prefix/00000-00003/temp3",
},
];
let wigets = []; let wigets = [];
wigets = [ wigets = [
@@ -42,7 +56,7 @@
widget: "input", widget: "input",
type: "time", type: "time",
status: "12:00", status: "12:00",
page: "", page: "Inputs",
order: "3", order: "3",
descr: "Switch on boiler time", descr: "Switch on boiler time",
topic: "/prefix/00000-00003/temp3", topic: "/prefix/00000-00003/temp3",
@@ -52,7 +66,7 @@
type: "number", type: "number",
status: "30.5", status: "30.5",
after: "°С", after: "°С",
page: "", page: "Inputs",
order: "1", order: "1",
descr: "Boiler temperature", descr: "Boiler temperature",
topic: "/prefix/00000-00001/temp1", topic: "/prefix/00000-00001/temp1",
@@ -61,7 +75,7 @@
widget: "input", widget: "input",
type: "text", type: "text",
status: "Hello", status: "Hello",
page: "", page: "Inputs",
order: "3", order: "3",
descr: "Massage to be send", descr: "Massage to be send",
topic: "/prefix/00000-00003/temp3", topic: "/prefix/00000-00003/temp3",
@@ -70,7 +84,7 @@
widget: "input", widget: "input",
type: "date", type: "date",
status: "2021.09.15", status: "2021.09.15",
page: "", page: "Inputs",
order: "2", order: "2",
descr: "Switch on boiler date", descr: "Switch on boiler date",
topic: "/prefix/00000-00002/temp2", topic: "/prefix/00000-00002/temp2",
@@ -114,16 +128,29 @@
<ul class="menu__main"> <ul class="menu__main">
<div class="bg-cover bg-gray-50 pt-16"> <div class="bg-cover bg-gray-50 pt-16">
<Route path="/"> <Route path="/">
<Card title="Inputs"> <div class="cards-grid">
{#each wigets as widget, i} <Card title="Здесь будет конфигуратор">
{#if widget.widget === "input"} {#each wigets as widget, i}
<Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} /> {#if widget.widget === "input"}
{/if} <Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
{/each} {/if}
</Card> {/each}
<Card title="Редактор JSON"> </Card>
<textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea> <Card title="Здесь будет конфигуратор">
</Card> {#each wigets as widget, i}
{#if widget.widget === "input"}
<Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
{/if}
{/each}
</Card>
<Card title="Здесь будет конфигуратор">
{#each wigets as widget, i}
{#if widget.widget === "input"}
<Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
{/if}
{/each}
</Card>
</div>
</Route> </Route>
<Route path="/config"> <Route path="/config">
@@ -148,6 +175,13 @@
</div> </div>
</Card> </Card>
</Route> </Route>
<Route path="/utilities">
<div class="cards-grid">
<Card title="Редактор JSON">
<textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
</Card>
</div>
</Route>
</div> </div>
</ul> </ul>
</main> </main>
@@ -164,24 +198,33 @@
.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 { .card2 {
@apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg; @apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
} }
.card-title-gray {
@apply text-center text-lg text-gray-500 font-bold pb-6;
}
.card-items {
@apply md:items-center lg:items-end 2xl:items-end md:flex mb-6;
}
.widget-descr-gray-left {
@apply content-center pr-4 block text-gray-500 font-bold md:text-left;
}
.widget-input-indigo { .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; @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-after { .widget-after {
@apply pr-4 block text-gray-500 font-bold md:text-right; @apply pr-4 block text-gray-500 font-bold md:text-right;
} }
.cards-grid {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center;
}
.card {
@apply w-11/12 my-2 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg;
}
.card-title-gray {
@apply text-center text-lg text-gray-500 font-bold pb-6;
}
.card-items {
@apply md:items-center md:flex mb-6;
}
.widget-descr-gray-left {
@apply content-center pr-4 block text-gray-500 font-bold md:text-left;
}
} }
#menu__toggle { #menu__toggle {
@@ -203,12 +246,10 @@
left: 0; left: 0;
} }
/*
#menu__toggle:checked ~ .menu__main { #menu__toggle:checked ~ .menu__main {
margin-left: 150px; margin-left: 150px;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
*/
.menu__btn { .menu__btn {
display: flex; display: flex;

10
src/Card.svelte
View File

@@ -2,11 +2,7 @@
export let title; export let title;
</script> </script>
<div class="container"> <div class="card">
<div class="block-psn-center"> <h1 class="card-title-gray">{title}</h1>
<div class="card"> <slot />
<h1 class="card-title-gray">{title}</h1>
<slot />
</div>
</div>
</div> </div>

40
src/Myinput.svelte
View File

@@ -11,26 +11,24 @@
//style="min-width:50%; max-width:100%; width:{value.length * 10}px" on:change={(WSpush(ws, topic, value), console.log(value.length))} //style="min-width:50%; max-width:100%; width:{value.length * 10}px" on:change={(WSpush(ws, topic, value), console.log(value.length))}
</script> </script>
<div class="container"> <div class="card-items">
<div class="card-items"> <div class="md:w-2/3 lg:w-2/3 2xl:w-2/3">
<div class="md:w-2/3 lg:w-2/3 2xl:w-2/3"> <!-- svelte-ignore a11y-label-has-associated-control -->
<!-- svelte-ignore a11y-label-has-associated-control --> <label class="widget-descr-gray-left">{!descr ? "" : descr}</label>
<label class="widget-descr-gray-left">{!descr ? "" : descr}</label> </div>
</div> <div class="md:w-1/3 lg:w-1/3 2xl:w-1/3">
<div class="md:w-1/3 lg:w-1/3 2xl:w-1/3"> <!-- on:change={WSpush(ws, topic, value)} -->
<!-- on:change={WSpush(ws, topic, value)} --> {#if type == "number"}
{#if type == "number"} <input class="widget-input-indigo text-right" step="0.1" on:change={WSpush(ws, topic, value)} bind:value type="number" />
<input class="widget-input-indigo text-right" step="0.1" on:change={WSpush(ws, topic, value)} bind:value type="number" /> {/if}
{/if} {#if type == "text"}
{#if type == "text"} <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="text" />
<input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="text" /> {/if}
{/if} {#if type == "date"}
{#if type == "date"} <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="date" />
<input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="date" /> {/if}
{/if} {#if type == "time"}
{#if type == "time"} <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="time" />
<input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="time" /> {/if}
{/if}
</div>
</div> </div>
</div> </div>