aarov/raspi-iot-ryhmatyo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testi

Browse Source
This commit is contained in:
Aaro Varis
2026-02-19 10:40:10 +02:00
parent dbc246bf95
commit c317ff287c
16 changed files with 1923 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alarm Clock</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

25
webapp/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "alarm-clock-webapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.3",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"vite": "^5.4.11"
}
}

1613
webapp/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
webapp/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

124
webapp/src/App.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { useState, useEffect } from 'react'
interface Status {
current_time: string
timezone: string
alarm_active: boolean
alarm_time: string | null
config_mode: string
}
function App() {
const [status, setStatus] = useState<Status | null>(null)
const [hour, setHour] = useState('')
const [minute, setMinute] = useState('')
const [message, setMessage] = useState('')
const fetchStatus = async () => {
try {
const res = await fetch('/api/status')
const data = await res.json()
setStatus(data)
} catch {
setMessage('Connection error')
}
}
useEffect(() => {
fetchStatus()
const interval = setInterval(fetchStatus, 1000)
return () => clearInterval(interval)
}, [])
const setAlarm = async () => {
const h = parseInt(hour)
const m = parseInt(minute)
if (isNaN(h) || isNaN(m)) {
setMessage('Please enter valid hour and minute')
return
}
try {
const res = await fetch('/api/alarm', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ hour: h, minute: m })
})
const data = await res.json()
setMessage(data.success ? 'Alarm set!' : data.error)
fetchStatus()
} catch {
setMessage('Failed to set alarm')
}
}
const dismissAlarm = async () => {
try {
await fetch('/api/dismiss', { method: 'POST' })
fetchStatus()
} catch {
setMessage('Failed to dismiss alarm')
}
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4">
<div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 w-full max-w-md text-center shadow-2xl">
<h1 className="text-3xl font-bold text-white mb-8">Alarm Clock</h1>
<div className="text-6xl font-light text-white mb-4 font-mono">
{status?.current_time || '--:--:--'}
</div>
<div className={`text-2xl mb-8 ${status?.alarm_active ? 'text-red-400 animate-pulse' : 'text-cyan-400'}`}>
Alarm: {status?.alarm_time || '--:--'}
</div>
<div className="space-y-4">
<div className="flex justify-center items-center gap-3">
<input
type="number"
min={0}
max={23}
placeholder="HH"
value={hour}
onChange={(e) => setHour(e.target.value)}
className="w-20 px-4 py-3 text-xl text-center bg-white/20 text-white rounded-xl border-none outline-none focus:ring-2 focus:ring-cyan-400 placeholder-white/50"
/>
<span className="text-white text-2xl">:</span>
<input
type="number"
min={0}
max={59}
placeholder="MM"
value={minute}
onChange={(e) => setMinute(e.target.value)}
className="w-20 px-4 py-3 text-xl text-center bg-white/20 text-white rounded-xl border-none outline-none focus:ring-2 focus:ring-cyan-400 placeholder-white/50"
/>
</div>
<button
onClick={setAlarm}
className="w-full py-3 px-6 bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-semibold rounded-xl transition-colors"
>
Set Alarm
</button>
{status?.alarm_active && (
<button
onClick={dismissAlarm}
className="w-full py-3 px-6 bg-red-500 hover:bg-red-400 text-white font-semibold rounded-xl transition-colors"
>
Dismiss Alarm
</button>
)}
</div>
{message && (
<div className="mt-6 text-sm text-gray-400">{message}</div>
)}
</div>
</div>
)
}
export default App

3
webapp/src/index.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

10
webapp/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

1
webapp/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

11
webapp/tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

20
webapp/tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

15
webapp/vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
outDir: '../public',
emptyOutDir: true,
},
server: {
proxy: {
'/api': 'http://localhost:5000'
}
}
})