Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| af124f6ce9 | |||
| 5be7cd0e73 |
1
.env.development
Normal file
1
.env.development
Normal file
@ -0,0 +1 @@
|
||||
BASE_URL=http://192.168.31.209
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -2,4 +2,5 @@
|
||||
/.next
|
||||
src/.umi
|
||||
out
|
||||
.webpack
|
||||
.webpack
|
||||
/temp
|
||||
6
.parcelrc
Normal file
6
.parcelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"transformers": {
|
||||
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
|
||||
}
|
||||
}
|
||||
5
.postcssrc
Normal file
5
.postcssrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": {
|
||||
"tailwindcss": {}
|
||||
}
|
||||
}
|
||||
42
package.json
Normal file
42
package.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "web-src",
|
||||
"version": "1.0.0",
|
||||
"targets": {
|
||||
"data": {
|
||||
"engines": {
|
||||
"browsers": "Chrome 80"
|
||||
}
|
||||
},
|
||||
"data_legacy": {
|
||||
"engines": {
|
||||
"browsers": "> 0.5%, last 2 versions, not dead"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "parcel src/index.html",
|
||||
"watch": "parcel watch",
|
||||
"build": "rimraf .parcel-cache && rimraf dist && parcel build src/index.html"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||
"devDependencies": {
|
||||
"@parcel/config-default": "^2.12.0",
|
||||
"@parcel/packager-ts": "2.12.0",
|
||||
"@parcel/transformer-typescript-tsc": "^2.12.0",
|
||||
"@parcel/transformer-typescript-types": "2.12.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"daisyui": "^4.12.14",
|
||||
"parcel": "^2.12.0",
|
||||
"postcss": "^8.4.47",
|
||||
"process": "^0.11.10",
|
||||
"rimraf": "^6.0.1",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": ">=3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash-es": "^4.17.21"
|
||||
}
|
||||
}
|
||||
33
src/index.html
Normal file
33
src/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>首页｜esp8266 wifi 版</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="h-screen bg-slate-200">
|
||||
<h1 class="p-2 text-center text-xl font-bold">esp8266 控制面板</h1>
|
||||
<div class="grid grid-cols-2 gap-4 m-3">
|
||||
<label class="p-3 label cursor-pointer bg-white">
|
||||
<span class="label-text">开灯：</span>
|
||||
<input type="checkbox" id="ledSwitch" class="toggle" checked="checked" />
|
||||
</label>
|
||||
<label class="p-3 label cursor-pointer bg-white" >
|
||||
<span class="label-text">蜂鸣器：</span>
|
||||
<input type="checkbox" id="beeTalk" class="toggle" checked="checked" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex-1 m-3 p-3 bg-white rounded-md">
|
||||
<label class="label cursor-pointer p-0">
|
||||
<span class="label-text text-sm">当前时间：<span id="time" >未获取</span></span>
|
||||
<button id="getTimeBtn" class="btn btn-primary btn-sm">点击获取</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
src/index.ts
Normal file
58
src/index.ts
Normal file
@ -0,0 +1,58 @@
|
||||
// const ajax = (url, params) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// var xhttp = new XMLHttpRequest();
|
||||
// xhttp.onreadystatechange = function() {
|
||||
|
||||
// if (this.readyState == 4 && this.status == 200) {
|
||||
// resolve(this.responseText);
|
||||
// } else {
|
||||
// reject(this.status);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const queryString = Object.keys(params)
|
||||
// .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
||||
// .join('&');
|
||||
|
||||
// xhttp.open("GET", `${url}?${queryString}`, true);
|
||||
// xhttp.send();
|
||||
// })
|
||||
// }
|
||||
|
||||
// 使用fetch发送GET请求
|
||||
const fetchGet = (url, params) => {
|
||||
const queryString = Object.keys(params)
|
||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
||||
.join('&');
|
||||
|
||||
return fetch(`${url}?${queryString}`)
|
||||
.then(response => {
|
||||
// 检查响应状态s
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
// 解析JSON响应体
|
||||
return response.text();
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理请求中发生的错误
|
||||
console.error('There has been a problem with your fetch operation:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 为checkbox添加change事件监听器
|
||||
var ledSwitch = document.getElementById('ledSwitch');
|
||||
ledSwitch.addEventListener('change', async function(e) {
|
||||
let value = await fetchGet('/setLED', { LEDstate: e.target.checked ? 0 : 1 })
|
||||
console.log('value', value)
|
||||
e.target.checked = (value !== 'ON')
|
||||
});
|
||||
|
||||
// 为获取时间添加事件
|
||||
let getTimeBtn = document.getElementById('getTimeBtn')
|
||||
getTimeBtn.addEventListener('click', async function(e) {
|
||||
let time = await fetchGet('/getTimeValue', {})
|
||||
// @ts-ignore
|
||||
if (!time) return
|
||||
document.getElementById('time').innerHTML = time
|
||||
})
|
||||
3
src/style.css
Normal file
3
src/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
24
tailwind.config.js
Normal file
24
tailwind.config.js
Normal file
@ -0,0 +1,24 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require('daisyui'),
|
||||
],
|
||||
// daisyUI config (optional - here are the default values)
|
||||
daisyui: {
|
||||
// themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
// darkTheme: "dark", // name of one of the included themes for dark mode
|
||||
// base: true, // applies background color and foreground color for root element by default
|
||||
// styled: true, // include daisyUI colors and design decisions for all components
|
||||
// utils: true, // adds responsive and modifier utility classes
|
||||
// prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
||||
// logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
|
||||
// themeRoot: ":root", // The element that receives theme color CSS variables
|
||||
},
|
||||
}
|
||||
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"isolatedModules": true,
|
||||
"target": "es2021",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user