start stripping down the vite example
This commit is contained in:
parent
2571501d0c
commit
f2c479af16
GPG key ID:
CB9BF1910F3F7469
7 changed files with 91 additions and 106 deletions
Binary file not shown.
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frontend</title>
|
||||
<title>weather portal</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,19 @@
|
|||
import { createSignal } from 'solid-js'
|
||||
import solidLogo from './assets/solid.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
// import { createSignal } from 'solid-js'
|
||||
// import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = createSignal(0)
|
||||
// const [count, setCount] = createSignal(0)
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img src={heroImg} class="base" width="170" height="179" alt="" />
|
||||
<img src={solidLogo} class="framework" alt="Solid logo" />
|
||||
<img src={viteLogo} class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button class="counter" onClick={() => setCount((count) => count + 1)}>
|
||||
Count is {count()}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
<header></header>
|
||||
<footer>
|
||||
<a href="https://git.travisshears.com/travisshears/weather-portal">
|
||||
Quellcode
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://solidjs.com/" target="_blank">
|
||||
<img class="button-icon" src={solidLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
70
frontend/src/useWebSocket.ts
Normal file
70
frontend/src/useWebSocket.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { createSignal, createEffect, onCleanup } from 'solid-js'
|
||||
|
||||
export interface SensorReading {
|
||||
sensor:
|
||||
| 'Temperature'
|
||||
| 'Humidity'
|
||||
| 'Pressure'
|
||||
| 'ParticalMatterOne'
|
||||
| 'ParticalMatterTwoPointFive'
|
||||
| 'ParticalMatterTen'
|
||||
value: number
|
||||
}
|
||||
|
||||
export interface WebSocketState {
|
||||
isConnected: boolean
|
||||
readings: SensorReading[]
|
||||
error: string | null
|
||||
}
|
||||
|
||||
export function useWebSocket(url: string) {
|
||||
const [state, setState] = createSignal<WebSocketState>({
|
||||
isConnected: false,
|
||||
readings: [],
|
||||
error: null,
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const ws = new WebSocket(url)
|
||||
|
||||
ws.onopen = () => {
|
||||
setState((s) => ({ ...s, isConnected: true, error: null }))
|
||||
}
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const reading: SensorReading = JSON.parse(event.data)
|
||||
setState((s) => ({
|
||||
...s,
|
||||
readings: [reading, ...s.readings.slice(0, 99)], // Keep last 100
|
||||
}))
|
||||
} catch (e) {
|
||||
setState((s) => ({
|
||||
...s,
|
||||
error: `Failed to parse message: ${e}`,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
ws.onerror = () => {
|
||||
setState((s) => ({
|
||||
...s,
|
||||
isConnected: false,
|
||||
error: 'WebSocket connection error',
|
||||
}))
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
setState((s) => ({
|
||||
...s,
|
||||
isConnected: false,
|
||||
}))
|
||||
}
|
||||
|
||||
onCleanup(() => {
|
||||
ws.close()
|
||||
})
|
||||
})
|
||||
|
||||
return state
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue