mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-06-10 04:29:23 +03:00
reload
This commit is contained in:
Dmitry Borisenko
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
/node_modules/
|
||||||
|
/public/build/
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2021 Dmitry Borisenko
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
1676
examples/Dashboard.svelte
Normal file
1676
examples/Dashboard.svelte
Normal file
File diff suppressed because it is too large
Load Diff
1696
examples/Setup.svelte
Normal file
1696
examples/Setup.svelte
Normal file
File diff suppressed because it is too large
Load Diff
1
examples/parts.js
Normal file
1
examples/parts.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{syntaxHighlight(JSON.stringify(wigets))}
|
||||||
1590
package-lock.json
generated
Normal file
1590
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "svelte-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "rollup -c",
|
||||||
|
"dev": "rollup -c -w",
|
||||||
|
"start": "sirv public --no-clear"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rollup/plugin-commonjs": "^17.0.0",
|
||||||
|
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||||
|
"autoprefixer": "^10.3.1",
|
||||||
|
"postcss": "^8.3.6",
|
||||||
|
"postcss-load-config": "^3.1.0",
|
||||||
|
"prettier": "^2.3.2",
|
||||||
|
"prettier-plugin-svelte": "^2.3.1",
|
||||||
|
"rollup": "^2.3.4",
|
||||||
|
"rollup-plugin-css-only": "^3.1.0",
|
||||||
|
"rollup-plugin-livereload": "^2.0.0",
|
||||||
|
"rollup-plugin-svelte": "^7.0.0",
|
||||||
|
"rollup-plugin-terser": "^7.0.0",
|
||||||
|
"svelte": "^3.0.0",
|
||||||
|
"svelte-preprocess": "^4.7.4",
|
||||||
|
"tailwindcss": "^2.2.7",
|
||||||
|
"tinro": "^0.5.12"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"daisyui": "^1.11.0",
|
||||||
|
"sirv-cli": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||||
|
|
||||||
|
<title>Svelte app</title>
|
||||||
|
|
||||||
|
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||||
|
<link rel='stylesheet' href='/build/bundle.css'>
|
||||||
|
|
||||||
|
<script defer src='/build/bundle.js'></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
rollup.config.js
Normal file
81
rollup.config.js
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import svelte from 'rollup-plugin-svelte';
|
||||||
|
import commonjs from '@rollup/plugin-commonjs';
|
||||||
|
import resolve from '@rollup/plugin-node-resolve';
|
||||||
|
import livereload from 'rollup-plugin-livereload';
|
||||||
|
import { terser } from 'rollup-plugin-terser';
|
||||||
|
import css from 'rollup-plugin-css-only';
|
||||||
|
import sveltePreprocess from "svelte-preprocess";
|
||||||
|
|
||||||
|
const production = !process.env.ROLLUP_WATCH;
|
||||||
|
|
||||||
|
function serve() {
|
||||||
|
let server;
|
||||||
|
|
||||||
|
function toExit() {
|
||||||
|
if (server) server.kill(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
writeBundle() {
|
||||||
|
if (server) return;
|
||||||
|
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||||
|
stdio: ['ignore', 'inherit', 'inherit'],
|
||||||
|
shell: true
|
||||||
|
});
|
||||||
|
|
||||||
|
process.on('SIGTERM', toExit);
|
||||||
|
process.on('exit', toExit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
input: 'src/main.js',
|
||||||
|
output: {
|
||||||
|
sourcemap: true,
|
||||||
|
format: 'iife',
|
||||||
|
name: 'app',
|
||||||
|
file: 'public/build/bundle.js'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
svelte({
|
||||||
|
compilerOptions: {
|
||||||
|
// enable run-time checks when not in production
|
||||||
|
dev: !production
|
||||||
|
},
|
||||||
|
preprocess: sveltePreprocess({
|
||||||
|
sourceMap: !production,
|
||||||
|
postcss: true,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
// we'll extract any component CSS out into
|
||||||
|
// a separate file - better for performance
|
||||||
|
css({ output: 'bundle.css' }),
|
||||||
|
|
||||||
|
// If you have external dependencies installed from
|
||||||
|
// npm, you'll most likely need these plugins. In
|
||||||
|
// some cases you'll need additional configuration -
|
||||||
|
// consult the documentation for details:
|
||||||
|
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||||
|
resolve({
|
||||||
|
browser: true,
|
||||||
|
dedupe: ['svelte']
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
|
||||||
|
// In dev mode, call `npm run start` once
|
||||||
|
// the bundle has been generated
|
||||||
|
!production && serve(),
|
||||||
|
|
||||||
|
// Watch the `public` directory and refresh the
|
||||||
|
// browser on changes when not in production
|
||||||
|
!production && livereload('public'),
|
||||||
|
|
||||||
|
// If we're building for production (npm run build
|
||||||
|
// instead of npm run dev), minify
|
||||||
|
production && terser()
|
||||||
|
],
|
||||||
|
watch: {
|
||||||
|
clearScreen: false
|
||||||
|
}
|
||||||
|
};
|
||||||
121
scripts/setupTypeScript.js
Normal file
121
scripts/setupTypeScript.js
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
// @ts-check
|
||||||
|
|
||||||
|
/** This script modifies the project to support TS code in .svelte files like:
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export let name: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
As well as validating the code for CI.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** To work on this script:
|
||||||
|
rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fs = require("fs")
|
||||||
|
const path = require("path")
|
||||||
|
const { argv } = require("process")
|
||||||
|
|
||||||
|
const projectRoot = argv[2] || path.join(__dirname, "..")
|
||||||
|
|
||||||
|
// Add deps to pkg.json
|
||||||
|
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
|
||||||
|
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
|
||||||
|
"svelte-check": "^2.0.0",
|
||||||
|
"svelte-preprocess": "^4.0.0",
|
||||||
|
"@rollup/plugin-typescript": "^8.0.0",
|
||||||
|
"typescript": "^4.0.0",
|
||||||
|
"tslib": "^2.0.0",
|
||||||
|
"@tsconfig/svelte": "^2.0.0"
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add script for checking
|
||||||
|
packageJSON.scripts = Object.assign(packageJSON.scripts, {
|
||||||
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||||
|
})
|
||||||
|
|
||||||
|
// Write the package JSON
|
||||||
|
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
|
||||||
|
|
||||||
|
// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
|
||||||
|
const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
|
||||||
|
const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
|
||||||
|
fs.renameSync(beforeMainJSPath, afterMainTSPath)
|
||||||
|
|
||||||
|
// Switch the app.svelte file to use TS
|
||||||
|
const appSveltePath = path.join(projectRoot, "src", "App.svelte")
|
||||||
|
let appFile = fs.readFileSync(appSveltePath, "utf8")
|
||||||
|
appFile = appFile.replace("<script>", '<script lang="ts">')
|
||||||
|
appFile = appFile.replace("export let name;", 'export let name: string;')
|
||||||
|
fs.writeFileSync(appSveltePath, appFile)
|
||||||
|
|
||||||
|
// Edit rollup config
|
||||||
|
const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
|
||||||
|
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
|
||||||
|
|
||||||
|
// Edit imports
|
||||||
|
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
|
||||||
|
import sveltePreprocess from 'svelte-preprocess';
|
||||||
|
import typescript from '@rollup/plugin-typescript';`)
|
||||||
|
|
||||||
|
// Replace name of entry point
|
||||||
|
rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
|
||||||
|
|
||||||
|
// Add preprocessor
|
||||||
|
rollupConfig = rollupConfig.replace(
|
||||||
|
'compilerOptions:',
|
||||||
|
'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add TypeScript
|
||||||
|
rollupConfig = rollupConfig.replace(
|
||||||
|
'commonjs(),',
|
||||||
|
'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
|
||||||
|
);
|
||||||
|
fs.writeFileSync(rollupConfigPath, rollupConfig)
|
||||||
|
|
||||||
|
// Add TSConfig
|
||||||
|
const tsconfig = `{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||||
|
}`
|
||||||
|
const tsconfigPath = path.join(projectRoot, "tsconfig.json")
|
||||||
|
fs.writeFileSync(tsconfigPath, tsconfig)
|
||||||
|
|
||||||
|
// Add global.d.ts
|
||||||
|
const dtsPath = path.join(projectRoot, "src", "global.d.ts")
|
||||||
|
fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
|
||||||
|
|
||||||
|
// Delete this script, but not during testing
|
||||||
|
if (!argv[2]) {
|
||||||
|
// Remove the script
|
||||||
|
fs.unlinkSync(path.join(__filename))
|
||||||
|
|
||||||
|
// Check for Mac's DS_store file, and if it's the only one left remove it
|
||||||
|
const remainingFiles = fs.readdirSync(path.join(__dirname))
|
||||||
|
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
|
||||||
|
fs.unlinkSync(path.join(__dirname, '.DS_store'))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if the scripts folder is empty
|
||||||
|
if (fs.readdirSync(path.join(__dirname)).length === 0) {
|
||||||
|
// Remove the scripts folder
|
||||||
|
fs.rmdirSync(path.join(__dirname))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adds the extension recommendation
|
||||||
|
fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
|
||||||
|
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
|
||||||
|
"recommendations": ["svelte.svelte-vscode"]
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
console.log("Converted to TypeScript.")
|
||||||
|
|
||||||
|
if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
|
||||||
|
console.log("\nYou will need to re-run your dependency manager to get started.")
|
||||||
|
}
|
||||||
9
src/.prettierrc
Normal file
9
src/.prettierrc
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"svelteSortOrder": "options-scripts-markup-styles",
|
||||||
|
"svelteStrictMode": false,
|
||||||
|
"svelteBracketNewLine": false,
|
||||||
|
"svelteAllowShorthand": false,
|
||||||
|
"svelteIndentScriptAndStyle": true,
|
||||||
|
"printWidth": 600,
|
||||||
|
"sxBracketSameLine": true
|
||||||
|
}
|
||||||
372
src/App.svelte
Normal file
372
src/App.svelte
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
<script context="module">
|
||||||
|
export function WSpush(ws, topic, value) {
|
||||||
|
console.log(ws, topic, value);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
//роутер ==========================================
|
||||||
|
import { Route, router, active } from "tinro";
|
||||||
|
router.mode.hash(); // enables hash navigation method
|
||||||
|
//router.mode.memory(); // enables in-memory navigation method
|
||||||
|
import Card from "./Card.svelte";
|
||||||
|
import Input from "./Input.svelte";
|
||||||
|
import Myinput from "./Myinput.svelte";
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
console.log("mounted");
|
||||||
|
});
|
||||||
|
|
||||||
|
const syntaxHighlight = (json) => {
|
||||||
|
try {
|
||||||
|
json = JSON.stringify(JSON.parse(json), null, 4);
|
||||||
|
} catch (e) {
|
||||||
|
return json;
|
||||||
|
}
|
||||||
|
json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||||
|
json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
return match;
|
||||||
|
});
|
||||||
|
return json;
|
||||||
|
};
|
||||||
|
|
||||||
|
function SuperDuperFunction() {
|
||||||
|
wigets = JSON.parse(document.getElementById("text1").value);
|
||||||
|
}
|
||||||
|
|
||||||
|
let wigets = [];
|
||||||
|
|
||||||
|
wigets = [
|
||||||
|
{
|
||||||
|
widget: "input",
|
||||||
|
type: "time",
|
||||||
|
status: "12:00",
|
||||||
|
page: "",
|
||||||
|
order: "3",
|
||||||
|
descr: "Switch on boiler time",
|
||||||
|
topic: "/prefix/00000-00003/temp3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widget: "input",
|
||||||
|
type: "number",
|
||||||
|
status: "30.5",
|
||||||
|
<<<<<<< HEAD
|
||||||
|
after: "°С",
|
||||||
|
=======
|
||||||
|
>>>>>>> parent of 37f43f0 (changes2)
|
||||||
|
page: "",
|
||||||
|
order: "1",
|
||||||
|
descr: "Boiler temperature",
|
||||||
|
topic: "/prefix/00000-00001/temp1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widget: "input",
|
||||||
|
type: "text",
|
||||||
|
status: "Hello",
|
||||||
|
page: "",
|
||||||
|
order: "3",
|
||||||
|
descr: "Massage to be send",
|
||||||
|
topic: "/prefix/00000-00003/temp3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widget: "input",
|
||||||
|
type: "date",
|
||||||
|
status: "2021.09.15",
|
||||||
|
page: "",
|
||||||
|
order: "2",
|
||||||
|
descr: "Switch on boiler date",
|
||||||
|
topic: "/prefix/00000-00002/temp2",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="fixed m-0 h-10 w-full bg-gray-100 shadow-md">
|
||||||
|
<b class="text-center" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="menu__ham">
|
||||||
|
<input id="menu__toggle" type="checkbox" />
|
||||||
|
<label class="menu__btn" for="menu__toggle">
|
||||||
|
<span />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<ul class="menu__box">
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/">{"Управление"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/config">{"Конфигуратор"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/connection">{"Подключение"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/utilities">{"Утилиты"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/log">{"Лог"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/about">{"О проекте"}</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu__item" href="/test">{"Test"}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="menu__main">
|
||||||
|
<div class="bg-cover bg-gray-50 pt-16">
|
||||||
|
<Route path="/">
|
||||||
|
<Card title="Inputs">
|
||||||
|
{#each wigets as widget, i}
|
||||||
|
{#if widget.widget === "input"}
|
||||||
|
<Myinput type={widget.type} ws={1} topic={widget.topic} title={widget.descr} bind:value={widget.status} />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</Card>
|
||||||
|
<Card title="Редактор JSON">
|
||||||
|
<textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
|
||||||
|
</Card>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/config">
|
||||||
|
<Card title="Здесь будет конфигуратор" />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/connection">
|
||||||
|
<Card title="Подключение к WiFi роутеру">
|
||||||
|
<Input title={"Сеть"} value={"your SSID"} />
|
||||||
|
<Input title={"Пароль"} value={"your PASS"} />
|
||||||
|
|
||||||
|
<div class="card-items">
|
||||||
|
<label class="md:w-2/3 block text-gray-500 font-bold">
|
||||||
|
<input class="mr-2 leading-tight" type="checkbox" />
|
||||||
|
<span class="text-sm"> Включить светодиод статуса подключения </span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="md:flex md:items-center">
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<button class="btn-indigo" type="button"> Сохранить </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title="Подключение к MQTT серверу">
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<label class="descr-gray" for="inline-full-name"> Сервер </label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input class="widget-input-indigo" type="text" value="your SSID" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<label class="descr-gray" for="inline-full-name"> Порт </label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input class="widget-input-indigo" type="text" value="your SSID" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<label class="descr-gray" for="inline-full-name"> Префикс </label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input class="widget-input-indigo" type="text" value="your SSID" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<label class="descr-gray" for="inline-full-name"> Пользователь </label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input class="widget-input-indigo" type="text" value="your SSID" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<label class="descr-gray" for="inline-password"> Пароль </label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input class="widget-input-indigo" type="password" placeholder="******************" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:flex md:items-center">
|
||||||
|
<div class="md:w-1/3" />
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<button class="btn-indigo" type="button"> Сохранить </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/test" />
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="postcss" global>
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn-indigo {
|
||||||
|
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
|
||||||
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
|
.block-psn-center {
|
||||||
|
@apply grid place-items-center mx-2 sm:my-auto;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
@apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:px-8 sm:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
|
||||||
|
}
|
||||||
|
.card-items {
|
||||||
|
@apply md:items-center md:flex mb-6;
|
||||||
|
=======
|
||||||
|
.input-indigo {
|
||||||
|
@apply py-2 px-4 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;
|
||||||
|
}
|
||||||
|
.descr-gray {
|
||||||
|
@apply block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4;
|
||||||
|
}
|
||||||
|
.descr-gray-left {
|
||||||
|
@apply block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4;
|
||||||
|
>>>>>>> parent of 37f43f0 (changes2)
|
||||||
|
}
|
||||||
|
.card-title-gray {
|
||||||
|
@apply text-center text-lg text-gray-500 font-bold pb-6;
|
||||||
|
}
|
||||||
|
.widget-descr-gray-left {
|
||||||
|
@apply pr-4 block text-gray-500 font-bold md:text-left;
|
||||||
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
.widget-input-indigo {
|
||||||
|
@apply pr-4 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 {
|
||||||
|
@apply pr-4 block text-gray-500 font-bold md:text-right;
|
||||||
|
=======
|
||||||
|
.block-psn-center-when-md {
|
||||||
|
@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;
|
||||||
|
>>>>>>> parent of 37f43f0 (changes2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu__toggle {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#menu__toggle:checked ~ .menu__btn > span {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
#menu__toggle:checked ~ .menu__btn > span::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
#menu__toggle:checked ~ .menu__btn > span::after {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
#menu__toggle:checked ~ .menu__box {
|
||||||
|
visibility: visible;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
#menu__toggle:checked ~ .menu__main {
|
||||||
|
margin-left: 150px;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.menu__btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 10px;
|
||||||
|
left: 20px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__btn > span,
|
||||||
|
.menu__btn > span::before,
|
||||||
|
.menu__btn > span::after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #616161;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
.menu__btn > span::before {
|
||||||
|
content: "";
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
.menu__btn > span::after {
|
||||||
|
content: "";
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__box {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
visibility: hidden;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 150px; /* размер выхода бокового меню */
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 80px 0;
|
||||||
|
list-style: none;
|
||||||
|
background-color: #eceff1;
|
||||||
|
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__ham {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__item {
|
||||||
|
display: block;
|
||||||
|
padding: 12px 24px;
|
||||||
|
color: rgba(51, 51, 51, 0.788);
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 15px; /* размер шрифта бокового меню */
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
.menu__item:hover {
|
||||||
|
background-color: #cfd8dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper__bar {
|
||||||
|
background-color: rgba(51, 51, 51, 0.144);
|
||||||
|
height: 70px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
src/Card.svelte
Normal file
12
src/Card.svelte
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let title;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="block-psn-center">
|
||||||
|
<div class="card">
|
||||||
|
<h1 class="card-title-gray">{title}</h1>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
src/Input.svelte
Normal file
20
src/Input.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script context="module">
|
||||||
|
import { WSpush } from "./App.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let title;
|
||||||
|
export let value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-1/3">
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="descr-gray">{title}</label>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-2/3">
|
||||||
|
<input bind:value on:change={WSpush(value)} class="widget-input-indigo" type="text" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
54
src/Myinput.svelte
Normal file
54
src/Myinput.svelte
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<script context="module">
|
||||||
|
import { WSpush } from "./App.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let title;
|
||||||
|
export let value;
|
||||||
|
export let topic;
|
||||||
|
export let ws;
|
||||||
|
export let type;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<<<<<<< HEAD
|
||||||
|
<div class="card-items">
|
||||||
|
<div class="md:w-6/12">
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="widget-descr-gray-left">{!descr ? "" : descr}</label>
|
||||||
|
=======
|
||||||
|
<div class="block-psn-center-when-md">
|
||||||
|
<div class="md:w-1/2">
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="descr-gray-left">{title}</label>
|
||||||
|
>>>>>>> parent of 37f43f0 (changes2)
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2">
|
||||||
|
<!-- on:change={WSpush(ws, topic, value)} -->
|
||||||
|
{#if type == "number"}
|
||||||
|
<input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="number" />
|
||||||
|
{/if}
|
||||||
|
{#if type == "text"}
|
||||||
|
<input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="text" />
|
||||||
|
{/if}
|
||||||
|
{#if type == "date"}
|
||||||
|
<input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="date" />
|
||||||
|
{/if}
|
||||||
|
{#if type == "time"}
|
||||||
|
<input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="time" />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<<<<<<< HEAD
|
||||||
|
{#if after}
|
||||||
|
<div class="md:1/12">
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="widget-after">{!after ? "" : after}</label>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
=======
|
||||||
|
<!-- <div class="md:w-3/3"> -->
|
||||||
|
<!-- <button on:click={WSpush(ws, topic, value)} class="btn-indigo" type="button">Set</button> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
>>>>>>> parent of 37f43f0 (changes2)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
10
src/main.js
Normal file
10
src/main.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import App from './App.svelte';
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.body,
|
||||||
|
props: {
|
||||||
|
name: 'world'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
24
tailwind.config.js
Normal file
24
tailwind.config.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
// tailwind.config.js
|
||||||
|
module.exports = {
|
||||||
|
purge: {
|
||||||
|
enabled: !process.env.ROLLUP_WATCH,
|
||||||
|
//mode: 'all',
|
||||||
|
//preserveHtmlElements: false,
|
||||||
|
content: ['./public/index.html', './src/**/*.svelte'],
|
||||||
|
options: {
|
||||||
|
defaultExtractor: content => [
|
||||||
|
...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
|
||||||
|
...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
|
||||||
|
],
|
||||||
|
//keyframes: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
darkMode: false, // or 'media' or 'class'
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user